Skip to content

Commit 75c6efd

Browse files
greatislandergreatislander
committed
fix: adjust styles for print vs screen
1 parent 87920a2 commit 75c6efd

File tree

4 files changed

+211
-54
lines changed

4 files changed

+211
-54
lines changed

‎src/_layouts/base.njk

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>{% block title %}Accessibility Audit for {{ title }}{% endblock %}</title>
7-
<link rel="stylesheet" href="assets/styles/a11y-dark.min.css">
8-
<link rel="stylesheet" href="assets/styles/report.css">
7+
<link rel="stylesheet" href="assets/styles/a11y-dark.min.css" media="screen">
8+
<link rel="stylesheet" href="assets/styles/report.css" media="print,screen">
99
<link rel="stylesheet" href="assets/styles/print.css" media="print">
1010
<link rel="stylesheet" href="assets/styles/screen.css" media="screen">
1111
{% block meta %}{% endblock %}

‎src/assets/styles/print.css

+159-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,50 @@
1+
/* stylelint-disable at-rule-property-required-list */
2+
3+
@font-face {
4+
font-family: 'Noto Sans Mono';
5+
font-style: normal;
6+
font-weight: normal;
7+
src:
8+
url('../fonts/noto-sans-mono-v30-latin-regular.woff2') format('woff2'),
9+
url('../fonts/noto-sans-mono-v30-latin-regular.ttf') format('truetype');
10+
}
11+
12+
@font-face {
13+
font-family: 'Noto Serif';
14+
font-style: normal;
15+
font-weight: normal;
16+
src:
17+
url('../fonts/noto-serif-v23-latin-regular.woff2') format('woff2'),
18+
url('../fonts/noto-serif-v23-latin-regular.ttf') format('truetype');
19+
}
20+
21+
@font-face {
22+
font-family: 'Noto Serif';
23+
font-style: italic;
24+
font-weight: normal;
25+
src:
26+
url('../fonts/noto-serif-v23-latin-italic.woff2') format('woff2'),
27+
url('../fonts/noto-serif-v23-latin-italic.ttf') format('truetype');
28+
}
29+
30+
@font-face {
31+
font-family: 'Noto Serif';
32+
font-style: normal;
33+
font-weight: bold;
34+
src:
35+
url('../fonts/noto-serif-v23-latin-700.woff2') format('woff2'),
36+
url('../fonts/noto-serif-v23-latin-700.ttf') format('truetype');
37+
}
38+
39+
@font-face {
40+
font-family: 'Noto Serif';
41+
font-style: italic;
42+
font-weight: bold;
43+
src:
44+
url('../fonts/noto-serif-v23-latin-700italic.woff2') format('woff2'),
45+
url('../fonts/noto-serif-v23-latin-700italic.ttf') format('truetype');
46+
}
47+
148
body {
249
font-size: 10pt;
350
}
@@ -21,10 +68,11 @@ body {
2168
max-height: 5cm;
2269
}
2370

