fix: adjust styles for print vs screen

inclusive-design · Mar 11, 2024 · 75c6efd · 75c6efd
1 parent 87920a2
commit 75c6efd
Show file tree

Hide file tree

Showing 4 changed files with 211 additions and 54 deletions.
diff --git a/src/_layouts/base.njk b/src/_layouts/base.njk
@@ -4,8 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{% block title %}Accessibility Audit for {{ title }}{% endblock %}</title>
-  <link rel="stylesheet" href="assets/styles/a11y-dark.min.css">
-  <link rel="stylesheet" href="assets/styles/report.css">
+  <link rel="stylesheet" href="assets/styles/a11y-dark.min.css" media="screen">
+  <link rel="stylesheet" href="assets/styles/report.css" media="print,screen">
   <link rel="stylesheet" href="assets/styles/print.css" media="print">
   <link rel="stylesheet" href="assets/styles/screen.css" media="screen">
   {% block meta %}{% endblock %}

diff --git a/src/assets/styles/print.css b/src/assets/styles/print.css
@@ -1,3 +1,50 @@
+/* stylelint-disable at-rule-property-required-list */
+
+@font-face {
+	font-family: 'Noto Sans Mono';
+	font-style: normal;
+	font-weight: normal;
+	src:
+		url('../fonts/noto-sans-mono-v30-latin-regular.woff2') format('woff2'),
+		url('../fonts/noto-sans-mono-v30-latin-regular.ttf') format('truetype');
+}
+
+@font-face {
+	font-family: 'Noto Serif';
+	font-style: normal;
+	font-weight: normal;
+	src:
+		url('../fonts/noto-serif-v23-latin-regular.woff2') format('woff2'),
+		url('../fonts/noto-serif-v23-latin-regular.ttf') format('truetype');
+}
+
+@font-face {
+	font-family: 'Noto Serif';
+	font-style: italic;
+	font-weight: normal;
+	src:
+		url('../fonts/noto-serif-v23-latin-italic.woff2') format('woff2'),
+		url('../fonts/noto-serif-v23-latin-italic.ttf') format('truetype');
+}
+
+@font-face {
+	font-family: 'Noto Serif';
+	font-style: normal;
+	font-weight: bold;
+	src:
+		url('../fonts/noto-serif-v23-latin-700.woff2') format('woff2'),
+		url('../fonts/noto-serif-v23-latin-700.ttf') format('truetype');
+}
+
+@font-face {
+	font-family: 'Noto Serif';
+	font-style: italic;
+	font-weight: bold;
+	src:
+		url('../fonts/noto-serif-v23-latin-700italic.woff2') format('woff2'),
+		url('../fonts/noto-serif-v23-latin-700italic.ttf') format('truetype');
+}
+
 body {
 	font-size: 10pt;
 }
@@ -21,10 +68,11 @@ body {
 	max-height: 5cm;
 }
 
