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$body-width: 835px;
 14$border-main: 5px solid;
 15$border-nav: $border-main $color-main-grey;
 16$border-dark: $border-main $color-dark-grey;
 17$font-title: Montserrat, sans-serif;
 18$body-font: Lato, sans-serif;
 19$code-font: Fira Code, monospace;
 20
 21html {
 22    background: $color-main-bg;
 23}
 24
 25body {
 26    max-width: $body-width;
 27    min-width: 378px;
 28    margin: 0 auto;
 29    padding: 8px;
 30    color: $color-dark-bg;
 31    font: 100% $body-font;
 32}
 33a {
 34    color: $color-link-idle;
 35    text-decoration: none;
 36}
 37a:hover {
 38    color: $color-link-hover;
 39}
 40
 41.current {
 42    color: $color-nav-current;
 43    pointer-events: none;
 44    font-weight: 500;
 45}
 46
 47.faint {
 48    color: $color-main-grey;
 49}
 50
 51nav {
 52    display: flex;
 53    position: fixed;
 54    z-index: 10;
 55    top: 0;
 56    width: 100%;
 57    max-width: 843px;
 58    height: 102px;
 59    font: 400 1.5em $font-title;
 60    letter-spacing: -1.2px;
 61    background: rgba($color-main-bg, $nav-alpha);
 62    
 63    img {
 64        margin-right: 8px;
 65    }
 66
 67    ul {
 68        display: inline-flex;
 69        width: 430px;
 70        height: 32px;
 71        padding: 50px 30px 0 0;
 72        flex-direction: row;
 73        justify-content: space-between;
 74        border-bottom: $border-nav;
 75    }
 76}
 77
 78h1, h2, h3, h4, h5, h6 {
 79    margin: 0;
 80    color: $color-main-blue;
 81    font-family: $font-title;
 82    font-weight: 500;
 83}
 84
 85ul {
 86    margin: 0;
 87    padding: 0;
 88    li {
 89        list-style-type:none;
 90    }
 91}
 92
 93.content {
 94    margin-top: 95px;
 95}
 96
 97.about {
 98    display: flex;
 99    flex-direction: row;
100    #avatar {
101        border-radius: 100%;
102        height: 128px;
103    }
104    &-sidebar {
105        flex: 23%;
106    }
107    &-links {
108        margin-top: 1em;
109        .link-icon {
110            width: 32px;
111        }
112        .link-text {
113            display: inline;
114            position: relative;
115            bottom: 0.75em;
116        }
117    }
118    &-info {
119        width: 100%;
120        p:first-child {
121            margin-top: 0;   
122        }
123    }
124}
125
126.post {
127    padding: 1em;
128    margin: 1em 0;
129    border-radius: 25px 25px 25px 0px;
130    border: 2px solid $color-main-grey;
131    word-wrap: break-word;
132    a {
133        color: $color-main-blue;
134    }
135    a:hover {
136        color: $color-dark-blue;
137    }
138    small p {
139        display: inline;
140    }
141    p {
142        img {
143            display: block;
144            max-width: 100%;
145            margin: 0 auto;
146            border-radius: 1em;
147        }
148    }
149
150    &-page {
151        margin-bottom: 10px;
152        ul {
153            padding-left: 10px;
154        }
155    }
156    &-header {
157        margin-bottom: 2em;
158        ul {
159            display: flex;
160            float: right;
161            flex-direction: row;
162            li {
163                margin-right: 0.5em;
164                a {
165                    background: $color-main-grey;
166                    border-radius: 5px;
167                    padding: 2px;
168                }
169            }
170        }
171    }
172}
173
174.art-menu {
175    $art-thumb-wt: ($body-width / 2) - 16;
176    $art-thumb-ht: 300px;
177    //$art-thumb-ht: $art-thumb-wt;
178    display: flex;
179    flex-flow: row wrap;
180    align-items: flex-start;
181    justify-content: space-around;
182    align-content: center;
183    .art-category {
184        margin-bottom: 1em;
185        .link-mask {
186            position: absolute;
187            z-index: 1;
188            width: $art-thumb-wt;
189            height: $art-thumb-ht;
190            line-height: $art-thumb-ht - 16;
191            text-align: center;
192            background: $color-main-bg;
193            opacity: 0;
194            transition: opacity 0.2s ease-in-out;
195            font-size: 200%;
196            color: $color-dark-bg;
197
198            &:hover {
199                opacity: 0.7;
200            }
201        }
202        .thumbnail {
203            width: $art-thumb-wt;
204            height: $art-thumb-ht;
205            position: relative;
206
207            &::after {
208                content: "";
209                display: block;
210                padding-bottom: 100%;
211            }
212
213            img {
214                position: absolute;
215                width: 100%;
216                height: 100%;
217                image-orientation: initial;
218                object-fit: cover;
219            }
220        }
221    }
222}
223
224.art {
225    display: flex;
226    flex-flow: row wrap;
227
228    .art-img {
229        margin: 0.5em 0;
230        img {
231            width: 100%;
232            height: auto;
233            image-orientation: from-image;
234        }
235    }
236}
237
238.music-project {
239    display: flex;
240
241    &-sidebar {
242        flex: 25%;
243        #logo {
244            width: 100%;
245        }
246    }
247
248    &-info {
249        width: 100%;
250    }
251}
252
253
254blockquote {
255    margin: 0.5em;
256    padding: 1em;
257    background: $color-main-grey-dark;
258    border-width: 2px 2px 2px 5px;
259    border-color: $color-main-grey;
260    border-style: solid;
261    border-radius: 0.5em;
262}
263
264code {
265    font-family: $code-font;
266    font-size: 0.9em;
267    background: $color-main-grey;
268    padding: 2px;
269    border-radius: 5px;
270}
271div.highlight {
272    overflow-x: auto;
273    background: $color-main-grey;
274    padding-left: 0.5em;
275    border-radius: 5px;
276    code {
277        padding: 0;
278    }
279}
280
281audio {
282    width: 100%;
283    border-radius: 25px;
284}
285
286footer {
287    padding-top: 0.5em;
288    border-top: $border-nav;
289    text-align: center;
290    font: 75% $body-font;
291    p {
292        margin: 0;
293    }
294}
295
296@media only screen and (max-width: 760px) {
297    footer p {
298        padding: 0;
299    }
300    nav {
301        margin-bottom: 5vh;
302        height: 130px;
303        ul {
304            width: 100%;
305            padding-top: 48px;
306            position: relative;
307            top: 5vh;
308        }
309        img {
310            position: absolute;
311            top: 0;
312        }
313    }
314    .content {
315        margin-top: 140px;
316    }
317    .about {
318        flex-direction: column-reverse;
319        .about-sidebar {
320            display: flex;
321            flex-direction: column;
322            img {
323                width: 128px;
324                margin: 0 auto;
325            }
326        }
327        .about-links {
328            margin-top: 0;
329            p:first-child {
330                margin: 0;
331                padding-top: 0;
332            }
333            ul {
334                padding-top: 1em;
335                display: flex;
336                flex-wrap: wrap;
337                li {
338                    margin: auto;
339                    padding: 0 0.5em;
340                }
341            }
342        }
343    }
344}
345
346@media (prefers-color-scheme: dark) {
347    html {
348        background: $color-dark-bg;
349    }
350    body {
351        color: $color-main-bg;
352    }
353    nav {
354        background: rgba($color-dark-bg, $nav-alpha);
355        ul {
356            border-bottom: $border-dark;
357        }
358    }
359    code {
360        background: $color-darker-grey;
361    }
362    .faint {
363        color: $color-dark-grey;
364    }
365    .art-menu .art-category .link-mask {
366        background: $color-dark-bg;
367        color: $color-main-bg;
368    }
369    div.highlight {
370        background: $color-darker-grey;
371    }
372    .post {
373        border: 2px solid $color-dark-grey;
374    }
375    .post-page .post-header ul li a {
376        background: $color-dark-grey;
377    }
378
379    footer {
380        border-top: $border-dark;
381    }
382    blockquote {
383        background: $color-nav-current;
384        border-color: $color-dark-grey;
385    }
386}