blog/_sass/main.scss

427 lines
7.9 KiB
SCSS

/* For mobile phones */
@media only screen and (max-width: 700px) {
body {
margin-left: 0.40625em;
margin-right: 0.40625em;
}
.post {
pre {
font-size:0.8125em;
line-height: 2em;
padding-left: 0.8125em;
padding-right: 0.8125em;
}
}
p code {
font-size:0.8125em;
line-height: 2em;
padding-left: 0.40625em;
padding-right: 0.40625em;
}
}
/* For desktops */
@media only screen and (min-width: 700px) {
body {
margin-left: 5%;
margin-right: 5%;
@media only screen and (max-width: 1375px) {
margin-left: 10%;
margin-right: 10%;
}
@media only screen and (min-width: 1920px) {
margin-left: 25%;
margin-right: 25%;
}
}
.post {
pre {
font-size: 1.1375em;
line-height: 2em;
padding-left: 1.625em;
padding-right: 1.625em;
}
}
p code {
font-size:1.1375em;
line-height: 2em;
padding-left: 0.8125em;
padding-right: 0.8125em;
}
}
body {
text-align: left;
text-rendering: optimizeLegibility;
background-color: #dadada;
line-height: 1.625em;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 1.080625em;
word-spacing: 0em;
}
p {
code {
font-weight: bold;
border: none;
border-radius: 0.8125em;
box-shadow: inset 0 0 0.8125em grey;
background-color: #e6e6e6;
white-space: pre-wrap;
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
}
a:hover {
transition: 0.3s;
}
/* Use for abbreviations only. */
abbr {
letter-spacing: 0.1em;
}
blockquote {
font-size: 1.08625em;
line-height: 1.08625em;
font-family: "Comic Sans MS", cursive, serif;
background-color: #ffffff;
box-shadow: inset 0 0 0.40625em grey;
border-radius: 0.8125em;
padding-left: 1.625em;
padding-top: 0.8125em;
padding-bottom: 0.8125em;
margin: 0;
}
h1 {
line-height: 1.625em;
margin-top: 0.40625em;
margin-bottom: 0.40625em;
}
h2 {
line-height: 1.263157em;
margin-top: 1.263157em;
margin-bottom: 1.263157em;
}
p {
text-indent: 0;
line-height: 1.625em;
margin-top: 1.625em;
margin-bottom: 1.625em;
}
a {
text-decoration: underline;
text-decoration-color: #d9d9d9;
text-align: center;
color: #666666;
}
a:hover {
text-decoration: underline;
}
ul {
list-style-type: circle;
}
.post {
pre {
border: none;
border-radius: 1.625em;
box-shadow: inset 0 0 0.8125em grey;
background-color: #e6e6e6;
white-space: pre-wrap;
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
}
.post-metadata, .page-metadata, .footer, .comment {
box-shadow: inset 0 0 0.40625em grey;
background-color: #ffffff;
}
.post-metadata, .page-metadata, .footer, .comment, .index .post-list-metadata {
border-radius: 1.625em;
padding-left: 1.625em;
padding-bottom: 0.40625em;
}
.post-metadata, .page-metadata, .footer, .comment, .comment-content, .index .post-list-metadata {
margin-bottom: 1.625em;
}
.page-metadata, .footer, .comment, .index .post-list-metadata {
padding-top: 0.40625em;
}
.post-metadata, .page-metadata, .footer, .comment, .index .post-list-metadata {
padding-right: 1.625em;
}
.top, .page-navigation, .tag-list {
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
display: block;
float: left;
}
a {
text-decoration: none;
}
}
.top, .page-navigation {
ul {
font-size: 0.8125em;
margin-bottom: 1.625em;
background-color: #666666;
border-radius: 0.8125em;
}
li {
border-right: 0.05em solid #ffffff;
}
a {
display: block;
color: #ffffff;
text-align: center;
padding: 0.8125em 0.8125em;
}
li a:hover {
background-color: #000000;
}
.rss {
border-left: 0.05em solid #ffffff;
border-right: none;
float:right
}
}
.index {
.post-list-div {
margin-top: 0.8125em;
margin-bottom: 0.8125em;
}
.post-list-date {
float: right;
}
.post-list-excerpt {
font-family: serif;
font-size: 0.8125em;
}
a {
text-decoration: none;
text-align: left;
color: #000000;
}
.post-list-metadata {
background-color: #ffffff;
box-shadow: 0 0.203125em 0.203125em 0 grey, 0 0.203125em 0.203125em 0 grey;
}
.post-list-metadata:hover {
background-color: #404040;
transition: 0.3s;
color: #ffffff;
}
}
.tag-list {
ul {
margin-top: 0em;
margin-bottom: 0.40625em;
}
li {
margin-top: 0.203125em;
margin-bottom: 0.40625em;
}
a {
margin-top: 0em;
margin-left: 0.8125em;
padding: 0.40625em;
font-size: 0.8125em;
background-color: #ffffff;
border-radius: 0.8125em;
}
li a:hover {
background-color: #404040;
color: #ffffff;
}
}
.comment-content, .tag-list {
a {
box-shadow: 0 0.203125em 0.203125em 0 grey, 0 0.203125em 0.203125em 0 grey;
}
}
.comment-content {
font-size: 0.8125em;
a.odd {
background-color: #cccccc;
}
a.even {
background-color: #e6e6e6;
}
a:hover {
background-color: #f2f2f2;
}
a {
display: block;
margin-top: 1.625em;
text-decoration: none;
text-decoration-color: #000000;
text-align: left;
border-radius: 0.8125em;
color: #000000;
}
.text {
padding: 0.8125em;
}
.hr {
border: 0.1015625em inset #808080;
color: #ffffff;
}
.from {
overflow: hidden;
}
.date {
font-style: italic;
}
}
.footer {
.license {
font-weight: bold;
}
font-size: 0.8125em;
}
img {
max-width: 100%;
height: auto;
/* Disable antialiasing when the picure is scaled. */
-ms-interpolation-mode: nearest-neighbor;
image-rendering: -webkit-optimize-contrast;
image-rendering: -moz-crisp-edges;
image-rendering: pixelated;
}
.img img, .figure {
box-shadow: 0 0.203125em 0.203125em 0 grey, 0 0.203125em 0.203125em 0 grey;
border-radius: 0.8125em;
}
.img img:hover {
opacity: 0.5;
transition: 0.3s;
}
.figure:hover {
background-color: #404040;
transition: 0.3s;
img {
opacity: 0.75;
}
.text {
color: #ffffff;
border-bottom-left-radius: 0.8125em;
border-bottom-right-radius: 0.8125em;
}
}
.figure {
width: 99%;
background-color: #ffffff;
img {
width: 100%;
margin-right: 0;
border-top-left-radius: 0.8125em;
border-top-right-radius: 0.8125em;
}
.text {
text-align: center;
font-size: 0.8125em;
font-style: italic;
}
a {
text-decoration: none;
color: #000000;
}
}
/* Tables */
table {
border-collapse: collapse;
}
table, th, td {
border: 0.1015625em solid black;
}
th, td {
padding: 0.40625em;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
.hAnchor {
opacity: 0.1;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
.hAnchor:hover {
opacity: 1;
filter: alpha(opacity=100); /* For IE8 and earlier */
}