lab/styles.css at main · SE4CPS/lab · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
/* ----------  Base palette ---------- */
:root {
    --bg: #fafafa;
    --text: #222;
    /*  AAA on --bg              */
    --heading: #0d3b66;
    /*  AA on --bg               */
    --link: #0066cc;
    /*  Exceeds 4.5:1 on --bg    */
    --link-hover: #004999;
    --link-focus: #ffb703;
    /*  yellow focus outline     */
    --border: #dcdcdc;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ----------  Global ---------- */
html {
    font-size: 100%;
    /* honor browser zoom */
}

body {
    margin: 0 auto;
    max-width: 48rem;
    /* readable line-length */
    padding: 2rem 1rem;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.6;
}

/* ----------  Headings ---------- */
h1,
h2 {
    color: var(--heading);
    line-height: 1.25;
    margin: 1.5rem 0 1rem;
}

h1 {
    font-size: 1.75rem;
}

h2 {
    font-size: 1.25rem;
}

/* ----------  Links ---------- */
a {
    color: var(--link);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--link-hover);
    text-decoration: underline;
}

a:focus-visible {
    outline: 3px solid var(--link-focus);
    outline-offset: 2px;
}

/* ----------  Lists ---------- */
ul {
    padding-left: 1.2rem;
    border-left: 2px solid var(--border);
    margin: 0 0 2rem;
}

li {
    margin: 0.25rem 0;
}

/* ----------  Responsive tweaks ---------- */
@media (prefers-color-scheme: light) {
    :root {
        --bg: #121212;
        --text: #f2f2f2;
        --heading: #8ab4f8;
        --link: #4dabff;
        --link-hover: #82c4ff;
        --border: #333;
    }
}