css/variables.2477498.scss – colour-scheme

`css/variables.2477498.scss`

4.0 kB
View raw
1@use "sass:color";
2@use "utils/functions.scss" as *;
3
4/* Why 751px and not 750px? To work around a subpixel bug in WebKit,
5 * where I get a hairline crack on the right-hand side of my cards
6 * in the two column view. :( */
7$max-width: 751px;
8$default-padding: 20px;
9
10:root {
11  /* ====================
12   * Font and text styles
13   * ==================== */
14  --text-font-family: Charter, Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
15  --mono-font-family: Menlo, Consolas, monospace;
16
17  --font-size: 13pt;
18
19  --line-height: 1.5em;
20
21  --meta-scaling-factor:     0.82;
22  --footnote-scaling-factor: 0.95;
23
24  /* =============================
25   * Margins and page layout stuff
26   * ============================= */
27  --max-width: #{$max-width};
28
29  --grid-gap: 10px;
30
31  --default-padding: #{$default-padding};
32
33  --border-radius: 10px;
34  --border-style:  solid;
35  --border-width:  3px;
36
37  /* Every page has a tint color that affects the nav, links, headings,
38   * and so on.
39   *
40   * Set a default color for every page, which may be overwritten by CSS
41   * appended to the <head>.
42   */
43  --default-primary-color-light: #d01c11;
44  --default-primary-color-dark:  #f45858;
45
46  --primary-color-light: var(--default-primary-color-light);
47  --primary-color-dark:  var(--default-primary-color-dark);
48
49  --nav-bg-image-light: url('/h/d01c11.png');
50  --nav-bg-image-dark:  url('/h/ff4242.png');
51
52  --link-color: var(--primary-color);
53
54  /* A collection of light/dark greys tones.
55   *
56   * Every so often I wonder about rationalising the number of grey tones that
57   * I'm using, but I haven't found a selection that I like yet.
58   */
59  --body-text-light: #202020;
60  --body-text-dark:  #c7c7c7;
61
62  --accent-grey-light: #999;
63  --accent-grey-dark:  #9a9a9a;
64
65  --block-border-color-light: #dfdfdf;
66  --block-background-light:   #f3f3f3;
67
68  --block-border-color-dark: #434343;
69  --block-background-dark:   #1d1d1d;
70
71  --screenshot-border-light: #f0f0f0;
72  --screenshot-border-dark:  #3f3f3f;
73
74  /* My background texture image is "White Waves Pattern" by Stas Pimenov,
75   * with reduced contrast.  The dark variant has inverted colours.
76   *
77   * From https://www.toptal.com/designers/subtlepatterns/white-waves-pattern/
78   */
79  --background-texture-light: url("/static/white-waves.png");
80  --background-color-light:   #fafafa;
81
82  --background-texture-dark:  url("/static/black-waves.png");
83  --background-color-dark:    #0d0d0d;
84}
85
86/* Select the appropriate light/dark shades depending on the user's theme.
87 *
88 * I could use the `light-dark()` CSS function, but it's fairly new and
89 * this approach is fine, so I'm sticking with media queries for now.
90 * See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark
91 */
92:root {
93    --body-text:          var(--body-text-light);
94    --primary-color:      var(--primary-color-light);
95    --accent-grey:        var(--accent-grey-light);
96    --block-border-color: var(--block-border-color-light);
97    --block-background:   var(--block-background-light);
98    --screenshot-border:  var(--screenshot-border-light);
99    --background-image:   var(--background-texture-light);
100    --background-color:   var(--background-color-light);
101    --nav-bg-image:       var(--nav-bg-image-light);
102}
103
104@media (prefers-color-scheme: dark) {
105  :root {
106    --body-text:           var(--body-text-dark);
107    --primary-color:       var(--primary-color-dark);
108    --accent-grey:         var(--accent-grey-dark);
109    --block-border-color:  var(--block-border-color-dark);
110    --block-background:    var(--block-background-dark);
111    --screenshot-border:   var(--screenshot-border-dark);
112    --background-image:    var(--background-texture-dark);
113    --background-color:    var(--background-color-dark);
114    --nav-bg-image:        var(--nav-bg-image-dark);
115  }
116}
117
118@media print {
119  :root {
120    --accent-grey: #555;
121
122    /* Don't show the background texture when printing; it's not important */
123    --background-image: none;
124    --background-color: none;
125  }
126}