diff --git a/src/_includes/next-prev-nav.html b/src/_includes/next-prev-nav.html index 192044a050..e9baae83ea 100644 --- a/src/_includes/next-prev-nav.html +++ b/src/_includes/next-prev-nav.html @@ -1,21 +1,22 @@ -{% if include.next or include.prev -%} - {% if include.next and include.prev -%} - {% assign nav_class = 'site-nextprev-nav' -%} - {% else -%} - {% assign nav_class = 'site-nextprev-nav__single' -%} - {% endif -%} -
-
- {% if include.prev.path -%} -
-
{{ include.prev.title }}
-
- {% endif -%} - {% if include.next.path -%} -
-
{{ include.next.title }}
-
- {% endif -%} -
+{% if next or prev -%} +
+ {% if prev.path -%} +
+
chevron_left
+
+
Previous
+
{{ prev.title}}
+
+
+ {% endif -%} + {% if next.path -%} +
+
+
Next
+
{{ next.title}}
+
+
chevron_right
+
+ {% endif -%}
{% endif -%} diff --git a/src/_layouts/base.html b/src/_layouts/base.html index 38a8716412..a678544ce5 100644 --- a/src/_layouts/base.html +++ b/src/_layouts/base.html @@ -1,4 +1,4 @@ -{% assign cache_bust = '?v=4' %} +{% assign cache_bust = '?v=5' %} {% assign page_url = page.url | regex_replace: '/index$|/index.html$|\.html$|/$' -%} @@ -6,8 +6,8 @@
{% if short-title %}{{short-title}}{% else %}{{title}}{% endif %} | {{site.title}}
-
-
+
+
@@ -18,7 +18,6 @@ {%- if isProduction == true -%}
- {% endif -%} @@ -37,6 +36,7 @@ ga('create', '{{ site.google_analytics_id }}', 'auto'); ga('send', 'pageview'); + {% endif -%} {% assign desc = description | default: site.description | strip_html | strip_newlines | truncate: 160 -%} {% unless desc and desc != '' -%} @@ -53,7 +53,7 @@
-
+
{% unless strip_fonts == true -%}
diff --git a/src/_layouts/default.html b/src/_layouts/default.html index 991ea9ebd1..2d59669029 100644 --- a/src/_layouts/default.html +++ b/src/_layouts/default.html @@ -30,7 +30,7 @@
{{ title }}
{{ content }} - {% include next-prev-nav.html prev=prev, next=next %} + {% render next-prev-nav.html, prev:prev, next:next %} {% include trailing.html %} diff --git a/src/_sass/components/_next-prev-nav.scss b/src/_sass/components/_next-prev-nav.scss index 8759856b46..7f83737d03 100644 --- a/src/_sass/components/_next-prev-nav.scss +++ b/src/_sass/components/_next-prev-nav.scss @@ -1,58 +1,65 @@ +@use '../base/mixins'; @use '../base/variables' as *; -.site-nextprev-nav, // Nav with both links -.site-nextprev-nav__single // Nav with single link -{ - clear: both; +#site-prev-next { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + gap: 1rem; + margin-block-end: 1rem; - ul { - $spacer-base: 0.75rem; + .prev { + text-align: left; + justify-content: flex-start; + } - list-style-type: none; - margin: 0; - padding: 0; + .next { + text-align: right; + justify-content: flex-end; + margin-left: auto; + } - li { - display: flex; - margin-bottom: $spacer-base; - white-space: nowrap; + @media (min-width: 576px) { + flex-wrap: nowrap; - a { - text-overflow: ellipsis; - overflow: hidden; - } + .prev, .next { + max-width: 50%; + } + } - &.prev:before { - color: $site-color-primary; - content: "\2329"; // ⟨ - padding-right: $spacer-base * 0.5; - } + a { + overflow-x: hidden; + flex-basis: 100%; - &.next { - justify-content: flex-end; - text-align: right; - } + text-decoration: none; + color: $site-color-body; + border: 1px solid rgba(0, 0, 0, 0.125); + border-radius: 0.25rem; - &.next:after { - color: $site-color-primary; - content: "\232A"; // ⟩ - padding-left: $spacer-base * 0.5; - } - } - } -} + display: flex; + flex-direction: row; + align-items: center; + padding: 0.5rem; + min-height: 100%; -.site-nextprev-nav > ul > li { - width: 49%; + > div { + display: flex; + flex-direction: column; + padding: 0.5rem; - &.prev { float: left; } -} + .prev-next-subtitle { + font-size: 0.75rem; + line-height: 0.75rem; + } + } -.site-nextprev-nav__single > ul > li { - &.prev { width: 100%; } + &:hover { + @include mixins.interaction-style(3%); + } - &.next { - float: right; - width: 100%; + &:active { + @include mixins.interaction-style(5%); + } } }