Skip to content

Commit 87d6b4c

Browse files
mor10mor10
committed
accessible font sizing + color consistency
1 parent 75795bc commit 87d6b4c

File tree

1 file changed

+92
-77
lines changed

1 file changed

+92
-77
lines changed

‎styles.css

+92-77
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
:root {
22
-webkit-text-size-adjust: 100%;
3+
--sans-serif: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
4+
--border-color: hsl(0, 0%, 87%);
35
}
46

57
body {
68
font-family: Georgia, "Times New Roman", Times, serif;
7-
color: #000;
8-
font-size: 1.1em;
9+
color: hsl(0, 0%, 0%);
10+
font-size: 1.1rem;
911
line-height: 1.5;
1012
margin: 0;
1113
}
1214

1315
h2, h3, h4, h5 {
14-
font-family: Arial, Helvetica, sans-serif;
16+
font-family: sans-serif;
17+
font-family: var(--sans-serif);
1518
margin: 0;
1619
}
1720

@@ -28,38 +31,52 @@ a:hover {
2831
text-decoration: none;
2932
}
3033

34+
.sr-only {
35+
border: 0;
36+
clip: rect(1px, 1px, 1px, 1px);
37+
-webkit-clip-path: inset(50%);
38+
clip-path: inset(50%);
39+
height: 1px;
40+
overflow: hidden;
41+
padding: 0;
42+
position: absolute;
43+
width: 1px;
44+
white-space: nowrap;
45+
}
46+
3147
.title-block {
32-
margin: 10px;
48+
margin: .625rem;
3349
text-align: center;
3450
}
3551

3652
.title-image {
37-
max-width: 320px;
53+
max-width: 20rem;
3854
margin: 0 auto;
3955
}
4056

4157
.byline {
42-
font-family: Arial, Helvetica, sans-serif;
58+
font-family: sans-serif;
59+
font-family: var(--sans-serif);
4360
font-size: 80%;
44-
max-width: 500px;
61+
max-width: 32rem;
4562
margin: 0 auto;
4663
}
4764

4865
.byline:not(:first-child) {
49-
margin-top: 15px;
66+
margin-top: 1rem;
5067
}
5168

5269
.intro, .outro {
53-
max-width: 800px;
54-
padding: 0 10px;
70+
max-width: 50rem;
71+
padding: 0 1rem;
5572
}
5673

5774
.intro {
58-
margin: 0 auto 30px auto;
75+
margin: 0 auto 2rem auto;
5976
}
6077

6178
.outro {
62-
margin: 20px auto 50px auto;
79+
margin: 1.4rem auto 3rem auto;
6380
}
6481