-.wcag-link {
+a.wcag-link,
+a.wcag-link:visited {
 	text-decoration: underline;
 	background-color: transparent;
-	color: #00e;
+	color: #191970;
 	padding: 0;
 	font-size: inherit;
 	border-radius: 0;
@@ -37,3 +85,112 @@ body {
 		content: 'Page ' counter(page) ' of ' counter(pages);
 	}
 }
+
+/**
+ * a11y-dark theme for JavaScript, CSS, and HTML
+ * Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
+ * @author ericwbailey
+ */
+
+code[class*='language-'],
+pre[class*='language-'] {
+	color: #f8f8f2;
+	background: none;
+	font-family: 'Noto Sans Mono', monospace;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+	tab-size: 4;
+	hyphens: none;
+}
+
+pre[class*='language-'] {
+	padding: 1em;
+	margin: 0.5em 0;
+	overflow: auto;
+	border-radius: 0.3em;
+}
+
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+	background: #2b2b2b;
+}
+
+:not(pre) > code[class*='language-'] {
+	padding: 0.1em;
+	border-radius: 0.3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #d4d0ab;
+}
+
+.token.punctuation {
+	color: #fefefe;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #ffa07a;
+}
+
+.token.boolean,
+.token.number {
+	color: #00e0e0;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #abe338;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+	color: #00e0e0;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function {
+	color: #ffd700;
+}
+
+.token.keyword {
+	color: #00e0e0;
+}
+
+.token.regex,
+.token.important {
+	color: #ffd700;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
diff --git a/src/assets/styles/report.css b/src/assets/styles/report.css
@@ -1,53 +1,3 @@
-@font-face {
-	font-display: swap;
-	font-family: 'Noto Sans Mono';
-	font-style: normal;
-	font-weight: normal;
-	src:
-		url('../fonts/noto-sans-mono-v30-latin-regular.woff2') format('woff2'),
-		url('../fonts/noto-sans-mono-v30-latin-regular.ttf') format('truetype');
-}
-
-@font-face {
-	font-display: swap;
-	font-family: 'Noto Serif';
-	font-style: normal;
-	font-weight: normal;
-	src:
-		url('../fonts/noto-serif-v23-latin-regular.woff2') format('woff2'),
-		url('../fonts/noto-serif-v23-latin-regular.ttf') format('truetype');
-}
-
-@font-face {
-	font-display: swap;
-	font-family: 'Noto Serif';
-	font-style: italic;
-	font-weight: normal;
-	src:
-		url('../fonts/noto-serif-v23-latin-italic.woff2') format('woff2'),
-		url('../fonts/noto-serif-v23-latin-italic.ttf') format('truetype');
-}
-
-@font-face {
-	font-display: swap;
-	font-family: 'Noto Serif';
-	font-style: normal;
-	font-weight: bold;
-	src:
-		url('../fonts/noto-serif-v23-latin-700.woff2') format('woff2'),
-		url('../fonts/noto-serif-v23-latin-700.ttf') format('truetype');
-}
-
-@font-face {
-	font-display: swap;
-	font-family: 'Noto Serif';
-	font-style: italic;
-	font-weight: bold;
-	src:
-		url('../fonts/noto-serif-v23-latin-700italic.woff2') format('woff2'),
-		url('../fonts/noto-serif-v23-latin-700italic.ttf') format('truetype');
-}
-
 * {
 	box-sizing: border-box;
 }

diff --git a/src/assets/styles/screen.css b/src/assets/styles/screen.css
@@ -1,3 +1,53 @@
+@font-face {
+	font-display: swap;
+	font-family: 'Noto Sans Mono';
+	font-style: normal;
+	font-weight: normal;
+	src:
+		url('../fonts/noto-sans-mono-v30-latin-regular.woff2') format('woff2'),
+		url('../fonts/noto-sans-mono-v30-latin-regular.ttf') format('truetype');
+}
+
+@font-face {
+	font-display: swap;
+	font-family: 'Noto Serif';
+	font-style: normal;
+	font-weight: normal;
+	src:
+		url('../fonts/noto-serif-v23-latin-regular.woff2') format('woff2'),
+		url('../fonts/noto-serif-v23-latin-regular.ttf') format('truetype');
+}
+
+@font-face {
+	font-display: swap;
+	font-family: 'Noto Serif';
+	font-style: italic;
+	font-weight: normal;
+	src:
+		url('../fonts/noto-serif-v23-latin-italic.woff2') format('woff2'),
+		url('../fonts/noto-serif-v23-latin-italic.ttf') format('truetype');
+}
+
+@font-face {
+	font-display: swap;
+	font-family: 'Noto Serif';
+	font-style: normal;
+	font-weight: bold;
+	src:
+		url('../fonts/noto-serif-v23-latin-700.woff2') format('woff2'),
+		url('../fonts/noto-serif-v23-latin-700.ttf') format('truetype');
+}
+
+@font-face {
+	font-display: swap;
+	font-family: 'Noto Serif';
+	font-style: italic;
+	font-weight: bold;
+	src:
+		url('../fonts/noto-serif-v23-latin-700italic.woff2') format('woff2'),
+		url('../fonts/noto-serif-v23-latin-700italic.ttf') format('truetype');
+}
+
 @media (width < 48em) {
 	.issue header {
 		align-items: flex-start;