static/style.css (view raw)
1:root {
2 --light: #f4f4f4;
3 --cyan: #509c93;
4 --light-gray: #eee;
5 --medium-gray: #ddd;
6 --gray: #6a6a6a;
7 --dark: #444;
8 --darker: #222;
9}
10
11html {
12 background: var(--light);
13 -webkit-text-size-adjust: none;
14 font-family: "InterVar", -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", sans-serif;
15}
16
17::selection {
18 background: var(--medium-gray);
19 opacity: 0.3;
20}
21
22* {
23 box-sizing: border-box;
24 padding: 0;
25 margin: 0;
26}
27
28body {
29 max-width: 750px;
30 padding: 0 13px;
31 margin: 40px auto;
32}
33
34main, footer {
35 font-size: 1rem;
36 padding: 0;
37 line-height: 160%;
38}
39
40main h1, h2, h3, .small-heading {
41 font-family: "InterDisplay", -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", sans-serif;
42 font-weight: 500;
43}
44
45strong {
46 font-weight: 500;
47}
48
49main h1 {
50 font-size: 20px;
51 padding: 10px 0 10px 0;
52}
53
54main h2 {
55 font-size: 18px;
56}
57
58main h2, h3 {
59 padding: 20px 0 15px 0;
60}
61
62nav {
63 padding-top: 1rem;
64}
65
66nav ul {
67 padding: 0;
68 margin: 0;
69 list-style: none;
70 padding-bottom: 20px;
71}
72
73nav ul li {
74 padding-right: 10px;
75 display: inline-block;
76}
77
78a {
79 margin: 0;
80 padding: 0;
81 box-sizing: border-box;
82 text-decoration: none;
83 word-wrap: break-word;
84}
85
86a {
87 color: var(--darker);
88 border-bottom: 1.5px solid var(--medium-gray);
89}
90
91a:hover {
92 border-bottom: 1.5px solid var(--gray);
93}
94
95.index {
96 display: grid;
97 grid-template-columns: 6em 1fr 7em;
98 grid-row-gap: 0.5em;
99}
100
101.index-headings {
102 display: grid;
103 grid-template-columns: 6em 1fr 7em;
104 padding-bottom: 1.2em;
105 padding-top: 1.2em;
106}
107
108@media (max-width: 385px) {
109 .index {
110 grid-row-gap: 0.8em;
111 }
112}