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 == "" %} - - {% else %} - {% include anchor_headings.html html=content anchorBody="#" anchorAttrs='aria-label="Permalink to %heading%"' %} + {% assign stripped_content = content | strip %} + {% if stripped_content == "" %} + + {% 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;