assets/css/template-styles.css

@@ -15,14 +15,12 @@
     padding: 0;
     box-sizing: border-box;
 }
-html,
+html {
-body {
     font-size: calc(1em + 0.33vw);
     font-family: Arial, Helvetica Neue, sans-serif;
     line-height: 1.5;
     color: #111;
     background-color: #fefefe;
-    overscroll-behavior: none;
 }
 template {
   display: none !important;
@@ -917,6 +915,9 @@ h1 svg {
     .main-and-footer {
         margin: 0;
     }
+    main {
+      min-height: auto;
+    }
     #patterns-list {
       margin-top: 0.5rem;
       border: 1px solid;

assets/js/template-dom-scripts.js

@@ -70,7 +70,7 @@
 
         var link = document.createElement('a');
         link.setAttribute('href', '#' + id);
-        link.innerHTML = '<svg aria-hidden="true" class="link-icon" viewBox="0 0 50 50" focusable="false"> <use href="#link"></use> </svg>';
+        link.innerHTML = '<svg aria-hidden="true" class="link-icon" viewBox="0 0 50 50" focusable="false"> <use xlink:href="#link"></use> </svg>';
 
         container.appendChild(link);
 

layouts/_default/list.html

@@ -20,7 +20,7 @@
             viewBox="0 0 40 50"
             focusable="false"
           >
-            <use href="#bookmark"></use>
+            <use xlink:href="#bookmark"></use>
           </svg>
           {{ .Title }}
         </a>

layouts/_default/terms.html

@@ -7,7 +7,7 @@
           <h2>
             <a href="{{ .Page.RelPermalink }}">
               <svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535" focusable="false">
-                <use href="#tag"></use>
+                <use xlink:href="#tag"></use>
               </svg>
               {{ printf "(%d) %s" .Count .Page.Title }}
             </a>

layouts/partials/nav.html

@@ -2,7 +2,7 @@
   <h2 class="vh">{{ T "nav_main_navigation" }}</h2>
   <button id="menu-button" aria-expanded="false">
     <svg viewBox="0 0 50 50" aria-hidden="true" focusable="false">
-      <use href="#menu"></use>
+      <use xlink:href="#menu"></use>
     </svg>
     {{ T "nav_button_menu" }}
   </button>
@@ -16,7 +16,7 @@
       {{ $active = or $active (and (eq .Name "Tags") (eq $current.Section "tags")) }}
       <a href="{{ .URL }}" {{ if $active }}aria-current="page"{{ end }}>
         <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
-          <use href="#bookmark"></use>
+          <use xlink:href="#bookmark"></use>
         </svg>
         <span class="text">{{ .Name }}</span>
       </a>

layouts/post/single.html

@@ -2,7 +2,7 @@
   <main id="main">
     <h1>
       <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
-        <use href="#bookmark"></use>
+        <use xlink:href="#bookmark"></use>
       </svg>
       {{ .Title }}
     </h1>
@@ -26,7 +26,7 @@
           {{ range . }}
             <li>
               <svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535" focusable="false">
-                <use href="#tag"></use>
+                <use xlink:href="#tag"></use>
               </svg>
               {{ $href := print ("tags/" | relLangURL) (. | urlize) "/" }}
               <a href="{{ $href }}">{{ . }}</a>

layouts/shortcodes/blockquote.html

@@ -5,7 +5,7 @@
     {{ $quote | markdownify }}
     {{ with (.Get "author") }}
       <br>
-      <span class="author">&mdash; {{ . | markdownify }}</span>
+      <span class="author">&mdash; {{ . }}</span>
     {{ end }}
   </p>
 </blockquote>

layouts/shortcodes/note.html

@@ -1,7 +1,7 @@
 <aside aria-label="note" class="note">
   <div>
     <svg class="sign" aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
-      <use href="#info"></use>
+      <use xlink:href="#info"></use>
     </svg>
     {{ .Inner | markdownify }}
   </div>

layouts/shortcodes/principles.html

@@ -9,7 +9,7 @@
         <strong>
           <a href="https://inclusivedesignprinciples.org#{{ .title | urlize }}">
             <svg class="balloon-icon" viewBox="0 0 141.73228 177.16535" aria-hidden="true" focusable="false">
-              <use href="#balloon"></use>
+              <use xlink:href="#balloon"></use>
             </svg>
             {{ .title }}
           </a>:

layouts/shortcodes/tested.html

@@ -5,7 +5,7 @@
   <tr>
     <th scope="row">
       <svg viewBox="0 0 177.16535 177.16535" focusable="false" aria-hidden="true">
-        <use href="#tick"></use>
+        <use xlink:href="#tick"></use>
       </svg>
       Tested using
     </th>

layouts/shortcodes/warning.html

@@ -1,7 +1,7 @@
 <aside aria-label="warning" class="note warning">
   <div>
     <svg class="sign" aria-hidden="true" viewBox="0 0 48.430474 41.646302" focusable="false">
-      <use href="#warning"></use>
+      <use xlink:href="#warning"></use>
     </svg>
     {{ .Inner | markdownify }}
   </div>

layouts/shortcodes/wcag.html

@@ -8,7 +8,7 @@
       <li>
         <strong><a href="{{ .url }}">
           <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true" focusable="false">
-            <use href="#w3c"></use>
+            <use xlink:href="#w3c"></use>
           </svg>
           {{ .ref_id }} {{ .title }}</a> (level {{ .level }}){{ if $descriptions }}:{{ end }}
         </strong>

static/css/prism.css

@@ -1,4 +1,183 @@
-/* PrismJS 1.29.0
+/* PrismJS 1.15.0
-https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+bash+docker+markup-templating+nginx+php+yaml&plugins=line-numbers+file-highlight */
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript&plugins=line-numbers */
-code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;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}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
+/**
-pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: black;
+	background: none;
+	text-shadow: 0 1px white;
+	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-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+@media print {
+	code[class*="language-"],
+	pre[class*="language-"] {
+		text-shadow: none;
+	}
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: slategray;
+}
+
+.token.punctuation {
+	color: #999;
+}
+
+.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: #9a6e3a;
+	background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: #07a;
+}
+
+.token.function,
+.token.class-name {
+	color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+	color: #e90;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+pre[class*="language-"].line-numbers {
+	position: relative;
+	padding-left: 3.8em;
+	counter-reset: linenumber;
+}
+
+pre[class*="language-"].line-numbers > code {
+	position: relative;
+	white-space: inherit;
+}
+
+.line-numbers .line-numbers-rows {
+	position: absolute;
+	pointer-events: none;
+	top: 0;
+	font-size: 100%;
+	left: -3.8em;
+	width: 3em; /* works for line-numbers below 1000 lines */
+	letter-spacing: -1px;
+	border-right: 1px solid #999;
+
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+	.line-numbers-rows > span {
+		pointer-events: none;
+		display: block;
+		counter-increment: linenumber;
+	}
+
+		.line-numbers-rows > span:before {
+			content: counter(linenumber);
+			color: #999;
+			display: block;
+			padding-right: 0.8em;
+			text-align: right;
+		}
+