// —————————— // general styles // ——————————
html {
@extend .default-font; // border-top: 8px solid $accent-color; font-size: 20px; line-height: 28px;
}
body {
text-size-adjust: none; -webkit-text-size-adjust: none; /* prevent mobile safari from resizing text */ background-color: #fff; color: $text-color; text-align: center; max-width: 30em; margin: 0px auto; margin-top: 40px;
}
main {
width: 550px;
}
h1, h2, h3, h4, h5, h6 {
@extend .sans-serif-font-bold; text-rendering: optimizeLegibility; text-align: left;
}
a {
color: $accent-color; text-decoration: none; outline: none; // @include transition(color 0.5s ease 0s); &:hover { color: $accent-hover-color; text-decoration: underline; }
}
body header h1 a:hover {
color: $accent-hover-color; text-decoration: none;
};
section {
@extend .margin-bottom-largest;
}
blockquote {
@extend .block-padding; @extend .margin-bottom-large; border-left: $border-style; font-style: italic; p { em { font-style: normal !important; } margin-top: 0px; margin-bottom: 0px; }
}
cite, em, i, dfn {
font-style: italic;
}
b, strong {
font-weight: bold;
}
small {
font-size: 16px; font-size: 0.8rem;
}
sup, sub {
font-size: 14px; font-size: 0.7rem; line-height: 0; position: relative;
}
sup {
top: -0.6rem;
}
sub {
bottom: -0.4rem;
}
img#portrait {
float: right; border-radius: 125px; margin-left: 20px; margin-left: 1rem; width: 240px;
}
pre {
@extend .block-padding; @extend .font-size-small; @extend .code-font; @extend .margin-bottom-large; text-align: left; line-height: 18px; &.line-numbers { @if $hide-line-numbers == true { display: none; } }
}
pre, code {
font-size: 15px; border: 1px solid #ddd; border-radius: 3px; background-color: #eee; margin-top: 32px;
}
code {
padding: 1px 5px;
}
pre {
padding: 8px 12px; overflow-x: auto; > code { border: 0; padding-right: 0; padding-left: 0; }
}
// —————————— // blog structure // ——————————
body {
// ----- blog header ----- [class^="icon-"], [class*=" icon-"] { height: 1.6rem; width: 1.6rem; margin-bottom: -4px; fill: black;
}
svg:hover {
fill: $accent-color;
}
header { @extend .header-font; width: 100%; margin: 0 auto; > h1 { font-family: ministry; font-weight: 400; text-align: center; font-size: 1.8rem; line-height: 2.8rem; margin-top: 1.4rem; margin-bottom: 0rem; display: inline-block; text-transform: lowercase; a { color: $text-color; } } #nav { clear: both; font-family: ministry; text-align: center; font-weight: 200; font-size: 1rem; line-height: 1.4rem; margin-top: 0rem; margin-bottom: 2.8rem; } } // ----- blog content ----- div.title > h1 { margin-bottom: 6px; font-weight: 200; @extend .font-size-large; text-align: left; } img { max-width: 100%; display: block; margin: 0 auto; } // ------ pagination buttons ------ .pagination { @extend .sans-serif-font; padding: 23.683px 0; padding: 1.184rem 0; margin-bottom: 62px; margin-bottom: 3.1rem; margin-top: -2.236rem; span, a { border-radius: $border-radius-size; padding: 4.722px 12.361px; padding: 0.236rem 0.618rem; } a { @extend .button; } span { border: 1px solid $accent-color; color: $accent-color; } } // ----- blog footer ----- > footer { @extend .margin-bottom-larger; clear: both; p { @extend .font-size-smallest; @extend .header-font; color: $secondary-text-color; line-height: 20px; line-height: 1rem; font-weight: 100; text-align: center; } }
}
// —————————— // archives page // ——————————
blog-archives {
margin-bottom: 100.316px; margin-bottom: 5.016rem; h2 { @extend .sans-serif-font-bold; @extend .font-size-large; color: $text-color; font-weight: 400; margin-top: 24px; margin-bottom: 12px; } article { margin-bottom: 12px; overflow: auto; h1 { @extend .font-size-medium; padding-bottom: 4.722px; padding-bottom: 0.236rem; margin: 0; font-weight: 300; line-height: 14px; a { color: $text-color; &:hover { text-decoration: none; color: $accent-color; } } float: left; } } time, footer { @extend .font-size-medium; @extend .sans-serif-font; color: $secondary-text-color; display: inline; float: right; font-weight: 200; padding: 0; vertical-align: top; margin: 0; } span.categories { text-transform: capitalize; }
}
form {
text-align: left; height: 50px; font-size: 24px; input.search { font-size: 18px; @extend .sans-serif-font; }
}
greatesthits {
margin-top: 15px;
}
// —————————— // search results page // ——————————
search_results {
article { margin-left: 0; margin-top: 20px; margin-top: 1rem; > a { display: none; } p { margin-top: 14.637px; margin-top: .732rem; } time:after { content: none; } }
}