💄 Simplifying template customization

TulpaWiki · Dec 22, 2020 · 8006e54 · 8006e54
1 parent f47320d
commit 8006e54
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 36 deletions.
diff --git a/layouts/404.html b/layouts/404.html
@@ -1,29 +1,26 @@
-<!DOCTYPE html>
-<html lang="{{ .Page.Lang }}">
-  <head>
-    <meta name="robots" content="noindex" />
-    {{ partial "meta" . }}
-    <title>{{ println ":scream:" (i18n "404__header") "|" .Site.Title | emojify }}</title>
-    {{ partial "styles" . }}
-    <link rel="prefetch" as="image" href="images/404.jpg">
-  </head>
-  <body class="cover cover_min-height_100vh">
-    <main class="cover__centered center center_text stack">
-      <hgroup>
-        <h1>{{ i18n "404__header" }}</h1>
-        <h2>{{ i18n "404__sub-header" }}</h2>
-      </hgroup>
-      <div class="frame frame_ratio_5:4">
-        <img src="{{ "images/404.jpg" | relURL }}">" />
+{{ define "header" }}
+  <header></header>
+{{ end }}
+
+{{ define "main" }}
+  <main class="cover__centered center center_text stack">
+    <hgroup>
+      <h1>{{ i18n "404__header" }}</h1>
+      <h2>{{ i18n "404__sub-header" }}</h2>
+    </hgroup>
+    <div class="frame frame_ratio_5:4">
+      <img src="{{ "images/404.jpg" | relURL }}">" />
+    </div>
+    <p>{{ i18n "404__description" }}</p>
+    <div class="cluster cluster_align_center cluster_justify_space-around">
+      <div>
+        <a href="{{ "/" | relURL }}" target="_self">{{ i18n "404__back-link" }}</a>
+        <a rel="noopener noreferrer" href="{{ print .Site.Params.repository "new/master/" | relURL }}" target="_blank">{{ i18n "404__create-page" }}</a>
       </div>
-      <p>{{ i18n "404__description" }}</p>
-      <div class="cluster cluster_align_center cluster_justify_space-around">
-        <div>
-          <a href="{{ "/" | relURL }}" target="_self">{{ i18n "404__back-link" }}</a>
-          <a rel="noopener noreferrer" href="{{ print .Site.Params.repository "new/master/" | relURL }}" target="_blank">{{ i18n "404__create-page" }}</a>
-        </div>
-      </div>
-    </main>
-    {{ partial "scripts" . }}
-  </body>
-</html>
+    </div>
+  </main>
+{{ end }}
+
+{{ define "footer" }}
+  <footer></footer>
+{{ end }}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -3,11 +3,15 @@
   <head>
     {{ partial "head" . }}
   </head>
-  <body class="[ page__body ][ stack stack_split-after_3 ]">
+  <body class="[ page__body ][{{ if eq .Kind "404" }} cover cover_min-height_100vh {{ else }} stack stack_split-after_3 {{ end }}]">
     {{ partial "components/skip-links" . }}
-    {{ partial "header" . }}
+    {{ block "header" . }}
+      {{ partial "header" . }}
+    {{ end }}
     {{ block "main" . }}{{ end }}
-    {{ partial "footer" . }}
+    {{ block "footer" . }}
+      {{ partial "footer" . }}
+    {{ end }}
     {{ partial "scripts" . }}
   </body>
 </html>
diff --git a/layouts/_default/home.html b/layouts/_default/home.html
@@ -1,4 +1,5 @@
-{{- define "main" }}
+{{ define "header" }}
+  {{ partial "header" . }}
   <div class="cover cover_min-height_50vh">
     <div class="cover__centered center center_text stack" style="min-width: 50%">
       <span class="cover__centered frame frame_ratio_40:13">
@@ -8,6 +9,9 @@
       {{- with .Site.Params.description }}<p>{{ . }}</p>{{ end -}}
     </div>
   </div>
+{{ end }}
+
+{{- define "main" }}
   <main class="stack center center_padding_gutters stack" id="main">
     <article class="stack">
       <div class="center center_text">

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -1,10 +1,18 @@
 <header class="[ box ][ box_border_none box_boder_bottom stack_space_0 ]" id="header">
-  <nav class="cluster cluster_justify_start cluster_align_center">
+  <nav class="[ center ][ cluster cluster_justify_start cluster_align_center ]">
     <ul>
-      {{- $homePage := .Site.GetPage "/" -}}
-      <li><a class="logo" href="{{- $homePage.RelPermalink -}}" title="{{ $homePage.Title }}">{{ .Site.Title }}</a></li>
+      {{ $home := .Site.GetPage "/" }}
+      <li>
+        <a class="logo" href="{{ $home.RelPermalink }}" title="{{ $home.LinkTitle }}">
+          {{ .Site.Title }}
+        </a>
+      </li>
       {{- range .Site.Menus.header }}
-        <li><a href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a></li>
+        <li>
+          <a href="{{ .URL }}" title="{{ .Title }}">
+            {{ .Name }}
+          </a>
+        </li>
       {{ end -}}
       <li class="js-search"></li>
     </ul>