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