Redesign the large screen layout

Constrain the nav and contribute element to the same width as the related content menu, allowing the main article to stretch the full height of the viewport
dxw · Oct 16, 2023 · a6c6b50 · a6c6b50
1 parent 81bf644
commit a6c6b50
Show file tree

Hide file tree

Showing 10 changed files with 165 additions and 129 deletions.
diff --git a/src/_includes/contribute.html b/src/_includes/contribute.html
@@ -13,9 +13,9 @@
   {% endif %}
 {% endif %}
 
-<footer class="contribute" data-proofer-ignore>
-  <a href="/admin/#/collections/{{ collection_name }}/entries/{{ entry_name }}">Edit this page</a>
+<div class="contribute" data-proofer-ignore>
+  <a href="/admin/#/collections/{{ collection_name }}/entries/{{ entry_name }}">Edit page</a>
   {% unless page.url == "/" %}
-    <a href="/admin/#/collections/{{ collection_name }}/new">Add a new page here</a>
+    <a href="/admin/#/collections/{{ collection_name }}/new">Add new page</a>
   {% endunless %}
-</footer>
+</div>
diff --git a/src/_includes/navbar.html b/src/_includes/navbar.html
@@ -1,14 +1,12 @@
-<header>
-  <nav aria-label="Main" class="navbar">
-    <ul>
-      <li>
-        <a href="/" aria-label="Homepage">
-            <img src="/assets/images/dxw-logo.png" alt="" />
-        </a>
-      </li>
-      <li class="navbar__search">
-        {% include search_form.html %}
-      </li>
-    </ul>
-  </nav>
-</header>
+<nav aria-label="Main" class="navbar">
+  <ul>
+    <li>
+      <a href="/" aria-label="Homepage">
+          <img src="/assets/images/dxw-logo.png" alt="" />
+      </a>
+    </li>
+    <li class="navbar__search">
+      {% include search_form.html %}
+    </li>
+  </ul>
+</nav>
diff --git a/src/_includes/page-content.html b/src/_includes/page-content.html
@@ -3,28 +3,26 @@
 {% capture commit_history_url %}https://github.com/dxw/playbook/commits/main/src/{{ page.path }}{% endcapture %}
 
 <article class="page-content">
-  <div>
-    <h1>{{ page.title }}</h1>
+  <h1>{{ page.title }}</h1>
 
-    {% assign stripped_content = content | strip %}
-    {% if stripped_content == "" %}
-      <ul>
-        {% include related_pages.html %}
-      </ul>
-    {% else %}
-      {% include anchor_headings.html html=content anchorBody="#" anchorAttrs='aria-label="Permalink to %heading%"' %}
+  {% assign stripped_content = content | strip %}
+  {% if stripped_content == "" %}
+    <ul>
+      {% include related_pages.html %}
+    </ul>
+  {% else %}
+    {% include anchor_headings.html html=content anchorBody="#" anchorAttrs='aria-label="Permalink to %heading%"' %}
 
-      <hr>
-
-      <p>
-        <i>
-          {% if last_reviewed_at > last_modified_at %}
-            Last reviewed: {{ page.last_reviewed_at | date: "%-d %B %Y" }}
-            <br>
-          {% endif %}
-          Last updated: {{ page.last_modified_at | date: "%-d %B %Y" }} (<a href="{{ commit_history_url }}">history</a>)
-        </i>
-      </p>    
-    {% endif %}
-  </div>
+    <hr>
+
+    <p id="last-review-and-updated">
+      <i>
+        {% if last_reviewed_at > last_modified_at %}
+          Last reviewed: {{ page.last_reviewed_at | date: "%-d %B %Y" }}
+          <br>
+        {% endif %}
+        Last updated: {{ page.last_modified_at | date: "%-d %B %Y" }} (<a href="{{ commit_history_url }}">history</a>)
+      </i>
+    </p>    
+  {% endif %}
 </article>
diff --git a/src/_layouts/default.html b/src/_layouts/default.html
@@ -25,12 +25,14 @@
     <script defer data-domain="playbook.dxw.com" src="https://plausible.io/js/script.manual.js"></script>
   </head>
   <body>
-    {% include navbar.html %}
-    <main>
+    <header>
+      {% include navbar.html %}
       {% include related.html %}
+      {% include contribute.html %}
+    </header>
+    <main>
       {% include page-content.html %}
     </main>
-    {% include contribute.html %}
     <script src="/assets/js/plausible.js"></script>
   </body>
 </html>
