- commit
- cd704b3b80d0e1306497fc5c676a1683664b9c65
- parent
- 66fc1ffb90098c3a09798103870fe6af30c8c07f
- Author
- Tobias Bengfort <tobias.bengfort@posteo.de>
- Date
- 2024-04-04 21:05
replace sass variables by custom properties
Diffstat
| M | sass/base.scss | 36 | ++++++++++++++++++------------------ |
| M | sass/fontsize.scss | 2 | +- |
| M | sass/form.scss | 32 | ++++++++++++++++---------------- |
| M | sass/layout.scss | 4 | ++-- |
| M | sass/variables.scss | 31 | ++++++++++++++++--------------- |
5 files changed, 53 insertions, 52 deletions
diff --git a/sass/base.scss b/sass/base.scss
@@ -15,17 +15,17 @@ video {
15 15 }
16 16
17 17 p, address, blockquote, pre, table, dl, ul, ol, figure, fieldset {
18 -1 margin-block: 0 $spacer;
-1 18 margin-block: 0 var(--spacer);
19 19 }
20 20
21 21 html {
22 22 overflow-y: scroll;
23 -1 background-color: $color-bg;
24 -1 color: $color-fg;
25 -1 font-size: $font-size-max;
-1 23 background-color: var(--color-bg);
-1 24 color: var(--color-fg);
-1 25 font-size: var(--font-size-max);
26 26 font-family: sans-serif;
27 27 line-height: 1.5;
28 -1 accent-color: $color-link;
-1 28 accent-color: var(--color-link);
29 29 }
30 30
31 31 h1, h2, h3, h4, h5, h6 {
@@ -33,38 +33,38 @@ h1, h2, h3, h4, h5, h6 {
33 33 margin-block: 0 0.8rem;
34 34
35 35 * + & {
36 -1 margin-block-start: 1.5 * $spacer;
-1 36 margin-block-start: calc(1.5 * var(--spacer));
37 37 }
38 38 }
39 39
40 40 :link,
41 41 :visited {
42 -1 color: $color-link;
-1 42 color: var(--color-link);
43 43 text-decoration: underline;
44 44
45 45 &:hover {
46 -1 color: $color-link-focus;
-1 46 color: var(--color-link-focus);
47 47 }
48 48 }
49 49
50 50 hr {
51 51 border: 0;
52 -1 border-block-end: 1px solid $color-border;
53 -1 margin-block: $spacer;
-1 52 border-block-end: 1px solid var(--color-border);
-1 53 margin-block: var(--spacer);
54 54 }
55 55
56 56 pre, code {
57 57 font-size: 90%;
58 58 font-family: monospace;
59 -1 background-color: $color-bg-tint;
-1 59 background-color: var(--color-bg-tint);
60 60 }
61 61 code {
62 62 padding-inline: 0.25em;
63 63 }
64 64 pre {
65 -1 padding: $padding;
-1 65 padding: var(--padding);
66 66 overflow: auto;
67 -1 border: 1px solid $color-border;
-1 67 border: 1px solid var(--color-border);
68 68
69 69 code {
70 70 all: revert;
@@ -72,18 +72,18 @@ pre {
72 72 }
73 73
74 74 ol, ul {
75 -1 padding-inline-start: $indentation;
-1 75 padding-inline-start: var(--indentation);
76 76 }
77 77 dt {
78 78 font-weight: bold;
79 79 }
80 80 dd {
81 -1 margin-inline-start: $indentation;
-1 81 margin-inline-start: var(--indentation);
82 82 }
83 83
84 84 blockquote {
85 85 font-style: italic;
86 -1 margin-inline: $indentation 0;
-1 86 margin-inline: var(--indentation) 0;
87 87 }
88 88
89 89 table {
@@ -91,11 +91,11 @@ table {
91 91 border-spacing: 0;
92 92 }
93 93 tr {
94 -1 border-bottom: 1px solid $color-border;
-1 94 border-bottom: 1px solid var(--color-border);
95 95 }
96 96 td, th {
97 97 text-align: start;
98 -1 padding: $padding * 0.5;
-1 98 padding: calc(var(--padding) * 0.5);
99 99 vertical-align: top;
100 100 }
101 101
diff --git a/sass/fontsize.scss b/sass/fontsize.scss
@@ -1,3 +1,3 @@ 1 1 html {2 -1 font-size: clamp($font-size-min, 2.5vi, $font-size-max);-1 2 font-size: clamp(var(--font-size-min), 2.5vi, var(--font-size-max)); 3 3 }
diff --git a/sass/form.scss b/sass/form.scss
@@ -8,7 +8,7 @@ select, 8 8 .button, 9 9 button, 10 10 input[type="file"]::file-selector-button {11 -1 border: 1px solid $color-border;-1 11 border: 1px solid var(--color-border); 12 12 padding-block: 0.3em; 13 13 padding-inline: 0.75em; 14 14 font-family: inherit; @@ -19,16 +19,16 @@ input[type="file"]::file-selector-button { 19 19 input, 20 20 textarea, 21 21 select {22 -1 background: $color-bg;23 -1 color: $color-fg;-1 22 background: var(--color-bg); -1 23 color: var(--color-fg); 24 24 25 25 &:focus-visible {26 -1 border-color: $color-link-focus;-1 26 border-color: var(--color-link-focus); 27 27 } 28 28 &:disabled {29 -1 border-color: $color-border;30 -1 background: $color-bg-tint;31 -1 color: $color-border;-1 29 border-color: var(--color-border); -1 30 background: var(--color-bg-tint); -1 31 color: var(--color-border); 32 32 cursor: not-allowed; 33 33 } 34 34 } @@ -39,14 +39,14 @@ textarea { 39 39 40 40 @keyframes color-link { 41 41 from {42 -1 border-color: $color-link;43 -1 background: $color-link;44 -1 color: $color-bg;-1 42 border-color: var(--color-link); -1 43 background: var(--color-link); -1 44 color: var(--color-bg); 45 45 } 46 46 to {47 -1 border-color: $color-link-focus;48 -1 background: $color-link-focus;49 -1 color: $color-bg;-1 47 border-color: var(--color-link-focus); -1 48 background: var(--color-link-focus); -1 49 color: var(--color-bg); 50 50 } 51 51 } 52 52 @@ -76,14 +76,14 @@ button, 76 76 } 77 77 78 78 input[type="file"]::file-selector-button {79 -1 background: $color-bg-tint;80 -1 color: $color-fg;-1 79 background: var(--color-bg-tint); -1 80 color: var(--color-fg); 81 81 border: 0; 82 82 cursor: pointer; 83 83 84 84 margin-block: -0.3em; 85 85 margin-inline: -0.75em 0.75em;86 -1 border-inline-end: 1px solid $color-border;-1 86 border-inline-end: 1px solid var(--color-border); 87 87 } 88 88 input[type="file"]:disabled::file-selector-button { 89 89 background: transparent;
diff --git a/sass/layout.scss b/sass/layout.scss
@@ -1,7 +1,7 @@ 1 1 body { 2 2 margin-block: 2em; 3 3 margin-inline: auto;4 -1 max-inline-size: $width;-1 4 max-inline-size: var(--width); 5 5 padding-block: 0;6 -1 padding-inline: $padding;-1 6 padding-inline: var(--padding); 7 7 }
diff --git a/sass/variables.scss b/sass/variables.scss
@@ -1,16 +1,17 @@1 -1 // colors-1 1 :root { -1 2 // colors -1 3 --color-bg: #fff; -1 4 --color-fg: #333; -1 5 --color-bg-tint: #f5f5f5; -1 6 --color-border: #888; -1 7 --color-link: #26c; -1 8 --color-link-focus: #248; 2 93 -1 $color-bg: #fff !default;4 -1 $color-fg: #333 !default;5 -1 $color-bg-tint: mix($color-bg, $color-fg, 95%) !default;6 -1 $color-border: mix($color-bg, $color-fg, 45%) !default;7 -1 $color-link: #26c !default;8 -1 $color-link-focus: mix($color-link, $color-fg, 50%) !default;9 -110 -1 // lengths11 -1 $font-size-min: 0.9em !default;12 -1 $font-size-max: 1.2em !default;13 -1 $padding: 0.5em !default;14 -1 $spacer: 1em !default;15 -1 $indentation: 1.5rem !default;16 -1 $width: 37em !default;-1 10 // lengths -1 11 --font-size-min: 0.9em; -1 12 --font-size-max: 1.2em; -1 13 --padding: 0.5em; -1 14 --spacer: 1em; -1 15 --indentation: 1.5rem; -1 16 --width: 37em; -1 17 }