From 7e257ff2c97f25a35101a68c8de2b3e4fb20d076 Mon Sep 17 00:00:00 2001 From: Ynda Jas Date: Fri, 6 Oct 2023 15:07:20 +0100 Subject: [PATCH 1/3] 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 --- src/_includes/contribute.html | 8 ++-- src/_includes/navbar.html | 26 +++++----- src/_includes/page-content.html | 42 ++++++++--------- src/_layouts/default.html | 8 ++-- src/_sass/_contribute.scss | 20 ++++---- src/_sass/_layout.scss | 38 ++++++++++++--- src/_sass/_navbar.scss | 29 +++--------- src/_sass/_page-content.scss | 84 +++++++++++++++++---------------- src/_sass/_related.scss | 51 +++++++++++++------- 9 files changed, 166 insertions(+), 140 deletions(-) diff --git a/src/_includes/contribute.html b/src/_includes/contribute.html index a0a37580e..940f48e0b 100644 --- a/src/_includes/contribute.html +++ b/src/_includes/contribute.html @@ -13,9 +13,9 @@ {% endif %} {% endif %} - + diff --git a/src/_includes/navbar.html b/src/_includes/navbar.html index c71b76a71..f601a3cbc 100644 --- a/src/_includes/navbar.html +++ b/src/_includes/navbar.html @@ -1,14 +1,12 @@ -
- -
+ diff --git a/src/_includes/page-content.html b/src/_includes/page-content.html index 18449689d..a5bd3f0cb 100644 --- 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 %}
-
-

{{ page.title }}

+

{{ page.title }}

- {% assign stripped_content = content | strip %} - {% if stripped_content == "" %} -
    - {% include related_pages.html %} -
- {% else %} - {% include anchor_headings.html html=content anchorBody="#" anchorAttrs='aria-label="Permalink to %heading%"' %} + {% assign stripped_content = content | strip %} + {% if stripped_content == "" %} +
    + {% include related_pages.html %} +
+ {% else %} + {% include anchor_headings.html html=content anchorBody="#" anchorAttrs='aria-label="Permalink to %heading%"' %} -
- -

- - {% if last_reviewed_at > last_modified_at %} - Last reviewed: {{ page.last_reviewed_at | date: "%-d %B %Y" }} -
- {% endif %} - Last updated: {{ page.last_modified_at | date: "%-d %B %Y" }} (history) - -

- {% endif %} -
+
+ +

+ + {% if last_reviewed_at > last_modified_at %} + Last reviewed: {{ page.last_reviewed_at | date: "%-d %B %Y" }} +
+ {% endif %} + Last updated: {{ page.last_modified_at | date: "%-d %B %Y" }} (history) + +

