fix: interaction styles for navigation bar and footer links (#642)

package.json

@@ -60,7 +60,7 @@
     "@11ty/eleventy-navigation": "0.3.5",
     "@11ty/eleventy-plugin-rss": "1.2.0",
     "d3-selection": "3.0.0",
-    "eleventy-plugin-fluid": "1.0.1",
+    "eleventy-plugin-fluid": "1.0.2",
     "eleventy-plugin-i18n-gettext": "^1.5.1",
     "eleventy-plugin-pwa": "1.0.8",
     "eleventy-plugin-sharp": "0.1.1",

src/_includes/layouts/404.njk

@@ -3,8 +3,8 @@
 {% set pageType = 'page--404' %}
 
 {% block content %}
+    {% include 'partials/components/page-header.njk' %}
     <article>
-        {% include 'partials/components/page-header.njk' %}
         <div class="content">
             <div class="wrapper">
             {{ content | safe }}

src/_includes/layouts/history.njk

@@ -7,8 +7,8 @@
 {% set pageType = 'page--generic' %}
 
 {% block content %}
+    {% include 'partials/components/page-header.njk' %}
     <article>
-        {% include 'partials/components/page-header.njk' %}
         <div class="content">
             <div class="wrapper">
                 {{ content | safe }}

src/_includes/layouts/home.njk

@@ -7,8 +7,8 @@
 {% set pageType = 'page--home' %}
 
 {% block content %}
+    {% include 'partials/components/page-header.njk' %}
     <article>
-        {% include 'partials/components/page-header.njk' %}
         {%- if sections %}
             {%- for section in sections %}
             {% include 'partials/components/section.njk' %}

src/_includes/layouts/ideas.njk

@@ -7,8 +7,8 @@
 {% set pageType = 'page--ideas' %}
 
 {% block content %}
+    {% include 'partials/components/page-header.njk' %}
     <article>
-        {% include 'partials/components/page-header.njk' %}
         <div class="content">
             <div class="wrapper">
             {% if pagination.pageNumber == 0 %}

src/_includes/layouts/news.njk

@@ -7,8 +7,8 @@
 {% set pageType = 'page--news' %}
 
 {% block content %}
+    {% include 'partials/components/page-header.njk' %}
     <article>
-        {% include 'partials/components/page-header.njk' %}
         <div class="content">
             <div class="wrapper">
             {% if posts.length %}

src/_includes/layouts/page--team.njk

@@ -7,8 +7,8 @@
 {% set pageType = 'page--team' %}
 
 {% block content %}
+    {% include 'partials/components/page-header.njk' %}
     <article>
-        {% include 'partials/components/page-header.njk' %}
         <div class="content">
             <div class="wrapper">
                 <div class="people">

src/_includes/layouts/page.njk

@@ -7,8 +7,8 @@
 {% set pageType = 'page--generic' %}
 
 {% block content %}
+    {% include 'partials/components/page-header.njk' %}
     <article>
-        {% include 'partials/components/page-header.njk' %}
         {%- if sections and sections.length > 0 %}
             {%- for section in sections %}
             {% include 'partials/components/section.njk' %}

src/_includes/layouts/project.njk

@@ -7,10 +7,10 @@
 {% set pageType = 'page--project' %}
 
 {% block content %}
+    {% include 'partials/components/page-header.njk' %}
     <article>
         {% set articleTitle = title %}
         {% set title = projectName %}
-        {% include 'partials/components/page-header.njk' %}
 
         {% set parentPages = collections.all | eleventyNavigationBreadcrumb(articleTitle) %}
 

src/_includes/layouts/projects.njk

@@ -7,8 +7,8 @@
 {% set pageType = 'page--projects' %}
 
 {% block content %}
+    {% include 'partials/components/page-header.njk' %}
     <article>
-        {% include 'partials/components/page-header.njk' %}
         <div class="projects">
             {% for project in collections['projects_en-CA'] %}
             <article class="project">

src/_includes/layouts/resources.njk

@@ -34,8 +34,8 @@
         </symbol>
     </svg>
 
+    {% include 'partials/components/page-header.njk' %}
     <article>
-        {% include 'partials/components/page-header.njk' %}
         <div class="resources-container">
             <form method="get" action="/resources/">
                 {% include 'partials/components/filter-resources.njk' %}

src/_includes/partials/components/page-header.njk

@@ -1,4 +1,4 @@
-<header {% if locale !== 'en-CA' %} lang="en-CA" dir="ltr" {% endif %}>
+<header class="page-header" {% if locale !== 'en-CA' %} lang="en-CA" dir="ltr" {% endif %}>
     <div class="wrapper">
         {% set breadcrumbs = [] %}
         {% if eleventyNavigation.key and 'projects' not in page.url %}

src/assets/styles/app.scss

@@ -27,6 +27,7 @@
   'components/image',
   'components/nav',
   'components/nav--secondary',
+  'components/page-header',
   'components/pagination',
   'components/metadata';
 

src/assets/styles/base/_base.scss

@@ -31,14 +31,14 @@ a {
 main,
 footer {
   a {
-    border-radius: 5px;
+    border-radius: rem(5);
   }
 
   a:hover,
   a:focus,
   a:active {
     outline-style: solid;
-    outline-width: 4px;
+    outline-width: rem(3);
   }
 
   a:hover {
@@ -49,8 +49,8 @@ footer {
 
   a:focus {
     outline-color: var(--fl-linkColor, var(--indigo-800));
-    outline-offset: 2px;
-    outline-width: 2px;
+    outline-offset: rem(3);
+    outline-width: rem(3);
   }
 
   a:active {
@@ -77,6 +77,10 @@ a[rel='external'] {
   }
 }
 
+a[rel='home'] {
+  border-radius: rem(5);
+}
+
 a[hreflang] {
   font-size: var(--step-1);
   font-weight: var(--fw-semibold);

src/assets/styles/components/_nav.scss

@@ -2,8 +2,7 @@
 
 .nav {
   height: rem(38);
-  margin-left: auto;
-  margin-top: 0;
+  z-index: 20;
 }
 
 .nav .menu-toggle {
@@ -90,6 +89,7 @@
 .menu ul {
   display: flex;
   flex-direction: column;
+  gap: rem(2);
   list-style: none;
   padding: 0;
 }
@@ -119,6 +119,7 @@
   font-weight: var(--fw-semibold);
   height: rem(50);
   padding: 0 var(--gutter);
+  position: relative;
   text-align: left;
   text-decoration: none;
   width: 100%;
@@ -127,6 +128,8 @@
   &:focus {
     background: var(--fl-fgColor, var(--indigo-100));
     color: var(--fl-bgColor, var(--indigo-800));
+    outline: var(--fl-fgColor, transparent) solid rem(3);
+    z-index: 1;
   }
 }
 

src/assets/styles/components/_page-header.scss

@@ -0,0 +1,50 @@
+.page-header {
+  background: var(--fl-bgColor, var(--header-bg, var(--indigo-100)));
+  border-bottom: rem(10) solid var(--fl-fgColor, var(--header-border));
+  color: var(--fl-fgColor, var(--header-fg, $black));
+  flex: 0 0 100%;
+  padding-bottom: rem(80);
+  padding-top: rem(80);
+  position: relative;
+
+  .wrapper {
+    margin: 0;
+    margin-left: 50%;
+    transform: translateX(-50%);
+    width: calc(100vw - var(--gutter));
+  }
+
+  .breadcrumbs {
+    font-family: var(--fl-font-family, var(--ff-display));
+    font-size: var(--step-2);
+    font-weight: var(--fw-semibold);
+  }
+
+  .intro {
+    font-size: var(--step--1);
+    margin-top: rem(20);
+  }
+}
+
+@include breakpoint-up(sm) {
+  .wrapper {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    grid-template-rows: min-content min-content min-content;
+
+    h1 {
+      grid-column: 1 / 2;
+      grid-row: 2 / 3;
+    }
+  }
+
+  .breadcrumbs {
+    grid-column: 1 / 3;
+    grid-row: 1 / 2;
+  }
+
+  .intro {
+    grid-column: 1 / 2;
+    grid-row: 3 / 4;
+  }
+}

src/assets/styles/layout/_footer.scss

@@ -32,19 +32,30 @@
   padding: 0 calc(var(--gutter) / 2);
 }
 
+.footer .logo {
+  display: flex;
+
+  a {
+    padding: rem(18);
+  }
+}
+
 .footer .logo svg {
   fill: currentcolor;
   width: rem(192);
 }
 
-.footer a:hover,
-.footer a:focus {
-  background: var(--fl-linkColor, var(--indigo-500));
-  color: var(--fl-bgColor);
+.footer a {
+  &:focus {
+    outline-color: var(--fl-linkColor, var(--yellow-500));
+    outline-offset: rem(3);
+    outline-width: rem(3);
+  }
 
-  svg {
-    background-color: var(--fl-linkColor);
-    outline: rem(5) solid var(--fl-linkColor, var(--indigo-500));
+  &:hover {
+    background: var(--fl-linkColor, var(--indigo-500));
+    color: var(--fl-bgColor);
+    outline-color: var(--fl-linkColor, var(--indigo-500));
   }
 }
 

src/assets/styles/layout/_header.scss

@@ -8,10 +8,11 @@
   background: var(--fl-bgColor, var(--header-bg, var(--indigo-100)));
   color: var(--fl-fgColor, var(--header-fg, $black));
   display: flex;
+  justify-content: space-between;
   margin-left: auto;
   margin-right: auto;
   max-width: calc(var(--max-width) + var(--gutter));
-  padding: 0;
+  padding-top: rem(4);
   position: relative;
   width: calc(100vw - var(--gutter));
 
@@ -29,6 +30,15 @@
   }
 }
 
+.banner a {
+  &:hover,
+  &:focus {
+    background: var(--fl-fgColor, var(--black));
+    color: var(--fl-bgColor, var(--white));
+    outline: var(--fl-fgColor, transparent) solid rem(3);
+  }
+}
+
 .page--home .banner {
   --header-bg: var(--white);