Skip to content

Commit 3318036

Browse files
github-actions[bot]github-actions[bot]
committed
[Automated] Update report
1 parent 7b86c12 commit 3318036

File tree

2 files changed

+4609
-0
lines changed

2 files changed

+4609
-0
lines changed

‎public/style.css‎

Lines changed: 341 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,341 @@
1+
/*
2+
* Config
3+
*/
4+
body {
5+
--body-margin: 2rem;
6+
7+
/* Body colours */
8+
--body-bg: #fff;
9+
--body-fg: #111;
10+
11+
/* Nav & link colours */
12+
--nav-bg: #eee;
13+
--nav-bg-hover: #bbb;
14+
--nav-fg: #11c;
15+
16+
/* Heading colours */
17+
--h-fg: #222;
18+
--h-bg: #eee;
19+
20+
/* <hr> */
21+
--hr: 4px solid var(--h-bg);
22+
23+
/* ul li::marker */
24+
--ul-marker: #1114;
25+
--ul-marker-hover: #111f;
26+
27+
/* Border style for bordered components */
28+
--component-border: 1px solid #aaa;
29+
30+
/* Consistent component margins */
31+
--component-margin-sm: 1.5rem;
32+
--component-margin-lg: 3rem;
33+
34+
/* Code boxes */
35+
--code-bg: #eee;
36+
--code-border: var(--component-border);
37+
38+
/* Colour chips */
39+
--chip-text-shadow: #fff;
40+
--chip-border: var(--component-border);
41+
--count-bg: #eee;
42+
--count-border: var(--component-border);
43+
}
44+
45+
/*
46+
* Dark mode
47+
*/
48+
body.is-dark-mode {
49+
/* Body colours */
50+
--body-bg: #111;
51+
--body-fg: #fff;
52+
53+
/* Nav & link colours */
54+
--nav-bg: #444;
55+
--nav-bg-hover: #222;
56+
--nav-fg: #bcf;
57+
58+
/* Heading colours */
59+
--h-fg: #eee;
60+
--h-bg: #222;
61+
62+
/* <hr> */
63+
--hr: 4px solid var(--h-bg);
64+
65+
/* ul li::marker */
66+
--ul-marker: #eee4;
67+
--ul-marker-hover: #eeef;
68+
69+
/* Border style for bordered components */
70+
--component-border: 1px solid #666;
71+
72+
/* Consistent component margins */
73+
--component-margin-sm: 1.5rem;
74+
--component-margin-lg: 3rem;
75+
76+
/* Code boxes */
77+
--code-bg: #222;
78+
--code-border: var(--component-border);
79+
80+
/* Colour chips */
81+
--chip-text-shadow: #000;
82+
--chip-border: var(--component-border);
83+
--count-bg: #111;
84+
--count-border: var(--component-border);
85+
}
86+
87+
/*
88+
* General
89+
*/
90+
* {
91+
box-sizing: border-box;
92+
}
93+
94+
html {
95+
scroll-behavior: smooth;
96+
97+
@media (prefers-reduced-motion: reduce) {
98+
scroll-behavior: auto;
99+
}
100+
}
101+
102+
body {
103+
background-color: var(--body-bg);
104+
color: var(--body-fg);
105+
font-family: sans-serif;
106+
margin: var(--body-margin);
107+
}
108+
109+
a {
110+
color: var(--nav-fg);
111+
}
112+
113+
h1, h2 {
114+
font-weight: normal;
115+
}
116+
117+
h1, h2, h3 {
118+
color: var(--h-fg);
119+
margin: 0 0 var(--component-margin-sm) 0;
120+
}
121+
122+
hr {
123+
border: 0;
124+
border-bottom: var(--hr);
125+
}
126+
127+
/*
128+
* Header, nav, `back to top` button
129+
*/
130+
.site__header {
131+
align-items: baseline;
132+
display: flex;
133+
flex-wrap: wrap;
134+
justify-content: space-between;
135+
}
136+
137+
.nav {
138+
margin-bottom: var(--component-margin-sm);
139+
}
140+
141+
.nav ul {
142+
display: flex;
143+
justify-content: flex-start;
144+
align-items: center;
145+
list-style: none;
146+
padding: 0;
147+
}
148+
149+
.nav li {
150+
margin-bottom: var(--component-margin-sm);
151+
margin: 0 0.5em 0 0;
152+
}
153+
154+
.nav a {
155+
display: block;
156+
height: 100%;
157+
}
158+
159+
.nav a,
160+
.btn {
161+
background-color: var(--nav-bg);
162+
padding: 0.5em;
163+
text-decoration: none;
164+
transition: background-color 0.2s ease;
165+
}
166+
167+
.nav a:hover,
168+
.nav a:focus,
169+
.btn:hover,
170+
.btn:focus {
171+
background-color: var(--nav-bg-hover);
172+
}
173+
174+
.nav a:focus,
175+
.btn:focus {
176+
outline: 4px dashed var(--nav-fg);
177+
}
178+
179+
.btn {
180+
font-size: 1.2em;
181+
margin-bottom: var(--component-margin-sm);
182+
text-align: center;
183+
}
184+
185+
/*
186+
* Audits
187+
*/
188+
.audit__header {
189+
align-items: baseline;
190+
background-color: var(--h-bg);
191+
display: flex;
192+
justify-content: space-between;
193+
margin-right: calc(-1 * var(--body-margin));
194+
margin-left: calc(-1 * var(--body-margin));
195+
margin-bottom: var(--component-margin-sm);
196+
padding: var(--component-margin-sm) var(--body-margin) 0;
197+
position: sticky;
198+
top: 0;
199+
z-index: 1;
200+
}
201+
202+
.audit {
203+
margin-bottom: var(--component-margin-lg);
204+
}
205+
206+
/*
207+
* Code boxes
208+
*/
209+
code {
210+
background-color: var(--code-bg);
211+
border: var(--code-border);
212+
border-radius: 1px;
213+
display: inline-block;
214+
font-family: monospace;
215+
font-size: 1.2em;
216+
padding: 0.5em;
217+
}
218+
219+
/*
220+
* Audit lists
221+
*/
222+
.audit ul,
223+
.audit ol {
224+
padding: 0 0 0 2em;
225+
}
226+
227+
.audit ol {
228+
list-style-type: decimal-leading-zero;
229+
}
230+
231+
.audit li {
232+
margin: 0 0 2em 0;
233+
}
234+
235+
.audit ol > li::marker {
236+
color: var(--ul-marker);
237+
}
238+
239+
.audit ol > li:hover::marker {
240+
color: var(--ul-marker-hover);
241+
}
242+
243+
/*
244+
Audit: Colors
245+
*/
246+
.audit--colors ul,
247+
.audit--alpha ul {
248+
display: flex;
249+
flex-wrap: wrap;
250+
font-family: monospace;
251+
font-size: 1.2em;
252+
list-style: none;
253+
padding: 0;
254+
}
255+
256+
.audit--colors .chip,
257+
.audit--alpha .chip {
258+
border: var(--chip-border);
259+
height: 3em;
260+
line-height: 3em;
261+
margin: 0.5em;
262+
text-align: center;
263+
flex-basis: 18em;
264+
flex-grow: 1;
265+
background-color: var( --chip-bg-color );
266+
font-family: monospace;
267+
position: relative;
268+
}
269+
270+
.audit--colors .chip.is-transparent:before,
271+
.audit--alpha .chip.is-transparent:before {
272+
content: '';
273+
position: absolute;
274+
top: 0;
275+
left: 0;
276+
right: 0;
277+
bottom: 0;
278+
z-index: -1;
279+
background: repeating-conic-gradient(#f0f0f1 0% 25%, transparent 0% 50%) 50% / 20px 20px
280+
}
281+
282+
/*
283+
* Improve visibility of colour chip
284+
* text on low contrast backgrounds
285+
*/
286+
.audit--colors .chip:hover,
287+
.audit--alpha .chip:hover {
288+
font-weight: bold;
289+
text-shadow: 0 0 1px var(--chip-text-shadow),
290+
0 0 3px var(--chip-text-shadow),
291+
0 0 5px var(--chip-text-shadow),
292+
0 0 7px var(--chip-text-shadow);
293+
}
294+
295+
.audit--colors .count,
296+
.audit--alpha .count {
297+
left: -1em;
298+
min-width: 3em;
299+
padding: unset;
300+
position: absolute;
301+
top: -0.125em;
302+
}
303+
304+
/*
305+
* Count component on colour chips
306+
*/
307+
.count {
308+
background-color: var(--count-bg);
309+
border: var(--count-border);
310+
border-radius: 50%;
311+
box-sizing: border-box;
312+
color: var(--count-fg);
313+
display: inline-block;
314+
height: auto;
315+
min-width: 2.3em;
316+
padding: 0.5em;
317+
text-align: center;
318+
319+
/* Counteract .chip:hover */
320+
font-weight: normal;
321+
text-shadow: none;
322+
}
323+
324+
/*
325+
* Darkmode switch
326+
*/
327+
.button__theme-toggle {
328+
background: transparent;
329+
border: none;
330+
cursor: pointer;
331+
margin-bottom: 0;
332+
}
333+
334+
.button__theme-toggle::before {
335+
content: "🌛";
336+
font-size: 1.5rem;
337+
}
338+
339+
body.is-dark-mode .button__theme-toggle::before {
340+
content: "🌞";
341+
}

0 commit comments

Comments
 (0)