diff --git a/src/_layouts/default_old.html b/src/_layouts/default_old.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8"/>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+/>
+    <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon/favicon-16x16.png">
+    <link rel="manifest" href="/assets/images/favicon/site.webmanifest">
+    <link rel="mask-icon" href="/assets/images/favicon/safari-pinned-tab.svg" color="#5bbad5">
+    <meta name="msapplication-TileColor" content="#243746">
+    <meta name="theme-color" content="#f9f8f5">
+    <title>
+      {% if page.title and page.title != "dxw's Playbook" %}{{ page.title | escape }} - {% endif %}Playbook - dxw
+    </title>
+
+    {% if page.url == "/" %}
+      <script src="/assets/js/redirect.js"></script>
+    {% endif %}
+
+    <link rel="stylesheet" href="/assets/main.css"/>
+    <script defer data-domain="playbook.dxw.com" src="https://plausible.io/js/script.manual.js"></script>
+  </head>
+  <body>
+    {% include navbar.html %}
+    <main>
+      {% include related.html %}
+      {% include page-content.html %}
+    </main>
+    {% include contribute.html %}
+    <script src="/assets/js/plausible.js"></script>
+  </body>
+</html>
diff --git a/src/_sass/_contribute.scss b/src/_sass/_contribute.scss
@@ -3,25 +3,27 @@
 @use "./typography";
 
 .contribute {
-  display: none;
-}
+  @include breakpoints.on-large-screens {
+    position: fixed;
+    bottom: 0;
+    left: 0;
 
-@include breakpoints.on-large-screens {
-  .contribute {
     display: flex;
-    justify-content: space-evenly;
+    justify-content: space-between;
 
-    padding: 0.5em;
+    width: 330px;
+    padding: 27px 18px;
 
     font-family: typography.$heading-font-family;
-    font-size: 1.2em;
+    font-size: 0.9em;
     font-weight: typography.$heading-font-weight;
-    text-align: center;
 
     background-color: colours.$accent-a;
-
+  
     a {
       margin: 0;
     }
   }
+
+  display: none;
 }
diff --git a/src/_sass/_layout.scss b/src/_sass/_layout.scss
@@ -1,19 +1,34 @@
 @use "./breakpoints";
 @use "./navbar";
 
+$large-screen-header-width: 330px;
+
 * {
   box-sizing: border-box;
 }
 
-main {
-  @include breakpoints.on-large-screens {
-    flex-direction: row;
-    height: calc(100vh - navbar.$height-large - 3em);
-    margin-top: navbar.$height-large;
+header {
+  width: 100%;
+}
+
+@include breakpoints.on-large-screens {
+  body {
+    display: flex;
   }
 
-  display: flex;
-  flex-direction: column;
-  height: calc(100vh - navbar.$height);
-  margin-top: navbar.$height;
+  header {
+    position: fixed;
+    top: 0;
+    left: 0;
+
+    width: $large-screen-header-width;
+    height: 100vh;
+  }
+
+  main {
+    flex: 1;
+    height: 100%;
+    min-height: 100vh;  
+    margin-left: $large-screen-header-width;
+  }
 }
diff --git a/src/_sass/_navbar.scss b/src/_sass/_navbar.scss
@@ -6,12 +6,9 @@ $height: 135.008px; // Manually measured after layout.
 $height-large: 85.016px; // Manually measured after layout.
 
 .navbar {
-  position: fixed;
-  z-index: 1;
-  top: 0;
-  right: 0;
-  left: 0;
-
+  display: flex;
+  flex-direction: column;
+  padding: 1em;
   background-color: colours.$navy;
 
   a {
@@ -33,32 +30,18 @@ $height-large: 85.016px; // Manually measured after layout.
   }
 
   > ul {
-    @include breakpoints.on-large-screens {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;  
-    }
-
-    margin: 1em;
+    margin: 0;
     padding: 0;
     list-style: none;
 
     > li {
-      margin-bottom: 0;
+      margin: 0;
 
       &:first-child {
-        margin-right: auto;
+        margin-bottom: 1em;
       }
     }
   }
-
-  &__search {
-    @include breakpoints.on-large-screens {
-      margin-top: 0;
-    }
-
-    margin-top: 1em;
-  }
 }
 
 h1,

diff --git a/src/_sass/_page-content.scss b/src/_sass/_page-content.scss
@@ -2,60 +2,62 @@
 
 @use "./colours";
 
-$font-size: 1em;
-
 .page-content {
   will-change: scroll-position;
   scroll-behavior: smooth;
 
   overflow-y: auto;
-  flex: 1;
-
-  padding: 0.5em 2em 5em;
-
-  font-size: $font-size;
-
-  > div {
-    max-width: 40em;
-    margin: 0 auto;
-
-    > h1,
-    > h2,
-    > h3,
-    > h4,
-    > h5,
-    > h6 {
-      margin-right: -0.5em;
-      margin-left: -0.5em;
-      padding-right: 0.5em;
-      padding-left: 0.5em;
-
-      a {
-        font-size: 0.7em;
-        color: colours.$accent-b;
-        text-decoration: none;
-        vertical-align: middle;
-
-        transition: color 0.2s;
-
-        &:hover,
-        &:focus,
-        &:active {
-          color: colours.$navy;
-        }
-      }
 
-      &:target a {
-        display: none;
+  max-width: 40em;
+  margin: 0 auto;
+  padding: 2em;
+
+  font-size: 1em;
+
+  > h1 {
+    margin-top: 0;
+  }
+
+  > h1,
+  > h2,
+  > h3,
+  > h4,
+  > h5,
+  > h6 {
+    margin-right: -0.5em;
+    margin-left: -0.5em;
+    padding-right: 0.5em;
+    padding-left: 0.5em;
+
+    a {
+      font-size: 0.7em;
+      color: colours.$accent-b;
+      text-decoration: none;
+      vertical-align: middle;
+
+      transition: color 0.2s;
+
+      &:hover,
+      &:focus,
+      &:active {
+        color: colours.$navy;
       }
     }
 
-    :target {
-      background: colours.$yellow-light;
+    &:target a {
+      display: none;
     }
   }
 
+  :target {
+    background: colours.$yellow-light;
+  }
+
   img {
     max-width: 100%;
   }
 }
+
+#last-review-and-updated {
+  margin-bottom: 0;
+}