Replace navbar styles with utility classes. Move pages styles to components. Adjust spacing class names.

README.md

@@ -62,7 +62,7 @@ Quickstart a new site with the Zen theme by using the [Zen demo repo as a templa
 * New setting `params.internalPagination` to use the Hugo built in pagination template instead of the plain Zen version.
 * New setting `params.sassTranspiler`. Defaults to "libsass" but "dartsass" is also supported.
 * Split sass "reset" dir into "base" dir and pure "reset" file.
-* Added margin top/bottom/block classes, mt--m/mb--m/mtb--m, for all "spacing" variables.
+* Added margin top/bottom/block classes, mt-m/mb-m/mx-m, for all "spacing" variables.
 * New sass components:
     * cards
     * center

assets/sass/components/pager/_pager.scss

@@ -0,0 +1,32 @@
+// Pager
+//
+// Paged navigation is a list of page numbers when more than 1 page of content
+// is available.
+
+.pagination,
+.pager,
+%pager {
+  @extend %flex-inline;
+  @extend %link-nav;
+  // Add vertical rhythm margins.
+  @include margin-block(1);
+  justify-content: center;
+
+  .page-item {
+  }
+
+  &__item,
+  .page-link {
+    padding-inline: 2px;
+  }
+
+  .active {
+    font-weight: var(--fw-bold);
+  }
+
+  .disabled {
+    .page-link {
+      @extend %disabled;
+    }
+  }
+}

assets/sass/components/spacing/_spacing.scss

@@ -1,13 +1,13 @@
 @each $name, $space in $spacing {
-  .mt--#{$name} {
+  .mt-#{$name} {
     @include margin-block-start($space);
   }
 
-  .mb--#{$name} {
+  .mb-#{$name} {
     @include margin-block-end($space);
   }
 
-  .mtb--#{$name} {
+  .mx-#{$name} {
     @include margin-block($space);
   }
 }

assets/sass/navigation/navbar/_navbar.scss

@@ -1,6 +0,0 @@
-// Navbar
-
-.navbar {
-  @extend %flex-inline;
-  margin-block: 0;
-}

assets/sass/styles.scss

@@ -53,17 +53,13 @@
 @import 'components/list-straight-left/list-straight-left';
 @import 'components/messages/messages';
 @import 'components/meta/meta';
+@import 'components/pager/pager';
 @import 'components/responsive-video/responsive-video';
 @import 'components/spacing/spacing';
 @import 'components/tables/tables';
 @import 'components/tags/tags';
 @import 'components/visually-hidden/visually-hidden';
 
-// Navigation
-
-@import 'navigation/navbar/navbar';
-@import 'navigation/pager/pager';
-
 // Zen styles
 
 @import 'zen';

layouts/_default/baseof.html

@@ -41,7 +41,7 @@
 
 {{ if $.Param "sidebar" }}{{ partial "sidebar.html" . }}{{ end -}}
 
-<footer class="footer layout__footer mt--l">
+<footer class="footer layout__footer mt-l">
 {{ if templates.Exists "partials/footer.html" -}}
 {{ partial "footer.html" . }}
 {{ else -}}

layouts/_default/full.html

@@ -1,6 +1,6 @@
 <article class="full-view{{ with .Section }} full-view--{{ . | urlize }}{{ end }}">
 <header>
-<h1 class="title{{ if $.Param "submitted" | default false }} mb--xxs{{ end }}"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
+<h1 class="title{{ if $.Param "submitted" | default false }} mb-xxs{{ end }}"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
 {{ if $.Param "submitted" | default false }}{{ partial "submitted.html" . }}{{ end -}}
 </header>
 

layouts/_default/single.html

@@ -2,7 +2,7 @@
 <main class="main layout__main">
 <article class="single-view{{ with .Section }} single-view--{{ . | urlize }}{{ end }}">
 <header>
-<h1 class="title{{ if $.Param "submitted" | default false }} mb--xxs{{ end }}">{{ .Title }}</h1>
+<h1 class="title{{ if $.Param "submitted" | default false }} mb-xxs{{ end }}">{{ .Title }}</h1>
 {{ if $.Param "submitted" | default false }}{{ partial "submitted.html" . }}{{ end -}}
 {{ if .Params.tags }}{{ partial "tags.html" . }}{{ end -}}
 </header>

layouts/_default/summary.html

@@ -1,6 +1,6 @@
 <article class="list-view{{ with .Section }} list-view--{{ . | urlize }}{{ end }}">
 <header>
-<h2 class="title mt--s{{ if $.Param "submitted" | default false }} mb--xxs{{ end }}"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
+<h2 class="title mt-s{{ if $.Param "submitted" | default false }} mb-xxs{{ end }}"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
 {{ if $.Param "submitted" | default false }}{{ partial "submitted.html" . -}}{{ end }}
 </header>
 {{ .Summary }}

layouts/partials/language-selector.html

