Add structure and initial content for standards section

Author: derekjohnson

_includes/layout.njk

@@ -21,8 +21,17 @@
       <a href="/" class="logo">{% include 'html/logo.html' %}</a>
     </header>
 
+    <main>
+      <h1 class="hero {{ heroModifier }}"><span class="layout">{{ pageTitle }}</span></h1>
+
+      <div class="layout">
+
     {{ content | safe }}
 
+      </div>
+
+    </main>
+
     <footer>
       <small>© Barnardo’s</small>
     </footer>

_site/index.html

@@ -8,7 +8,7 @@
 
     <!-- feed it through our cssmin filter to minify -->
     <style>
-      @font-face{font-display:swap;font-family:proxima-nova;src:url("../fonts/proximanova-light-webfont.woff2") format("woff2"),url("../fonts/proximanova-light-webfont.woff") format("woff");font-weight:300;font-style:normal}@font-face{font-display:swap;font-family:proxima-nova;src:url("../fonts/proximanova-bold-webfont.woff2") format("woff2"),url("../fonts/proximanova-bold-webfont.woff") format("woff");font-weight:700;font-style:normal}:root{--grey-base:0 0%;--grey-dark:hsl(var(--grey-base) 11%);--grey-medium-light:hsl(var(--grey-base) 91%);--grey-light:hsl(var(--grey-base) 96%);--theme-base:39.1 100%;--theme-medium:hsl(var(--theme-base) 64%);--step--2:clamp(0.79rem, calc(0.79rem + 0.01vw), 0.80rem);--step--1:clamp(0.89rem, calc(0.89rem + 0.13vw), 1.00rem);--step-0:clamp(1.00rem, calc(1.00rem + 0.29vw), 1.25rem);--step-1:clamp(1.13rem, calc(1.13rem + 0.50vw), 1.56rem);--step-2:clamp(1.27rem, calc(1.27rem + 0.79vw), 1.95rem);--step-3:clamp(1.42rem, calc(1.42rem + 1.16vw), 2.44rem);--step-4:clamp(1.60rem, calc(1.60rem + 1.66vw), 3.05rem);--step-5:clamp(1.80rem, calc(1.80rem + 2.30vw), 3.82rem)}html{block-size:100%}body{block-size:100%;color:var(--grey-dark);display:flex;flex-direction:column;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;font-size:var(--step-0);line-height:1.5;margin:0}header{box-shadow:inset 0 -1px 0 0 #e8e8e8;padding:26px 0}img,svg{max-width:100%}main>*{margin-block-end:2rem}h1,h2,h3{font-family:proxima-nova,Helvetica,Arial,sans-serif;line-height:1.2;margin:0 0 2rem}h1{font-size:var(--step-5)}h2{font-size:var(--step-4)}h3{font-size:var(--step-3);margin-block-end:1rem}ol,ul{list-style:none;padding:0}li,p{margin:0 0 2rem;max-inline-size:65ch}footer{background-color:var(--grey-light);border-block-start:4px solid var(--grey-medium-light);margin-block-start:auto;padding:32px 16px}small{font-size:var(--step--1)}.layout{display:block;margin-inline:auto;max-inline-size:87.5rem;inline-size:95vw}.logo{block-size:3.875rem;display:block;inline-size:8.4375rem;max-inline-size:100%}.logo-img{block-size:100%;inline-size:100%}.hero{background:var(--theme-medium);padding:3rem 0}
+      @font-face{font-display:swap;font-family:proxima-nova;src:url("../fonts/proximanova-light-webfont.woff2") format("woff2"),url("../fonts/proximanova-light-webfont.woff") format("woff");font-weight:300;font-style:normal}@font-face{font-display:swap;font-family:proxima-nova;src:url("../fonts/proximanova-bold-webfont.woff2") format("woff2"),url("../fonts/proximanova-bold-webfont.woff") format("woff");font-weight:700;font-style:normal}:root{--grey-base:0 0%;--grey-dark:hsl(var(--grey-base) 11%);--grey-medium-light:hsl(var(--grey-base) 91%);--grey-light:hsl(var(--grey-base) 96%);--yellow-base:39.1 100%;--yellow-medium:hsl(var(--yellow-base) 64%);--blue-base:185.7 100%;--blue-medium:hsl(var(--blue-base) 28%);--step--2:clamp(0.79rem, calc(0.79rem + 0.01vw), 0.80rem);--step--1:clamp(0.89rem, calc(0.89rem + 0.13vw), 1.00rem);--step-0:clamp(1.00rem, calc(1.00rem + 0.29vw), 1.25rem);--step-1:clamp(1.13rem, calc(1.13rem + 0.50vw), 1.56rem);--step-2:clamp(1.27rem, calc(1.27rem + 0.79vw), 1.95rem);--step-3:clamp(1.42rem, calc(1.42rem + 1.16vw), 2.44rem);--step-4:clamp(1.60rem, calc(1.60rem + 1.66vw), 3.05rem);--step-5:clamp(1.80rem, calc(1.80rem + 2.30vw), 3.82rem)}html{block-size:100%}body{block-size:100%;color:var(--grey-dark);display:flex;flex-direction:column;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;font-size:var(--step-0);line-height:1.5;margin:0}header{box-shadow:inset 0 -1px 0 0 #e8e8e8;padding:26px 0}img,svg{max-inline-size:100%}main>*{margin-block-end:2rem}h1,h2,h3{font-family:proxima-nova,Helvetica,Arial,sans-serif;line-height:1.2;margin:0 0 2rem}h1{font-size:var(--step-5)}h2{font-size:var(--step-4)}h3{font-size:var(--step-3);margin-block-end:1rem}ol,ul{list-style:none;padding:0}li,p{margin:0 0 2rem;max-inline-size:65ch}footer{background-color:var(--grey-light);border-block-start:4px solid var(--grey-medium-light);margin-block-start:auto;padding:32px 16px}small{font-size:var(--step--1)}.layout{display:block;margin-inline:auto;max-inline-size:87.5rem;inline-size:95vw}.logo{block-size:3.875rem;display:block;inline-size:8.4375rem;max-inline-size:100%}.logo-img{block-size:100%;inline-size:100%}.hero{background:var(--yellow-medium);padding:3rem 0}.hero--standards{background:var(--blue-medium);color:#fff}
     </style>
   </head>
 
@@ -34,47 +34,50 @@
 </a>
     </header>
 
+    <main>
+      <h1 class="hero "><span class="layout">Online platforms &amp; standards</span></h1>
+
+      <div class="layout">
+
 
-<main>
-  <h1 class="hero"><span class="layout">Online platforms & standards</span></h1>
+<p>An <dfn>online platform</dfn> is a set of shared components, tools, functions, services and documentation available for use across the organisation.<p>
+
+<h2>Our principles</h2>
+<ul role="list">
+  <li>
+    <h3>Prioritise our users over everything else</h3>
+    <p>Some of the most vulnerable people in the UK use Barnardo's websites, often in stressful situations. Do not sacrifice simplicity in their experience for the sake of our own convenience.</p>
+  </li>
+  <li>
+    <h3>Provide the broadest access</h3>
+    <p>An internet connection should be enough to access Barnardo's online. Do not exclude people based on ability, technology, network quality, geographical location, or personal circumstances.</p>
+  </li>
+  <li>
+    <h3>Consider user journeys from start to finish</h3>
+    <p>User experience is how people feel about the prospect of using a product, how they feel while using it, and how they feel about it when they've finished. Design for the whole journey.</p>
+  </li>
+  <li>
+    <h3>Always test with real users</h3>
+    <p>User interface design is where intuition goes to die. Validate ideas with real users and Barnardo's subject matter experts.</p>
+  </li>
+  <li>
+    <h3>Iterate to improve</h3>
+    <p>Good online platforms are an aggregation of marginal gains, over time. What worked yesterday may not work tomorrow. Experimenting, prototyping, and refining are creative endeavours.</p>
+  </li>
+  <li>
+    <h3>Make our brand shine through</h3>
+    <p>Our brand is a powerful tool in our ambition to deliver on our ten-year strategy. It allows us to reach more of those who need us and want to support us, and reinforces trust in us.</p>
+  </li>
+  <li>
+    <h3>Work in the open</h3>
+    <p>Educate, collaborate, share, and learn with external communities for the betterment of society. </p>
+  </li>
+</ul>
 
-  <div class="layout">
-    <p>An <dfn>online platform</dfn> is a set of shared components, tools, functions, services and documentation available for use across the organisation.<p>
 
-    <h2>Our principles</h2>
-    <ul role="list">
-      <li>
-        <h3>Prioritise our users over everything else</h3>
-        <p>Some of the most vulnerable people in the UK use Barnardo's websites, often in stressful situations. Do not sacrifice simplicity in their experience for the sake of our own convenience.</p>
-      </li>
-      <li>
-        <h3>Provide the broadest access</h3>
-        <p>An internet connection should be enough to access Barnardo's online. Do not exclude people based on ability, technology, network quality, geographical location, or personal circumstances.</p>
-      </li>
-      <li>
-        <h3>Consider user journeys from start to finish</h3>
-        <p>User experience is how people feel about the prospect of using a product, how they feel while using it, and how they feel about it when they've finished. Design for the whole journey.</p>
-      </li>
-      <li>
-        <h3>Always test with real users</h3>
-        <p>User interface design is where intuition goes to die. Validate ideas with real users and Barnardo's subject matter experts.</p>
-      </li>
-      <li>
-        <h3>Iterate to improve</h3>
-        <p>Good online platforms are an aggregation of marginal gains, over time. What worked yesterday may not work tomorrow. Experimenting, prototyping, and refining are creative endeavours.</p>
-      </li>
-      <li>
-        <h3>Make our brand shine through</h3>
-        <p>Our brand is a powerful tool in our ambition to deliver on our ten-year strategy. It allows us to reach more of those who need us and want to support us, and reinforces trust in us.</p>
-      </li>
-      <li>
-        <h3>Work in the open</h3>
-        <p>Educate, collaborate, share, and learn with external communities for the betterment of society. </p>
-      </li>
-    </ul>
-  </div>
-</main>
+      </div>
 
+    </main>
 
     <footer>
       <small>© Barnardo’s</small>

_site/standards/index.html

@@ -25,6 +25,11 @@
 
 /* Hero */
 .hero {
-  background: var(--theme-medium);
+  background: var(--yellow-medium);
   padding: 3rem 0;
 }
+
+.hero--standards {
+  background: var(--blue-medium);
+  color: white;
+}

_site/standards/web-accessibility/index.html

@@ -4,8 +4,10 @@
   --grey-dark: hsl(var(--grey-base) 11%);
   --grey-medium-light: hsl(var(--grey-base) 91%);
   --grey-light: hsl(var(--grey-base) 96%);
-  --theme-base: 39.1 100%;
-  --theme-medium: hsl(var(--theme-base) 64%);
+  --yellow-base: 39.1 100%;
+  --yellow-medium: hsl(var(--yellow-base) 64%);
+  --blue-base: 185.7 100%;
+  --blue-medium: hsl(var(--blue-base) 28%);
 
   /* Type
    * @link https://utopia.fyi/type/calculator?c=0,16,1.125,1400,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l
@@ -44,7 +46,7 @@ header {
 
 img,
 svg {
-  max-width: 100%;
+  max-inline-size: 100%;
 }
 
 main > * {

css/common.css

@@ -2,44 +2,39 @@
 layout: layout
 title: Barnardo's online platforms and standards
 desc: The principles guiding the development of our online platforms
+pageTitle: Online platforms & standards
 ---
 
-<main>
-  <h1 class="hero"><span class="layout">Online platforms & standards</span></h1>
+<p>An <dfn>online platform</dfn> is a set of shared components, tools, functions, services and documentation available for use across the organisation.<p>
 
-  <div class="layout">
-    <p>An <dfn>online platform</dfn> is a set of shared components, tools, functions, services and documentation available for use across the organisation.<p>
-
-    <h2>Our principles</h2>
-    <ul role="list">
-      <li>
-        <h3>Prioritise our users over everything else</h3>
-        <p>Some of the most vulnerable people in the UK use Barnardo's websites, often in stressful situations. Do not sacrifice simplicity in their experience for the sake of our own convenience.</p>
-      </li>
-      <li>
-        <h3>Provide the broadest access</h3>
-        <p>An internet connection should be enough to access Barnardo's online. Do not exclude people based on ability, technology, network quality, geographical location, or personal circumstances.</p>
-      </li>
-      <li>
-        <h3>Consider user journeys from start to finish</h3>
-        <p>User experience is how people feel about the prospect of using a product, how they feel while using it, and how they feel about it when they've finished. Design for the whole journey.</p>
-      </li>
-      <li>
-        <h3>Always test with real users</h3>
-        <p>User interface design is where intuition goes to die. Validate ideas with real users and Barnardo's subject matter experts.</p>
-      </li>
-      <li>
-        <h3>Iterate to improve</h3>
-        <p>Good online platforms are an aggregation of marginal gains, over time. What worked yesterday may not work tomorrow. Experimenting, prototyping, and refining are creative endeavours.</p>
-      </li>
-      <li>
-        <h3>Make our brand shine through</h3>
-        <p>Our brand is a powerful tool in our ambition to deliver on our ten-year strategy. It allows us to reach more of those who need us and want to support us, and reinforces trust in us.</p>
-      </li>
-      <li>
-        <h3>Work in the open</h3>
-        <p>Educate, collaborate, share, and learn with external communities for the betterment of society. </p>
-      </li>
-    </ul>
-  </div>
-</main>
+<h2>Our principles</h2>
+<ul role="list">
+  <li>
+    <h3>Prioritise our users over everything else</h3>
+    <p>Some of the most vulnerable people in the UK use Barnardo's websites, often in stressful situations. Do not sacrifice simplicity in their experience for the sake of our own convenience.</p>
+  </li>
+  <li>
+    <h3>Provide the broadest access</h3>
+    <p>An internet connection should be enough to access Barnardo's online. Do not exclude people based on ability, technology, network quality, geographical location, or personal circumstances.</p>
+  </li>
+  <li>
+    <h3>Consider user journeys from start to finish</h3>
+    <p>User experience is how people feel about the prospect of using a product, how they feel while using it, and how they feel about it when they've finished. Design for the whole journey.</p>
+  </li>
+  <li>
+    <h3>Always test with real users</h3>
+    <p>User interface design is where intuition goes to die. Validate ideas with real users and Barnardo's subject matter experts.</p>
+  </li>
+  <li>
+    <h3>Iterate to improve</h3>
+    <p>Good online platforms are an aggregation of marginal gains, over time. What worked yesterday may not work tomorrow. Experimenting, prototyping, and refining are creative endeavours.</p>
+  </li>
+  <li>
+    <h3>Make our brand shine through</h3>
+    <p>Our brand is a powerful tool in our ambition to deliver on our ten-year strategy. It allows us to reach more of those who need us and want to support us, and reinforces trust in us.</p>
+  </li>
+  <li>
+    <h3>Work in the open</h3>
+    <p>Educate, collaborate, share, and learn with external communities for the betterment of society. </p>
+  </li>
+</ul>

css/elements.css

@@ -0,0 +1,29 @@
+---
+layout: layout
+title: Accessibility | Standards as a platform | Barnardo's
+desc: Barnardo's online platforms accessibility standards
+permalink: standards/web-accessibility/
+pageTitle: Web accessibility
+tags: standard
+extract: How we make sure people with disabilities can use our online products.
+heroModifier: hero--standards
+---
+
+It is a legal and moral obligation to make web content and functionality available to people with disabilities. This includes but is not limited to:
+
+- Vision impairment
+- Hearing impairment
+- Cognitive impairment
+- Fine motor control impairment
+- Physical impairment
+- Injury
+- Siezure susceptibility
+- Neurodiversity
+- Motion sickness
+- Reading level
+
+All Barnardo's web pages must achieve [WCAG](https://www.w3.org/TR/WCAG21/) (web content accessibility guidelines) AA conformance throughout, and level AAA conformance where possible.
+
+Automated accessibility tools can pick up some problems, but manual testing is required to meet many success criteria. For example an automated tool cannot check if alternative text is descriptive and relevant.
+
+We recommend [TetraLogical](https://tetralogical.com/) for accessibility testing and reporting if the relevant expertise is not present in the team building your product.

index.njk

@@ -0,0 +1,15 @@
+---
+layout: layout
+title: Standards as a platform | Barnardo's
+desc: The principles guiding the development of our online platforms
+pageTitle: Standards as a platform
+tags: main
+heroModifier: hero--standards
+---
+
+<p>If you are building a Barnardo's online product this is where you'll find the resources to make it to our standards.</p>
+
+{% set standardsList = collections.standard %}
+{% for standard in standardsList %}
+  <h3><a href="/{{ standard.data.permalink }}">{{ standard.data.pageTitle }}</a></h3>
+{% endfor %}

standards/accessibility.md

@@ -0,0 +1,5 @@
+{
+  "tags": [
+    "standardx"
+  ]
+}