summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--assets/style.scss30
1 files changed, 18 insertions, 12 deletions
diff --git a/assets/style.scss b/assets/style.scss
index a08d4f5..40b18f5 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -1,6 +1,7 @@
1$font-size: 17px; 1$font-size: 18px;
2$heading-font-size: $font-size + 1; 2$heading-font-size: $font-size + 1;
3$line-height: 1.4; 3$code-block-font-size: $font-size - 1;
4$line-height: 1.5;
4 5
5$page-item-prefix-max-chars: 3ch; 6$page-item-prefix-max-chars: 3ch;
6$page-item-prefix-pad: 2ch; 7$page-item-prefix-pad: 2ch;
@@ -8,6 +9,8 @@ $page-item-prefix-width: $page-item-prefix-max-chars + $page-item-prefix-pad;
8 9
9$subcontent-indent: 4ch; 10$subcontent-indent: 4ch;
10 11
12$breakpoint-sm: 700px;
13
11@function px-to-em($s, $b: $font-size) { 14@function px-to-em($s, $b: $font-size) {
12 @return 1 / ($b / 1px) * ($s / 1px) * 1em; 15 @return 1 / ($b / 1px) * ($s / 1px) * 1em;
13} 16}
@@ -57,8 +60,8 @@ $subcontent-indent: 4ch;
57 60
58 --page-item-prefix-fg: var(--fg-minus); 61 --page-item-prefix-fg: var(--fg-minus);
59 62
60 --link-idle-fg: var(--gray6); 63 --link-idle-fg: var(--gray6); //#90acf2; //var(--gray6);
61 --link-visited-fg: var(--gray5); 64 --link-visited-fg: var(--gray5); //#bc9df2; //var(--gray5);
62 --link-hover-bg: var(--gray6); 65 --link-hover-bg: var(--gray6);
63 --link-hover-fg: var(--gray1); 66 --link-hover-fg: var(--gray1);
64 67
@@ -89,13 +92,13 @@ body {
89 margin: 2em; 92 margin: 2em;
90 padding: 0; 93 padding: 0;
91 94
92 @media (max-width: 700px) { 95 @media (max-width: $breakpoint-sm) {
93 margin: 1em; 96 margin: 1em;
94 } 97 }
95} 98}
96 99
97main { 100main {
98 max-width: 80ch; 101 max-width: 70ch;
99 margin: 0 auto; 102 margin: 0 auto;
100} 103}
101 104
@@ -106,6 +109,8 @@ code {
106pre { 109pre {
107 margin: 0; 110 margin: 0;
108 color: var(--code-block-fg); 111 color: var(--code-block-fg);
112 font-size: $code-block-font-size;
113 line-height: 1.4;
109 114
110 strong { 115 strong {
111 font-weight: normal; 116 font-weight: normal;
@@ -218,7 +223,7 @@ hr {
218 background-color: var(--bg-plus); 223 background-color: var(--bg-plus);
219 border: 0; 224 border: 0;
220 225
221 @media (max-width: 700px) { 226 @media (max-width: $breakpoint-sm) {
222 margin-left: 0; 227 margin-left: 0;
223 } 228 }
224} 229}
@@ -250,7 +255,7 @@ blockquote {
250 display: none; 255 display: none;
251 } 256 }
252 257
253 @media (max-width: 700px) { 258 @media (max-width: $breakpoint-sm) {
254 display: none; 259 display: none;
255 260
256 &--sm, 261 &--sm,
@@ -276,16 +281,16 @@ blockquote {
276 position: absolute; 281 position: absolute;
277 box-sizing: border-box; 282 box-sizing: border-box;
278 display: inline-block; 283 display: inline-block;
279 font-size: 1rem;
280 margin-left: -1 * $page-item-prefix-width; 284 margin-left: -1 * $page-item-prefix-width;
281 padding-right: $page-item-prefix-pad; 285 padding-right: $page-item-prefix-pad;
282 width: $page-item-prefix-width; 286 width: $page-item-prefix-width;
283 color: var(--page-item-prefix-fg); 287 color: var(--page-item-prefix-fg);
288 font-size: 1rem;
284 font-weight: normal; 289 font-weight: normal;
285 text-align: right; 290 text-align: right;
286 } 291 }
287 292
288 @media (max-width: 700px) { 293 @media (max-width: $breakpoint-sm) {
289 margin-left: 0; 294 margin-left: 0;
290 padding-left: 0; 295 padding-left: 0;
291 296
@@ -316,6 +321,7 @@ blockquote {
316 height: 100%; 321 height: 100%;
317 color: var(--page-item-prefix-fg); 322 color: var(--page-item-prefix-fg);
318 overflow: hidden; 323 overflow: hidden;
324 line-height: 1.4 * ($code-block-font-size / $font-size)
319 } 325 }
320 326
321 hr { 327 hr {
@@ -330,7 +336,7 @@ blockquote {
330 margin-left: -1 * $page-item-prefix-width; 336 margin-left: -1 * $page-item-prefix-width;
331 } 337 }
332 338
333 @media (max-width: 700px) { 339 @media (max-width: $breakpoint-sm) {
334 margin-left: 0; 340 margin-left: 0;
335 padding-left: 0; 341 padding-left: 0;
336 342
@@ -340,7 +346,7 @@ blockquote {
340 } 346 }
341 } 347 }
342 348
343 @media (max-width: 700px) { 349 @media (max-width: $breakpoint-sm) {
344 padding-left: 0; 350 padding-left: 0;
345 } 351 }
346} 352}