Update design of documentation site

docs/404.md

@@ -7,4 +7,4 @@ permalink: 404.html
 
 If you entered a web address please check it was correct.
 
-You can browse from [the homepage]({{ "/" | url }}) or use the [sitemap]({{ "/sitemap" | url }}) to find the information you need.
+You can browse from [the homepage](/) or use the [sitemap](/sitemap) to find the information you need.

docs/case-study.md

@@ -3,15 +3,12 @@ layout: sub-navigation
 order: 3
 title: Case study
 description: Learn how keeping a design history helped the DfE’s Becoming a Teacher team document the evolution of their services.
-linkText: Read the case study
 related:
   sections:
     - title: Related content
       items:
         - text: Becoming a teacher design history
           href: https://bat-design-history.netlify.app/
-tags:
-  - homepage
 ---
 
 On the Becoming a teacher team, we've been using a design history to document the evolution of the Find postgraduate teacher training and Apply for teacher training services since they began in May 2018.

docs/directory.md

@@ -2,7 +2,7 @@
 layout: sub-navigation
 order: 6
 title: Directory
-description: Design histories managed using this project.
+description: A list of design histories managed using this project.
 ---
 
 ### Department for Education

docs/index.md

@@ -12,17 +12,18 @@ startButton:
 ---
 
 <div class="govuk-grid-row">
-{% for item in collections["homepage"] | reverse %}
-  <section class="govuk-grid-column-one-half-from-desktop govuk-!-margin-bottom-8">
-    <h2 class="govuk-heading-m govuk-!-font-size-27">{{ item.data.title | smart }}</h2>
+{% for item in collections.homepage %}
+  <section class="govuk-grid-column-one-third-from-desktop govuk-!-margin-bottom-8">
+    <h2 class="govuk-heading-m govuk-!-margin-bottom-2">
+      <a class="govuk-link--no-visited-state" href="{{ item.url }}">{{ item.data.title | smart }}</a>
+    </h2>
     <p class="govuk-body">{{ item.data.description | markdown("inline") }}</p>
-    <p class="govuk-body"><a class="govuk-link govuk-!-font-weight-bold" href="{{ item.url | url }}">{{ item.data.linkText }}</a></p>
   </section>
 {% endfor %}
   <section class="govuk-grid-column-full">
     <hr class="govuk-section-break govuk-section-break--visible govuk-section-break--xl govuk-!-margin-top-0">
-    <h2 class="govuk-heading-m govuk-!-font-size-27">Contribute</h2>
-    <p class="govuk-body">This project is public and contributions are welcome from anyone.</p>
-    <p class="govuk-body"><a class="govuk-link govuk-!-font-weight-bold" href="https://github.com/x-govuk/govuk-design-history-template">View this project on GitHub</a></p>
+    <h2 class="govuk-heading-m">Contribute</h2>
+    <p class="govuk-body">The project repository is public and we welcome contributions from anyone.</p>
+    <p class="govuk-body"><a class="govuk-link govuk-link--no-visited-state" href="https://github.com/x-govuk/govuk-design-history-template">View this project on GitHub</a></p>
   </section>
 </div>

docs/introduction.md

@@ -2,10 +2,7 @@
 layout: sub-navigation
 order: 2
 title: What is a design history?
-description: A design history can help your team log design decisions and create a permanent record of how your service has developed over time.
-linkText: Read the introduction
-tags:
-  - homepage
+description: A design history can help teams log design decisions and create a permanent record of how a service has developed over time.
 ---
 
 When designing and building a service, it can be easy to forget why previous decisions were made, even more so as new people join the team and others leave. A design history can help by creating a permanent record.

docs/sass/_settings.scss

@@ -0,0 +1,6 @@
+$govuk-font-family: system-ui, sans-serif;
+$govuk-brand-colour: #2288aa;
+$govuk-link-colour: #006688;
+$govuk-hover-colour: #004466;
+$govuk-visited-colour: #333366;
+$govuk-page-width: 1100px;

eleventy.config.js

@@ -42,6 +42,17 @@ module.exports = function (eleventyConfig) {
     }
   })
 
+  // Collections
+  eleventyConfig.addCollection('homepage', (collection) =>
+    collection
+      .getFilteredByGlob([
+        'docs/introduction.md',
+        'docs/case-study.md',
+        'docs/directory.md'
+      ])
+      .sort((a, b) => (a.data.order || 0) - (b.data.order || 0))
+  )
+
   // Pass through
   eleventyConfig.addPassthroughCopy('./docs/assets')