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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
|
/** Variables */
:root {
--colour-primary-10: #060300;
--colour-primary-20: #1f1400;
--colour-primary-30: #3c2b00;
--colour-primary-40: #5c4300;
--colour-primary-50: #7f5d00;
--colour-primary-60: #a37800;
--colour-primary-70: #c89500;
--colour-primary-80: #efb300;
--colour-primary-90: #ffd98c;
--colour-primary-95: #ffecc8;
--colour-hyperlink-10: #000409;
--colour-hyperlink-20: #001829;
--colour-hyperlink-30: #00314d;
--colour-hyperlink-40: #004d75;
--colour-hyperlink-50: #006a9f;
--colour-hyperlink-60: #1388c9;
--colour-hyperlink-70: #41a8ea;
--colour-hyperlink-80: #78c7ff;
--colour-hyperlink-90: #bfe3ff;
--colour-hyperlink-95: #e0f1ff;
--colour-primary-fg: var(--colour-primary-90);
--colour-primary-bg: var(--colour-primary-10);
--colour-hyperlink: var(--colour-hyperlink-80);
--font-size-sm: 1rem;
--font-size-base: 1.1rem;
--font-size-md: 1.2rem;
--font-size-lg: 1.5rem;
--font-size-xl: 2rem;
--spacing-block-sm: 0.75rem;
--spacing-block-md: 1.5rem;
--spacing-block-lg: 2.5rem;
--spacing-block-xl: 5rem;
--spacing-inline-sm: 0.5rem;
--spacing-inline-md: 1.5rem;
--spacing-inline-lg: 3rem;
--spacing-inline-xl: 6rem;
}
/** Light theme */
@media (prefers-color-scheme: light) {
--colour-primary-fg: var(--colour-primary-20);
--colour-primary-bg: var(--colour-primary-95);
--colour-hyperlink: var(--colour-hyperlink-40);
}
/** Base typography */
body {
font-size: var(--font-size-base);
color: var(--colour-primary-fg);
background-color: var(--colour-primary-bg);
line-height: 1.5;
}
small {
font-size: var(--font-size-sm);
}
:is(p, h1, h2, h3, h4, h5, h6) {
margin-block-start: var(--spacing-block-sm);
max-width: 30rem;
}
/** Base layout */
body {
margin-inline: var(--spacing-block-lg);
margin-block-end: var(--spacing-block-xl);
:is(h1, h2, h3, h4, h5, h6) {
text-align: center;
}
img {
margin-inline: auto;
}
}
@media (min-width: 36rem) {
body {
display: grid;
grid-template-columns: [media-start] 6rem [content-start] 1fr [content-end];
margin-inline-end: 6rem;
column-gap: var(--spacing-block-sm);
max-width: calc(6rem + var(--spacing-block-sm) + 30rem);
:is(main, article, nav) {
display: grid;
grid-column: media-start / content-end;
grid-template-columns: subgrid;
}
:is(section, header, aside) {
grid-column: content-start / content-end;
}
:is(h1, h2, h3, h4, h5, h6) {
text-align: start;
}
}
}
/** Headings */
h1 {
font-size: var(--font-size-xl);
font-weight: 900;
margin-block-start: 0;
}
h2 {
font-size: var(--font-size-lg);
font-weight: 900;
margin-block-start: var(--spacing-block-xl);
}
h3, h4, h5, h6 {
font-size: var(--font-size-md);
font-weight: 600;
}
/** Hyperlinks */
a:is(:link, :visited) {
color: var(--colour-hyperlink);
text-decoration: underline;
display: inline;
:hover {
text-decoration: wavy;
}
}
/** Navigation bar */
nav {
margin-block: var(--spacing-block-sm);
ul {
grid-column: media-start / content-end;
display: flex;
justify-content: center;
gap: var(--spacing-inline-md);
list-style: none;
}
}
@media (min-width: 36rem) {
nav {
display: grid;
grid-template-columns: subgrid;
ul {
justify-content: end;
}
}
}
/** Blog feed */
.h-feed {
ul {
list-style: none;
}
}
|
