Style Rework and Credit Page

assets/css/main.css

@@ -35,11 +35,51 @@ footer {
   margin-top: 1rem;
 }
 
+h1, h2, h3, h4, h5, h6 {
+  text-align: left;
+}
+
 a {
   color: var(--text-highlight);
   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 +148,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,25 @@
++++
+title = 'Website Theme'
++++
+
+## 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

@@ -0,0 +1,137 @@
++++
+title = 'Theme Overview'
++++
+
+---
+
+## Headings
+
+# H1 – Main Heading  
+## H2 – Section Heading  
+### H3 – Subsection  
+#### H4 – Level 4  
+##### H5 – Level 5  
+###### H6 – Level 6
+
+---
+
+## Text Styles
+
+- **Bold text**  
+- *Italic text*  
+- ***Bold and italic***  
+- ~~Strikethrough~~  
+- `Inline code {}`  
+- > Blockquote with multiple  
+  > lines of text.
+
+---
+
+## Lists
+
+### Unordered
+
+- Item One  
+- Item Two  
+  - Subitem  
+    - Sub-subitem  
+- Item Three
+
+### Ordered
+
+1. First item  
+2. Second item  
+3. Third item
+
+---
+
+## Links and Images
+
+[External Link](https://example.com)
+
+![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
+
+```html
+<!-- HTML example -->
+<div class="example">Hello world</div>
+```
+
+```js
+// JavaScript example
+function test() {
+  console.log("Hello");
+}
+```
+
+```css
+/* CSS example */
+body {
+  font-family: sans-serif;
+}
+```
+
+```python
+# Python example
+def greet():
+    print("Hello, World!")
+```
+
+---
+
+## Tables
+
+| Column 1 | Column 2 | Column 3 | asd |
+|----------|----------|----------| --- |
+| Row A    | Row A    | Row A    | asdasdasdasdasdasdasdasdaasdasdasdasdasdasdasdasdasdasdasdasd |
+| Row B    | Row B    | Row B    | asd |
+| Row C    | Row C    | Row C    | asd |
+
+---
+
+## Horizontal Rule
+
+---
+
+## Task List
+
+- [x] First item  
+- [ ] Second item  
+- [ ] Third item
+
+---
+
+## HTML Elements
+
+<div style="padding: 1em; border: 1px solid #ccc;">
+  This is a raw HTML block.
+</div>
+
+---
+
+## Footnotes
+
+This is a sentence with a footnote.[^1] This is a sentence with a second footnote.[^2]
+
+[^1]: This is the footnote text.
+[^2]: This too
+
+---
+
+## Math (if supported)
+
+```math
+a^2 + b^2 = c^2
+```
+
+---
+
+## Definition List (may require extended Markdown)
+
+Term  
+: Definition of the term.

layouts/_default/single.html

@@ -1,10 +1,10 @@
 {{ define "main" }}
   <h1>{{ .Title }}</h1>
-
-  {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
-  {{ $dateHuman := .Date | time.Format ":date_long" }}
-  <time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
-
+  <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>{{ $label }}:</div>
-    <ul>
+  <div id="terms-container">
+    <ul id="terms-list">
       {{- range . }}
         <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
       {{- end }}