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