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-menu {
164    display: flex;
165    flex-flow: row wrap;
166    align-items: flex-start;
167    justify-content: space-around;
168    .art-category {
169        img {
170           width: 100%;
171           height: auto;
172        }
173    }
174}
175
176.art {
177    display: flex;
178    flex-flow: row wrap;
179
180    .art-img {
181        img {
182            width: 100%;
183            height: auto;
184            image-orientation: from-image;
185        }
186    }
187}
188
189
190blockquote {
191    margin: 0.5em;
192    padding: 1em;
193    background: $color-main-grey-dark;
194    border-width: 2px 2px 2px 5px;
195    border-color: $color-main-grey;
196    border-style: solid;
197    border-radius: 0.5em;
198}
199
200code {
201    font-family: $code-font;
202    font-size: 0.9em;
203    background: $color-main-grey;
204    padding: 2px;
205    border-radius: 5px;
206}
207div.highlight {
208    overflow-x: auto;
209    background: $color-main-grey;
210    padding-left: 0.5em;
211    border-radius: 5px;
212    code {
213        padding: 0;
214    }
215}
216
217audio {
218    width: 100%;
219    border-radius: 25px;
220}
221
222footer {
223    padding-top: 0.5em;
224    border-top: $border-nav;
225    text-align: center;
226    font: 75% $body-font;
227    p {
228        margin: 0;
229    }
230}
231
232@media only screen and (max-width: 760px) {
233    footer p {
234        padding: 0;
235    }
236    nav {
237        margin-bottom: 5vh;
238        height: 130px;
239        ul {
240            width: 100%;
241            padding-top: 48px;
242            position: relative;
243            top: 5vh;
244        }
245        img {
246            position: absolute;
247            top: 0;
248        }
249    }
250    .content {
251        margin-top: 140px;
252    }
253    .about {
254        flex-direction: column-reverse;
255        .about-sidebar {
256            display: flex;
257            flex-direction: column;
258            img {
259                width: 128px;
260                margin: 0 auto;
261            }
262        }
263        .about-links {
264            margin-top: 0;
265            p:first-child {
266                margin: 0;
267                padding-top: 0;
268            }
269            ul {
270                padding-top: 1em;
271                display: flex;
272                flex-wrap: wrap;
273                li {
274                    margin: auto;
275                    padding: 0 0.5em;
276                }
277            }
278        }
279    }
280}
281
282@media (prefers-color-scheme: dark) {
283    html {
284        background: $color-dark-bg;
285    }
286    body {
287        color: $color-main-bg;
288    }
289    nav {
290        background: rgba($color-dark-bg, $nav-alpha);
291        ul {
292            border-bottom: $border-dark;
293        }
294    }
295    code {
296        background: $color-darker-grey;
297    }
298    div.highlight {
299        background: $color-darker-grey;
300    }
301    .post {
302        border: 2px solid $color-dark-grey;
303    }
304    .post-page .post-header ul li a {
305        background: $color-dark-grey;
306    }
307
308    footer {
309        border-top: $border-dark;
310    }
311    blockquote {
312        background: $color-nav-current;
313        border-color: $color-dark-grey;
314    }
315}