aboutsummaryrefslogtreecommitdiffstats
path: root/css
diff options
context:
space:
mode:
Diffstat (limited to 'css')
-rw-r--r--css/main.scss203
1 files changed, 174 insertions, 29 deletions
diff --git a/css/main.scss b/css/main.scss
index 0d5a5d9..6334f42 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -2,7 +2,7 @@ $accent: scale-color(#e8ad58, $lightness: 30%);
2$background: hsl(210, 14%, 9%); 2$background: hsl(210, 14%, 9%);
3$text: mix(hsl(210, 60%, 95%), $background, 85%); 3$text: mix(hsl(210, 60%, 95%), $background, 85%);
4$text-minus: mix(hsl(210, 100%, 95%), $background, 60%); 4$text-minus: mix(hsl(210, 100%, 95%), $background, 60%);
5$text-faint: mix(hsl(210, 100%, 95%), $background, 40%); 5$text-faint: mix(hsl(210, 100%, 95%), $background, 35%);
6$text-plus: #fff; 6$text-plus: #fff;
7$link-idle: $text-plus; 7$link-idle: $text-plus;
8$link-visited: $text; 8$link-visited: $text;
@@ -10,11 +10,7 @@ $border: mix(hsl(210, 100%, 95%), $background, 16%);
10$sel-background: rgba($accent, .996); 10$sel-background: rgba($accent, .996);
11$sel-text: #000; 11$sel-text: #000;
12 12
13@mixin monospace-font { 13$font-monospace: 'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace;
14 font-family: 'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace;
15 font-size: 1 / 16 * 17em;
16 line-height: 1.5;
17}
18 14
19@font-face { 15@font-face {
20 font-family: 'Iosevka Term SS03'; 16 font-family: 'Iosevka Term SS03';
@@ -35,15 +31,29 @@ body {
35 // hsla(210, 100%, 95%, .025) 2px 31 // hsla(210, 100%, 95%, .025) 2px
36 // ); 32 // );
37 color: $text; 33 color: $text;
34 font-family: $font-monospace;
35 font-size: 1 / 16 * 17em;
36 line-height: 1.5;
37}
38
39h1, h2, h3, h4, h5, h6 {
40 font: inherit;
41 color: $text-plus;
42 margin: 0;
38} 43}
39 44
40button { 45button {
41 @include monospace-font; 46 background: none;
47 border: 0;
48 padding: 0;
49 color: $text-plus;
50 font: inherit;
51 text-decoration: underline;
52 cursor: pointer;
42 53
43 background: none; 54 &:focus {
44 border: 0; 55 outline: 1px dotted currentColor;
45 padding: 0; 56 }
46 color: $text-plus;
47} 57}
48 58
49img { 59img {
@@ -66,6 +76,10 @@ img {
66 } 76 }
67} 77}
68 78
79strong {
80 font-weight: normal;
81}
82
69::selection { 83::selection {
70 color: $sel-text; 84 color: $sel-text;
71 background-color: $sel-background; 85 background-color: $sel-background;
@@ -79,44 +93,175 @@ img {
79 color: $link-visited; 93 color: $link-visited;
80} 94}
81 95
96:link,
97:visited {
98 &:hover {
99 color: $text-plus;
100 }
101}
102
103.novisit {
104 color: $link-idle;
105}
106
82// :link, :visited { 107// :link, :visited {
83// &:hover { 108// &:hover {
84// color: $text-plus; 109// color: $text-plus;
85// } 110// }
86// } 111// }
87 112
88.header { 113.header-base {
89 @include monospace-font; 114 display: flex;
115 flex-flow: row wrap;
116 align-items: center;
117 justify-content: space-between;
90 118
91 padding: .9em 1em; 119 &::after {
92 border-bottom: 1px solid $border; 120 display: block;
93 line-height: 1.3; 121 width: 100%;
94 color: $text-faint; 122 white-space: nowrap;
123 overflow: hidden;
124 color: $text-faint;
125 content: '----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------';
126 }
95} 127}
96 128
97.header__uripart { 129//
98 color: $text-minus; 130
131.header {
132 padding: .9em 1em 0;
133 color: $text-minus;
99} 134}
100 135
101.header__uripart--last { 136//
102 color: $text-plus; 137
138.location {
139 color: $text-faint;
140
141 &__prefix {
142 color: $text-faint;
143
144 &:hover {
145 color: $text-plus;
146 }
147 }
148
149 &__uripart {
150 color: $text-plus;
151
152 + .location__slash + .location__uripart {
153 color: $text;
154
155 &:hover {
156 color: $text-plus;
157 }
158 }
159 }
103} 160}
104 161
162//
163
105.wrap { 164.wrap {
106 text-align: center; 165 text-align: center;
107} 166}
108 167
109.content { 168.content {
110 @include monospace-font; 169 display: inline-block;
111 170 min-width: 50em;
112 display: inline-block; 171 min-width: 5ch + 80;
113 min-width: 50em; 172 margin: 0;
114 min-width: 5ch + 80; 173 padding: 2em 1em;
115 margin: 0; 174 text-align: left;
116 padding: 2em 1em; 175 font: inherit;
117 text-align: left;
118} 176}
119 177
178//
179
120.type-annotation { 180.type-annotation {
121 color: $text-minus; 181 color: $text-minus;
122} 182}
183
184//
185
186.modal {
187 position: fixed;
188 top: 0;
189 left: 0;
190 z-index: 100;
191 display: none;
192 width: 100%;
193 height: 100%;
194 box-sizing: border-box;
195 padding: 2em;
196 background-color: rgba(#000, .75);
197
198 &--visible {
199 display: block;
200 }
201
202 &__content {
203 max-width: 30em;
204 padding: 1.5em 1.8em;
205 margin: 0 auto;
206 background-color: $background;
207 box-shadow: 0 .3em 2em #000;
208 text-align: left;
209 }
210
211 &__head {
212 margin-bottom: 1.5em;
213 }
214
215 &__title {
216 padding-right: 1em;
217 white-space: nowrap;
218 text-overflow: ellipsis;
219 overflow: hidden;
220 }
221}
222
223//
224
225.setting {
226 display: flex;
227 flex-direction: row;
228 align-items: center;
229 justify-content: space-between;
230
231 &__label {
232 white-space: nowrap;
233 overflow: hidden;
234 margin-right: .5em;
235
236 &::after {
237 color: $text-faint;
238 content: ' . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .';
239 }
240 }
241}
242
243//
244
245#none {
246 position: fixed;
247 top: 0;
248 left: 0;
249 width: 0;
250 height: 0;
251}
252
253//
254
255@media screen and (max-width: 800px) {
256 .location__uripart ~ * {
257 display: none;
258 }
259
260 .modal {
261 padding: 1em;
262 }
263
264 .modal__content {
265 padding: 1em 1.3em;
266 }
267}