💄 Refactored stack layout usage

TulpaWiki · Dec 29, 2023 · 9b4664a · 9b4664a
1 parent 1cb9fa0
commit 9b4664a
Show file tree

Hide file tree

Showing 11 changed files with 153 additions and 117 deletions.
diff --git a/assets/css/general.css b/assets/css/general.css
@@ -28,6 +28,16 @@
   padding: 0;
 }
 
+body {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+main {
+  flex: 1 0 auto;
+}
+
 h1,
 h2,
 h3,
@@ -53,19 +63,19 @@ h4 {
   font-size: var(--s0);
 }
 
-h1 > .header__sub-header {
+h1>.header__sub-header {
   font-size: calc(var(--s3) / 2);
 }
 
-h2 > .header__sub-header {
+h2>.header__sub-header {
   font-size: calc(var(--s2) / 2);
 }
 
-h3 > .header__sub-header {
+h3>.header__sub-header {
   font-size: calc(var(--s1) / 2);
 }
 
-h4 > .header__sub-header {
+h4>.header__sub-header {
   font-size: calc(var(--s0) / 2);
 }
 
@@ -158,8 +168,10 @@ button[disabled]:focus,
 
 a:focus,
 .link:focus {
-  outline: 3px solid Highlight; /* NOTE(toby3d): non-webkit browsers */
-  outline: 3px solid -webkit-focus-ring-color; /* NOTE(toby3d): webkit browsers */
+  outline: 3px solid Highlight;
+  /* NOTE(toby3d): non-webkit browsers */
+  outline: 3px solid -webkit-focus-ring-color;
+  /* NOTE(toby3d): webkit browsers */
 }
 
 blockquote {
@@ -172,7 +184,8 @@ blockquote * {
   color: inherit;
 }
 
-strong, b {
+strong,
+b {
   font-variation-settings: 'wght' 600;
   font-weight: 600;
   line-height: var(--line-height-small);

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -1,17 +1,23 @@
 <!DOCTYPE html>
-<html class="page" lang="{{ .Page.Lang }}" dir="ltr">
-  <head>
-    {{ partial "head" . }}
-  </head>
-  <body class="[ page__body ][ body stack stack_split-after_4 {{ if eq .Kind "404" }} cover cover_min-height_100vh {{ end }} ]">
+<html class="page"
+      lang="{{ .Page.Lang }}"
+      dir="ltr">
+
+  <head>{{ partial "head" . }}</head>
+
+  <body class="[ page__body ][ body {{ if eq .Kind "404" }} cover cover_min-height_100vh {{ end }} ]">
     {{ partial "skip-links" . }}
+
     {{ block "header" . }}
-      {{ partial "navigation" . }}
+    {{ partial "navigation" . }}
     {{ end }}
+
     {{ block "main" . }}{{ end }}
+
     {{ block "footer" . }}
-      {{ partial "footer" . }}
+    {{ partial "footer" . }}
     {{ end }}
+
     {{ partial "scripts" . }}
   </body>
 </html>
diff --git a/layouts/_default/home.html b/layouts/_default/home.html
@@ -31,13 +31,11 @@
 {{ end }}
 
 {{ define "main" }}
-<main class="[ body__main ][ center ][ width:100% ]"
-      id="main"
-      style="padding:0;">
+<main class="[ body__main box ][ center ][ width:100% ]"
+      id="main">
+
   {{ $blog := .Site.GetPage "blog" }}
-  <h2>
-    {{ $blog.Title }}
-  </h2>
+  <h2>{{ $blog.Title }}</h2>
   <ul class="[ stack ][ list-style:none ]">
     {{ range first 5 $blog.Pages }}
     {{ .Render "summary" }}

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -1,24 +1,26 @@
 {{ define "header" }}
-  {{ partial "navigation" . }}
-  {{ partial "header" . }}
+{{ partial "navigation" . }}
+{{ partial "header" . }}
 {{ end }}
 
 {{ define "main" }}
-  <main class="[ body__main ][ sidebar sidebar_side_left ]" id="main">
-    <div>
-      <aside class="center" style="max-width:13rem;">
-        <section>
-          <header class="stack stack_recursive">
-            <h2>{{ i18n "toc" }}</h2>
-          </header>
-          {{ .TableOfContents }}
-        </section>
-      </aside>
-      {{ with .Content }}
-        <article class="center center_max_x1.5 stack stack_inherit">
-          {{ . }}
-        </article>
-      {{ end }}
-    </div>
-  </main>
+<main class="[ body__main box ][ sidebar sidebar_side_left ]"
+      id="main">
+  <div>
+    <aside class="center"
+           style="max-width:13rem;">
+      <section>
+        <header class="stack stack_recursive">
+          <h2>{{ i18n "toc" }}</h2>
+        </header>
+        {{ .TableOfContents }}
+      </section>
+    </aside>
+    {{ with .Content }}
+    <article class="center center_max_x1.5 stack stack_inherit">
+      {{ . }}
+    </article>
+    {{ end }}
+  </div>
+</main>
 {{ end }}
diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html
@@ -1,18 +1,20 @@
 {{ define "header" }}
-  {{ partial "navigation" . }}
-  {{ partial "header" . }}
+{{ partial "navigation" . }}
+{{ partial "header" . }}
 {{ end }}
 
 {{ define "main" }}
-  <main class="center center_padding_gutters stack" id="main">
-    <article class="stack">
-      {{ with .Content }}{{ . }}{{ end }}
-      <ul class="stack">
-        {{ range .Data.Pages }}
-          <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
-        {{ end }}
-      </ul>
-    </article>
-  </main>
-  {{ partial "pagination" . }}
+<main class="[ body__main box ][ stack center center_padding_gutters ]"
+      id="main">
+
+  <article class="stack">
+    {{ with .Content }}{{ . }}{{ end }}
+    <ul class="stack">
+      {{ range .Data.Pages }}
+      <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
+      {{ end }}
+    </ul>
+  </article>
+</main>
+{{ partial "pagination" . }}
 {{ end }}
diff --git a/layouts/blog/single.html b/layouts/blog/single.html
@@ -1,42 +1,54 @@
 {{ define "header" }}
-  {{ partial "navigation" . }}
-  {{ partial "header" . }}
-  {{ $authors := slice }}
-  {{ range .Params.authors }}
+{{ partial "navigation" . }}
+<header class="[ body__header box ][ stack ][ background-color_primary margin-top:0 ]"
+        id="header">
+
+  <div class="center center_max_x1.5">
+    <h1>{{ .Title }}</h1>
+
+    {{ $authors := slice }}
+    {{ range .Params.authors }}
     {{ $authors = $authors | append ($.Site.GetPage (print "authors/" .)) }}
-  {{ end }}
-  <div class="[ center center_max_x1.5 ][ width:100% ]">
-    <h3>
-      {{ i18n "by" | title }}
+    {{ end }}
+    <h2>
+      {{ i18n "by" }}
       {{ range $index, $author := $authors }}
-        {{- if gt $index 0 }},{{ end }}
-        <a href="{{ $author.Permalink }}" title="{{ $author.LinkTitle }}">
-          {{- $author.Params.displayName -}}
-        </a>
+      {{- if gt $index 0 }},{{ end }}
+      <a href="{{ $author.Permalink }}"
+         title="{{ $author.LinkTitle }}">
+        {{- $author.Params.displayName -}}
+      </a>
       {{- end }}
-    </h3>
+    </h2>
     <small>
       {{ i18n "published" }}
       <time>{{ .PublishDate.Format "January 2, 2006" }}</time>
     </small>
   </div>
+</header>
 {{ end }}
 
 {{ define "main" }}
-  <main class="[ body__main ][ center center_max_x1.5 ][ width:100% ]" id="main">
-    {{ with .Content }}
-      <article class="stack stack_recursive">
-        {{ . }}
-      </article>
-    {{ end }}
-  </main>
+<main class="[ body__main box ][ center center_max_x1.5 ][ width:100% ]"
+      id="main">
+
+  {{ with .Content }}
+  <article class="stack stack_recursive">
+    {{ . }}
+  </article>
+  {{ end }}
+</main>
 {{ end }}
 
 {{ define "footer" }}
-<footer id="footer" class="[ body__footer ][ box stack stack_recursive ][ background-color_secondary ]">
+<footer id="footer"
+        class="[ body__footer ][ box stack stack_recursive ][ background-color_secondary ]">
   <div class="cluster cluster_justify_space-between cluster_align_center">
     <small>
-      <a rel="noopener noreferrer" href="https://creativecommons.org/licenses/by-sa/4.0/" rel="license" target="_blank">
+      <a rel="noopener noreferrer"
+         href="https://creativecommons.org/licenses/by-sa/4.0/"
+         rel="license"
+         target="_blank">
         {{ println "&#127279;" (now.Format "2006") .Site.Title | safeHTML }}
       </a>
       <span class="js-theme-switcher"></span>

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -1,4 +1,4 @@
-<header class="[ body__header ][ box ][ background-color_primary margin-top:0 ]"
+<header class="[ body__header box ][ background-color_primary margin-top:0 ]"
         id="header">
   <div class="center center_max_x1.5">
     <h1>

diff --git a/layouts/section/archive.html b/layouts/section/archive.html
@@ -1,26 +1,27 @@
 {{ define "header" }}
-  {{ partial "navigation" . }}
-  {{ partial "header" . }}
+{{ partial "navigation" . }}
+{{ partial "header" . }}
 {{ end }}
 
 {{ define "main" }}
-  <main class="[ center ][ stack ][ center_padding_gutters ]" id="main">
-    <article class="stack">
-      {{ with .Content }}
-        {{ . }}
-      {{ end }}
-
-      {{ range (.Parent.Pages.GroupByParam "category").Reverse }}
-      <h3>{{ .Key }}</h3>
-      <ul>
-          {{ range .Pages }}
-          <li>
-          <a href="{{ .Permalink }}">{{ .Title }}</a>
-          </li>
-          {{ end }}
-      </ul>
+<main class="[ box ][ center stack ][ center_padding_gutters ]"
+      id="main">
+  <article class="stack">
+    {{ with .Content }}
+    {{ . }}
+    {{ end }}
+
+    {{ range (.Parent.Pages.GroupByParam "category").Reverse }}
+    <h3>{{ .Key }}</h3>
+    <ul>
+      {{ range .Pages }}
+      <li>
+        <a href="{{ .Permalink }}">{{ .Title }}</a>
+      </li>
       {{ end }}
-    </article>
-    {{ partial "pagination" . }}
-  </main>
+    </ul>
+    {{ end }}
+  </article>
+  {{ partial "pagination" . }}
+</main>
 {{ end }}
diff --git a/layouts/section/glossary.html b/layouts/section/glossary.html
@@ -4,7 +4,7 @@
 {{ end }}
 
 {{ define "main" }}
-<main class="center center_padding_gutters center_max_x1.5"
+<main class="[ box ][ center center_padding_gutters center_max_x1.5 ]"
       id="main">
   {{ $letters := split "АБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЭЮЯABCDEFGHIJKLMNOPQRSTUVWXYZ" "" }}
   {{ $numbers := split "0123456789" "" }}

diff --git a/layouts/section/organisation.html b/layouts/section/organisation.html
@@ -4,7 +4,7 @@
 {{ end }}
 
 {{ define "main" }}
-<main class="[ center ][ stack ][ center_padding_gutters ]"
+<main class="[ box ][ center stack ][ center_padding_gutters ]"
       id="main">
 
   <article class="stack">
@@ -13,7 +13,7 @@
     {{ end }}
 
     <ol class="[ stack ][ list-style:none ]"
-        style="--stack-space: var(--s1);">
+        style="--space: var(--s1);">
 
       {{ range .Pages }}
       <li>

diff --git a/layouts/section/section.html b/layouts/section/section.html
@@ -1,25 +1,27 @@
 {{ define "header" }}
-  {{ partial "navigation" . }}
-  {{ partial "header" . }}
+{{ partial "navigation" . }}
+{{ partial "header" . }}
 {{ end }}
 
 {{ define "main" }}
-  <main class="[ center ][ stack ][ center_padding_gutters ]" id="main">
-    <article class="stack">
-      {{ with .Content }}
-        {{ . }}
+<main class="[ box ][ center stack ][ center_padding_gutters ]"
+      id="main">
+  <article class="stack">
+    {{ with .Content }}
+    {{ . }}
+    {{ end }}
+    <ul>
+      {{ range .Pages }}
+      <li>
+        <a href="{{ .Permalink }}"
+           title="{{ .LinkTitle }}">
+          {{ .Title }}
+        </a>
+        <small>{{ .Description }}</small>
+      </li>
       {{ end }}
-      <ul>
-        {{ range .Pages }}
-          <li>
-            <a href="{{ .Permalink }}" title="{{ .LinkTitle }}">
-              {{ .Title }}
-            </a>
-            <small>{{ .Description }}</small>
-          </li>
-        {{ end }}
-      </ul>
-    </article>
-    {{ partial "pagination" . }}
-  </main>
+    </ul>
+  </article>
+  {{ partial "pagination" . }}
+</main>
 {{ end }}