- {{ issue.data.title }}
+Issue {{ loop.index }}{{ issue.data.title }}
{{ issue.templateContent | safe }}
diff --git a/src/admin/config.yml b/src/admin/config.yml
index 4f6e824..b91d163 100644
--- a/src/admin/config.yml
+++ b/src/admin/config.yml
@@ -17,7 +17,7 @@ collections:
- name: body
label: About this report
widget: markdown
- - label: Report Data
+ - label: Report
name: report
file: src/report/index.md
fields:
diff --git a/src/admin/previews.js b/src/admin/previews.js
index d9ddfc1..a05a0ca 100644
--- a/src/admin/previews.js
+++ b/src/admin/previews.js
@@ -4,9 +4,9 @@ import slugify from '@sindresorhus/slugify';
const successCriteria = window.successCriteria;
-CMS.registerPreviewStyle('/assets/styles/cms.css');
-CMS.registerPreviewStyle('/assets/styles/main.css');
CMS.registerPreviewStyle('/assets/styles/report.css');
+CMS.registerPreviewStyle('/assets/styles/screen.css');
+CMS.registerPreviewStyle('/assets/styles/cms.css');
const IssuePreview = createClass({
render() {
@@ -14,6 +14,7 @@ const IssuePreview = createClass({
return (
- WCAG Criteria:
- {entry.getIn(['data', 'sc']).map(sc => (
-
- {sc} (external link)
+
+ {sc} (external link)
))}
@@ -58,7 +59,7 @@ const ReportPreview = createClass({
return (
<>
-
+ Issue 1 {entry.getIn(['data', 'title'])}
{this.props.widgetFor('body')} @@ -22,8 +23,8 @@ const IssuePreview = createClass({Accessibility Conformance Report for {entry.getIn(['data', 'title'])}
+Accessibility Audit for {entry.getIn(['data', 'title'])}
- Evaluated by
- {entry.getIn(['data', 'evaluators']).join(', ')} @@ -80,26 +81,25 @@ const ReportPreview = createClass({
-
-
- {scope.getIn(['data', 'title'])} (external link)
-
- {scope.getIn(['data', 'description']) ? (
-
{scope.getIn(['data', 'description'])}
- ) : ''} ++ {scope.getIn(['data', 'title'])} + {scope.getIn(['data', 'url'])} + {scope.getIn(['data', 'description']) ? ( +{scope.getIn(['data', 'description'])}
+ ) : ''} +
))}
- -
-
- {outOfScope.getIn(['data', 'title'])} (external link)
-
- {outOfScope.getIn(['data', 'description']) ? (
+ {outOfScope.getIn(['data', 'title'])}
+ {outOfScope.getIn(['data', 'description']) ? (
{outOfScope.getIn(['data', 'description'])}
) : ''}
diff --git a/src/assets/fonts/noto-sans-mono-v30-latin-regular.ttf b/src/assets/fonts/noto-sans-mono-v30-latin-regular.ttf
new file mode 100644
index 0000000..5f52cdc
Binary files /dev/null and b/src/assets/fonts/noto-sans-mono-v30-latin-regular.ttf differ
diff --git a/src/assets/fonts/noto-sans-mono-v30-latin-regular.woff2 b/src/assets/fonts/noto-sans-mono-v30-latin-regular.woff2
new file mode 100644
index 0000000..94fa934
Binary files /dev/null and b/src/assets/fonts/noto-sans-mono-v30-latin-regular.woff2 differ
diff --git a/src/assets/fonts/noto-serif-v23-latin-700.ttf b/src/assets/fonts/noto-serif-v23-latin-700.ttf
new file mode 100644
index 0000000..df0c27e
Binary files /dev/null and b/src/assets/fonts/noto-serif-v23-latin-700.ttf differ
diff --git a/src/assets/fonts/noto-serif-v23-latin-700.woff2 b/src/assets/fonts/noto-serif-v23-latin-700.woff2
new file mode 100644
index 0000000..bedb0e6
Binary files /dev/null and b/src/assets/fonts/noto-serif-v23-latin-700.woff2 differ
diff --git a/src/assets/fonts/noto-serif-v23-latin-700italic.ttf b/src/assets/fonts/noto-serif-v23-latin-700italic.ttf
new file mode 100644
index 0000000..d25a577
Binary files /dev/null and b/src/assets/fonts/noto-serif-v23-latin-700italic.ttf differ
diff --git a/src/assets/fonts/noto-serif-v23-latin-700italic.woff2 b/src/assets/fonts/noto-serif-v23-latin-700italic.woff2
new file mode 100644
index 0000000..55bc121
Binary files /dev/null and b/src/assets/fonts/noto-serif-v23-latin-700italic.woff2 differ
diff --git a/src/assets/fonts/noto-serif-v23-latin-italic.ttf b/src/assets/fonts/noto-serif-v23-latin-italic.ttf
new file mode 100644
index 0000000..600aece
Binary files /dev/null and b/src/assets/fonts/noto-serif-v23-latin-italic.ttf differ
diff --git a/src/assets/fonts/noto-serif-v23-latin-italic.woff2 b/src/assets/fonts/noto-serif-v23-latin-italic.woff2
new file mode 100644
index 0000000..dab2367
Binary files /dev/null and b/src/assets/fonts/noto-serif-v23-latin-italic.woff2 differ
diff --git a/src/assets/fonts/noto-serif-v23-latin-regular.ttf b/src/assets/fonts/noto-serif-v23-latin-regular.ttf
new file mode 100644
index 0000000..8952080
Binary files /dev/null and b/src/assets/fonts/noto-serif-v23-latin-regular.ttf differ
diff --git a/src/assets/fonts/noto-serif-v23-latin-regular.woff2 b/src/assets/fonts/noto-serif-v23-latin-regular.woff2
new file mode 100644
index 0000000..1907e2c
Binary files /dev/null and b/src/assets/fonts/noto-serif-v23-latin-regular.woff2 differ
diff --git a/src/assets/styles/cms.css b/src/assets/styles/cms.css
index 7d8fa64..3125176 100644
--- a/src/assets/styles/cms.css
+++ b/src/assets/styles/cms.css
@@ -1,3 +1,16 @@
.frame-content {
padding: 1.5rem;
}
+
+.frame-content pre {
+ background: #2b2b2b;
+ padding: 1em;
+ margin: 0.5em 0;
+ overflow: auto;
+ border-radius: 0.3em;
+}
+
+.frame-content code[class*='language-'],
+.frame-content pre[class*='language-'] {
+ color: #f8f8f2;
+}
diff --git a/src/assets/styles/main.css b/src/assets/styles/main.css
deleted file mode 100644
index a41429a..0000000
--- a/src/assets/styles/main.css
+++ /dev/null
@@ -1,30 +0,0 @@
-* {
- box-sizing: border-box;
-}
-
-body {
- max-width: 50em;
- margin: 2em auto;
- font-family: 'Noto Serif', Georgia, serif;
-}
-
-.report-list {
- padding: 0;
-}
-
-.report-list li {
- list-style-type: none;
-}
-
-.report-list a {
- padding: 0.5em;
- display: block;
- background-color: #f5f5f5;
- margin-bottom: 0.25em;
- color: #000;
- text-decoration: none;
-}
-
-.report-list a:hover {
- background-color: #dcdcdc;
-}
diff --git a/src/assets/styles/print.css b/src/assets/styles/print.css
index d189a4f..22eadb3 100644
--- a/src/assets/styles/print.css
+++ b/src/assets/styles/print.css
@@ -1 +1,31 @@
-/** TODO: Add print-specific styles. */
+body {
+ font-size: 10pt;
+}
+
+.issue {
+ border: none;
+ padding: 0;
+ break-before: page;
+}
+
+.issue-meta {
+ background-color: transparent;
+ border-top: 2px solid #dcdcdc;
+}
+
+.issue-meta div {
+ margin-bottom: 1em;
+}
+
+.issue img {
+ max-height: 5cm;
+}
+
+.wcag-link {
+ text-decoration: underline;
+ background-color: transparent;
+ color: #00e;
+ padding: 0;
+ font-size: inherit;
+ border-radius: 0;
+}
diff --git a/src/assets/styles/report.css b/src/assets/styles/report.css
index e94febd..e792444 100644
--- a/src/assets/styles/report.css
+++ b/src/assets/styles/report.css
@@ -1,3 +1,63 @@
+@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;
+}
+
+body {
+ max-width: 50em;
+ margin: 2em auto;
+ font-family: 'Noto Serif', Georgia, serif;
+}
+
h1 {
font-weight: normal;
font-size: 2em;
@@ -47,22 +107,31 @@ img {
max-height: 50%;
}
+a,
+a:visited {
+ color: #191970;
+}
+
a svg {
vertical-align: middle;
}
p code,
li code {
- font-family: Monaco, monospace;
+ font-family: 'Noto Sans Mono', monospace;
margin: 0 0.125em;
- color: #d5048d;
+ color: #d91e18;
border: 1px solid #ccc;
padding: 0 0.125em;
display: inline-block;
}
-code {
- font-size: 90%;
+pre,
+code,
+code[class*='language-'],
+pre[class*='language-'] {
+ font-family: 'Noto Sans Mono', monospace;
+ font-size: 0.875rem;
}
.issue {
@@ -73,13 +142,14 @@ code {
}
.issue-title {
+ display: flex;
+ flex-direction: column;
margin: -1rem -1rem 2rem;
padding: 0.75rem 1em;
background-color: #e6e6fa;
}
-.issue-title::before {
- content: attr(data-issue) ' ' counter(issue-number);
+.issue-title .number {
display: block;
padding: 0.25em 0.5em;
font-size: 65%;
@@ -87,7 +157,8 @@ code {
color: #fff;
border: none;
margin-bottom: 0.4em;
- width: max-content;
+ margin-right: auto;
+ width: auto;
}
.issue-meta {
@@ -99,8 +170,8 @@ code {
.issue-meta dl {
display: flex;
- margin: 0;
flex-flow: wrap;
+ margin: 0;
}
.issue-meta dd {
@@ -113,12 +184,6 @@ code {
margin: 0 2.5% 2.5% 0;
}
-@media (min-width: 30em) {
- .issue-meta div {
- width: 45%;
- }
-}
-
.sample-list {
padding: 0;
margin: 0;
@@ -141,10 +206,9 @@ code {
}
.sample-list a {
- font-family: Monaco, monospace;
- font-size: 0.75em;
- text-decoration: none;
- color: #808080;
+ font-family: 'Noto Sans Mono', monospace;
+ font-size: 0.75rem;
+ color: #191970;
display: block;
margin: 0.5em 0;
white-space: nowrap;
@@ -157,7 +221,6 @@ code {
.sample-list img {
margin-right: 2em;
border: 1px solid #ccc;
- box-shadow: 0 0 8px -1px #ccc;
max-width: 12em;
max-height: 100%;
}
@@ -171,20 +234,17 @@ code {
max-width: 11em;
}
-@media not print {
- .wcag-link {
- text-decoration: none;
- background-color: #191970;
- color: #fff;
- padding: 0.25em 1em;
- font-size: 0.75em;
- border-radius: 1em;
- }
+.wcag-link {
+ text-decoration: none;
+ background-color: #191970;
+ color: #fff;
+ padding: 0.25em 1em;
+ font-size: 0.75em;
+ border-radius: 1em;
}
.external {
clip: rect(0 0 0 0);
- clip-path: inset(100%);
height: 1px;
overflow: hidden;
position: absolute;
@@ -199,7 +259,7 @@ table {
td,
th {
border-bottom: 1px solid #808080;
- padding: 0.5em 0 0.5em 3em;
+ padding: 0.5em 3em 0.5em 0;
text-align: start;
}
@@ -210,35 +270,3 @@ th {
.issue-meta a + a {
margin-left: 0.5rem;
}
-
-/* For Prince */
-
-@media print {
- h1 {
- /* stylelint-disable-next-line function-no-unknown */
- string-set: doctitle content();
- }
-
- body {
- font-size: 10pt;
- }
-
- .issue {
- border: none;
- padding: 0;
- break-before: page;
- }
-
- .issue-meta {
- background-color: transparent;
- border-top: 2px solid #dcdcdc;
- }
-
- .issue-meta div {
- margin-bottom: 1em;
- }
-
- .issue img {
- max-height: 5cm;
- }
-}
diff --git a/src/assets/styles/screen.css b/src/assets/styles/screen.css
new file mode 100644
index 0000000..6c12108
--- /dev/null
+++ b/src/assets/styles/screen.css
@@ -0,0 +1,5 @@
+@media (width >= 30em) {
+ .issue-meta div {
+ width: 45%;
+ }
+}
Scope
Pages
Scope:
--
+
-
{this.props.widgetsFor('scope').map((scope, index) => (
Not in scope:
-
{this.props.widgetsFor('outOfScope').map((outOfScope, index) => (