_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-dark-grey: #1f1f1f;
7$color-link-idle: #707070;
8$color-link-hover: #999999;
9$color-nav-current: #333333;
10$border-main: 5px solid $color-main-grey;
11$border-dark: 5px solid $color-dark-grey;
12$font-title: sans-serif;
13$body-font: sans-serif;
14
15html {
16 background: $color-main-bg;
17}
18
19body {
20 max-width: 835px;
21 min-width: 364px;
22 margin: 20px auto 0 auto;
23 padding: 8px;
24 color: $color-dark-bg;
25 font: 100% $body-font;
26}
27a {
28 color: $color-link-idle;
29 text-decoration: none;
30}
31a:hover {
32 color: $color-link-hover;
33}
34
35.current {
36 color: $color-nav-current;
37}
38
39nav {
40 display: flex;
41 font: 400 1.5em $font-title;
42 letter-spacing: -1.2px;
43
44 ul {
45 display: inline-flex;
46 width: 430px;
47 height: 32px;
48 margin: 0;
49 padding: 50px 30px 0 0;
50 flex-direction: row;
51 justify-content: space-between;
52 list-style-type: none;
53 border-bottom: $border-main;
54 }
55}
56
57h1, h2, h3, h4, h5, h6 {
58 margin: 0;
59 font: 200% $font-title;
60 color: $color-main-blue;
61}
62
63.post {
64 padding: 1em;
65 margin: 1em;
66 background: $color-main-grey;
67 border-radius: 25px 25px 25px 0px;
68 word-wrap: break-word;
69 p {
70 img {
71 max-width: 100%
72 }
73 }
74}
75
76audio {
77 width: 100%;
78 border-radius: 25px;
79}
80
81footer {
82 border-top: $border-main;
83 text-align: center;
84 font: 75% $body-font;
85 p {
86 margin: 0;
87 }
88}
89
90@media only screen and (max-width: 700px) {
91 nav {
92 margin-bottom: 5vh;
93 ul {
94 width: 100%;
95 padding: 0;
96 padding-top: 30px;
97 position: relative;
98 top: 5vh;
99 }
100 img {
101 position: absolute;
102 top: 0;
103 }
104 }
105}
106
107@media (prefers-color-scheme: dark) {
108 html {
109 background: $color-dark-bg;
110 }
111 body {
112 color: $color-main-bg;
113 }
114 nav {
115 ul {
116 border-bottom: $border-dark;
117 }
118 }
119 .post {
120 background: $color-dark-grey;
121 }
122 footer {
123 border-top: $border-dark;
124 }
125}