+ {% endif %}
diff --git a/src/_layouts/default.html b/src/_layouts/default.html index 11ad8eada..699f9216b 100644 --- a/src/_layouts/default.html +++ b/src/_layouts/default.html @@ -25,12 +25,14 @@ - {% include navbar.html %} -
+
+ {% include navbar.html %} {% include related.html %} + {% include contribute.html %} +
+
{% include page-content.html %}
- {% include contribute.html %} diff --git a/src/_sass/_contribute.scss b/src/_sass/_contribute.scss index db08eab1c..f5d450263 100644 --- 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 index 00142919f..2f4794513 100644 --- 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 index 943134524..32cf20787 100644 --- 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 index 2fef1a3ed..9b3fa16ee 100644 --- 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; +} diff --git a/src/_sass/_related.scss b/src/_sass/_related.scss index a011ec42b..07006ae49 100644 --- a/src/_sass/_related.scss +++ b/src/_sass/_related.scss @@ -2,6 +2,10 @@ @use "./colours"; @use "./typography"; +$large-screen-nav-height: 134.992px; +$large-screen-contribute-height: 63px; +$list-d-size: 11px; + .related { overflow-y: auto; @@ -46,31 +50,44 @@ @include breakpoints.on-large-screens { .related { - width: 21em; - max-width: 30vw; - height: 100%; + height: calc(100vh - $large-screen-nav-height - $large-screen-contribute-height); padding: 1.5em 1em; - background-color: colours.$cream; - - a { - margin-bottom: 0.5em; - padding-left: 2em; - text-indent: -2em; - - &:hover, - &:focus, - &:active { - text-decoration-color: colours.$accent-a; - } - } - + ul li { padding-right: 0; white-space: unset; + a { + &:hover, + &:focus, + &:active { + text-decoration-color: colours.$accent-a; + } + } + &.related__back-link { margin-bottom: 1.5em; + padding-left: 0; + } + + &:not(:is(:last-child, .related__back-link)) { + margin-bottom: 0.5em; + } + + &:not(.related__back-link)::before { + content: ""; + + position: absolute; + top: 8px; + left: 0; + + width: $list-d-size; + height: $list-d-size; + + background: url("/assets/images/d-symbol-blue.svg"); + background-repeat: no-repeat; + background-size: contain; } } From fc9adde2148a5f8e6d28f3d1026729dac3da51d6 Mon Sep 17 00:00:00 2001 From: Ynda Jas Date: Mon, 16 Oct 2023 21:02:22 +0100 Subject: [PATCH 2/3] Refresh menu styling on large screens - Reduce the font weight - Add the dxw 'D' as a list item indicator (excluding the back link), which is a style adopted from our main site's [impact report][1] - Remove the second line indent [1]: https://www.dxw.com/dxw-impact --- src/_includes/related.html | 2 +- src/_includes/related_pages.html | 2 +- src/_sass/_related.scss | 11 +++++++++-- src/_sass/_typography.scss | 2 +- src/assets/images/d-symbol-blue.svg | 3 +++ 5 files changed, 15 insertions(+), 5 deletions(-) create mode 100644 src/assets/images/d-symbol-blue.svg diff --git a/src/_includes/related.html b/src/_includes/related.html index c48f58ea9..31b2caf5d 100644 --- a/src/_includes/related.html +++ b/src/_includes/related.html @@ -6,7 +6,7 @@ {% if parent_page %} {% unless parent_page.unrelatable %}
  • - ᐊ {{ parent_page.title }} + {{ parent_page.title }}
    • {% endunless %} {% endif %} diff --git a/src/_includes/related_pages.html b/src/_includes/related_pages.html index f7a930cee..d9ed7ba32 100644 --- 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) %}
  • {{ related_page.title }} diff --git a/src/_sass/_related.scss b/src/_sass/_related.scss index 07006ae49..a012ea17e 100644 --- a/src/_sass/_related.scss +++ b/src/_sass/_related.scss @@ -14,7 +14,6 @@ $list-d-size: 11px; font-family: typography.$heading-font-family; font-size: 0.9em; - font-weight: typography.$heading-font-weight; background-color: colours.$accent-a; @@ -55,7 +54,9 @@ $list-d-size: 11px; background-color: colours.$cream; ul li { + position: relative; padding-right: 0; + padding-left: calc($list-d-size + 10px); white-space: unset; a { @@ -68,7 +69,13 @@ $list-d-size: 11px; &.related__back-link { margin-bottom: 1.5em; - padding-left: 0; + + &::before { + content: "ᐊ"; + position: absolute; + top: 0; + left: 0; + } } &:not(:is(:last-child, .related__back-link)) { diff --git a/src/_sass/_typography.scss b/src/_sass/_typography.scss index 2e935d05e..0fe0e473b 100644 --- a/src/_sass/_typography.scss +++ b/src/_sass/_typography.scss @@ -6,7 +6,7 @@ $body-font-weight-bold: 700; $heading-font-family: poppins, sans-serif; $heading-font-weight: 600; -@import "https://fonts.googleapis.com/css?family=Poppins:600&display=swap"; +@import "https://fonts.googleapis.com/css?family=Poppins:400,600&display=swap"; @import "https://fonts.googleapis.com/css?family=Cardo:400,700&display=swap"; body { diff --git a/src/assets/images/d-symbol-blue.svg b/src/assets/images/d-symbol-blue.svg new file mode 100644 index 000000000..03cf6ae47 --- /dev/null +++ b/src/assets/images/d-symbol-blue.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file From b8af08abdbf7996b9869ad861e750558dd1ce8f9 Mon Sep 17 00:00:00 2001 From: Ynda Jas Date: Mon, 16 Oct 2023 21:04:30 +0100 Subject: [PATCH 3/3] Remove 'Contact dxw' from index pages Index pages (i.e. pages which have children but not their own content) include the same partial as the nav menu. This menu includes a 'Contact dxw' link, which looks a little out of place in the body of the index page. This makes it so that the 'Contact dxw' link will only appear in the nav, not the list of child pages on index pages --- src/_includes/page-content.html | 2 +- src/_includes/related.html | 2 +- src/_includes/related_pages.html | 3 +++ 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/_includes/page-content.html b/src/_includes/page-content.html index a5bd3f0cb..7c64fd493 100644 --- a/src/_includes/page-content.html +++ b/src/_includes/page-content.html @@ -8,7 +8,7 @@

    {{ page.title }}

    {% assign stripped_content = content | strip %} {% if stripped_content == "" %}
      - {% include related_pages.html %} + {% include related_pages.html in-nav=false %}
    {% else %} {% include anchor_headings.html html=content anchorBody="#" anchorAttrs='aria-label="Permalink to %heading%"' %} diff --git a/src/_includes/related.html b/src/_includes/related.html index 31b2caf5d..e084032bd 100644 --- a/src/_includes/related.html +++ b/src/_includes/related.html @@ -11,7 +11,7 @@ {% endunless %} {% endif %} - {% include related_pages.html %} + {% include related_pages.html in-nav=true %} diff --git a/src/_includes/related_pages.html b/src/_includes/related_pages.html index d9ed7ba32..0a9d07e00 100644 --- a/src/_includes/related_pages.html +++ b/src/_includes/related_pages.html @@ -12,6 +12,9 @@ {% endunless %} {% endfor %} {% endfor %} + +{% if include.in-nav %}
  • Contact dxw
    • +{% endif %}