1$color-main-bg: #f0f0f0;
  2$color-dark-bg: #070707;
  3$color-main-blue: #397eaf;
  4$color-dark-blue: #2e4054;
  5$color-main-grey: #e1e1e1;
  6$color-main-grey-dark: #c4c4c4;
  7$color-dark-grey: #1f1f1f;
  8$color-darker-grey: #101010;
  9$color-link-idle: #707070;
 10$color-link-hover: #999999;
 11$color-nav-current: #333333;
 12$nav-alpha: 0.95;
 13$border-main: 5px solid;
 14$border-nav: $border-main $color-main-grey;
 15$border-dark: $border-main $color-dark-grey;
 16$font-title: Montserrat, sans-serif;
 17$body-font: Lato, sans-serif;
 18$code-font: Fira Code, monospace;
 19
 20html {
 21    background: $color-main-bg;
 22}
 23
 24body {
 25    max-width: 835px;
 26    min-width: 378px;
 27    margin: 0 auto;
 28    padding: 8px;
 29    color: $color-dark-bg;
 30    font: 100% $body-font;
 31}
 32a {
 33    color: $color-link-idle;
 34    text-decoration: none;
 35}
 36a:hover {
 37    color: $color-link-hover;
 38}
 39
 40.current {
 41    color: $color-nav-current;
 42    pointer-events: none;
 43    font-weight: 500;
 44}
 45
 46nav {
 47    display: flex;
 48    position: fixed;
 49    top: 0;
 50    width: 100%;
 51    max-width: 843px;
 52    height: 102px;
 53    font: 400 1.5em $font-title;
 54    letter-spacing: -1.2px;
 55    background: rgba($color-main-bg, $nav-alpha);
 56    
 57    img {
 58        margin-right: 8px;
 59    }
 60
 61    ul {
 62        display: inline-flex;
 63        width: 430px;
 64        height: 32px;
 65        padding: 50px 30px 0 0;
 66        flex-direction: row;
 67        justify-content: space-between;
 68        border-bottom: $border-nav;
 69    }
 70}
 71
 72h1, h2, h3, h4, h5, h6 {
 73    margin: 0;
 74    color: $color-main-blue;
 75    font-family: $font-title;
 76    font-weight: 500;
 77}
 78
 79ul {
 80    margin: 0;
 81    padding: 0;
 82    li {
 83        list-style-type:none;
 84    }
 85}
 86
 87.content {
 88    margin-top: 95px;
 89}
 90
 91.about {
 92    display: flex;
 93    flex-direction: row;
 94    img#avatar {
 95        border-radius: 100%;
 96        height: 128px;
 97    }
 98    .about-sidebar {
 99        flex: 23%;
100    }
101    .about-links {
102        margin-top: 1em;
103        .link-icon {
104            width: 32px;
105        }
106        .link-text {
107            display: inline;
108            position: relative;
109            bottom: 0.75em;
110        }
111    }
112    .about-info {
113        width: 100%;
114        p:first-child {
115            margin-top: 0;   
116        }
117    }
118}
119
120.post {
121    padding: 1em;
122    margin: 1em 0;
123    border-radius: 25px 25px 25px 0px;
124    border: 2px solid $color-main-grey;
125    word-wrap: break-word;
126    small p {
127        display: inline;
128    }
129    p {
130        img {
131            display: block;
132            max-width: 100%;
133            margin: 0 auto;
134            border-radius: 1em;
135        }
136    }
137}
138
139.post-page {
140    margin-bottom: 10px;
141    .post-header {
142        height: 4em;
143        ul {
144            display: flex;
145            float: right;
146            flex-direction: row;
147            li {
148                margin-right: 0.5em;
149                a {
150                    background: $color-main-grey;
151                    border-radius: 5px;
152                    padding: 2px;
153                }
154            }
155        }
156    }
157
158    ul {
159        padding-left: 10px;
160    }
161}
162
163.art {
164    display: flex;
165    flex-flow: row wrap;
166
167    .art-img {
168        img {
169            width: 100%;
170            height: auto;
171            image-orientation: from-image;
172        }
173    }
174}
175
176
177blockquote {
178    margin: 0.5em;
179    padding: 1em;
180    background: $color-main-grey-dark;
181    border-width: 2px 2px 2px 5px;
182    border-color: $color-main-grey;
183    border-style: solid;
184    border-radius: 0.5em;
185}
186
187code {
188    font-family: $code-font;
189    font-size: 0.9em;
190    background: $color-main-grey;
191    padding: 2px;
192    border-radius: 5px;
193}
194div.highlight {
195    overflow-x: auto;
196    background: $color-main-grey;
197    padding-left: 0.5em;
198    border-radius: 5px;
199    code {
200        padding: 0;
201    }
202}
203
204audio {
205    width: 100%;
206    border-radius: 25px;
207}
208
209footer {
210    padding-top: 0.5em;
211    border-top: $border-nav;
212    text-align: center;
213    font: 75% $body-font;
214    p {
215        margin: 0;
216    }
217}
218
219@media only screen and (max-width: 760px) {
220    footer p {
221        padding: 0;
222    }
223    nav {
224        margin-bottom: 5vh;
225        height: 130px;
226        ul {
227            width: 100%;
228            padding-top: 48px;
229            position: relative;
230            top: 5vh;
231        }
232        img {
233            position: absolute;
234            top: 0;
235        }
236    }
237    .content {
238        margin-top: 140px;
239    }
240    .about {
241        flex-direction: column-reverse;
242        .about-sidebar {
243            display: flex;
244            flex-direction: column;
245            img {
246                width: 128px;
247                margin: 0 auto;
248            }
249        }
250        .about-links {
251            margin-top: 0;
252            p:first-child {
253                margin: 0;
254                padding-top: 0;
255            }
256            ul {
257                padding-top: 1em;
258                display: flex;
259                flex-wrap: wrap;
260                li {
261                    margin: auto;
262                    padding: 0 0.5em;
263                }
264            }
265        }
266    }
267}
268
269@media (prefers-color-scheme: dark) {
270    html {
271        background: $color-dark-bg;
272    }
273    body {
274        color: $color-main-bg;
275    }
276    nav {
277        background: rgba($color-dark-bg, $nav-alpha);
278        ul {
279            border-bottom: $border-dark;
280        }
281    }
282    code {
283        background: $color-darker-grey;
284    }
285    div.highlight {
286        background: $color-darker-grey;
287    }
288    .post {
289        border: 2px solid $color-dark-grey;
290    }
291    .post-page .post-header ul li a {
292        background: $color-dark-grey;
293    }
294
295    footer {
296        border-top: $border-dark;
297    }
298    blockquote {
299        background: $color-nav-current;
300        border-color: $color-dark-grey;
301    }
302}