24-
.wcag-link {
71+
a.wcag-link,
72+
a.wcag-link:visited {
2573
text-decoration: underline;
2674
background-color: transparent;
27-
color: #00e;
75+
color: #191970;
2876
padding: 0;
2977
font-size: inherit;
3078
border-radius: 0;
@@ -37,3 +85,112 @@ body {
3785
content: 'Page ' counter(page) ' of ' counter(pages);
3886
}
3987
}
88+
89+
/**
90+
* a11y-dark theme for JavaScript, CSS, and HTML
91+
* Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
92+
* @author ericwbailey
93+
*/
94+
95+
code[class*='language-'],
96+
pre[class*='language-'] {
97+
color: #f8f8f2;
98+
background: none;
99+
font-family: 'Noto Sans Mono', monospace;
100+
text-align: left;
101+
white-space: pre;
102+
word-spacing: normal;
103+
word-break: normal;
104+
word-wrap: normal;
105+
line-height: 1.5;
106+
tab-size: 4;
107+
hyphens: none;
108+
}
109+
110+
pre[class*='language-'] {
111+
padding: 1em;
112+
margin: 0.5em 0;
113+
overflow: auto;
114+
border-radius: 0.3em;
115+
}
116+
117+
:not(pre) > code[class*='language-'],
118+
pre[class*='language-'] {
119+
background: #2b2b2b;
120+
}
121+
122+
:not(pre) > code[class*='language-'] {
123+
padding: 0.1em;
124+
border-radius: 0.3em;
125+
white-space: normal;
126+
}
127+
128+
.token.comment,
129+
.token.prolog,
130+
.token.doctype,
131+
.token.cdata {
132+
color: #d4d0ab;
133+
}
134+
135+
.token.punctuation {
136+
color: #fefefe;
137+
}
138+
139+
.token.property,
140+
.token.tag,
141+
.token.constant,
142+
.token.symbol,
143+
.token.deleted {
144+
color: #ffa07a;
145+
}
146+
147+
.token.boolean,
148+
.token.number {
149+
color: #00e0e0;
150+
}
151+
152+
.token.selector,
153+
.token.attr-name,
154+
.token.string,
155+
.token.char,
156+
.token.builtin,
157+
.token.inserted {
158+
color: #abe338;
159+
}
160+
161+
.token.operator,
162+
.token.entity,
163+
.token.url,
164+
.language-css .token.string,
165+
.style .token.string,
166+
.token.variable {
167+
color: #00e0e0;
168+
}
169+
170+
.token.atrule,
171+
.token.attr-value,
172+
.token.function {
173+
color: #ffd700;
174+
}
175+
176+
.token.keyword {
177+
color: #00e0e0;
178+
}
179+
180+
.token.regex,
181+
.token.important {
182+
color: #ffd700;
183+
}
184+
185+
.token.important,
186+
.token.bold {
187+
font-weight: bold;
188+
}
189+
190+
.token.italic {
191+
font-style: italic;
192+
}
193+
194+
.token.entity {
195+
cursor: help;
196+
}

‎src/assets/styles/report.css

-50
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,3 @@
1-
@font-face {
2-
font-display: swap;
3-
font-family: 'Noto Sans Mono';
4-
font-style: normal;
5-
font-weight: normal;
6-
src:
7-
url('../fonts/noto-sans-mono-v30-latin-regular.woff2') format('woff2'),
8-
url('../fonts/noto-sans-mono-v30-latin-regular.ttf') format('truetype');
9-
}
10-
11-
@font-face {
12-
font-display: swap;
13-
font-family: 'Noto Serif';
14-
font-style: normal;
15-
font-weight: normal;
16-
src:
17-
url('../fonts/noto-serif-v23-latin-regular.woff2') format('woff2'),
18-
url('../fonts/noto-serif-v23-latin-regular.ttf') format('truetype');
19-
}
20-
21-
@font-face {
22-
font-display: swap;
23-
font-family: 'Noto Serif';
24-
font-style: italic;
25-
font-weight: normal;
26-
src:
27-
url('../fonts/noto-serif-v23-latin-italic.woff2') format('woff2'),
28-
url('../fonts/noto-serif-v23-latin-italic.ttf') format('truetype');
29-
}
30-
31-
@font-face {
32-
font-display: swap;
33-
font-family: 'Noto Serif';
34-
font-style: normal;
35-
font-weight: bold;
36-
src:
37-
url('../fonts/noto-serif-v23-latin-700.woff2') format('woff2'),
38-
url('../fonts/noto-serif-v23-latin-700.ttf') format('truetype');
39-
}
40-
41-
@font-face {
42-
font-display: swap;
43-
font-family: 'Noto Serif';
44-
font-style: italic;
45-
font-weight: bold;
46-
src:
47-
url('../fonts/noto-serif-v23-latin-700italic.woff2') format('woff2'),
48-
url('../fonts/noto-serif-v23-latin-700italic.ttf') format('truetype');
49-
}
50-
511
* {
522
box-sizing: border-box;
533
}

‎src/assets/styles/screen.css

+50
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,53 @@
1+
@font-face {
2+
font-display: swap;
3+
font-family: 'Noto Sans Mono';
4+
font-style: normal;
5+
font-weight: normal;
6+
src:
7+
url('../fonts/noto-sans-mono-v30-latin-regular.woff2') format('woff2'),
8+
url('../fonts/noto-sans-mono-v30-latin-regular.ttf') format('truetype');
9+
}
10+
11+
@font-face {
12+
font-display: swap;
13+
font-family: 'Noto Serif';
14+
font-style: normal;
15+
font-weight: normal;
16+
src:
17+
url('../fonts/noto-serif-v23-latin-regular.woff2') format('woff2'),
18+
url('../fonts/noto-serif-v23-latin-regular.ttf') format('truetype');
19+
}
20+
21+
@font-face {
22+
font-display: swap;
23+
font-family: 'Noto Serif';
24+
font-style: italic;
25+
font-weight: normal;
26+
src:
27+
url('../fonts/noto-serif-v23-latin-italic.woff2') format('woff2'),
28+
url('../fonts/noto-serif-v23-latin-italic.ttf') format('truetype');
29+
}
30+
31+
@font-face {
32+
font-display: swap;
33+
font-family: 'Noto Serif';
34+
font-style: normal;
35+
font-weight: bold;
36+
src:
37+
url('../fonts/noto-serif-v23-latin-700.woff2') format('woff2'),
38+
url('../fonts/noto-serif-v23-latin-700.ttf') format('truetype');
39+
}
40+
41+
@font-face {
42+
font-display: swap;
43+
font-family: 'Noto Serif';
44+
font-style: italic;
45+
font-weight: bold;
46+
src:
47+
url('../fonts/noto-serif-v23-latin-700italic.woff2') format('woff2'),
48+
url('../fonts/noto-serif-v23-latin-700italic.ttf') format('truetype');
49+
}
50+
151
@media (width < 48em) {
252
.issue header {
353
align-items: flex-start;

0 commit comments

Comments
 (0)