From e88a982dd7b3d69c1e65fce0dce7a4f14ca807f7 Mon Sep 17 00:00:00 2001 From: juhnsa Date: Wed, 23 Jul 2025 20:05:01 +0200 Subject: [PATCH] Style Rework and Credit Page --- assets/css/main.css | 77 +++++++++++++++++ content/nostalgia_theme/_index.md | 25 ++++++ content/posts/post-3/index.md | 4 +- content/theme_overview/_index.md | 137 ++++++++++++++++++++++++++++++ layouts/_default/single.html | 12 +-- layouts/partials/footer.html | 2 +- layouts/partials/header.html | 2 +- layouts/partials/terms.html | 5 +- screenshot.png | Bin 62336 -> 67002 bytes 9 files changed, 251 insertions(+), 13 deletions(-) create mode 100644 content/nostalgia_theme/_index.md create mode 100644 content/theme_overview/_index.md diff --git a/assets/css/main.css b/assets/css/main.css index 3c60d07..29f6339 100644 --- a/assets/css/main.css +++ b/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; } \ No newline at end of file diff --git a/content/nostalgia_theme/_index.md b/content/nostalgia_theme/_index.md new file mode 100644 index 0000000..ac1f12d --- /dev/null +++ b/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 🇪🇺 \ No newline at end of file diff --git a/content/posts/post-3/index.md b/content/posts/post-3/index.md index ca42a66..b6ae5f6 100644 --- a/content/posts/post-3/index.md +++ b/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. diff --git a/content/theme_overview/_index.md b/content/theme_overview/_index.md new file mode 100644 index 0000000..1e275ae --- /dev/null +++ b/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 + +
Hello world
+``` + +```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 + +
+ This is a raw HTML block. +
+ +--- + +## 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. diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 7e286c8..3eb3886 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,10 +1,10 @@ {{ define "main" }}

{{ .Title }}

- - {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }} - {{ $dateHuman := .Date | time.Format ":date_long" }} - - +
+ {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }} + {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }} + {{ $dateHuman := .Date | time.Format ":date_long" }} + +
{{ .Content }} - {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }} {{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index ee99d3e..3ebe378 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,2 +1,2 @@

Copyright {{ now.Year }}. All rights reserved.

-

Powered by Nostalgia

\ No newline at end of file +

Powered by Nostalgia

\ No newline at end of file diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 7980a00..002f7d9 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,2 +1,2 @@ -

{{ site.Title }}

+

{{ site.Title }}

{{ partial "menu.html" (dict "menuID" "main" "page" .) }} diff --git a/layouts/partials/terms.html b/layouts/partials/terms.html index 47cf6e4..5fb649f 100644 --- a/layouts/partials/terms.html +++ b/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 }} -
-
{{ $label }}:
-