@@ -3,7 +3,7 @@
 <path d="M848 3a17654 17654 0 00-349 118l-39 13-6 2-171-60-173-62c-2 0-2 6-2 118v119l-50 16-53 19c-5 3-5-19-5 343 0 335 0 336 2 339l6 5a92499 92499 0 00459-150l12-4 10 3 467 148 4 2V302l-45-15-45-14-1-132c0-124-1-132-2-134-4-7-9-8-19-5zm-4 145l-1 117-178-57-178-57L843 30l1 118zM458 481l-1 319-216 72-216 72V305l215-72 217-72 1 320zm262-131c17 4 30 9 30 9 1 0 20 67 42 149l57 203 15 56-64-19a2060 2060 0 01-24-84 2094 2094 0 00-130-40l-15 33-14 34-64-18 22-55 55-136 46-112c10-24 13-30 14-30l31 10z"/>
 <path d="M257 360l-35 9c-23 7-25 7-34 7a72 72 0 01-20-3c-1 1 2 11 5 18 4 8 13 17 23 21 6 3 7 3 18 3 19 0 37-6 52-17 12-8 16-18 15-29-2-11-8-13-24-9zM335 413l-35 16c-13 7-23 12-28 13l-38 12a1636 1636 0 01-106 32c-19 3-17 2-17 9l2 8c2 4 9 10 14 12 12 6 42 3 51-6 2-2 3-3 3-7v-6l31-10 40-11a515 515 0 0148-13l-48 96c-10 19-23 40-45 71l-52 71-55 64-7 8h4c7 0 17-2 20-4a929 929 0 00149-179l23 17c26 20 30 23 51 35 25 14 39 21 56 27 8 2 12 3 13 1 1-4-6-30-9-33l-26-12-47-20-40-17-16-7 10-17c22-35 34-56 53-95l20-40 1-10v-11h-3l-17 6zM716 451l-23 56-23 55 86 26a4814 4814 0 00-40-137zM680 972a460 460 0 0026 44 422 422 0 01-319 66 517 517 0 01-175-66c-7-3-14-2-17 4-2 3-2 9 0 12s24 16 46 27a536 536 0 00222 53c36 1 39 0 68-4a480 480 0 00181-65l8-5 12 21 13 19 7-19 17-48 10-32-99-7z"/>
 </svg>
-<ul class="navbar">
+<ul class="flex-inline mb-0">
 {{ if .IsTranslated -}}
 {{ range .Translations -}}
 <li><a rel="alternate" href="{{ .RelPermalink }}" hreflang="{{ .Site.Language.LanguageCode | default .Lang }}" lang="{{ .Site.Language.LanguageCode | default .Lang }}">{{ .Language.LanguageName }}</a></li>

layouts/partials/menu.html

@@ -1,5 +1,5 @@
 <nav class="main-menu{{ if not ($.Param "menuinheader") }} layout__navigation{{ end }}" aria-label="{{ i18n "menu_title" }}">
-<ul class="navbar">
+<ul class="flex-inline mb-0">
 {{ $currentPage := . -}}
 {{ range site.Menus.main -}}
 <li><a href="{{ .URL | relLangURL }}"{{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} aria-current="page"{{ end }}>{{ .Pre }}<span>{{ or (i18n .Identifier) .Name | safeHTML }}</span>{{ .Post }}</a></li>

layouts/podcast/full.html

@@ -1,6 +1,6 @@
 <article class="full-view{{ with .Section }} full-view--{{ . | urlize }}{{ end }}">
 <header>
-<h1 class="title{{ if $.Param "submitted" | default false }} mb--xxs{{ end }}"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
+<h1 class="title{{ if $.Param "submitted" | default false }} mb-xxs{{ end }}"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
 {{ if $.Param "submitted" | default false }}{{ partial "submitted.html" . }}{{ end -}}
 </header>
 

layouts/podcast/single.html

@@ -2,7 +2,7 @@
 <main class="main layout__main">
 <article class="single-view{{ with .Section }} single-view--{{ . | urlize }}{{ end }}">
 <header>
-<h1 class="title{{ if $.Param "submitted" | default false }} mb--xxs{{ end }}">{{ .Title }}</h1>
+<h1 class="title{{ if $.Param "submitted" | default false }} mb-xxs{{ end }}">{{ .Title }}</h1>
 {{ if $.Param "submitted" | default false }}{{ partial "submitted.html" . }}{{ end -}}
 {{ if .Params.tags }}{{ partial "tags.html" . }}{{ end -}}
 </header>

layouts/shortcodes/search.html

@@ -13,7 +13,7 @@
 <template>
   <article class="search-result list-view">
     <header>
-      <h2 class="title mt--s mb--xxs"><a href="#">Title here</a></h2>
+      <h2 class="title mt-s mb-xxs"><a href="#">Title here</a></h2>
       <div class="submitted"><time class="created-date">Date here</time></div>
     </header>
     <p class="content">Summary here</p>