From 28a4acaf70f3e13be60c31d19c94654f78181852 Mon Sep 17 00:00:00 2001 From: Daniel Date: Tue, 4 Jul 2023 13:39:42 -0400 Subject: [PATCH] fix: interaction styles for navigation bar and footer links (#642) --- package-lock.json | 11 ++-- package.json | 2 +- src/_includes/layouts/404.njk | 2 +- src/_includes/layouts/history.njk | 2 +- src/_includes/layouts/home.njk | 2 +- src/_includes/layouts/ideas.njk | 2 +- src/_includes/layouts/news.njk | 2 +- src/_includes/layouts/page--team.njk | 2 +- src/_includes/layouts/page.njk | 2 +- src/_includes/layouts/project.njk | 2 +- src/_includes/layouts/projects.njk | 2 +- src/_includes/layouts/resources.njk | 2 +- .../partials/components/page-header.njk | 2 +- src/assets/styles/app.scss | 1 + src/assets/styles/base/_base.scss | 12 +++-- src/assets/styles/components/_nav.scss | 7 ++- .../styles/components/_page-header.scss | 50 +++++++++++++++++++ src/assets/styles/layout/_footer.scss | 25 +++++++--- src/assets/styles/layout/_header.scss | 12 ++++- src/assets/styles/pages/_generic.scss | 45 ----------------- 20 files changed, 112 insertions(+), 75 deletions(-) create mode 100644 src/assets/styles/components/_page-header.scss diff --git a/package-lock.json b/package-lock.json index 68bbd3d8..abd890c9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,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", @@ -6240,8 +6240,9 @@ } }, "node_modules/eleventy-plugin-fluid": { - "version": "1.0.1", - "license": "BSD-3-Clause", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/eleventy-plugin-fluid/-/eleventy-plugin-fluid-1.0.2.tgz", + "integrity": "sha512-YW8metiSnqxXGtm2TrTngKHmCxtUlo1EUu/ut/KCk/h2oCnph2Bcc5ozDYmHgJiiDMauThu8xfxmOmhUVVnx5Q==", "dependencies": { "html-minifier": "4.0.0" }, @@ -21426,7 +21427,9 @@ } }, "eleventy-plugin-fluid": { - "version": "1.0.1", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/eleventy-plugin-fluid/-/eleventy-plugin-fluid-1.0.2.tgz", + "integrity": "sha512-YW8metiSnqxXGtm2TrTngKHmCxtUlo1EUu/ut/KCk/h2oCnph2Bcc5ozDYmHgJiiDMauThu8xfxmOmhUVVnx5Q==", "requires": { "html-minifier": "4.0.0" } diff --git a/package.json b/package.json index 4bc56a10..a54adf1e 100644 --- a/package.json +++ b/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", diff --git a/src/_includes/layouts/404.njk b/src/_includes/layouts/404.njk index 55ad67a4..de3fccf6 100644 --- a/src/_includes/layouts/404.njk +++ b/src/_includes/layouts/404.njk @@ -3,8 +3,8 @@ {% set pageType = 'page--404' %} {% block content %} + {% include 'partials/components/page-header.njk' %}
- {% include 'partials/components/page-header.njk' %}
{{ content | safe }} diff --git a/src/_includes/layouts/history.njk b/src/_includes/layouts/history.njk index 0b5e75fd..30463de4 100644 --- a/src/_includes/layouts/history.njk +++ b/src/_includes/layouts/history.njk @@ -7,8 +7,8 @@ {% set pageType = 'page--generic' %} {% block content %} + {% include 'partials/components/page-header.njk' %}
- {% include 'partials/components/page-header.njk' %}
{{ content | safe }} diff --git a/src/_includes/layouts/home.njk b/src/_includes/layouts/home.njk index 093f1afa..79d2fd40 100644 --- a/src/_includes/layouts/home.njk +++ b/src/_includes/layouts/home.njk @@ -7,8 +7,8 @@ {% set pageType = 'page--home' %} {% block content %} + {% include 'partials/components/page-header.njk' %}
- {% include 'partials/components/page-header.njk' %} {%- if sections %} {%- for section in sections %} {% include 'partials/components/section.njk' %} diff --git a/src/_includes/layouts/ideas.njk b/src/_includes/layouts/ideas.njk index 37bbd9c3..56b8494b 100644 --- a/src/_includes/layouts/ideas.njk +++ b/src/_includes/layouts/ideas.njk @@ -7,8 +7,8 @@ {% set pageType = 'page--ideas' %} {% block content %} + {% include 'partials/components/page-header.njk' %}
- {% include 'partials/components/page-header.njk' %}
{% if pagination.pageNumber == 0 %} diff --git a/src/_includes/layouts/news.njk b/src/_includes/layouts/news.njk index cbd39be4..5662ec65 100644 --- a/src/_includes/layouts/news.njk +++ b/src/_includes/layouts/news.njk @@ -7,8 +7,8 @@ {% set pageType = 'page--news' %} {% block content %} + {% include 'partials/components/page-header.njk' %}
- {% include 'partials/components/page-header.njk' %}
{% if posts.length %} diff --git a/src/_includes/layouts/page--team.njk b/src/_includes/layouts/page--team.njk index 0f39e890..f6700bb5 100644 --- a/src/_includes/layouts/page--team.njk +++ b/src/_includes/layouts/page--team.njk @@ -7,8 +7,8 @@ {% set pageType = 'page--team' %} {% block content %} + {% include 'partials/components/page-header.njk' %}
- {% include 'partials/components/page-header.njk' %}
diff --git a/src/_includes/layouts/page.njk b/src/_includes/layouts/page.njk index 4986fd61..3edcacd2 100644 --- a/src/_includes/layouts/page.njk +++ b/src/_includes/layouts/page.njk @@ -7,8 +7,8 @@ {% set pageType = 'page--generic' %} {% block content %} + {% include 'partials/components/page-header.njk' %}
- {% include 'partials/components/page-header.njk' %} {%- if sections and sections.length > 0 %} {%- for section in sections %} {% include 'partials/components/section.njk' %} diff --git a/src/_includes/layouts/project.njk b/src/_includes/layouts/project.njk index 8d4427e8..4ccf392c 100644 --- a/src/_includes/layouts/project.njk +++ b/src/_includes/layouts/project.njk @@ -7,10 +7,10 @@ {% set pageType = 'page--project' %} {% block content %} + {% include 'partials/components/page-header.njk' %}
{% set articleTitle = title %} {% set title = projectName %} - {% include 'partials/components/page-header.njk' %} {% set parentPages = collections.all | eleventyNavigationBreadcrumb(articleTitle) %} diff --git a/src/_includes/layouts/projects.njk b/src/_includes/layouts/projects.njk index 3ce1284b..b5ce2f5b 100644 --- a/src/_includes/layouts/projects.njk +++ b/src/_includes/layouts/projects.njk @@ -7,8 +7,8 @@ {% set pageType = 'page--projects' %} {% block content %} + {% include 'partials/components/page-header.njk' %}
- {% include 'partials/components/page-header.njk' %}
{% for project in collections['projects_en-CA'] %}
diff --git a/src/_includes/layouts/resources.njk b/src/_includes/layouts/resources.njk index fddeebde..98eb94f6 100644 --- a/src/_includes/layouts/resources.njk +++ b/src/_includes/layouts/resources.njk @@ -34,8 +34,8 @@ + {% include 'partials/components/page-header.njk' %}
- {% include 'partials/components/page-header.njk' %}
{% include 'partials/components/filter-resources.njk' %} diff --git a/src/_includes/partials/components/page-header.njk b/src/_includes/partials/components/page-header.njk index 23e52dfb..66ab8386 100644 --- a/src/_includes/partials/components/page-header.njk +++ b/src/_includes/partials/components/page-header.njk @@ -1,4 +1,4 @@ -
+
{% set breadcrumbs = [] %} {% if eleventyNavigation.key and 'projects' not in page.url %} diff --git a/src/assets/styles/app.scss b/src/assets/styles/app.scss index f560c840..39ed0e39 100644 --- a/src/assets/styles/app.scss +++ b/src/assets/styles/app.scss @@ -27,6 +27,7 @@ 'components/image', 'components/nav', 'components/nav--secondary', + 'components/page-header', 'components/pagination', 'components/metadata'; diff --git a/src/assets/styles/base/_base.scss b/src/assets/styles/base/_base.scss index 58a56407..ea2d236b 100755 --- a/src/assets/styles/base/_base.scss +++ b/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); diff --git a/src/assets/styles/components/_nav.scss b/src/assets/styles/components/_nav.scss index feb11b94..343551b6 100644 --- a/src/assets/styles/components/_nav.scss +++ b/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; } } diff --git a/src/assets/styles/components/_page-header.scss b/src/assets/styles/components/_page-header.scss new file mode 100644 index 00000000..819b25be --- /dev/null +++ b/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; + } +} diff --git a/src/assets/styles/layout/_footer.scss b/src/assets/styles/layout/_footer.scss index dc6c9821..97d02448 100755 --- a/src/assets/styles/layout/_footer.scss +++ b/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)); } } diff --git a/src/assets/styles/layout/_header.scss b/src/assets/styles/layout/_header.scss index 54aa4b45..777a021e 100755 --- a/src/assets/styles/layout/_header.scss +++ b/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); diff --git a/src/assets/styles/pages/_generic.scss b/src/assets/styles/pages/_generic.scss index ca47b53a..4eba6e54 100644 --- a/src/assets/styles/pages/_generic.scss +++ b/src/assets/styles/pages/_generic.scss @@ -12,45 +12,6 @@ main > article { max-width: calc(100vw - var(--gutter)); width: calc(100vw - var(--gutter)); - 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; - - &::after { - background: inherit; - border-bottom: rem(10) solid var(--fl-fgColor, var(--header-border)); - bottom: rem(-10); - content: ''; - display: block; - height: calc(100% + #{rem(10)}); - margin-left: 50%; - position: absolute; - transform: translateX(-50%); - width: 100vw; - z-index: -1; - } - - .wrapper { - margin: 0; - } - - .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); - } - } - .content { flex: 0 0 100%; padding-bottom: rem(48); @@ -66,12 +27,6 @@ main > article { main > article { max-width: calc(var(--max-width) + var(--gutter)); - header { - .wrapper { - width: 50%; - } - } - .content { flex: 0 0 calc(100% * 2 / 3); padding-bottom: rem(96);