$max-width: 725px; $max-width–home: 650px; $text-color: #222; $primary-color: #4787ed; $secondary-color: f37c22; $gray: #777; $base-margin: 1rem;
@import url(“fonts.googleapis.com/css?family=Open+Sans:600,700|Roboto:400,500,700&subset=latin-ext”);
@import “objects.text”; @import “objects.image”;
body {
font-size: 17px; line-height: 20px; font-weight: normal; font-style: normal; font-family: "Roboto", sans-serif; color: $text-color; padding: 20px; margin: 0; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; @media (min-width: 992px) { padding: 35px 50px; }
}
strong {
font-weight: 600;
}
h1 {
font-family: "Open Sans"; font-weight: 100; line-height: 1.7rem;
}
h3 {
font-size: 1.2rem;
}
h2, h3, h4, h5 {
margin: 45px 0 25px; font-family: "Open Sans", Roboto, sans-serif; font-weight: 400; line-height: 1.7rem;
}
img {
max-width: 100%;
}
a {
color: $primary-color; text-decoration: none; font-weight: bold; &:hover { text-decoration: underline; } &.image { display: block; text-align: center; border: 0; border-radius: 5px; margin: 30px 0; &:hover { text-decoration: none; } }
}
mark {
background: #fffc76; padding: 0 5px;
}
blockquote {
border-left: 5px solid #81d4fa; margin: 40px 0; padding: 5px 30px; font-style: italic;
}
.logo {
position: relative; margin: 0 auto 35px; text-align: center; a { color: #000; text-decoration: none; font-weight: 700; height: 90px; width: 90px; font-size: 1.5em; display: inline-block; text-align: center; line-height: 100px; border: 5px solid #fff; box-sizing: border-box; &:hover + .logo-prompt, &:focus + .logo-prompt { display: inline-block !important; } @media (max-width: 480px) { &:hover + .logo-prompt, &:focus + .logo-prompt { display: none !important; } } } .logo-prompt { position: absolute; display: none; vertical-align: middle; padding: 5px; border-radius: 3px; background: #666; background: rgba(0, 0, 0, 0.5); margin-left: 15px; color: #fff; font-size: 0.8235em; text-align: center; line-height: 1.2; top: 50%; margin-top: -10px; &:before { content: ""; border-width: 5px 5px 5px 0; border-style: solid; border-color: transparent #666; border-color: transparent rgba(0, 0, 0, 0.5); position: absolute; top: 50%; left: -5px; margin-top: -5px; } }
}
iframe {
margin: 45px 0 !important;
}
ul, ol {
margin: 0rem; padding-left: 50px; line-height: 1.5rem; margin-bottom: 1rem; li { word-wrap: break-word; } img { margin: 40px 0; border-radius: 5px; }
}
sup {
vertical-align: top; position: relative; top: -0.5em; margin-left: 1px;
}
code, pre {
font-family: Consolas, Courier, monospace;
}
code {
color: #f14e32; background: #eee; padding: 2px 6px; font-size: 13px;
}
pre {
display: block; margin-top: 0; margin-bottom: 1rem; font-size: 0.9rem; line-height: 1.4; white-space: pre; overflow-x: auto; background-color: #f9f9f9; border-radius: 3px; border: 1px solid #ddd; padding: 1rem; code { font-size: 100%; color: inherit; background-color: transparent; padding: 0; }
}
table {
width: 100%; table-layout: fixed; margin: 45px 0; thead { background: #f2f2f2; } th { text-align: left; padding: 8px 10px; border-bottom: 15px solid #fff; } td { padding: 4px 0; }
}
iframe {
width: 100%;
}
article {
max-width: $max-width; margin: 0 auto; .title { line-height: 1.4em; text-align: center; } .divider { background: #ddd; background: -webkit-gradient( linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(#ccc), to(rgba(255, 255, 255, 0)) ); background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #ccc, rgba(255, 255, 255, 0)); background: linear-gradient(to right, rgba(255, 255, 255, 0), #ccc, rgba(255, 255, 255, 0)); height: 1px; margin: 2em 0; } .center { text-align: center; margin: 0 auto; } hr { border: 0; border-bottom: 1px solid #000; margin: 30px 0; } p { font-size: 1.1rem; line-height: 1.7em; word-wrap: break-word; } li { margin-bottom: 0.25rem; } img { border-radius: 4px; margin: 1rem 0rem; } .footnote { border: 0; background-color: #0087be; color: #fff; padding-left: 2px; padding-right: 2px; } .footnotes { margin: 50px auto; display: block; p { line-height: 1rem; font-weight: normal; } ol { margin: 0; padding-left: 15px; li { font-weight: bold; } } .reversefootnote { border: 0; color: #0087be; } } a:hover { color: $secondary-color; border-color: #369; text-decoration: none; }
}
.back {
text-align: center; a { text-decoration: none; margin: 40px auto 0; display: inline-block; padding: 10px; border: 0; &:before { content: "<<"; margin-right: 5px; color: #000; } img { border: none; } }
}
.block {
display: block;
}
.page-navigation, .footer {
text-align: center; max-width: $max-width; margin: 0 auto; font-size: 1rem;
}
.page-navigation {
margin: 50px auto 0 auto; a { display: inline-block; text-decoration: none; border-bottom: none; } span { display: inline-block; }
}
.footer {
margin-top: 50px; color: #777; a { border: none; font-weight: bold; }
}
section {
max-width: $max-width--home; margin: 0 auto 70px auto; ul { list-style: none; margin: 0; padding: 0; li { margin: 35px 0; .description { color: gray; font-size: 16px; margin-top: 10px; } .title { font-size: 22px; font-family: "Open Sans"; max-width: 100%; word-wrap: normal !important; } a { color: #3d3d3d; } .post-date { font-size: smaller; text-transform: uppercase; } time { display: inline-block; color: #757575; } @media (min-width: 992px) { a { &:hover { border-color: #000; } } } } }
}
@keyframes bounce {
0% { transform: translate3d(0, -1000px, 0); } 60% { transform: translate3d(0, 25px, 0); } 75% { transform: translate3d(0, -10px, 0); } 90% { transform: translate3d(0, 5px, 0); } 100% { transform: none; }
}
@-webkit-keyframes bounce {
0% { -webkit-transform: translate3d(0, -1000px, 0); } 60% { -webkit-transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; }
}
.c-navigation__menu {
display: inline-block; text-transform: uppercase; margin-right: $base-margin / 2; margin-left: $base-margin / 2; font-size: 14px; font-weight: 600; &:hover { border-color: $primary-color !important; }
}
.c-navigation__menu-link {
color: $primary-color;
}
.c-header {
text-align: center;
}
.c-header__title {
font-size: 30px; font-weight: 100; font-family: "Open Sans"; margin-bottom: 0;
}
.c-header__subtitle {
color: gray; font-size: 16px; line-height: 1.5rem;
}
.c-header__link {
color: inherit; font-weight: normal; text-decoration: underline;
}
.o-text–block {
display: block;
}
.o-text–bold {
font-weight: 600;
}
.c-ul-in-default {
list-style-type: disc; margin-left: 4rem;
}
.o-grid {
display: flex; flex-flow: row nowrap;
}
.o-grid–center {
justify-content: center;
}
img.emoji {
margin: 0rem;
}
article .c-post-header {
margin-bottom: 3 * $base-margin;
}
.c-article-image {
width: 100%;
}
.c-article–post {
max-width: 650px;
}
.c-article__meta {
color: $gray;
}
.c-article__meta–link {
color: inherit; &:hover { text-decoration: underline; color: inherit; }
}
.c-post-header__subtitle {
font-size: 1.2rem; color: #555;
}
.c-bio {
text-align: center; color: #777; font-style: italic; margin-top: 1rem;
}
.c-bio__avatar {
width: 70px; height: 70px; border-radius: 50%; margin-right: 1rem;
}
.o-grid–align-items-center {
align-items: center;
}
.o-text–center {
text-align: center;
}
.c-image__alt {
font-weight: normal; color: #777; &:hover { text-decoration: none; }
}
a.phantom {
color: $gray; font-weight: 500; &:hover { color: $gray; text-decoration: underline; }
}
.post-year {
color: gray;
}
.c-post-header__player {
margin-top: 2rem; color: red; font-size: 1rem;
}
.pagination {
text-align: center;
}
.alert {
font-size: medium; position: relative; padding: 0.75rem 1.25rem; margin-bottom: 3rem; border: 1px solid transparent; border-radius: 0.17rem; margin-top: 60px; text-align: center;
}
.alert-light {
color: #717171; background-color: #f6f6f6; border-color: #e4e4e4;
}
.alert-custom {
border: 1px solid #e4e4e4; background: #f4f8fb;
}