6582
.group {
@@ -68,15 +85,15 @@ a:hover {
6885
}
6986

7087
.group.first {
71-
border-top: 1px solid #ddd;
88+
border-top: 1px solid var(--border-color);
7289
}
7390

7491
.group.first .left .content, .group.first .right .content {
75-
padding-top: 20px;
92+
padding-top: 1.25rem;
7693
}
7794

7895
.group.last {
79-
border-bottom: 1px solid #ddd;
96+
border-bottom: 1px solid var(--border-color);
8097
}
8198

8299
.group .left {
@@ -94,24 +111,25 @@ a:hover {
94111
.group .left .content, .group .right .content {
95112
background-color: inherit;
96113
box-shadow: none;
97-
padding: 0 20px 26.4px 20px;
114+
padding: 0 1.25rem 1.65rem 1.25rem;
98115
}
99116

100117
.group .left .content.empty, .group .right .content.empty {
101118
padding: 0;
102119
}
103120

104121
.group .right {
105-
background-color: #f0f0f0;
122+
background-color: hsl(0, 0%, 94%);
106123
}
107124

108125
.group .right .content {
109126
font-size: 90%;
110127
}
111128

112129
.content h3, .content h4 {
113-
font-family: Arial, Helvetica, sans-serif;
114-
margin: 0 0 20px 0;
130+
font-family: sans-serif;
131+
font-family: var(--sans-serif);
132+
margin: 0 0 1.25rem 0;
115133
}
116134

117135
.content p {
@@ -126,20 +144,20 @@ a:hover {
126144

127145
.content ul, .content ol {
128146
margin: 0;
129-
padding-inline-start: 1em;
147+
padding-inline-start: 1rem;
130148
}
131149

132150
mark {
133-
background-color: rgba(255, 245, 137, 0.5);
151+
background-color: hsla(55, 100%, 77%, 0.5);
134152
}
135153

136154
mark:hover {
137155
cursor: pointer;
138-
background-color: #fff589;
156+
background-color: hsla(55, 100%, 77%, 1);
139157
}
140158

141159
mark.selected {
142-
background-color: #fff589;
160+
background-color: hsla(55, 100%, 77%, 1);
143161
}
144162

145163
mark[data-annotation-id]::after {
@@ -148,11 +166,11 @@ mark[data-annotation-id]::after {
148166
display: inline-block;
149167
position: relative;
150168
border-radius: 50%;
151-
border: 1px solid #000;
152-
width: 10px;
153-
height: 10px;
154-
font-size: 10px;
155-
line-height: 10px;
169+
border: 1px solid hsl(0, 0%, 0%);
170+
width: .625rem;
171+
height: .625rem;
172+
font-size: .625rem;
173+
line-height: .625rem;
156174
padding: 1px;
157175
text-align: center;
158176
margin-left: 3px;
@@ -161,20 +179,21 @@ mark[data-annotation-id]::after {
161179
}
162180

163181
.content > .annotation:not(:first-child), .content .content:not(:first-child), .content .annotation-group:not(:first-child) {
164-
margin-top: 10px;
182+
margin-top: .625rem;
165183
}
166184

167185
.annotation {
168-
background-color: white;
169-
padding: 10px;
170-
border: 1px solid #ddd;
186+
background-color: hsl(0, 0%, 100%);
187+
padding: .625rem;
188+
border: 1px solid #var(var(--border-color));
171189
}
172190

173191
.annotation:hover {
174192
cursor: pointer;
175193
}
176194

177-
.annotation[role=comment][data-annotation-id]::after, .annotation-group[role=comment][data-annotation-id]::after {
195+
.annotation[role=comment][data-annotation-id]::after,
196+
.annotation-group[role=comment][data-annotation-id]::after {
178197
content: attr(data-annotation-id);
179198
content: attr(data-annotation-id)/"";
180199
font-family: Georgia, "Times New Roman", Times, serif;
@@ -183,17 +202,18 @@ mark[data-annotation-id]::after {
183202
position: absolute;
184203
border-radius: 50%;
185204
border: 1px solid #ddd;
186-
width: 14px;
187-
height: 14px;
188-
font-size: 14px;
189-
line-height: 12px;
205+
width: .875rem;
206+
height: .875rem;
207+
font-size: .875rem;
208+
line-height: 1;
190209
padding: 3px;
191210
text-align: center;
192211
left: -8px;
193212
top: -8px;
194213
}
195214

196-
.annotation[role=comment], .annotation-group[role=comment] {
215+
.annotation[role=comment],
216+
.annotation-group[role=comment] {
197217
position: relative;
198218
}
199219

@@ -208,13 +228,14 @@ mark[data-annotation-id]::after {
208228
}
209229

210230
.commenter {
211-
font-family: Arial, Helvetica, sans-serif;
231+
font-family: sans-serif;
232+
font-family: var(--sans-serif);
212233
font-size: 80%;
213234
color: #999;
214235
}
215236

216237
.no-margin {
217-
margin: 0 !important;
238+
margin: 0;
218239
}
219240

220241
.small {
@@ -226,81 +247,70 @@ mark[data-annotation-id]::after {
226247
}
227248

228249
.annotation-group .annotation.thread {
229-
margin-left: 10px;
250+
margin-left: .625rem;
230251
}
231252

232253
.annotation-group .annotation.thread-2 {
233-
margin-left: 20px;
254+
margin-left: 1.25rem;
234255
}
235256

236257
.annotation-group .annotation.thread-3 {
237-
margin-left: 30px;
258+
margin-left: 1.5rem;
238259
}
239260

240261
.annotation-group .annotation.thread-4 {
241-
margin-left: 40px;
262+
margin-left: 1.75rem;
242263
}
243264

244265
.annotation-group .annotation.thread-5 {
245-
margin-left: 50px;
266+
margin-left: 2rem;
246267
}
247268

248269
.annotation-group .annotation.thread-6 {
249-
margin-left: 60px;
270+
margin-left: 2.25rem;
250271
}
251272

252273
.annotation-group .annotation.thread-7 {
253-
margin-left: 70px;
274+
margin-left: 2.5rem;
254275
}
255276

256277
.annotation-group .annotation.thread-8 {
257-
margin-left: 80px;
278+
margin-left: 2.75rem;
258279
}
259280

260281
.annotation-group .annotation.thread-9 {
261-
margin-left: 90px;
282+
margin-left: 3rem;
262283
}
263284

264285
.annotation-group .annotation.thread-10 {
265-
margin-left: 100px;
286+
margin-left: 3.25rem;
266287
}
267288

268-
.sr-only {
269-
border: 0 !important;
270-
clip: rect(1px, 1px, 1px, 1px) !important;
271-
-webkit-clip-path: inset(50%) !important;
272-
clip-path: inset(50%) !important;
273-
height: 1px !important;
274-
overflow: hidden !important;
275-
padding: 0 !important;
276-
position: absolute !important;
277-
width: 1px !important;
278-
white-space: nowrap !important;
279-
}
289+
280290

281291
/* Responsive */
282292
@media screen and (min-width: 1801px) {
283293
.group .left .content {
284294
padding-left: 20%;
285-
padding-right: 40px;
295+
padding-right: 2.5rem;
286296
}
287297

288298
.group .right .content {
289-
padding-left: 40px;
299+
padding-left: 2.5rem;
290300
padding-right: 20%;
291301
}
292302
}
293303

294304
@media screen and (min-width: 1001px) and (max-width: 1800px) {
295305
.group .left .content, .group .right .content {
296-
padding-left: 40px;
297-
padding-right: 40px;
306+
padding-left: 2.5rem;
307+
padding-right: 2.5rem;
298308
}
299309
}
300310

301311
@media screen and (min-width: 751px) {
302312
.group .left .content, .group .right .content {
303-
max-width: 800px;
313+
max-width: 50rem;
304314
}
305315
.group .left .content {
306316
float: right;
@@ -311,36 +321,41 @@ mark[data-annotation-id]::after {
311321
.group {
312322
flex-direction: column;
313323
}
324+
314325
.group .left .content, .group .right .content {
315-
padding-left: 40px;
316-
padding-right: 40px;
326+
padding-left: 2.5rem;
327+
padding-right: 2.5rem;
317328
}
329+
318330
.group .left .content {
319-
padding-top: 26.4px;
331+
padding-top: 1.65rem;
320332
}
333+
321334
.annotation {
322-
font-family: Arial, Helvetica, sans-serif;
335+
font-family: sans-serif;
336+
font-family: var(--sans-serif);
323337
font-size: 90%;
324338
}
339+
325340
.content > .annotation, .annotation-group {
326-
margin-top: 20px;
341+
margin-top: 1.25rem;
327342
}
328343
}
329344

330345
@media screen and (max-width: 480px) {
331346
.group .left .content, .group .right .content {
332-
padding-left: 20px;
333-
padding-right: 20px;
347+
padding-left: 1.25rem;
348+
padding-right: 1.25rem;
334349
}
335350
}
336351

337352
/* No-JS tweaks */
338353
.no-jsmark:hover {
339-
cursor: auto !important;
340-
background-color: rgba(255, 245, 137, 0.5) !important;
354+
cursor: auto;
355+
background-color: hsla(55, 100%, 77%, 0.5);
341356
}
342357

343358
.no-js.annotation:hover {
344-
cursor: auto !important;
359+
cursor: auto;
345360
}
346361

0 commit comments

Comments
 (0)