Footer Style

Reviewed-on: #8

assets/css/main.css

@@ -33,6 +33,11 @@ header {
 
 footer {
   margin-top: 1rem;
+  text-align: center;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  text-align: left;
 }
 
 a {
@@ -40,6 +45,42 @@ a {
   text-decoration: none;
 }
 
+/* Media */
+
+img {
+  max-width: 100%;
+  height: auto;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+figure {
+  display: inline-block;
+  margin: 2rem auto;
+  text-align: center;
+  max-width: 100%;
+}
+
+figure img {
+  max-width: 100%;
+  height: auto;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+figcaption {
+  margin-top: 0.75rem;
+  font-size: 0.95rem;
+  color: var(--text-highlight-secondary);
+  font-style: italic;
+  line-height: 1.4;
+}
+
+.center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: fit-content;
+}
+
 /* Menubar */
 
 nav {
@@ -108,3 +149,40 @@ td:last-child,
 th:last-child {
   border-right: none;
 }
+
+hr {
+  border: none;
+  border-top: 3px dotted var(--table-gridlines);
+  margin: 2rem 0;
+  opacity: 0.7;
+}
+
+#site-title {
+  text-align: center;
+}
+
+div#terms-container {
+  display: flex;
+}
+
+ul#terms-list {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+ul#terms-list > li > a {
+  text-transform: lowercase;
+  display: inline-block;
+  padding: 0.2rem 0.3rem 0.2rem 0.3rem;
+  font-weight: 700;
+  font-size: 0.8rem;
+  color: var(--bg-color);
+  background-color: var(--text-highlight);
+  border-radius: 0.5rem;
+  margin: 0.2rem;
+}
+
+ul#terms-list > li > a:first-child { margin-left: 0; }
+div#terms-time-container { display: flex; justify-content: space-between; }

content/nostalgia_theme/_index.md

@@ -0,0 +1,19 @@
+## This Website is powered by Nostalgia!
+
+And therefore [Hugo](https://gohugo.io)! The motivation behind this theme is the wish for a simpler, uncluttered, and most importantly, *faster* browsing experience. Hugo alone is a great step in that direction, replacing huge frameworks, backends and databases with simple HTML and CSS, going back to the foundations of the Internet. 
+
+**Features of Nostalgia**:
+
+- Clean and simple aesthetics
+- Easy to use and set up
+- Lightweight
+
+[> > Use Nostalgia for your Website! < <](https://git.juhn.eu/juhn/nostalgia-theme)
+
+## License for Nostalgia
+
+Nostalgia - to the extent of the code written by the author - is licensed under the UNLICENSE and is thereby in the public domain. To learn more, see [Unlicense](https://unlicense.org/).
+
+**This page is optional — keeping it is appreciated 🙂**
+
+-- With ❤️ from 🇪🇺

content/posts/post-3/index.md

@@ -1,5 +1,5 @@
 +++
-title = 'Post 3'
+title = 'The simple theme for Hugo!'
 date = 2023-03-15T11:00:00-07:00
 draft = false
 tags = ['red','green','blue']
@@ -7,6 +7,6 @@ tags = ['red','green','blue']
 
 Occaecat aliqua consequat laborum ut ex aute aliqua culpa quis irure esse magna dolore quis. Proident fugiat labore eu laboris officia Lorem enim. Ipsum occaecat cillum ut tempor id sint aliqua incididunt nisi incididunt reprehenderit. Voluptate ad minim sint est aute aliquip esse occaecat tempor officia qui sunt. Aute ex ipsum id ut in est velit est laborum incididunt. Aliqua qui id do esse sunt eiusmod id deserunt eu nostrud aute sit ipsum. Deserunt esse cillum Lorem non magna adipisicing mollit amet consequat.
 
-![Bryce Canyon National Park](bryce-canyon.jpg)
+{{< figure src="bryce-canyon.jpg" caption="Bryce Canyon" class="center" >}}
 
 Sit excepteur do velit veniam mollit in nostrud laboris incididunt ea. Amet eu cillum ut reprehenderit culpa aliquip labore laborum amet sit sit duis. Laborum id proident nostrud dolore laborum reprehenderit quis mollit nulla amet veniam officia id id. Aliquip in deserunt qui magna duis qui pariatur officia sunt deserunt.

content/theme_overview/_index.md

@@ -53,6 +53,8 @@ draft = false
 
 ![Sample Image](https://placehold.co/600x400)
 
+{{< figure src="https://placehold.co/300x200" caption="This is an image with a caption. I'm centered :)" class="center" >}}
+
 ---
 
 ## Code Blocks

layouts/_default/single.html

@@ -1,10 +1,10 @@
 {{ define "main" }}
   <h1>{{ .Title }}</h1>
-
+  <div id="terms-time-container">
+    {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
     {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
     {{ $dateHuman := .Date | time.Format ":date_long" }}
     <time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
-
+  </div>
   {{ .Content }}
-  {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
 {{ end }}

layouts/partials/footer.html

@@ -1,2 +1,2 @@
 <p>Copyright {{ now.Year }}. All rights reserved.</p>
-<p>Powered by <a href="#">Nostalgia</a></p>
+<p>Powered by <a href="/nostalgia_theme">Nostalgia</a></p>

layouts/partials/header.html

@@ -1,2 +1,2 @@
-<h1>{{ site.Title }}</h1>
+<h1 id="site-title">{{ site.Title }}</h1>
 {{ partial "menu.html" (dict "menuID" "main" "page" .) }}

layouts/partials/terms.html

@@ -12,9 +12,8 @@ For a given taxonomy, renders a list of terms assigned to the page.
 
 {{- with $page.GetTerms $taxonomy }}
   {{- $label := (index . 0).Parent.LinkTitle }}
-  <div>
+  <div id="terms-container">
-    <div>{{ $label }}:</div>
+    <ul id="terms-list">
-    <ul>
       {{- range . }}
         <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
       {{- end }}