Skip to content

Commit aeaab88

Browse files
greatislandergreatislander
committed
feat: style improvements and syntax highlighting
1 parent bdc2893 commit aeaab88

22 files changed

+184
-126
lines changed

‎eleventy.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export default function eleventy(eleventyConfig) {
5454
});
5555

5656
eleventyConfig.addPassthroughCopy({
57+
'node_modules/a11y-syntax-highlighting/dist/prism/a11y-dark.min.css': 'assets/styles/a11y-dark.min.css',
5758
'node_modules/decap-cms/dist/decap-cms.js': 'lib/cms/decap-cms.js',
5859
'node_modules/decap-cms/dist/decap-cms.js.map':
5960
'lib/cms/decap-cms.js.map',

‎package-lock.json

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
"@11ty/eleventy": "3.0.0-alpha.5",
4141
"@11ty/eleventy-fetch": "^4.0.0",
4242
"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
43+
"a11y-syntax-highlighting": "^0.2.0",
4344
"decap-cms": "^3.1.2",
4445
"eleventy-plugin-markdown-shortcode": "^1.1.0",
4546
"esbuild": "^0.20.1",

‎src/_layouts/base.njk

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
<!DOCTYPE html>
2-
<html lang="{{ language }}">
2+
<html lang="en-CA">
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>{% block title %}{{ title }}{% endblock %}</title>
7-
<link rel="stylesheet" href="assets/styles/main.css">
8-
{# <style>code[class*="language-"],pre[class*="language-"]{color:#545454;background:none;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*="language-"]{border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:1em;margin:1em 0;overflow:auto;}:not(pre) > code[class*="language-"],pre[class*="language-"]{background:#fefefe}:not(pre) > code[class*="language-"]{white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#696969}.token.punctuation{color:#545454}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#007faa}.token.boolean,.token.number{color:#008000}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#aa5d00}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#008000}.token.atrule,.token.attr-value,.token.function{color:#aa5d00}.token.keyword{color:#d91e18}.token.important,.token.regex{color:#d91e18}.token.bold,.token.important{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}@media screen and (-ms-high-contrast: active){code[class*="language-"],pre[class*="language-"]{color:windowText;background:window}:not(pre) > code[class*="language-"],pre[class*="language-"]{background:window}.token.important{background:highlight;color:window;font-weight:normal}.token.atrule,.token.attr-value,.token.function,.token.keyword,.token.operator,.token.selector{font-weight:bold}.token.attr-value,.token.comment,.token.doctype,.token.function,.token.keyword,.token.operator,.token.property,.token.string{color:highlight}.token.attr-value,.token.url{font-weight:normal}}@media (prefers-color-scheme:dark){code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2b2b2b}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#d4d0ab}.token.punctuation{color:#fefefe}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#ffa07a}.token.boolean,.token.number{color:#00e0e0}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#abe338}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#00e0e0}.token.atrule,.token.attr-value,.token.function{color:gold}.token.keyword{color:#00e0e0}.token.important,.token.regex{color:gold}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}}@media screen and (-ms-high-contrast:active){code[class*=language-],pre[class*=language-]{color:windowText;background:window}:not(pre)>code[class*=language-],pre[class*=language-]{background:window}.token.important{background:highlight;color:window;font-weight:400}.token.atrule,.token.attr-value,.token.function,.token.keyword,.token.operator,.token.selector{font-weight:700}.token.attr-value,.token.comment,.token.doctype,.token.function,.token.keyword,.token.operator,.token.property,.token.string{color:highlight}.token.attr-value,.token.url{font-weight:400}}</style> #}
9-
{% block meta %}{% endblock %}
7+
<link rel="stylesheet" href="assets/styles/a11y-dark.min.css">
8+
<link rel="stylesheet" href="assets/styles/report.css">
9+
<link rel="stylesheet" href="assets/styles/print.css" media="print">
10+
<link rel="stylesheet" href="assets/styles/screen.css" media="screen">
11+
{% block meta %}{% endblock %}
1012
</head>
1113
<body>
1214
{{ content | safe }}

‎src/_layouts/report.njk

+13-11
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
11
---
22
layout: base
33
---
4-
5-
<link rel="stylesheet" href="assets/styles/report.css">
6-
74
{% set issueList = collections.issues %}
85
{% set tipsList = collections.tips %}
96

107
<section id="start">
118
<img src="assets/images/logo.svg" alt="" class="logo">
129

13-
<h1>Accessibility Conformance Report for {{ title }}</h1>
10+
<h1>Accessibility Audit for {{ title }}</h1>
1411

1512
<dl>
1613
<dt>Evaluated by</dt>
@@ -44,22 +41,27 @@ layout: base
4441
<h3>Pages</h3>
4542
{% if scope %}
4643
<p>Scope:
47-
<ul>
44+
<ol class="sample-list">
4845
{% for scope in scope %}
4946
<li id="{{ scope.title | slugify }}">
50-
<a href="{{ scope.url }}">{{ scope.title }}<span class="external">(external link)</span> <svg aria-hidden="true" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="14" width="16" style="vertical-align: middle;"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M14 5C13.4477 5 13 4.55228 13 4C13 3.44772 13.4477 3 14 3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4L21 10C21 10.5523 20.5523 11 20 11C19.4477 11 19 10.5523 19 10L19 6.41422L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L17.5858 5H14ZM3 7C3 5.89543 3.89543 5 5 5H10C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7H5V19H17V14C17 13.4477 17.4477 13 18 13C18.5523 13 19 13.4477 19 14V19C19 20.1046 18.1046 21 17 21H5C3.89543 21 3 20.1046 3 19V7Z" fill="currentColor"></path></svg></a>
51-
{% if scope.description %}<p>{{ scope.description }}</p>{% endif %}
47+
<!-- TODO: Add screenhots -->
48+
{# <div><img src="" alt="" /></div> #}
49+
<div>
50+
<strong>{{ scope.title }}</strong>
51+
<a href="{{ scope.url }}">{{ scope.url }}</a>
52+
{% if scope.description %}<p>{{ scope.description }}</p>{% endif %}
53+
</div>
5254
</li>
5355
{% endfor %}
54-
</ul>
56+
</ol>
5557
{% endif %}
5658
{% if outOfScope %}
5759
<p>Not in scope:
5860
<ul>
5961
{% for outOfScope in outOfScope %}
6062
<li>
61-
<a href="{{ outOfScope.url }}">{{ outOfScope.title }}<span class="external">(external link)</span> <svg aria-hidden="true" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="14" width="16" style="vertical-align: middle;"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M14 5C13.4477 5 13 4.55228 13 4C13 3.44772 13.4477 3 14 3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4L21 10C21 10.5523 20.5523 11 20 11C19.4477 11 19 10.5523 19 10L19 6.41422L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L17.5858 5H14ZM3 7C3 5.89543 3.89543 5 5 5H10C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7H5V19H17V14C17 13.4477 17.4477 13 18 13C18.5523 13 19 13.4477 19 14V19C19 20.1046 18.1046 21 17 21H5C3.89543 21 3 20.1046 3 19V7Z" fill="currentColor"></path></svg></a>
62-
{% if outOfScope.description %}<p>{{ outOfScope.description }}</p>{% endif %}
63+
<a href="{{ outOfScope.url }}">{{ outOfScope.url }}</a>
64+
{% if outOfScope.description %}<p>{{ outOfScope.description }}</p>{% endif %}
6365
</li>
6466
{% endfor %}
6567
{% endif %}
@@ -92,7 +94,7 @@ layout: base
9294
{% for issue in issueList %}
9395
{% if issue.fileSlug !== page.fileSlug %}
9496
<article class="issue">
95-
<h3 id="{{ issue.data.title | slugify }}" data-issue="Issue" class="issue-title">{{ issue.data.title }}</h3>
97+
<h3 id="{{ issue.data.title | slugify }}" class="issue-title"><span class="number">Issue {{ loop.index }}</span>{{ issue.data.title }}</h3>
9698
{{ issue.templateContent | safe }}
9799

98100
<div class="issue-meta">

‎src/admin/config.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ collections:
1717
- name: body
1818
label: About this report
1919
widget: markdown
20-
- label: Report Data
20+
- label: Report
2121
name: report
2222
file: src/report/index.md
2323
fields:

‎src/admin/previews.js

+17-17
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,17 @@ import slugify from '@sindresorhus/slugify';
44

55
const successCriteria = window.successCriteria;
66

7-
CMS.registerPreviewStyle('/assets/styles/cms.css');
8-
CMS.registerPreviewStyle('/assets/styles/main.css');
97
CMS.registerPreviewStyle('/assets/styles/report.css');
8+
CMS.registerPreviewStyle('/assets/styles/screen.css');
9+
CMS.registerPreviewStyle('/assets/styles/cms.css');
1010

1111
const IssuePreview = createClass({
1212
render() {
1313
const entry = this.props.entry;
1414
return (
1515
<article className='issue'>
1616
<h3 data-issue='Issue' className='issue-title'>
17+
<span className='number'>Issue 1</span>
1718
{entry.getIn(['data', 'title'])}
1819
</h3>
1920
{this.props.widgetFor('body')}
@@ -22,8 +23,8 @@ const IssuePreview = createClass({
2223
<div>
2324
<dt>WCAG Criteria: </dt>
2425
<dd>{entry.getIn(['data', 'sc']).map(sc => (
25-
<a class='wcag-link' href={`https://www.w3.org/WAI/WCAG22/quickref/#${successCriteria[sc].id}`} rel='external'>
26-
{sc} <span class='external'>(external link)</span>
26+
<a className='wcag-link' href={`https://www.w3.org/WAI/WCAG22/quickref/#${successCriteria[sc].id}`} rel='external'>
27+
{sc} <span className='external'>(external link)</span>
2728
<svg aria-hidden='true' role='presentation' focusable='false' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' height='14' width='16'><path xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' d='M14 5C13.4477 5 13 4.55228 13 4C13 3.44772 13.4477 3 14 3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4L21 10C21 10.5523 20.5523 11 20 11C19.4477 11 19 10.5523 19 10L19 6.41422L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L17.5858 5H14ZM3 7C3 5.89543 3.89543 5 5 5H10C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7H5V19H17V14C17 13.4477 17.4477 13 18 13C18.5523 13 19 13.4477 19 14V19C19 20.1046 18.1046 21 17 21H5C3.89543 21 3 20.1046 3 19V7Z' fill='currentColor'></path></svg>
2829
</a>
2930
))}</dd>
@@ -58,7 +59,7 @@ const ReportPreview = createClass({
5859
return (
5960
<>
6061
<section id='start'>
61-
<h1>Accessibility Conformance Report for {entry.getIn(['data', 'title'])}</h1>
62+
<h1>Accessibility Audit for {entry.getIn(['data', 'title'])}</h1>
6263
<dl>
6364
<dt>Evaluated by</dt>
6465
<dd>{entry.getIn(['data', 'evaluators']).join(', ')}</dd>
@@ -80,26 +81,25 @@ const ReportPreview = createClass({
8081
<h2>Scope</h2>
8182
<h3>Pages</h3>
8283
<p>Scope:</p>
83-
<ul>
84+
<ol className='sample-list'>
8485
{this.props.widgetsFor('scope').map((scope, index) => (
8586
<li key={index}>
86-
<a href={scope.getIn(['data', 'url'])} rel='external'>
87-
{scope.getIn(['data', 'title'])} <span class='external'>(external link)</span>
88-
<svg aria-hidden='true' role='presentation' focusable='false' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' height='14' width='16'><path xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' d='M14 5C13.4477 5 13 4.55228 13 4C13 3.44772 13.4477 3 14 3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4L21 10C21 10.5523 20.5523 11 20 11C19.4477 11 19 10.5523 19 10L19 6.41422L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L17.5858 5H14ZM3 7C3 5.89543 3.89543 5 5 5H10C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7H5V19H17V14C17 13.4477 17.4477 13 18 13C18.5523 13 19 13.4477 19 14V19C19 20.1046 18.1046 21 17 21H5C3.89543 21 3 20.1046 3 19V7Z' fill='currentColor'></path></svg>
89-
</a>{scope.getIn(['data', 'description']) ? (
90-
<p>{scope.getIn(['data', 'description'])}</p>
91-
) : ''}
87+
<div>
88+
<strong>{scope.getIn(['data', 'title'])}</strong>
89+
<a href={scope.getIn(['data', 'url'])} rel='external'>{scope.getIn(['data', 'url'])}</a>
90+
{scope.getIn(['data', 'description']) ? (
91+
<p>{scope.getIn(['data', 'description'])}</p>
92+
) : ''}
93+
</div>
9294
</li>
9395
))}
94-
</ul>
96+
</ol>
9597
<p>Not in scope:</p>
9698
<ul>
9799
{this.props.widgetsFor('outOfScope').map((outOfScope, index) => (
98100
<li key={index}>
99-
<a href={outOfScope.getIn(['data', 'url'])} rel='external'>
100-
{outOfScope.getIn(['data', 'title'])} <span class='external'>(external link)</span>
101-
<svg aria-hidden='true' role='presentation' focusable='false' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' height='14' width='16'><path xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' d='M14 5C13.4477 5 13 4.55228 13 4C13 3.44772 13.4477 3 14 3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4L21 10C21 10.5523 20.5523 11 20 11C19.4477 11 19 10.5523 19 10L19 6.41422L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L17.5858 5H14ZM3 7C3 5.89543 3.89543 5 5 5H10C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7H5V19H17V14C17 13.4477 17.4477 13 18 13C18.5523 13 19 13.4477 19 14V19C19 20.1046 18.1046 21 17 21H5C3.89543 21 3 20.1046 3 19V7Z' fill='currentColor'></path></svg>
102-
</a>{outOfScope.getIn(['data', 'description']) ? (
101+
<a href={outOfScope.getIn(['data', 'url'])} rel='external'>{outOfScope.getIn(['data', 'title'])}</a>
102+
{outOfScope.getIn(['data', 'description']) ? (
103103
<p>{outOfScope.getIn(['data', 'description'])}</p>
104104
) : ''}
105105
</li>

‎src/assets/fonts/noto-sans-mono-v30-latin-regular.ttf

21.7 KB
Binary file not shown.

‎src/assets/fonts/noto-sans-mono-v30-latin-regular.woff2

10.6 KB
Binary file not shown.

‎src/assets/fonts/noto-serif-v23-latin-700.ttf

32.7 KB
Binary file not shown.

‎src/assets/fonts/noto-serif-v23-latin-700.woff2

14.6 KB
Binary file not shown.

‎src/assets/fonts/noto-serif-v23-latin-700italic.ttf

35.9 KB
Binary file not shown.

‎src/assets/fonts/noto-serif-v23-latin-700italic.woff2

15.4 KB
Binary file not shown.

‎src/assets/fonts/noto-serif-v23-latin-italic.ttf

35.9 KB
Binary file not shown.

‎src/assets/fonts/noto-serif-v23-latin-italic.woff2

15.3 KB
Binary file not shown.

‎src/assets/fonts/noto-serif-v23-latin-regular.ttf

32.8 KB
Binary file not shown.

‎src/assets/fonts/noto-serif-v23-latin-regular.woff2

14.3 KB
Binary file not shown.

‎src/assets/styles/cms.css

+13
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,16 @@
11
.frame-content {
22
padding: 1.5rem;
33
}
4+
5+
.frame-content pre {
6+
background: #2b2b2b;
7+
padding: 1em;
8+
margin: 0.5em 0;
9+
overflow: auto;
10+
border-radius: 0.3em;
11+
}
12+
13+
.frame-content code[class*='language-'],
14+
.frame-content pre[class*='language-'] {
15+
color: #f8f8f2;
16+
}

‎src/assets/styles/main.css

-30
This file was deleted.

‎src/assets/styles/print.css

+31-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,31 @@
1-
/** TODO: Add print-specific styles. */
1+
body {
2+
font-size: 10pt;
3+
}
4+
5+
.issue {
6+
border: none;
7+
padding: 0;
8+
break-before: page;
9+
}
10+
11+
.issue-meta {
12+
background-color: transparent;
13+
border-top: 2px solid #dcdcdc;
14+
}
15+
16+
.issue-meta div {
17+
margin-bottom: 1em;
18+
}
19+
20+
.issue img {
21+
max-height: 5cm;
22+
}
23+
24+
.wcag-link {
25+
text-decoration: underline;
26+
background-color: transparent;
27+
color: #00e;
28+
padding: 0;
29+
font-size: inherit;
30+
border-radius: 0;
31+
}

0 commit comments

Comments
 (0)