From 694022a64421602bc2687483eccabe853e7c5c89 Mon Sep 17 00:00:00 2001 From: Ynda Jas Date: Fri, 6 Oct 2023 15:07:20 +0100 Subject: [PATCH] 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/_layouts/default_old.html | 36 +++++++++++++++ src/_sass/_contribute.scss | 19 ++++---- src/_sass/_layout.scss | 32 ++++++++++---- src/_sass/_navbar.scss | 28 +++--------- src/_sass/_page-content.scss | 78 +++++++++++++++++---------------- src/_sass/_related.scss | 7 +-- 10 files changed, 160 insertions(+), 124 deletions(-) create mode 100644 src/_layouts/default_old.html 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/_layouts/default_old.html b/src/_layouts/default_old.html new file mode 100644 index 000000000..11ad8eada --- /dev/null +++ b/src/_layouts/default_old.html @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + {% if page.title and page.title != "dxw's Playbook" %}{{ page.title | escape }} - {% endif %}Playbook - dxw + + + {% if page.url == "/" %} + + {% endif %} + + + + + + {% include navbar.html %} +
+ {% include related.html %} + {% include page-content.html %} +
+ {% include contribute.html %} + + + diff --git a/src/_sass/_contribute.scss b/src/_sass/_contribute.scss index d48f68682..a694ef631 100644 --- a/src/_sass/_contribute.scss +++ b/src/_sass/_contribute.scss @@ -4,19 +4,20 @@ .contribute { display: none; -} -@include breakpoints.on-large-screens { - .contribute { - padding: 0.5em; + @include breakpoints.on-large-screens { + position: fixed; + bottom: 0; + left: 0; + width: 330px; + display: flex; + justify-content: space-between; + padding: 27px 18px; background-color: colours.$accent-a; - text-align: center; font-family: typography.$heading-font-family; font-weight: typography.$heading-font-weight; - font-size: 1.2em; - display: flex; - justify-content: space-evenly; - + font-size: 0.9em; + a { margin: 0; } diff --git a/src/_sass/_layout.scss b/src/_sass/_layout.scss index f89697a25..76a5c72a7 100644 --- a/src/_sass/_layout.scss +++ b/src/_sass/_layout.scss @@ -1,19 +1,33 @@ @use "./breakpoints"; @use "./navbar"; +$large-screen-header-width: 330px; + * { box-sizing: border-box; } -main { - margin-top: navbar.$height; - height: calc(100vh - navbar.$height); - display: flex; - flex-direction: column; +header { + width: 100%; +} + +@include breakpoints.on-large-screens { + body { + display: flex; + } + + header { + position: fixed; + top: 0; + left: 0; + width: $large-screen-header-width; + height: 100vh; + } - @include breakpoints.on-large-screens { - margin-top: navbar.$height-large; - height: calc(100vh - navbar.$height-large - 3em); - flex-direction: row; + main { + margin-left: $large-screen-header-width; + height: 100%; + min-height: 100vh; + flex: 1; } } diff --git a/src/_sass/_navbar.scss b/src/_sass/_navbar.scss index a82b1ad68..aeba6f3cf 100644 --- a/src/_sass/_navbar.scss +++ b/src/_sass/_navbar.scss @@ -6,11 +6,9 @@ $height: 135.008px; // Manually measured after layout. $height-large: 85.016px; // Manually measured after layout. .navbar { - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: 1; + display: flex; + flex-direction: column; + padding: 1em; background-color: colours.$navy; a { @@ -31,32 +29,18 @@ $height-large: 85.016px; // Manually measured after layout. } > ul { - margin: 1em; + margin: 0; padding: 0; list-style: none; - @include breakpoints.on-large-screens { - display: flex; - justify-content: flex-end; - align-items: center; - } - > li { - margin-bottom: 0; + margin: 0; &:first-child { - margin-right: auto; + margin-bottom: 1em; } } } - - &__search { - margin-top: 1em; - - @include breakpoints.on-large-screens { - margin-top: 0; - } - } } h1, diff --git a/src/_sass/_page-content.scss b/src/_sass/_page-content.scss index 251065438..9007280d1 100644 --- a/src/_sass/_page-content.scss +++ b/src/_sass/_page-content.scss @@ -2,56 +2,58 @@ @use "./colours"; -$font-size: 1em; - .page-content { - flex: 1; - padding: 0.5em 2em 5em; - font-size: $font-size; + padding: 2em; + font-size: 1em; overflow-y: auto; scroll-behavior: smooth; will-change: scroll-position; + margin: 0 auto; + max-width: 40em; - > div { - margin: 0 auto; - max-width: 40em; - - > h1, - > h2, - > h3, - > h4, - > h5, - > h6 { - margin-left: -0.5em; - margin-right: -0.5em; - padding-left: 0.5em; - padding-right: 0.5em; - - &:target a { - display: none; - } + > h1 { + margin-top: 0; + } - a { - vertical-align: middle; - font-size: 0.7em; - color: colours.$accent-b; - text-decoration: none; - transition: color 0.2s; - - &:hover, - &:focus, - &:active { - color: colours.$navy; - } - } + > h1, + > h2, + > h3, + > h4, + > h5, + > h6 { + margin-left: -0.5em; + margin-right: -0.5em; + padding-left: 0.5em; + padding-right: 0.5em; + + &:target a { + display: none; } - :target { - background: colours.$yellow-light; + a { + vertical-align: middle; + font-size: 0.7em; + color: colours.$accent-b; + text-decoration: none; + transition: color 0.2s; + + &:hover, + &:focus, + &:active { + color: colours.$navy; + } } } + :target { + background: colours.$yellow-light; + } + img { max-width: 100%; } } + +#last-review-and-updated { + margin-bottom: 0; +} \ No newline at end of file diff --git a/src/_sass/_related.scss b/src/_sass/_related.scss index 1128175bd..2b8eb2cb1 100644 --- a/src/_sass/_related.scss +++ b/src/_sass/_related.scss @@ -2,6 +2,9 @@ @use "./colours"; @use "./typography"; +$large-screen-nav-height: 134.992px; +$large-screen-contribute-height: 81px; + .related { width: 100%; padding: 1em; @@ -43,9 +46,7 @@ @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;