Merge pull request #1204 from dxw/new-layout

New layout
dxw · Oct 18, 2023 · ee75fb7 · ee75fb7
2 parents 986ac76 + b8af08a
commit ee75fb7
Show file tree

Hide file tree

Showing 13 changed files with 184 additions and 145 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 in-nav=false %}
+    </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/_includes/related.html b/src/_includes/related.html
@@ -6,12 +6,12 @@
       {% if parent_page %}
         {% unless parent_page.unrelatable %}
           <li class="related__back-link">
-            <a href="{{ parent_page.url }}">ᐊ {{ parent_page.title }}</a>
+            <a href="{{ parent_page.url }}">{{ parent_page.title }}</a>
           </li>
         {% endunless %}
       {% endif %}
 
-      {% include related_pages.html %}
+      {% include related_pages.html in-nav=true %}
     </ul>
   </nav>
 </aside>
diff --git a/src/_includes/related_pages.html b/src/_includes/related_pages.html
@@ -3,7 +3,7 @@
   {% assign related_pages = related_page_group.items | sort_natural: "title" %}
 
   {% for related_page in related_pages %}
-    {% unless related_page.unrelatable %}
+    {% unless related_page.unrelatable or (related_page.title.size == 0) %}
       <li>
         <a href="{{ related_page.url }}">
           {{ related_page.title }}
@@ -12,6 +12,9 @@
     {% endunless %}
   {% endfor %}
 {% endfor %}
+
+{% if include.in-nav %}
   <li>
     <a href="https://www.dxw.com/contact/">Contact dxw</a>
   </li>
+{% endif %}
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/_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: 1em;
 
     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,43 @@
 @use "./breakpoints";
 @use "./navbar";
 
+$large-screen-header-width: 330px;
+
 * {
   box-sizing: border-box;
 }
 
+header {
+  width: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
 main {
-  @include breakpoints.on-large-screens {
+  flex: 1;
+}
+
+@include breakpoints.on-large-screens {
+  body {
     flex-direction: row;
-    height: calc(100vh - navbar.$height-large - 3em);
-    margin-top: navbar.$height-large;
   }
 
-  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 {
+    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;
+}