$accent: ec0e20; $header-text: #242525; $text: #363838;
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body, html {
height: 100%; margin: 0; padding: 0;
}
body {
color: $text; font-family: "Libre Baskerville", serif;
}
li, ol, ul {
margin: 0; padding: 0;
}
.wrapper {
margin: 0 auto; max-width: 1000px; min-height: 100%;
}
h1, h2 {
color: $header-text; margin: 0;
}
h1 {
font-size: 24px; letter-spacing: 0.5px; line-height: 1.73;
}
h2 {
font-size: 16px; font-weight: 600; line-height: 1.73;
}
em {
font-weight: 400;
}
a {
color: inherit; text-decoration: none;
}
.accent {
color: $accent;
}
main {
margin: 0 0 0 auto; padding: 132px 0; width: 616px; @media only screen and (max-width: 1080px) { margin: 0 auto; padding: 40px 0; } @media only screen and (max-width: 700px) { padding: 32px 16px; width: 100%; }
}
.fixed-date {
flex-shrink: 0; font-size: 10px; font-weight: 600; line-height: 2.4; margin: 4px 0 0; text-align: right; width: 72px; @media only screen and (max-width: 700px) { margin: 7px 0 0; order: 2; text-align: left; width: auto; }
}
.date {
font-size: 10px; font-weight: 400; line-height: 2.4; margin: 0; @media only screen and (max-width: 700px) { position: absolute; right: 16px; top: 16px; }
}
.post {
display: flex; flex-direction: row; justify-content: space-between; margin: 0 0 44px; @media only screen and (max-width: 700px) { flex-direction: column; }
}
.post-details {
width: 488px; @media only screen and (max-width: 700px) { width: 100%; }
}
.excerpt {
font-size: 14px; line-height: 1.73; margin: 0;
}
header {
align-items: center; display: flex; height: 80vh; position: fixed; @media only screen and (max-width: 1080px) { align-items: stretch; display: block; height: auto; position: static; }
}
.logo {
height: auto; position: relative; @media only screen and (max-width: 1080px) { align-items: center; display: flex; margin: 56px auto 40px; width: 616px; } @media only screen and (max-width: 700px) { margin: 0 0 24px; padding: 72px 16px 0; width: 100%; } &.logo-closer-to-top-on-mobile { @media only screen and (max-width: 700px) { padding: 56px 16px 0; } }
}
hr {
border: 0; display: none; height: 0; margin: 0; @media only screen and (max-width: 1080px) { background-color: $accent; display: block; height: 1px; margin: 0 auto; width: 480px; } @media only screen and (max-width: 700px) { width: calc(100% - 168px); }
}
.under {
left: 0; position: absolute; width: 232px; @media only screen and (max-width: 1080px) { position: static; width: auto; }
}
.under-large {
top: 184px; @media only screen and (max-width: 1080px) { margin: 0 0 0 5px; } @media only screen and (max-width: 700px) { margin: 0 0 0 22px; }
}
.under-small {
top: 83px; @media only screen and (max-width: 1080px) { margin: 0 0 0 22px; padding: 0 68px 0 0; }
}
article {
font-size: 16px; line-height: 1.73; text-align: justify; h2 { color: $accent; font-size: 20px; font-style: italic; font-weight: 400; margin: 0; padding: 28px 0; } p { margin: 0 0 28px; } a { color: $accent; }
}
.social {
display: flex; margin: 16px 0 0; a { margin: 0 16px 0 0; } @media only screen and (max-width: 1080px) { margin: 10px 0 0; }
}
.back {
display: block; font-size: 12px; font-weight: 600; line-height: 2; margin: 24px 0 0; @media only screen and (max-width: 1080px) { margin: 0; position: absolute; right: 0; top: 0; } @media only screen and (max-width: 700px) { left: 16px; right: auto; top: 16px; }
}
.highlight {
margin: 0 0 24px; padding: 0 0 0 52px; pre { line-height: 20px; margin: 0; overflow: scroll; } code { font-family: "Inconsolata", monospace; font-size: 14px; }
}
svg {
flex-shrink: 0;
}