aboutsummaryrefslogtreecommitdiffstats
path: root/css
diff options
context:
space:
mode:
authorFeuerfuchs <git@feuerfuchs.dev>2020-05-18 18:02:20 +0200
committerFeuerfuchs <git@feuerfuchs.dev>2020-05-18 18:02:20 +0200
commite58fabd89f9708aaeb10e52f731759712034833f (patch)
treeb845d41df1e91f01e4d66fb0a40fa9dc76c24dcd /css
parentWIP: Refactoring (diff)
downloadgopherproxy-e58fabd89f9708aaeb10e52f731759712034833f.tar.gz
gopherproxy-e58fabd89f9708aaeb10e52f731759712034833f.tar.bz2
gopherproxy-e58fabd89f9708aaeb10e52f731759712034833f.zip
WIP: Refactoring
Diffstat (limited to 'css')
-rw-r--r--css/main.scss86
1 files changed, 65 insertions, 21 deletions
diff --git a/css/main.scss b/css/main.scss
index 42b0b28..27a62ec 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -11,7 +11,7 @@ $sel-background: rgba($accent, .996);
11$sel-text: #000; 11$sel-text: #000;
12 12
13$font-monospace: 'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace; 13$font-monospace: 'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace;
14$font-proportional: 'Iosevka Aile', 'Fira Sans', 'Roboto', 'Droid Sans', sans-serif; 14$font-proportional: 'Open Sans', 'Fira Sans', 'Roboto', 'Droid Sans', sans-serif;
15 15
16// 16//
17// Basic element styles 17// Basic element styles
@@ -28,16 +28,48 @@ body {
28 // ); 28 // );
29 color: $text; 29 color: $text;
30 font-family: $font-monospace; 30 font-family: $font-monospace;
31 font-size: 1 / 16 * 17em; 31 font-size: 1em; //1 / 16 * 17em;
32 line-height: 1.5; 32 line-height: 1.5;
33} 33}
34 34
35pre {
36 margin: 0;
37 font: inherit;
38 font-family: $font-monospace;
39 white-space: pre-wrap;
40}
41
35h1, h2, h3, h4, h5, h6 { 42h1, h2, h3, h4, h5, h6 {
36 font: inherit; 43 font: inherit;
44 font-weight: bold;
37 color: $text-plus; 45 color: $text-plus;
38 margin: 0; 46 margin: 0;
39} 47}
40 48
49p {
50 margin: 0;
51}
52
53ul, ol {
54 margin: 0;
55 padding: 0;
56 list-style-type: none;
57}
58
59ul {
60 li {
61 padding-left: 4ch;
62
63 &::before {
64 display: inline-block;
65 width: 2ch;
66 padding-left: 2ch;
67 margin-left: -4ch;
68 content: '–';
69 }
70 }
71}
72
41button { 73button {
42 background: none; 74 background: none;
43 border: 0; 75 border: 0;
@@ -191,14 +223,9 @@ strong {
191 text-align: center; 223 text-align: center;
192 224
193 &--word-wrap { 225 &--word-wrap {
194 max-width: 50em; 226 max-width: 45em;
195 max-width: 100ch; 227 max-width: 90ch;
196 margin: 0 auto; 228 margin: 0 auto;
197
198 .content {
199 white-space: pre-wrap;
200 word-wrap: break-word;
201 }
202 } 229 }
203} 230}
204 231
@@ -213,22 +240,39 @@ strong {
213 font: inherit; 240 font: inherit;
214 font-family: $font-proportional; 241 font-family: $font-proportional;
215 242
216 &--has-type-annotations { 243 &--monospace,
217 padding-left: 3em; 244 &--prefer-monospace {
218 padding-left: 5ch;
219 }
220
221 &--has-monospace-font {
222 font-family: $font-monospace; 245 font-family: $font-monospace;
223 } 246 }
224} 247}
225 248
226.type-annotation { 249.section {
227 margin-left: -3em; 250 display: flex;
228 margin-left: -5ch; 251 align-items: baseline;
229 color: $text-minus; 252 flex-direction: row;
230 white-space: pre; 253 justify-content: flex-start;
231 font-family: $font-monospace; 254 min-height: 1em * 1.5;
255 padding-left: 3em;
256 padding-left: 5ch;
257
258 &__type {
259 flex: 0 0 auto;
260 margin-left: -3em;
261 margin-left: -5ch;
262 padding-right: 1.25em;
263 padding-right: 2ch;
264 width: 1.75em;
265 width: 3ch;
266 color: $text-minus;
267 font-family: $font-monospace;
268 text-align: right;
269 user-select: none;
270 }
271
272 &__content {
273 min-width: 0;
274 word-wrap: break-word;
275 }
232} 276}
233 277
234// 278//