@import “_breakpoints”; @import “_mixins”;
$font: “Space Grotesk”; $mono-font: “Space Mono”; $scalefactor: 1.414;
$scarlet: rgb(252, 47, 0); $purple: rgb(194, 0, 251); $yellow-green: rgb(162, 215, 41); $black-coffee: rgb(52, 46, 55); $black-coral: rgb(89, 101, 111); $emerald: rgb(89, 205, 144); $cerulean-crayola: rgb(63, 167, 214); $pink: rgb(228, 0, 102); $accent: $emerald;
.scarlet {
color: $scarlet;
}
.purple {
color: $purple;
}
.yellow-green {
color: $yellow-green;
}
.black-coffee {
color: $black-coffee;
}
.black-coral {
color: $black-coral;
}
.emerald {
color: $emerald;
}
.cerulean-crayola {
color: $cerulean-crayola;
}
.pink {
color: $pink;
}
@function pow($number, $exponent) {
$value: 1; @if $exponent > 0 { @for $i from 1 through $exponent { $value: $value * $number; } } @return $value;
}
-
{
box-sizing: border-box; text-rendering: optimizeLegibility; font-kerning: auto; font-weight: 300;
}
body {
font-family: $font; margin: 0; width: 100%;
}
.container {
margin: 2em auto 2em auto; padding: 0 2em 0 2em; max-width: 760px; @include sm { margin: 2em auto 2em auto; padding: 0 2em 0 2em; } @include xl { margin: 8em auto 8em auto; }
}
small, footer, figcaption, p.small, cite, .meta, .kicker {
font-size: 0.8 em; line-height: 1.3; color: $black-coral;
}
p, nav {
font-size: 1em; line-height: 1.6; color: $black-coffee; margin-top: 40px; margin-bottom: 40px;
}
.logo {
width: 50px;
}
h1, h2, h3, h4, h5, h6, blockquote {
font-family: $font; // line-height: 1.5em;
}
a {
text-decoration: none; color: $emerald; padding-bottom: 0.001em; border-bottom: 1px solid lightgray;
}
a:hover {
color: darken($emerald, 20%); border-bottom: 1px solid darken($emerald, 20%);
}
h1 {
font-size: 1em * pow($scalefactor, 3); line-height: 1.4; margin-top: 80px; margin-bottom: 40px; font-family: $font;
}
h1.title {
a { border: none; color: black; }
}
h2 {
color: $emerald; font-size: 1em * pow($scalefactor, 2); margin-top: 60px; margin-bottom: 40px;
}
h2.subtitle {
font-size: 1em * pow($scalefactor, 2); margin-top: -30px; font-weight: 300;
}
h3 {
font-size: 1em * pow($scalefactor, 1); margin-top: 40px; margin-bottom: 20px;
}
h4 {
font-size: 1em * pow($scalefactor, 1); line-height: 140%;
} h5 {
font-size: 1em * pow($scalefactor, 1); letter-spacing: 1px; text-transform: uppercase;
} h6 {
font-size: 1em; letter-spacing: 2px; text-transform: uppercase;
}
ul, li, ol, dl {
line-height: 200%; font-size: 1em;
}
img, audio, video, figure {
width: 100%; margin-left: 0;
}
iframe {
width: 100%;
}
nav {
margin-top: 40px; margin-bottom: 40px; a { color: black; margin-right: 30px; line-height: 40px; text-decoration: none !important; border-bottom: none; padding-bottom: 0.3em; } a:hover { text-decoration: none !important; padding-bottom: 0.3em; } a.active { text-decoration: none; color: $emerald; padding-bottom: 0.3em; border-bottom: 1px solid $emerald; }
}
.center {
text-align: center; align-content: center; justify-content: center;
}
.fixed {
position: fixed;
}
.filler {
background-color: white; width: 100%; height: 100%;
}
table {
text-align: left; font-size: 1em; caption { text-align: left; }
}
li {
list-style-type: "■"; padding-inline-start: 1ch;
}
blockquote {
font-family: $font; color: black; font-size: 1em * pow($scalefactor, 1); // font-style: italic; line-height: 140%; margin-top: 40px; margin-bottom: 40px; p { color: inherit; font-style: italic; }
}
mono, pre, samp, code, kbd {
font-family: $mono-font; font-size: inherit; font-weight: 400;
}
pre {
font-size: 1em;
}
cite {
font-family: $font; font-style: normal;
}
hr {
height: 1px; border-width: 0; background-color: lightgray;
}
footer {
margin-top: 80px; margin-bottom: 160px; color: grey; p { color: inherit; font-size: inherit; }
}
figcaption {
font-family: $font; margin-top: 10px; color: grey; text-align: center;
}
.meta {
margin-top: -20px; margin-bottom: 40px; p { color: grey; }
}
.post {
margin-bottom: 80px;
}
.kicker {
color: grey; margin-top: 80px; margin-bottom: -70px; text-transform: none; letter-spacing: 2; font-weight: 400; text-transform: uppercase;
}
strong, b {
font-weight: 700; color: black;
}
.gallery-col3 {
column-count: 3; column-gap: 1em;
}
.gallery-col2 {
column-count: 2; column-gap: 1em;
} .gallery-item {
display: inline-block; margin: 0 0 1em; width: 100%;
}