From bdc9a19c76f4b60141854042d070805a105c0780 Mon Sep 17 00:00:00 2001
From: Henry V Child <me@henryvchild.eu>
Date: Sat, 8 Feb 2025 18:42:22 +0100
Subject: [PATCH] New Layout and CSS

---
 layouts/_default/baseof.html             | 20 ++++++++
 layouts/_default/page.html               | 11 ++++
 layouts/_default/single.html             | 27 ++++++++++
 layouts/_default/summary.html            |  8 +++
 layouts/index.html                       | 15 ++++++
 layouts/partials/footer/main.html        |  1 +
 layouts/partials/header/lang_switch.html |  7 +++
 layouts/partials/header/main.html        |  4 ++
 layouts/partials/header/menu.html        |  7 +++
 static/styles.css                        | 65 ++++++++++++++++++++++++
 10 files changed, 165 insertions(+)
 create mode 100644 layouts/_default/baseof.html
 create mode 100644 layouts/_default/page.html
 create mode 100644 layouts/_default/single.html
 create mode 100644 layouts/_default/summary.html
 create mode 100644 layouts/index.html
 create mode 100644 layouts/partials/footer/main.html
 create mode 100644 layouts/partials/header/lang_switch.html
 create mode 100644 layouts/partials/header/main.html
 create mode 100644 layouts/partials/header/menu.html
 create mode 100644 static/styles.css
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
new file mode 100644
index 0000000..efac840
--- /dev/null
+++ b/layouts/_default/baseof.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="/styles.css">
+    <title>{{ block "title" . }}
+      {{ .Site.Title }}
+    {{ end }}</title>
+  </head>
+  <body>
+    <div class="container centre">
+    {{ partial "header/main.html" . }}
+    {{ block "main" . }}
+      <!-- The part of the page that begins to differ between templates -->
+    {{ end }}
+    {{ partial "footer/main.html" }}
+    </div>
+  </body>
+</html>
+
diff --git a/layouts/_default/page.html b/layouts/_default/page.html
new file mode 100644
index 0000000..5b0ae08
--- /dev/null
+++ b/layouts/_default/page.html
@@ -0,0 +1,11 @@
+{{ define "main" }}
+<main role="main">
+    <div class="post">
+        {{ partial "baseof.html" . }}
+        <article>
+            {{ .Content }}
+        </article>
+    </div>
+</main>
+{{ end }}
+
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
new file mode 100644
index 0000000..8189d49
--- /dev/null
+++ b/layouts/_default/single.html
@@ -0,0 +1,27 @@
+{{ define "main" }}
+<section>
+  <h1>{{ .Title }}</h1>
+  <div>
+    <article>
+      {{ .Content }}
+    </article>
+  </div>
+</section>
+<aside>
+  <div>
+    <section>
+      <h4>{{ .Date.Format "Mon Jan 2, 2006" }}</h4>
+      <h5>{{ .WordCount }} Words</h5>
+    </section>
+  </div>
+  <div>
+    {{ with .PrevInSection }}
+    <a class="previous" href="{{ .Permalink }}"> {{.Title}}</a>
+    {{ end }}
+    {{ with .NextInSection }}
+    <a class="next" href="{{ .Permalink }}"> {{.Title}}</a>
+    {{ end }}
+  </div>
+</aside>
+{{ end }}
+
diff --git a/layouts/_default/summary.html b/layouts/_default/summary.html
new file mode 100644
index 0000000..91d5b93
--- /dev/null
+++ b/layouts/_default/summary.html
@@ -0,0 +1,8 @@
+<a href="{{ .Permalink }}">
+  <div>{{ .Title }}</div>
+  <div>{{ .Summary }}</div>
+  <div>
+    <span>{{ .ReadingTime }} Minutes</span>
+    <span>{{ .Date.Format "Jan 2, 2006" }}</span>
+  </div>
+</a>
diff --git a/layouts/index.html b/layouts/index.html
new file mode 100644
index 0000000..c6e45b8
--- /dev/null
+++ b/layouts/index.html
@@ -0,0 +1,15 @@
+{{ define "main" }}
+  <main>
+    <h2>{{ .Title }}</h2>
+    <div class="homepage-content">
+      <!-- Note that the content for index.html, as a sort of list page, will pull from content/_index.md -->
+      {{.Content}}
+    </div>
+    <div>
+      {{range where .Site.RegularPages "Section" "posts" }}
+          {{ .Render "summary" }}
+      {{ end }}
+    </div>
+  </main>
+{{ end }}
+
diff --git a/layouts/partials/footer/main.html b/layouts/partials/footer/main.html
new file mode 100644
index 0000000..89fe55b
--- /dev/null
+++ b/layouts/partials/footer/main.html
@@ -0,0 +1 @@
+<footer><a href=mailto:me@henryvchild.eu>me@henryvchild.eu</a></footer>
diff --git a/layouts/partials/header/lang_switch.html b/layouts/partials/header/lang_switch.html
new file mode 100644
index 0000000..ca84a60
--- /dev/null
+++ b/layouts/partials/header/lang_switch.html
@@ -0,0 +1,7 @@
+{{ if .IsTranslated }}
+{{ range .Translations }}
+<span class="language-switcher"> 
+  <a href ="{{ .RelPermalink }}">{{ .Language.LanguageName }}</a>
+</span>
+{{ end }}
+{{ end }}
diff --git a/layouts/partials/header/main.html b/layouts/partials/header/main.html
new file mode 100644
index 0000000..7d3ec59
--- /dev/null
+++ b/layouts/partials/header/main.html
@@ -0,0 +1,4 @@
+<header id="header">
+  <a id="title" href="/{{.Lang}}">Henry Valentine Child</a>
+  {{ partial "header/menu.html" . }}
+</header>
diff --git a/layouts/partials/header/menu.html b/layouts/partials/header/menu.html
new file mode 100644
index 0000000..0acfab0
--- /dev/null
+++ b/layouts/partials/header/menu.html
@@ -0,0 +1,7 @@
+<span id="menu">
+  {{ range .Site.Menus.main }}
+    <a class="header_item" href="{{ .URL }}">{{ .Name }}</a>
+  {{ end }}
+  {{ partial "header/lang_switch.html" .}}
+</span>
+
diff --git a/static/styles.css b/static/styles.css
new file mode 100644
index 0000000..43866a9
--- /dev/null
+++ b/static/styles.css
@@ -0,0 +1,65 @@
+:root {
+	--background-colour: #0E1428;
+	--primary-colour: #FFF4EC;
+	--accent-colour: #D95D39;
+}
+
+body {
+	background-color: var(--background-colour);
+	color: var(--primary-colour);
+        line-height: 1.4;
+	font-family: Fira Code, Monaco, Consolas, Ubuntu Mono, monospace;
+	align-text: left;
+        margin: 0 auto; 
+	height: 100vh
+}
+
+.header_item {
+	padding-right: 20px;
+
+}
+
+.container.centre {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	max-width: 864px;
+	margin: 0 auto;
+	height: 100vh;
+}
+
+#header {
+	margin-top: 10px;
+	display: flex;
+	flex-direction: column;
+}
+
+#title {
+	color: var(--accent-colour);
+	text-decoration: none;
+	font-size: 25px;
+	margin-bottom: 15px;
+}
+
+main {
+	flex-grow: 1;
+}
+
+header footer {
+	flex-shrink: 0;
+}
+
+footer {
+	margin-bottom: 10px;
+}
+
+a {
+	color: var(--primary-colour);
+}
+
+li::marker {
+	color: var(--accent-colour);
+}
+hr {
+	color: var(--accent-colour);
+}
