diff --git a/static/css/styles.css b/assets/css/template-styles.css
similarity index 98%
rename from static/css/styles.css
rename to assets/css/template-styles.css
index 0e85c92..9624659 100644
--- a/static/css/styles.css
+++ b/assets/css/template-styles.css
@@ -1,7 +1,7 @@
/* Fonts */
@font-face {
font-family: 'Miriam Libre';
- src: url('fonts/miriamlibre-bold.woff2') format('woff2'), url('fonts/miriamlibre-bold.woff') format('woff');
+ src: url('{{ "fonts/miriamlibre-bold.woff2" | absURL }}') format('woff2'), url('{{ "fonts/miriamlibre-bold.woff" | absURL }}') format('woff');
font-weight: bold;
font-style: normal;
}
@@ -490,7 +490,7 @@ caption {
}
.note.warning {
border-left: 0;
- background-image: url(images/stripe.svg);
+ background-image: url({{ "css/images/stripe.svg" | absURL }});
background-size: 0.5rem auto;
background-repeat: repeat-y;
}
@@ -509,7 +509,7 @@ caption {
width: 1rem;
height: 1rem;
margin-right: 0.25rem;
- background-image: url(images/icon-tick.svg);
+ background-image: url({{ "css/images/icon-tick.svg" | absURL }});
background-size: 100% auto;
position: absolute;
left: -1.25rem;
diff --git a/exampleSite/resources/_gen/assets/css/css/template-styles.css_c2e18c145f3470d19843d012c882b388.content b/exampleSite/resources/_gen/assets/css/css/template-styles.css_c2e18c145f3470d19843d012c882b388.content
new file mode 100644
index 0000000..d0a3443
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/css/css/template-styles.css_c2e18c145f3470d19843d012c882b388.content
@@ -0,0 +1,1007 @@
+/* Fonts */
+@font-face {
+ font-family: 'Miriam Libre';
+ src: url('https://example.com/fonts/miriamlibre-bold.woff2') format('woff2'), url('https://example.com/fonts/miriamlibre-bold.woff') format('woff');
+ font-weight: bold;
+ font-style: normal;
+}
+*,
+*::before,
+*::after {
+ font-family: inherit;
+ background-color: inherit;
+ color: inherit;
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+html {
+ font-size: calc(1em + 0.33vw);
+ font-family: Arial, Helvetica Neue, sans-serif;
+ line-height: 1.5;
+ color: #111;
+ background-color: #fefefe;
+}
+template {
+ display: none !important;
+}
+* + * {
+ margin-top: 2.25rem;
+}
+br,
+dt,
+dd,
+th,
+td,
+option,
+[hidden] + *,
+li + li,
+body,
+.main-and-footer {
+ margin-top: 0;
+}
+p + p {
+ margin-top: 0.75rem;
+}
+.priority {
+ margin-top: 0;
+}
+a {
+ text-decoration: none;
+ border-bottom: 1px solid;
+}
+abbr {
+ text-decoration: none;
+ cursor: help;
+ border-bottom: 1px dashed;
+}
+img {
+ max-width: 100%;
+ max-height: 50vh;
+}
+.img-link {
+ border-bottom: none;
+}
+p img {
+ margin: 0.75rem 0;
+}
+figure p img {
+ margin: 0;
+}
+:focus:not([tabindex="-1"]),
+[data-expands]:focus svg,
+.patterns a:focus .text,
+[for="themer"] :focus + [aria-hidden] {
+ outline: 4px solid #999;
+}
+a {
+ outline-offset: 2px;
+}
+
+/* Fix for IE :( */
+[tabindex="-1"]:focus,
+div:not([tabindex]):focus {
+ outline: none;
+}
+[hidden] {
+ display: none;
+}
+
+/* Skip link */
+[href="#main"] {
+ display: block;
+ width: 100%;
+ padding: 0.75rem;
+ color: #fefefe;
+ background: #000;
+ position: absolute;
+ top: -3rem;
+ text-align: center;
+ z-index: 1;
+}
+[href="#main"]:focus {
+ top: 0;
+ outline: none;
+}
+
+/* Text styles */
+h1,
+h2,
+h3,
+h4 {
+ font-family: Miriam Libre, serif;
+ line-height: 1.125;
+}
+h1 {
+ font-size: 2rem;
+}
+h2 {
+ font-size: 1.66rem;
+}
+h3 {
+ font-size: 1.25rem;
+}
+h4,
+h5 {
+ font-size: 1rem;
+ font-family: PT Sans, sans-serif;
+}
+h5 {
+ font-size: 0.85rem;
+ text-transform: uppercase;
+}
+kbd {
+ line-height: 1;
+ font-size: 0.66rem;
+ padding: 0.1rem 0.33rem;
+ border-radius: 0.25rem;
+ border: 2px solid;
+ box-shadow: 0.125rem 0.125rem 0 #111;
+ vertical-align: 0.33em;
+}
+pre,
+.file-tree {
+ overflow-x: auto;
+ padding: 1.5rem;
+ border: 1px solid;
+}
+code {
+ font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+ font-size: 0.85em;
+}
+.cmd {
+ padding: 0.75rem;
+ background: #111;
+}
+.cmd code {
+ color: #fefefe;
+ white-space: nowrap;
+}
+.cmd code::before {
+ content: '$';
+ font-weight: bold;
+ padding-right: 0.25em;
+}
+
+/* Lists */
+main ul,
+main ol {
+ margin-left: 2.25rem;
+}
+main li + li {
+ margin-top: 0.5rem;
+}
+main ul ul, main ol ol, main li ul, main li ol {
+ margin-top: 0.5rem;
+}
+ol ol {
+ list-style: lower-latin;
+}
+ol ol ol {
+ list-style: lower-roman;
+}
+main dt {
+ font-weight: bold;
+}
+main dd {
+ padding-left: 2rem;
+}
+dd ul {
+ margin-left: 0;
+}
+dd li + li {
+ margin: 0;
+}
+
+/* Blockquotes */
+blockquote {
+ border-left: 0.5rem solid;
+ padding-left: 0.75rem;
+}
+blockquote .author {
+ font-size: 0.85rem;
+}
+
+/* Buttons */
+button {
+ font-size: 1.25rem;
+ border-radius: 0.33em;
+ font-family: inherit;
+ background: #111;
+ color: #fefefe;
+ padding: 0.75rem;
+ border: 0;
+}
+[data-launch] {
+ font-size: 0.66rem !important;
+ padding: 0.5rem !important;
+ margin-top: 0 !important;
+ border-radius: 0 !important;
+ border-top-left-radius: 0.33rem !important;
+ box-shadow: none !important;
+ background: #111 !important;
+ color: #fefefe !important;
+ position: absolute !important;
+ right: 0 !important;
+ bottom: 0 !important;
+}
+
+/* Forms */
+label {
+ display: inline-block;
+ font-weight: bold;
+}
+[for="themer"] {
+ background: #111;
+ border-radius: 0.33em;
+ color: #fefefe;
+ padding: 0.25em 0.75em;
+ margin: 0.5rem;
+}
+[for="themer"] [aria-hidden]::before {
+ content: 'off';
+}
+[for="themer"] :checked + [aria-hidden]::before {
+ content: 'on';
+}
+
+/* Tables */
+table {
+ text-align: left;
+ table-layout: fixed;
+ width: 100%;
+ border-collapse: collapse;
+}
+th,
+td {
+ border: 2px solid;
+ padding: 0.5rem;
+ line-height: 1.25;
+ margin: 0;
+}
+th {
+ font-weight: bold;
+}
+th:empty {
+ border: 0;
+}
+
+/* Tested using... table */
+.tested {
+ text-align: center;
+ border: 1px solid #111;
+}
+.tested tr {
+ display: flex;
+ flex-flow: row wrap;
+}
+.tested td, .tested th {
+ vertical-align: middle;
+ overflow: hidden;
+ flex: 1 0 auto;
+ border: 1px solid #111;
+}
+.tested th {
+ width: 100%;
+ background-color: #111;
+ color: #fefefe;
+ outline-color: #111;
+}
+.tested img {
+ max-width: 3rem;
+}
+.tested span {
+ display: block;
+ margin: 0;
+}
+.tested .additional {
+ font-size: 0.85rem;
+}
+caption {
+ font-size: 1.125rem;
+ padding-bottom: 0.25rem;
+ font-style: italic;
+}
+
+/* Page structure */
+.wrapper {
+ position: relative;
+ margin-top: 0;
+ overflow-x: hidden;
+}
+.intro-and-nav {
+ font-size: 0.8rem;
+ width: 15rem;
+ height: 100vh;
+ position: fixed;
+ top: 0;
+ left: 0;
+ border-right: 2px solid;
+}
+.intro-and-nav > div {
+ padding: 2.25rem;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+.intro {
+ flex: 0 0 auto;
+}
+.patterns {
+ flex: 1 1 auto;
+}
+.logo {
+ border: 0;
+}
+.logo img {
+ width: 100%;
+ max-width: 12rem;
+}
+.library-desc {
+ margin-top: 0.5rem;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 25rem;
+}
+.main-and-footer {
+ margin-left: 15rem;
+}
+.main-and-footer > div {
+ max-width: 40rem;
+ margin: 0 auto;
+ padding: 2.25rem;
+}
+[role="contentinfo"] {
+ font-size: 0.85rem;
+ margin-top: 4rem;
+ text-align: center;
+}
+
+/* Patterns navigation */
+.patterns {
+ overflow: auto;
+ margin-top: 1.5rem;
+}
+.patterns * {
+ margin-top: 0;
+}
+.patterns h3 {
+ font-size: 1rem;
+}
+.patterns h3 + ul {
+ margin-top: 0.75rem;
+}
+.patterns li {
+ line-height: 1.125;
+ list-style: none;
+}
+.patterns li + li {
+ margin-top: 0.75rem;
+}
+.patterns ul ul {
+ margin-left: 0.75rem;
+}
+.pattern a {
+ border: 0;
+ display: flex;
+ flex-wrap: nowrap;
+ align-items: baseline;
+ font-weight: bold;
+ padding: 0 1rem;
+}
+.pattern a:focus {
+ outline: none;
+}
+.pattern span {
+ margin-left: 0.125rem;
+}
+
+/* After */
+.pattern [aria-current] {
+ background-color: #111;
+ clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
+ color: #fefefe;
+ padding: 0.5em 1em 0.5em;
+}
+
+/* Menu button */
+#menu-button {
+ display: none;
+ width: 100%;
+ text-align: center;
+}
+#menu-button:focus {
+ outline: none;
+ box-shadow: inset 0 0 0 0.25rem #999;
+}
+
+/* Tables of contents */
+.toc {
+ font-size: 0.85rem;
+ border: 1px solid;
+ padding: 1.5rem;
+}
+.toc h2 {
+ font-size: 1rem;
+}
+.toc ol {
+ margin-left: 0.75rem;
+ margin-top: 0.5rem;
+}
+
+/* Pattern lists */
+.patterns-list {
+ list-style: none;
+ margin-left: 0;
+}
+.patterns-list h2 {
+ font-size: 1.25rem;
+ line-height: 1.6;
+}
+.patterns-list li + li {
+ margin-top: 1rem;
+ padding-top: 1rem;
+ border-top: 2px solid;
+}
+.patterns-list a {
+ border: 0;
+}
+
+/* Tags */
+.tags {
+ margin-top: 0;
+ font-size: 0.85rem;
+}
+.tags * {
+ display: inline;
+ margin: 0;
+}
+.tags strong {
+ margin-right: 0.25rem;
+}
+.tags li {
+ white-space: nowrap;
+ margin: 0 0.25rem 0 0;
+}
+
+/* Date */
+.date {
+ margin-top: 0;
+ font-size: 0.85rem;
+}
+
+/* Notes and warnings */
+.note {
+ border-left: 0.5rem solid;
+ font-size: 0.85rem;
+}
+.note .sign {
+ height: 2.25rem;
+ width: 2.25rem;
+}
+.note > div {
+ margin-left: 0.75rem;
+}
+.note > div > img:first-child {
+ height: 1.5rem;
+}
+.note > div >:first-child + * {
+ margin-top: 0;
+}
+.note.warning {
+ border-left: 0;
+ background-image: url(https://example.com/css/images/stripe.svg);
+ background-size: 0.5rem auto;
+ background-repeat: repeat-y;
+}
+.note.warning > div {
+ margin-left: 1.25rem;
+}
+
+/* Tick lists */
+.ticks li {
+ list-style: none;
+ position: relative;
+}
+.ticks li::before {
+ content: '';
+ display: inline-block;
+ width: 1rem;
+ height: 1rem;
+ margin-right: 0.25rem;
+ background-image: url(https://example.com/css/images/icon-tick.svg);
+ background-size: 100% auto;
+ position: absolute;
+ left: -1.25rem;
+ top: 0.25rem;
+}
+
+/* Figures */
+figure {
+ text-align: center;
+}
+figcaption {
+ font-size: 0.85rem;
+ font-style: italic;
+ margin-top: 0.5rem;
+}
+main {
+ display: block;
+ counter-reset: fig;
+ min-height: 100vh;
+}
+figcaption::before {
+ counter-increment: fig;
+ content: 'Figure ' counter(fig) ':\0020';
+ font-weight: bold;
+}
+
+/* Code blocks */
+pre[class*=language-] {
+ background: none;
+ margin-top: 2.25rem;
+ margin-bottom: 0;
+ overflow-y: hidden;
+ overflow-x: auto;
+}
+code[class*="language-"], pre[class*="language-"] {
+ text-shadow: none;
+ /* filter: grayscale(100%); */
+}
+pre[class*=language-][data-line] {
+ padding: 1em 0 0 2.25rem;
+}
+pre[class*=language-] code * {
+ margin-top: 0 !important;
+}
+[data-codeblock-shortcode], .code-annotated code {
+ display: inline-block;
+ margin-top: -1rem;
+}
+.code-annotated {
+ overflow-y: hidden;
+ overflow-x: auto;
+ padding: 1.5rem;
+ border: 1px solid;
+ white-space: pre;
+ counter-reset: annotation;
+}
+.highlight {
+ background: #ddd;
+ padding: 0.0625rem 0.33rem;
+ border-radius: 0.5rem;
+}
+.numbered .highlight::after,
+.code-annotated.numbered + ol li::before {
+ counter-increment: annotation;
+ content: counter(annotation);
+ font-weight: bold;
+ font-size: 0.5rem;
+ background: #111;
+ color: #fefefe;
+ border-radius: 1rem;
+ margin-left: 0.25rem;
+ padding: 0.125em 0.5em;
+ vertical-align: 0.33em;
+}
+.code-annotated.numbered + ol {
+ list-style: none;
+ counter-reset: annotation;
+}
+.code-annotated.numbered + ol li::before {
+ font-size: 0.66em;
+ margin-right: 0.33em;
+ vertical-align: 0.25em;
+}
+
+/* File tree lists */
+.file-tree {
+ overflow-x: auto;
+}
+.file-tree ul {
+ font-family: Courier, monospace;
+ margin: 0;
+ padding: 0;
+ padding-left: 3rem;
+ list-style: none;
+ line-height: 1.25;
+ position: relative;
+}
+.file-tree > ul {
+ padding-left: 0;
+ overflow-x: auto;
+ overflow-y: hidden;
+}
+.file-tree li {
+ background: #fefefe;
+ position: relative;
+ white-space: nowrap;
+}
+.file-tree li + li {
+ margin-top: 0;
+}
+.file-tree li:not(:last-child) > ul::before {
+ content: '\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020';
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: 1em;
+ white-space: normal;
+}
+.file-tree li::before {
+ content: '\251C\2500\2500\0020';
+}
+.file-tree li:last-child::before {
+ content: '\2514\2500\2500\0020';
+}
+
+/* Expandable sections */
+.expandable-section {
+ border-top: 1px solid;
+ border-bottom: 1px solid;
+ padding: 0.75rem 0;
+}
+[id^="js-expandable-"] {
+ margin: 0;
+ padding: 1.5rem 0 0.75rem;
+}
+@media screen {
+ .expandable-section + .expandable-section {
+ margin-top: 0;
+ border-top: 0;
+ }
+}
+[data-expands] {
+ text-align: left;
+ color: #111;
+ border: 0;
+ background: none;
+ width: 100%;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ cursor: pointer;
+}
+[data-expands] svg {
+ margin-top: 0;
+ width: 1em;
+ height: 1em;
+}
+[data-expands][aria-expanded="true"] svg .up-strut {
+ display: none;
+}
+[data-expands]:focus {
+ outline: none;
+}
+p:empty {
+ display: none;
+}
+*:not(p) + p:empty + p {
+ margin-top: 2.25rem;
+}
+
+/* WCAG and principles */
+.wcag li {
+ font-size: 0.85em;
+}
+.principles p {
+ font-size: 0.85rem;
+ margin-top: 0.75rem;
+}
+.principles.with-desc > li + li,
+.wcag.with-desc > li + li {
+ border-top: 1px solid;
+ margin-top: 0.75rem;
+ padding-top: 0.75rem;
+}
+
+/* Site errors */
+.site-error {
+ padding: 1.5rem;
+ background: #efefef;
+}
+.site-error strong {
+ color: #C83737;
+}
+
+/* SVG icons */
+a svg,
+button svg,
+h1 svg,
+th svg,
+li > svg {
+ height: 0.75em;
+ width: 0.75em;
+ margin-right: 0.25em;
+}
+h1 svg {
+ margin-right: 0;
+ width: 0.85em;
+ height: 0.85em;
+}
+.wcag-icon {
+ width: 1.25em;
+}
+.bookmark-icon {
+ vertical-align: middle;
+}
+.link-icon {
+ width: 0.75em;
+ height: 0.75em;
+}
+.tags svg, .link-icon {
+ vertical-align: middle;
+}
+.balloon-icon {
+ width: 0.75em;
+ margin-right: 0;
+}
+.print {
+ white-space: nowrap;
+ font-style: normal;
+}
+
+/* Color palettes */
+.colors {
+ display: flex;
+ height: 5rem;
+ margin: -0.25rem;
+ list-style: none;
+ flex-wrap: nowrap;
+}
+.colors li {
+ margin: 0.25rem;
+ flex: 1 0 auto;
+ position: relative;
+}
+.colors span {
+ line-height: 1;
+ background-color: #111;
+ color: #fefefe;
+ font-size: 0.75rem;
+ padding: 0.25rem;
+ position: absolute;
+ bottom: 0.25rem;
+ right: 0.25rem;
+}
+
+/* Cross references */
+.pattern-link {
+ font-weight: bold;
+}
+
+/* Inline demos */
+.demo-inner {
+ border-top: 1px solid;
+ border-bottom: 1px solid;
+ padding: 1.5rem 0;
+ position: relative;
+}
+[id^="js-demo-"] {
+ all: initial;
+ display: block;
+}
+
+/* Section links */
+.h2-container {
+ position: relative;
+ font-size: 1.66rem;
+}
+.h2-container a {
+ position: absolute;
+ margin-top: 0;
+ top: 0;
+ line-height: 1;
+ left: -1em;
+ border: 0;
+}
+
+/* Single page layout */
+.wrapper.print-version .main-and-footer {
+ margin-left: 0;
+}
+.wrapper.print-version .intro-and-nav {
+ position: static;
+ border: 0;
+ width: auto;
+ text-align: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.wrapper.print-version main {
+ min-height: 0;
+}
+.wrapper.print-version .library-desc {
+ font-size: 1rem;
+}
+.wrapper.print-version .intro-and-nav > div {
+ height: auto;
+}
+.wrapper.print-version #patterns-list {
+ margin-left: 0;
+ margin-top: 1.5rem;
+ display: block;
+}
+.wrapper.print-version .toc {
+ font-size: 1rem;
+}
+.wrapper.print-version .toc h2 {
+ font-size: 1.66rem;
+}
+.wrapper.print-version #patterns-list h3 {
+ font-size: 1.25rem;
+}
+.wrapper.print-version .patterns {
+ margin-top: 0;
+}
+.pattern-section:not(:last-child) {
+ padding-bottom: 2.25rem;
+ border-bottom: 2px solid;
+}
+.pattern-section h1 {
+ padding: 0 !important;
+}
+
+/* Custom 404 */
+.custom-404 {
+ text-align: center;
+}
+.custom-404 * {
+ margin: 0;
+}
+.custom-404 svg {
+ max-width: 100%;
+}
+
+/* Utilities */
+.vh {
+ clip: rect(1px, 1px, 1px, 1px);
+ height: 1px;
+ overflow: hidden;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+}
+.gallery {
+ display: flex;
+ justify-content: center;
+}
+
+/* Media queries */
+@media screen and (max-width: 45em) {
+ body a {
+ hyphens: auto;
+ }
+ [role="banner"] {
+ position: static;
+ width: auto;
+ height: auto;
+ }
+ .intro {
+ text-align: center;
+ }
+ .intro-and-nav {
+ border-right: none;
+ }
+ .intro-and-nav > div {
+ padding: 1.5rem;
+ }
+ .main-and-footer {
+ margin: 0;
+ }
+ main {
+ min-height: auto;
+ }
+ #patterns-list {
+ margin-top: 0.5rem;
+ border: 1px solid;
+ }
+ .patterns h3 {
+ font-size: 1.5rem;
+ padding: 1.5rem 1rem 0.75rem;
+ }
+ .patterns li:not(.pattern) {
+ margin-top: 0;
+ }
+ .patterns ul ul {
+ margin: 0;
+ }
+ .patterns li {
+ margin-top: 0;
+ }
+ .pattern {
+ font-size: 1rem;
+ }
+ .pattern a {
+ padding: 1rem;
+ }
+ .pattern [aria-current] {
+ clip-path: none;
+ padding: 1rem;
+ }
+ .pattern + .pattern {
+ border-top: 1px solid;
+ margin-top: 0;
+ }
+ #menu-button {
+ display: block;
+ }
+ #patterns-list {
+ display: none;
+ }
+ .toc-link {
+ display: none;
+ }
+ [aria-expanded="true"] + #patterns-list {
+ display: block;
+ }
+ code {
+ word-break: break-all;
+ }
+}
+@media print {
+ .wrapper:not(.print-version) .intro-and-nav,
+ .wrapper:not(.print-version) [role="contentinfo"] {
+ display: none;
+ }
+ .main-and-footer {
+ margin-left: 0;
+ }
+ a {
+ border: 0;
+ }
+ main a::after {
+ content: " (" attr(href) ")";
+ word-break: break-word;
+ }
+ main nav a::after {
+ content: '';
+ }
+ .cmd code {
+ background: #fefefe;
+ color: #111;
+ }
+ pre code {
+ white-space: pre-wrap !important;
+ }
+ .expandable-section {
+ border: 0;
+ padding: 0;
+ }
+ .expandable-section + p {
+ margin-top: 0.75rem;
+ }
+ [id^="js-expandable-"] {
+ display: block;
+ }
+ [data-expands] svg {
+ display: none;
+ }
+ main *:not(.with-desc) {
+ page-break-inside: avoid;
+ }
+ .note.warning {
+ border-left: 0.5rem solid;
+ background: none;
+ }
+}
+@media (-ms-high-contrast: active) {
+ img[src*=".svg"] {
+ background: #fefefe;
+ padding: 0.5rem;
+ }
+ .ticks li::before {
+ content: '✓';
+ background: none;
+ width: auto;
+ top: 0;
+ }
+ .note.warning {
+ border-left: 0.5rem solid;
+ background: none;
+ }
+}
diff --git a/exampleSite/resources/_gen/assets/css/css/template-styles.css_c2e18c145f3470d19843d012c882b388.json b/exampleSite/resources/_gen/assets/css/css/template-styles.css_c2e18c145f3470d19843d012c882b388.json
new file mode 100644
index 0000000..081a4be
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/css/css/template-styles.css_c2e18c145f3470d19843d012c882b388.json
@@ -0,0 +1 @@
+{"Target":"css/styles.css","MediaType":"text/css","Data":{}}
\ No newline at end of file
diff --git a/exampleSite/resources/_gen/assets/css/css/template-styles.css_d82dafa2c751a55e29309a399c28a382.content b/exampleSite/resources/_gen/assets/css/css/template-styles.css_d82dafa2c751a55e29309a399c28a382.content
new file mode 100644
index 0000000..eb17543
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/css/css/template-styles.css_d82dafa2c751a55e29309a399c28a382.content
@@ -0,0 +1,1007 @@
+/* Fonts */
+@font-face {
+ font-family: 'Miriam Libre';
+ src: url('http://localhost:1313/fonts/miriamlibre-bold.woff2') format('woff2'), url('http://localhost:1313/fonts/miriamlibre-bold.woff') format('woff');
+ font-weight: bold;
+ font-style: normal;
+}
+*,
+*::before,
+*::after {
+ font-family: inherit;
+ background-color: inherit;
+ color: inherit;
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+html {
+ font-size: calc(1em + 0.33vw);
+ font-family: Arial, Helvetica Neue, sans-serif;
+ line-height: 1.5;
+ color: #111;
+ background-color: #fefefe;
+}
+template {
+ display: none !important;
+}
+* + * {
+ margin-top: 2.25rem;
+}
+br,
+dt,
+dd,
+th,
+td,
+option,
+[hidden] + *,
+li + li,
+body,
+.main-and-footer {
+ margin-top: 0;
+}
+p + p {
+ margin-top: 0.75rem;
+}
+.priority {
+ margin-top: 0;
+}
+a {
+ text-decoration: none;
+ border-bottom: 1px solid;
+}
+abbr {
+ text-decoration: none;
+ cursor: help;
+ border-bottom: 1px dashed;
+}
+img {
+ max-width: 100%;
+ max-height: 50vh;
+}
+.img-link {
+ border-bottom: none;
+}
+p img {
+ margin: 0.75rem 0;
+}
+figure p img {
+ margin: 0;
+}
+:focus:not([tabindex="-1"]),
+[data-expands]:focus svg,
+.patterns a:focus .text,
+[for="themer"] :focus + [aria-hidden] {
+ outline: 4px solid #999;
+}
+a {
+ outline-offset: 2px;
+}
+
+/* Fix for IE :( */
+[tabindex="-1"]:focus,
+div:not([tabindex]):focus {
+ outline: none;
+}
+[hidden] {
+ display: none;
+}
+
+/* Skip link */
+[href="#main"] {
+ display: block;
+ width: 100%;
+ padding: 0.75rem;
+ color: #fefefe;
+ background: #000;
+ position: absolute;
+ top: -3rem;
+ text-align: center;
+ z-index: 1;
+}
+[href="#main"]:focus {
+ top: 0;
+ outline: none;
+}
+
+/* Text styles */
+h1,
+h2,
+h3,
+h4 {
+ font-family: Miriam Libre, serif;
+ line-height: 1.125;
+}
+h1 {
+ font-size: 2rem;
+}
+h2 {
+ font-size: 1.66rem;
+}
+h3 {
+ font-size: 1.25rem;
+}
+h4,
+h5 {
+ font-size: 1rem;
+ font-family: PT Sans, sans-serif;
+}
+h5 {
+ font-size: 0.85rem;
+ text-transform: uppercase;
+}
+kbd {
+ line-height: 1;
+ font-size: 0.66rem;
+ padding: 0.1rem 0.33rem;
+ border-radius: 0.25rem;
+ border: 2px solid;
+ box-shadow: 0.125rem 0.125rem 0 #111;
+ vertical-align: 0.33em;
+}
+pre,
+.file-tree {
+ overflow-x: auto;
+ padding: 1.5rem;
+ border: 1px solid;
+}
+code {
+ font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+ font-size: 0.85em;
+}
+.cmd {
+ padding: 0.75rem;
+ background: #111;
+}
+.cmd code {
+ color: #fefefe;
+ white-space: nowrap;
+}
+.cmd code::before {
+ content: '$';
+ font-weight: bold;
+ padding-right: 0.25em;
+}
+
+/* Lists */
+main ul,
+main ol {
+ margin-left: 2.25rem;
+}
+main li + li {
+ margin-top: 0.5rem;
+}
+main ul ul, main ol ol, main li ul, main li ol {
+ margin-top: 0.5rem;
+}
+ol ol {
+ list-style: lower-latin;
+}
+ol ol ol {
+ list-style: lower-roman;
+}
+main dt {
+ font-weight: bold;
+}
+main dd {
+ padding-left: 2rem;
+}
+dd ul {
+ margin-left: 0;
+}
+dd li + li {
+ margin: 0;
+}
+
+/* Blockquotes */
+blockquote {
+ border-left: 0.5rem solid;
+ padding-left: 0.75rem;
+}
+blockquote .author {
+ font-size: 0.85rem;
+}
+
+/* Buttons */
+button {
+ font-size: 1.25rem;
+ border-radius: 0.33em;
+ font-family: inherit;
+ background: #111;
+ color: #fefefe;
+ padding: 0.75rem;
+ border: 0;
+}
+[data-launch] {
+ font-size: 0.66rem !important;
+ padding: 0.5rem !important;
+ margin-top: 0 !important;
+ border-radius: 0 !important;
+ border-top-left-radius: 0.33rem !important;
+ box-shadow: none !important;
+ background: #111 !important;
+ color: #fefefe !important;
+ position: absolute !important;
+ right: 0 !important;
+ bottom: 0 !important;
+}
+
+/* Forms */
+label {
+ display: inline-block;
+ font-weight: bold;
+}
+[for="themer"] {
+ background: #111;
+ border-radius: 0.33em;
+ color: #fefefe;
+ padding: 0.25em 0.75em;
+ margin: 0.5rem;
+}
+[for="themer"] [aria-hidden]::before {
+ content: 'off';
+}
+[for="themer"] :checked + [aria-hidden]::before {
+ content: 'on';
+}
+
+/* Tables */
+table {
+ text-align: left;
+ table-layout: fixed;
+ width: 100%;
+ border-collapse: collapse;
+}
+th,
+td {
+ border: 2px solid;
+ padding: 0.5rem;
+ line-height: 1.25;
+ margin: 0;
+}
+th {
+ font-weight: bold;
+}
+th:empty {
+ border: 0;
+}
+
+/* Tested using... table */
+.tested {
+ text-align: center;
+ border: 1px solid #111;
+}
+.tested tr {
+ display: flex;
+ flex-flow: row wrap;
+}
+.tested td, .tested th {
+ vertical-align: middle;
+ overflow: hidden;
+ flex: 1 0 auto;
+ border: 1px solid #111;
+}
+.tested th {
+ width: 100%;
+ background-color: #111;
+ color: #fefefe;
+ outline-color: #111;
+}
+.tested img {
+ max-width: 3rem;
+}
+.tested span {
+ display: block;
+ margin: 0;
+}
+.tested .additional {
+ font-size: 0.85rem;
+}
+caption {
+ font-size: 1.125rem;
+ padding-bottom: 0.25rem;
+ font-style: italic;
+}
+
+/* Page structure */
+.wrapper {
+ position: relative;
+ margin-top: 0;
+ overflow-x: hidden;
+}
+.intro-and-nav {
+ font-size: 0.8rem;
+ width: 15rem;
+ height: 100vh;
+ position: fixed;
+ top: 0;
+ left: 0;
+ border-right: 2px solid;
+}
+.intro-and-nav > div {
+ padding: 2.25rem;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+.intro {
+ flex: 0 0 auto;
+}
+.patterns {
+ flex: 1 1 auto;
+}
+.logo {
+ border: 0;
+}
+.logo img {
+ width: 100%;
+ max-width: 12rem;
+}
+.library-desc {
+ margin-top: 0.5rem;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 25rem;
+}
+.main-and-footer {
+ margin-left: 15rem;
+}
+.main-and-footer > div {
+ max-width: 40rem;
+ margin: 0 auto;
+ padding: 2.25rem;
+}
+[role="contentinfo"] {
+ font-size: 0.85rem;
+ margin-top: 4rem;
+ text-align: center;
+}
+
+/* Patterns navigation */
+.patterns {
+ overflow: auto;
+ margin-top: 1.5rem;
+}
+.patterns * {
+ margin-top: 0;
+}
+.patterns h3 {
+ font-size: 1rem;
+}
+.patterns h3 + ul {
+ margin-top: 0.75rem;
+}
+.patterns li {
+ line-height: 1.125;
+ list-style: none;
+}
+.patterns li + li {
+ margin-top: 0.75rem;
+}
+.patterns ul ul {
+ margin-left: 0.75rem;
+}
+.pattern a {
+ border: 0;
+ display: flex;
+ flex-wrap: nowrap;
+ align-items: baseline;
+ font-weight: bold;
+ padding: 0 1rem;
+}
+.pattern a:focus {
+ outline: none;
+}
+.pattern span {
+ margin-left: 0.125rem;
+}
+
+/* After */
+.pattern [aria-current] {
+ background-color: #111;
+ clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
+ color: #fefefe;
+ padding: 0.5em 1em 0.5em;
+}
+
+/* Menu button */
+#menu-button {
+ display: none;
+ width: 100%;
+ text-align: center;
+}
+#menu-button:focus {
+ outline: none;
+ box-shadow: inset 0 0 0 0.25rem #999;
+}
+
+/* Tables of contents */
+.toc {
+ font-size: 0.85rem;
+ border: 1px solid;
+ padding: 1.5rem;
+}
+.toc h2 {
+ font-size: 1rem;
+}
+.toc ol {
+ margin-left: 0.75rem;
+ margin-top: 0.5rem;
+}
+
+/* Pattern lists */
+.patterns-list {
+ list-style: none;
+ margin-left: 0;
+}
+.patterns-list h2 {
+ font-size: 1.25rem;
+ line-height: 1.6;
+}
+.patterns-list li + li {
+ margin-top: 1rem;
+ padding-top: 1rem;
+ border-top: 2px solid;
+}
+.patterns-list a {
+ border: 0;
+}
+
+/* Tags */
+.tags {
+ margin-top: 0;
+ font-size: 0.85rem;
+}
+.tags * {
+ display: inline;
+ margin: 0;
+}
+.tags strong {
+ margin-right: 0.25rem;
+}
+.tags li {
+ white-space: nowrap;
+ margin: 0 0.25rem 0 0;
+}
+
+/* Date */
+.date {
+ margin-top: 0;
+ font-size: 0.85rem;
+}
+
+/* Notes and warnings */
+.note {
+ border-left: 0.5rem solid;
+ font-size: 0.85rem;
+}
+.note .sign {
+ height: 2.25rem;
+ width: 2.25rem;
+}
+.note > div {
+ margin-left: 0.75rem;
+}
+.note > div > img:first-child {
+ height: 1.5rem;
+}
+.note > div >:first-child + * {
+ margin-top: 0;
+}
+.note.warning {
+ border-left: 0;
+ background-image: url(http://localhost:1313/images/stripe.svg);
+ background-size: 0.5rem auto;
+ background-repeat: repeat-y;
+}
+.note.warning > div {
+ margin-left: 1.25rem;
+}
+
+/* Tick lists */
+.ticks li {
+ list-style: none;
+ position: relative;
+}
+.ticks li::before {
+ content: '';
+ display: inline-block;
+ width: 1rem;
+ height: 1rem;
+ margin-right: 0.25rem;
+ background-image: url(http://localhost:1313/images/icon-tick.svg);
+ background-size: 100% auto;
+ position: absolute;
+ left: -1.25rem;
+ top: 0.25rem;
+}
+
+/* Figures */
+figure {
+ text-align: center;
+}
+figcaption {
+ font-size: 0.85rem;
+ font-style: italic;
+ margin-top: 0.5rem;
+}
+main {
+ display: block;
+ counter-reset: fig;
+ min-height: 100vh;
+}
+figcaption::before {
+ counter-increment: fig;
+ content: 'Figure ' counter(fig) ':\0020';
+ font-weight: bold;
+}
+
+/* Code blocks */
+pre[class*=language-] {
+ background: none;
+ margin-top: 2.25rem;
+ margin-bottom: 0;
+ overflow-y: hidden;
+ overflow-x: auto;
+}
+code[class*="language-"], pre[class*="language-"] {
+ text-shadow: none;
+ /* filter: grayscale(100%); */
+}
+pre[class*=language-][data-line] {
+ padding: 1em 0 0 2.25rem;
+}
+pre[class*=language-] code * {
+ margin-top: 0 !important;
+}
+[data-codeblock-shortcode], .code-annotated code {
+ display: inline-block;
+ margin-top: -1rem;
+}
+.code-annotated {
+ overflow-y: hidden;
+ overflow-x: auto;
+ padding: 1.5rem;
+ border: 1px solid;
+ white-space: pre;
+ counter-reset: annotation;
+}
+.highlight {
+ background: #ddd;
+ padding: 0.0625rem 0.33rem;
+ border-radius: 0.5rem;
+}
+.numbered .highlight::after,
+.code-annotated.numbered + ol li::before {
+ counter-increment: annotation;
+ content: counter(annotation);
+ font-weight: bold;
+ font-size: 0.5rem;
+ background: #111;
+ color: #fefefe;
+ border-radius: 1rem;
+ margin-left: 0.25rem;
+ padding: 0.125em 0.5em;
+ vertical-align: 0.33em;
+}
+.code-annotated.numbered + ol {
+ list-style: none;
+ counter-reset: annotation;
+}
+.code-annotated.numbered + ol li::before {
+ font-size: 0.66em;
+ margin-right: 0.33em;
+ vertical-align: 0.25em;
+}
+
+/* File tree lists */
+.file-tree {
+ overflow-x: auto;
+}
+.file-tree ul {
+ font-family: Courier, monospace;
+ margin: 0;
+ padding: 0;
+ padding-left: 3rem;
+ list-style: none;
+ line-height: 1.25;
+ position: relative;
+}
+.file-tree > ul {
+ padding-left: 0;
+ overflow-x: auto;
+ overflow-y: hidden;
+}
+.file-tree li {
+ background: #fefefe;
+ position: relative;
+ white-space: nowrap;
+}
+.file-tree li + li {
+ margin-top: 0;
+}
+.file-tree li:not(:last-child) > ul::before {
+ content: '\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020';
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: 1em;
+ white-space: normal;
+}
+.file-tree li::before {
+ content: '\251C\2500\2500\0020';
+}
+.file-tree li:last-child::before {
+ content: '\2514\2500\2500\0020';
+}
+
+/* Expandable sections */
+.expandable-section {
+ border-top: 1px solid;
+ border-bottom: 1px solid;
+ padding: 0.75rem 0;
+}
+[id^="js-expandable-"] {
+ margin: 0;
+ padding: 1.5rem 0 0.75rem;
+}
+@media screen {
+ .expandable-section + .expandable-section {
+ margin-top: 0;
+ border-top: 0;
+ }
+}
+[data-expands] {
+ text-align: left;
+ color: #111;
+ border: 0;
+ background: none;
+ width: 100%;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ cursor: pointer;
+}
+[data-expands] svg {
+ margin-top: 0;
+ width: 1em;
+ height: 1em;
+}
+[data-expands][aria-expanded="true"] svg .up-strut {
+ display: none;
+}
+[data-expands]:focus {
+ outline: none;
+}
+p:empty {
+ display: none;
+}
+*:not(p) + p:empty + p {
+ margin-top: 2.25rem;
+}
+
+/* WCAG and principles */
+.wcag li {
+ font-size: 0.85em;
+}
+.principles p {
+ font-size: 0.85rem;
+ margin-top: 0.75rem;
+}
+.principles.with-desc > li + li,
+.wcag.with-desc > li + li {
+ border-top: 1px solid;
+ margin-top: 0.75rem;
+ padding-top: 0.75rem;
+}
+
+/* Site errors */
+.site-error {
+ padding: 1.5rem;
+ background: #efefef;
+}
+.site-error strong {
+ color: #C83737;
+}
+
+/* SVG icons */
+a svg,
+button svg,
+h1 svg,
+th svg,
+li > svg {
+ height: 0.75em;
+ width: 0.75em;
+ margin-right: 0.25em;
+}
+h1 svg {
+ margin-right: 0;
+ width: 0.85em;
+ height: 0.85em;
+}
+.wcag-icon {
+ width: 1.25em;
+}
+.bookmark-icon {
+ vertical-align: middle;
+}
+.link-icon {
+ width: 0.75em;
+ height: 0.75em;
+}
+.tags svg, .link-icon {
+ vertical-align: middle;
+}
+.balloon-icon {
+ width: 0.75em;
+ margin-right: 0;
+}
+.print {
+ white-space: nowrap;
+ font-style: normal;
+}
+
+/* Color palettes */
+.colors {
+ display: flex;
+ height: 5rem;
+ margin: -0.25rem;
+ list-style: none;
+ flex-wrap: nowrap;
+}
+.colors li {
+ margin: 0.25rem;
+ flex: 1 0 auto;
+ position: relative;
+}
+.colors span {
+ line-height: 1;
+ background-color: #111;
+ color: #fefefe;
+ font-size: 0.75rem;
+ padding: 0.25rem;
+ position: absolute;
+ bottom: 0.25rem;
+ right: 0.25rem;
+}
+
+/* Cross references */
+.pattern-link {
+ font-weight: bold;
+}
+
+/* Inline demos */
+.demo-inner {
+ border-top: 1px solid;
+ border-bottom: 1px solid;
+ padding: 1.5rem 0;
+ position: relative;
+}
+[id^="js-demo-"] {
+ all: initial;
+ display: block;
+}
+
+/* Section links */
+.h2-container {
+ position: relative;
+ font-size: 1.66rem;
+}
+.h2-container a {
+ position: absolute;
+ margin-top: 0;
+ top: 0;
+ line-height: 1;
+ left: -1em;
+ border: 0;
+}
+
+/* Single page layout */
+.wrapper.print-version .main-and-footer {
+ margin-left: 0;
+}
+.wrapper.print-version .intro-and-nav {
+ position: static;
+ border: 0;
+ width: auto;
+ text-align: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.wrapper.print-version main {
+ min-height: 0;
+}
+.wrapper.print-version .library-desc {
+ font-size: 1rem;
+}
+.wrapper.print-version .intro-and-nav > div {
+ height: auto;
+}
+.wrapper.print-version #patterns-list {
+ margin-left: 0;
+ margin-top: 1.5rem;
+ display: block;
+}
+.wrapper.print-version .toc {
+ font-size: 1rem;
+}
+.wrapper.print-version .toc h2 {
+ font-size: 1.66rem;
+}
+.wrapper.print-version #patterns-list h3 {
+ font-size: 1.25rem;
+}
+.wrapper.print-version .patterns {
+ margin-top: 0;
+}
+.pattern-section:not(:last-child) {
+ padding-bottom: 2.25rem;
+ border-bottom: 2px solid;
+}
+.pattern-section h1 {
+ padding: 0 !important;
+}
+
+/* Custom 404 */
+.custom-404 {
+ text-align: center;
+}
+.custom-404 * {
+ margin: 0;
+}
+.custom-404 svg {
+ max-width: 100%;
+}
+
+/* Utilities */
+.vh {
+ clip: rect(1px, 1px, 1px, 1px);
+ height: 1px;
+ overflow: hidden;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+}
+.gallery {
+ display: flex;
+ justify-content: center;
+}
+
+/* Media queries */
+@media screen and (max-width: 45em) {
+ body a {
+ hyphens: auto;
+ }
+ [role="banner"] {
+ position: static;
+ width: auto;
+ height: auto;
+ }
+ .intro {
+ text-align: center;
+ }
+ .intro-and-nav {
+ border-right: none;
+ }
+ .intro-and-nav > div {
+ padding: 1.5rem;
+ }
+ .main-and-footer {
+ margin: 0;
+ }
+ main {
+ min-height: auto;
+ }
+ #patterns-list {
+ margin-top: 0.5rem;
+ border: 1px solid;
+ }
+ .patterns h3 {
+ font-size: 1.5rem;
+ padding: 1.5rem 1rem 0.75rem;
+ }
+ .patterns li:not(.pattern) {
+ margin-top: 0;
+ }
+ .patterns ul ul {
+ margin: 0;
+ }
+ .patterns li {
+ margin-top: 0;
+ }
+ .pattern {
+ font-size: 1rem;
+ }
+ .pattern a {
+ padding: 1rem;
+ }
+ .pattern [aria-current] {
+ clip-path: none;
+ padding: 1rem;
+ }
+ .pattern + .pattern {
+ border-top: 1px solid;
+ margin-top: 0;
+ }
+ #menu-button {
+ display: block;
+ }
+ #patterns-list {
+ display: none;
+ }
+ .toc-link {
+ display: none;
+ }
+ [aria-expanded="true"] + #patterns-list {
+ display: block;
+ }
+ code {
+ word-break: break-all;
+ }
+}
+@media print {
+ .wrapper:not(.print-version) .intro-and-nav,
+ .wrapper:not(.print-version) [role="contentinfo"] {
+ display: none;
+ }
+ .main-and-footer {
+ margin-left: 0;
+ }
+ a {
+ border: 0;
+ }
+ main a::after {
+ content: " (" attr(href) ")";
+ word-break: break-word;
+ }
+ main nav a::after {
+ content: '';
+ }
+ .cmd code {
+ background: #fefefe;
+ color: #111;
+ }
+ pre code {
+ white-space: pre-wrap !important;
+ }
+ .expandable-section {
+ border: 0;
+ padding: 0;
+ }
+ .expandable-section + p {
+ margin-top: 0.75rem;
+ }
+ [id^="js-expandable-"] {
+ display: block;
+ }
+ [data-expands] svg {
+ display: none;
+ }
+ main *:not(.with-desc) {
+ page-break-inside: avoid;
+ }
+ .note.warning {
+ border-left: 0.5rem solid;
+ background: none;
+ }
+}
+@media (-ms-high-contrast: active) {
+ img[src*=".svg"] {
+ background: #fefefe;
+ padding: 0.5rem;
+ }
+ .ticks li::before {
+ content: '✓';
+ background: none;
+ width: auto;
+ top: 0;
+ }
+ .note.warning {
+ border-left: 0.5rem solid;
+ background: none;
+ }
+}
diff --git a/exampleSite/resources/_gen/assets/css/css/template-styles.css_d82dafa2c751a55e29309a399c28a382.json b/exampleSite/resources/_gen/assets/css/css/template-styles.css_d82dafa2c751a55e29309a399c28a382.json
new file mode 100644
index 0000000..e7b8e7c
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/css/css/template-styles.css_d82dafa2c751a55e29309a399c28a382.json
@@ -0,0 +1 @@
+{"Target":"styles.css","MediaType":"text/css","Data":{}}
\ No newline at end of file
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index f2f1f44..4a746d6 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -15,7 +15,10 @@
-
+
+ {{ $templateStyles := resources.Get "css/template-styles.css" }}
+ {{ $styles := $templateStyles | resources.ExecuteAsTemplate "css/styles.css" . }}
+