Add platforms card links from home page

Author: derekjohnson

_includes/layout.njk

@@ -9,6 +9,10 @@
       {% include "css/fonts.css" %}
       {% include "css/elements.css" %}
       {% include "css/common.css" %}
+      {% if pageTaxonomy == 'home' %}
+        {% include "css/components/cards-grid.css" %}
+        {% include "css/components/card.css" %}
+      {% endif %}
       {% if pageName == 'platform' %}
         {% include "css/components/cards-grid.css" %}
         {% include "css/components/card.css" %}

_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:hsl(var(--grey-base) 82%);--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%);--focus-outline:hsl(27.9, 100%, 45.5%);--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}a:hover{text-decoration:none}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}aside{background-color:var(--grey-light);margin-block-end:2rem;padding:16px}summary{inline-size:max-content}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)}:focus{outline:3px solid var(--focus-outline)}:focus:not(:focus-visible){outline:0}:focus-visible{outline:3px solid var(--focus-outline)}.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}
+      @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:hsl(var(--grey-base) 82%);--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%);--focus-outline:hsl(27.9, 100%, 45.5%);--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}a:hover{text-decoration:none}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}aside{background-color:var(--grey-light);margin-block-end:2rem;padding:16px}summary{inline-size:max-content}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)}:focus{outline:3px solid var(--focus-outline)}:focus:not(:focus-visible){outline:0}:focus-visible{outline:3px solid var(--focus-outline)}.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}.cards-grid{display:grid;gap:3rem;grid-template-columns:repeat(auto-fill,minmax(30ch,1fr))}.card{border:1px solid var(--grey-medium);border-radius:4px;padding:20px}.card-title{font-size:var(--step-3)}.card-summary{margin:0}
     </style>
   </head>
 
@@ -77,6 +77,18 @@ <h3>Work in the open</h3>
   </li>
 </ul>
 
+<h2>Our platforms</h2>
+
+<div class="cards-grid">
+  
+  
+    <div class="card">
+      <h3 class="card-title"><a href="/standards/">Standards</a></h3>
+      <p class="card-summary">How we build for success.</p>
+    </div>
+  
+</div>
+
 
       </div>
 

_site/standards/index.html

@@ -46,7 +46,7 @@ <h1 class="hero hero--standards"><span class="layout">Our standards platform</sp
 
 
     <div class="card">
-      <h3 class="card-title"><a href="/standards/web-accessibility/">Web accessibility</a></h3>
+      <h2 class="card-title"><a href="/standards/web-accessibility/">Web accessibility</a></h2>
       <p class="card-summary">How we make sure people with disabilities can use our online products.</p>
     </div>
 

index.njk

@@ -3,6 +3,7 @@ layout: layout
 title: Barnardo's online platforms and standards
 desc: The principles guiding the development of our online platforms
 pageTitle: Online platforms & standards
+pageTaxonomy: home
 ---
 
 <p>An <dfn>online platform</dfn> is a set of shared components, tools, functions, services and documentation available for use across the organisation.<p>
@@ -41,3 +42,15 @@ pageTitle: Online platforms & standards
     <p>Educate, collaborate, share, and learn with external communities for the betterment of society. </p>
   </li>
 </ul>
+
+<h2>Our platforms</h2>
+
+<div class="cards-grid">
+  {% set platformsList = collections.platform %}
+  {% for platform in platformsList %}
+    <div class="card">
+      <h3 class="card-title"><a href="/{{ platform.data.permalink }}">{{ platform.data.shortTitle }}</a></h3>
+      <p class="card-summary">{{ platform.data.extract }}</p>
+    </div>
+  {% endfor %}
+</div>

standards/index.njk

@@ -3,9 +3,12 @@ layout: layout
 title: Our standards platform | Barnardo's
 desc: The principles guiding the development of our online platforms
 pageTitle: Our standards platform
+shortTitle: Standards
 pageName: platform
-tags: main
+permalink: standards/
+tags: platform
 heroModifier: hero--standards
+extract: How we build for success.
 ---
 
 <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>
@@ -14,7 +17,7 @@ heroModifier: hero--standards
   {% set standardsList = collections.standard %}
   {% for standard in standardsList %}
     <div class="card">
-      <h3 class="card-title"><a href="/{{ standard.data.permalink }}">{{ standard.data.pageTitle }}</a></h3>
+      <h2 class="card-title"><a href="/{{ standard.data.permalink }}">{{ standard.data.pageTitle }}</a></h2>
       <p class="card-summary">{{ standard.data.extract }}</p>
     </div>
   {% endfor %}