_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 &-header {
220 margin-bottom: 2em;
221 ul {
222 display: flex;
223 float: right;
224 flex-direction: row;
225 li {
226 margin-right: 0.5em;
227 a {
228 background: $color-main-grey;
229 border-radius: 5px;
230 padding: 2px;
231 }
232 }
233 }
234 }
235}
236
237@mixin image-list-item ($width, $height) {
238 &-item-mask {
239 position: absolute;
240 z-index: 1;
241 width: $width;
242 height: $height;
243 }
244 &-item-img {
245 position: relative;
246 width: $width;
247 height: $height;
248
249
250 &::after {
251 content: "";
252 display: block;
253 padding-bottom: 100%;
254 }
255
256 img {
257 position: absolute;
258 width: 100%;
259 height: 100%;
260 image-orientation: initial;
261 object-fit: cover;
262 }
263 }
264}
265
266@mixin link-color-transition ($color-bg, $color-fg) {
267 color: rgba($color-fg, 0);
268 background: rgba($color-bg, 0);
269
270 &:hover {
271 color: rgba($color-fg, 1);
272 background: rgba($color-bg, 0.7);
273 }
274}
275
276.art-menu {
277 $art-thumb-wt: ($body-width / 2) - 16;
278 $art-thumb-ht: 300px;
279
280 display: flex;
281 flex-flow: row wrap;
282 align-items: flex-start;
283 justify-content: space-around;
284 align-content: center;
285
286 @include image-list-item($art-thumb-wt, $art-thumb-ht);
287
288 &-item {
289 margin-bottom: 1em;
290 &-mask {
291 line-height: $art-thumb-ht - 16;
292 text-align: center;
293 transition: color 0.2s ease-in-out,
294 background 0.2s ease-in-out;
295 font-size: 200%;
296
297 @include link-color-transition($color-main-bg, $color-dark-bg);
298 }
299 }
300}
301
302.art {
303 display: flex;
304 flex-flow: row wrap;
305
306 .art-img {
307 margin: 0.5em 0;
308 img {
309 width: 100%;
310 height: auto;
311 image-orientation: from-image;
312 }
313 }
314}
315
316.music-project {
317 display: flex;
318
319 &-list {
320 display: flex;
321 flex-flow: row wrap;
322 justify-content: space-evenly;
323
324 @include image-list-item(250px, 300px);
325
326 &-item {
327 margin-bottom: 1em;
328
329 &-mask {
330 display: inline-flex;
331 flex-direction: column;
332 justify-content: center;
333 text-align: center;
334 transition: background 0.2s ease-in-out,
335 color 0.2s ease-in-out;
336 @include link-color-transition($color-main-bg, $color-dark-bg);
337 }
338 &-text {
339 font: 200% $font-title;
340 margin-top: 0.3em;
341 margin-bottom: 0.1em;
342 }
343 }
344 }
345
346 &-sidebar {
347 flex: 25%;
348 #logo {
349 width: 100%;
350 }
351 }
352
353 &-info {
354 width: 100%;
355 }
356
357 &-release {
358 &-list {
359 }
360
361 &-info {
362
363 }
364
365 &-type {
366 color: $color-main-grey-dark;
367 }
368 }
369}
370
371@media only screen and (max-width: 760px) {
372 footer p {
373 padding: 0;
374 }
375 nav {
376 margin-bottom: 5vh;
377 height: 130px;
378 ul {
379 width: 100%;
380 padding-top: 48px;
381 position: relative;
382 top: 5vh;
383 }
384 img {
385 position: absolute;
386 top: 0;
387 }
388 }
389 .content {
390 margin-top: 140px;
391 }
392 .about {
393 flex-direction: column-reverse;
394 &-sidebar {
395 display: flex;
396 flex-direction: column;
397 img {
398 width: 128px;
399 margin: 0 auto;
400 }
401 }
402 &-links {
403 margin-top: 0;
404 p:first-child {
405 margin: 0;
406 padding-top: 0;
407 }
408 ul {
409 padding-top: 1em;
410 display: flex;
411 flex-wrap: wrap;
412 li {
413 margin: auto;
414 padding: 0 0.5em;
415 }
416 }
417 }
418 }
419}
420
421@media (prefers-color-scheme: dark) {
422 html {
423 background: $color-dark-bg;
424 }
425 body {
426 color: $color-main-bg;
427 }
428 nav {
429 background: rgba($color-dark-bg, $nav-alpha);
430 ul {
431 border-bottom: $border-dark;
432 }
433 }
434 code {
435 background: $color-darker-grey;
436 }
437 .faint {
438 color: $color-dark-grey;
439 }
440 .art-menu-item-mask {
441 @include link-color-transition($color-dark-bg, $color-main-bg);
442 }
443 div.highlight {
444 background: $color-darker-grey;
445 }
446 .post {
447 border: 2px solid $color-dark-grey;
448 }
449 .post-page .post-header ul li a {
450 background: $color-dark-grey;
451 }
452 .music-project {
453 &-release {
454 &-type {
455 color: $color-dark-grey;
456 }
457 }
458 &-list-item-mask {
459 @include link-color-transition($color-dark-bg, $color-main-bg);
460 }
461 }
462 footer {
463 border-top: $border-dark;
464 }
465 blockquote {
466 background: $color-nav-current;
467 border-color: $color-dark-grey;
468 }
469}