From c184aad39ea60b6febf047feb30dfb069f77bf2d Mon Sep 17 00:00:00 2001 From: Jan Kremer Date: Sat, 26 Apr 2025 14:54:33 +0200 Subject: [PATCH] meta: Update design and structure --- archetypes/{post.md => blog.md} | 0 assets/css/main.css | 217 ++++++++++-------- .../abendliche-bewoelkung.webp | Bin .../abendliche-bewoelkung/index.md | 0 content/{posts => blog}/markdown-tables.md | 0 content/{posts => blog}/selbsthosting.md | 8 +- content/{posts => blog}/timestamps.md | 0 content/eth.md | 4 - content/posts/_index.md | 4 - hugo.yaml | 4 +- layouts/_default/home.html | 14 +- layouts/_default/list.html | 16 +- layouts/_default/single.html | 15 +- layouts/partials/footer.html | 2 + layouts/partials/terms.html | 3 + 15 files changed, 152 insertions(+), 135 deletions(-) rename archetypes/{post.md => blog.md} (100%) rename content/{posts => blog}/abendliche-bewoelkung/abendliche-bewoelkung.webp (100%) rename content/{posts => blog}/abendliche-bewoelkung/index.md (100%) rename content/{posts => blog}/markdown-tables.md (100%) rename content/{posts => blog}/selbsthosting.md (95%) rename content/{posts => blog}/timestamps.md (100%) delete mode 100644 content/posts/_index.md diff --git a/archetypes/post.md b/archetypes/blog.md similarity index 100% rename from archetypes/post.md rename to archetypes/blog.md diff --git a/assets/css/main.css b/assets/css/main.css index 6cb631b..099b6a9 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -97,7 +97,6 @@ body { font-family: var(--sans-serif); - font-variant-numeric: oldstyle-nums; margin: auto; padding: 1rem; max-width: 80ch; @@ -113,94 +112,44 @@ main { a { color: var(--uchu-blue); text-decoration: none; + &:hover { text-decoration-color: var(--uchu-blue); text-decoration: underline; } } -article { - line-height: 1.5; - text-wrap: pretty; - text-align: justify; - text-justify: inter-word; - & img { - width: 100%; - } - > p:nth-of-type(2)::first-letter { - font-size: 3.3rem; - float: left; - line-height: 3rem; - padding-right: 0.2rem; - } - & p { - font-family: var(--serif); - } - & ul { - font-family: var(--serif); - } -} - -h1 { - text-align: center; -} - -em { - color: var(--uchu-red); -} - -strong { - color: var(--uchu-orange); -} - -abbr { - text-decoration-color: var(--uchu-blue); -} - -table { - border-collapse: collapse; - width: 90%; - margin: 5%; - & th { - text-align: left; - border-bottom: 1px solid; - } -} - .title { color: light-dark(var(--uchu-yin), var(--uchu-yang)); - font-family: var(--serif); font-weight: bold; font-variant: normal; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; - & svg { + + svg { height: 1.5rem; margin: 0.5rem; vertical-align: middle; - fill: light-dark((var(--uchu-yin)), var(--uchu-yang)); + fill: light-dark(var(--uchu-yin), var(--uchu-yang)); + @media (prefers-color-scheme: dark) { path { fill: white; } } } } header { border-bottom: 1px solid var(--uchu-gray); font-size: 1.25rem; - font-family: var(--serif); font-weight: bold; - font-variant: small-caps; - & nav { - & ul { + + nav { + ul { display: flex; justify-content: space-evenly; list-style: none; padding: 0 0.5rem; - & a { - color: light-dark((var(--uchu-yin)), var(--uchu-yang)); - text-decoration: none; - } + a { color: light-dark(var(--uchu-yin), var(--uchu-yang)); } .active { text-decoration: underline; @@ -210,78 +159,142 @@ header { } } +article { + line-height: 1.5; + text-wrap: pretty; + text-align: justify; + text-justify: inter-word; + font-variant-numeric: oldstyle-nums; + + img { width: 100%; } + + >p:nth-of-type(2)::first-letter { + font-size: 3.3rem; + float: left; + line-height: 3rem; + padding-right: 0.2rem; + } + + p, ul { font-family: var(--serif); } + + .dates { + display: flex; + justify-content: space-between; + + p { + margin: 0; + padding: 0; + } + } + + h1 { + text-align: center; + margin: 0; + font-size: 1.75rem; + } + + .lead { + font-family: var(--sans-serif); + text-align: center; + font-size: 1.5rem; + margin: 0; + } + + em { color: var(--uchu-red); } + + strong { color: var(--uchu-orange); } + + abbr { text-decoration-color: var(--uchu-blue); } + + table { + border-collapse: collapse; + width: 90%; + margin: 5%; + + th { + text-align: left; + border-bottom: 1px solid; + } + } +} + footer { - font-family: var(--serif); border-top: 1px solid var(--uchu-gray); - & ul { + + ul { display: flex; justify-content: space-around; list-style: none; font-size: 0.75rem; padding: 1rem; - & a { + + a { text-decoration: none; - &:hover { - text-decoration: none; - } + color: light-dark(var(--uchu-yin), var(--uchu-yang)); + + &:hover { text-decoration: none; } } - & svg { + + svg { height: 0.75rem; width: 0.75rem; - padding: 0.1rem; vertical-align: middle; } + + #title { + svg { + @media (prefers-color-scheme: dark) { path { fill: white; } } + } + } } } .list { - color: light-dark(var(--uchu-yin), var(--uchu-yang)); - & h2 { - margin-top: 1.25rem; - margin-bottom: 0; - } - .lead { - margin: 0; - font-size: 1rem; - text-align: left; - text-decoration: none; - } -} - -.tags { - & ul { + ul { list-style: none; - display: flex; - justify-content: space-between; - padding: 0 1rem; - font-size: 0.75rem; + padding: 0; } -} -.lead { - font-family: var(--sans-serif); - text-align: center; - font-size: 1.5rem; - margin-bottom: 1rem; + li { + padding: 1rem; + border-left: solid transparent 3px; + + a { + color: light-dark(var(--uchu-yin), var(--uchu-yang)); + text-decoration: none; + } + + &:hover { + border-left: solid var(--uchu-blue) 3px; + text-decoration: none; + } + + h2 { margin: 0; } + + .lead { + margin: 0; + font-size: 1rem; + text-align: left; + text-decoration: none; + } + } } code { - border-radius: 0.3em; - padding: 0.1em 0.2em; - font-size: 0.9em; + border-radius: 0.3rem; + font-size: 0.8rem; + margin: 0; + padding: 0 1rem; } .highlight { background: light-dark(var(--uchu-gray), var(--uchu-dark-gray)); border-radius: 0.3rem; - padding: 0.5em 0.5em; + padding: 0.5rem 0rem; margin: 1rem 0; overflow: auto; - & code { - margin: 0; - padding: 0; - } - & pre { + + pre { margin: 0; padding: 0; } diff --git a/content/posts/abendliche-bewoelkung/abendliche-bewoelkung.webp b/content/blog/abendliche-bewoelkung/abendliche-bewoelkung.webp similarity index 100% rename from content/posts/abendliche-bewoelkung/abendliche-bewoelkung.webp rename to content/blog/abendliche-bewoelkung/abendliche-bewoelkung.webp diff --git a/content/posts/abendliche-bewoelkung/index.md b/content/blog/abendliche-bewoelkung/index.md similarity index 100% rename from content/posts/abendliche-bewoelkung/index.md rename to content/blog/abendliche-bewoelkung/index.md diff --git a/content/posts/markdown-tables.md b/content/blog/markdown-tables.md similarity index 100% rename from content/posts/markdown-tables.md rename to content/blog/markdown-tables.md diff --git a/content/posts/selbsthosting.md b/content/blog/selbsthosting.md similarity index 95% rename from content/posts/selbsthosting.md rename to content/blog/selbsthosting.md index 697252f..9296d42 100644 --- a/content/posts/selbsthosting.md +++ b/content/blog/selbsthosting.md @@ -1,6 +1,6 @@ --- title: Selbsthosting -date: 2024-12-28T07:22:14+01:00 +date: 2025-04-14 description: Kleiner Computer, große Pläne tags: - selbsthosting @@ -8,7 +8,7 @@ tags: - git --- -Seit etwa 2020 hat mich die Idee fasziniert, meinen *eigenen Server zu betreiben* – also die volle Kontrolle über Daten, Dienste und Medien zu haben. Vor allem auf Reddit, und dort besonders in den Communities [r/selfhosted](https://www.reddit.com/r/selfhosted) und [r/homelab](https://www.reddit.com/r/homelab), habe ich immer wieder spannende Projekte gesehen. Lange blieb das für mich ein Traum – zu wenig Zeit, zu wenig Geld. Aber im April 2024 war es so weit: Mein kleines Selbsthosting-Abenteuer begann. +Seit etwa 2020 hat mich die Idee fasziniert, meinen _eigenen Server zu betreiben_ – also die volle Kontrolle über Daten, Dienste und Medien zu haben. Vor allem auf Reddit, und dort besonders in den Communities [r/selfhosted](https://www.reddit.com/r/selfhosted) und [r/homelab](https://www.reddit.com/r/homelab), habe ich immer wieder spannende Projekte gesehen. Lange blieb das für mich ein Traum – zu wenig Zeit, zu wenig Geld. Aber im April 2024 war es so weit: Mein kleines Selbsthosting-Abenteuer begann. ## Hardware @@ -68,8 +68,8 @@ Seit Januar ist mein Server abgeschaltet. Der Lüfter des Mini-PCs sowie die externe Festplatte liefen dauerhaft – das führte zu einem nicht unerheblichen **Stromverbrauch** und konstantem **Hintergrundrauschen**. Beides ließe sich vermutlich optimieren, z. B. durch bessere Energieeinstellungen oder leisere Hardware. Dazu müsste ich mich aber erst mal reinfuchsen und zudem mehr Geld ausgeben. -Ein weiterer Grund: Ich habe den Server *kaum genutzt*. Meine iCloud läuft noch, Streaming mache ich momentan wenig und durch begrenztes Datenvolumen ist exzessives Streaming ohnehin keine Option. +Ein weiterer Grund: Ich habe den Server _kaum genutzt_. Meine iCloud läuft noch, Streaming mache ich momentan wenig und durch begrenztes Datenvolumen ist exzessives Streaming ohnehin keine Option. -Aber: Ich habe in den letzten 8 Monaten extrem viel gelernt – über Linux, Netzwerke, NixOS, Systemadministration, Sicherheit und mehr. Das Projekt hat mir gezeigt, wie viel man aus einem alten Mini-PC herausholen kann. Vielleicht wird der Server eines Tages reaktiviert – in neuer Form. Für den Moment war es vor allem: *ein spannendes Lernprojekt*. +Aber: Ich habe in den letzten 8 Monaten extrem viel gelernt – über Linux, Netzwerke, NixOS, Systemadministration, Sicherheit und mehr. Das Projekt hat mir gezeigt, wie viel man aus einem alten Mini-PC herausholen kann. Vielleicht wird der Server eines Tages reaktiviert – in neuer Form. Für den Moment war es vor allem: _ein spannendes Lernprojekt_. Falls du Fragen hast oder selbst mit Selbsthosting starten willst: Schreib mir gern oder schau dir [meine Konfiguration](https://github.com/jukremer/nix-config) auf GitHub an. Vielleicht hilft dir mein Weg ja bei deinem Einstieg. diff --git a/content/posts/timestamps.md b/content/blog/timestamps.md similarity index 100% rename from content/posts/timestamps.md rename to content/blog/timestamps.md diff --git a/content/eth.md b/content/eth.md index 3eff84d..210d534 100644 --- a/content/eth.md +++ b/content/eth.md @@ -19,7 +19,3 @@ tags: [crypto] ```txt jankremer.eu ``` - -## OpenSea - -[Echinacea](https://opensea.io/Echinacea) diff --git a/content/posts/_index.md b/content/posts/_index.md deleted file mode 100644 index f53dea3..0000000 --- a/content/posts/_index.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: Posts -date: 2022-12-10 ---- diff --git a/hugo.yaml b/hugo.yaml index 33ea300..cb1e64d 100644 --- a/hugo.yaml +++ b/hugo.yaml @@ -15,8 +15,8 @@ params: email: mail@jankremer.eu menus: main: - - name: Posts - pageRef: /posts + - name: Blog + pageRef: / weight: 1 - name: Über mich pageRef: /about diff --git a/layouts/_default/home.html b/layouts/_default/home.html index 174a454..72ba1c6 100644 --- a/layouts/_default/home.html +++ b/layouts/_default/home.html @@ -3,17 +3,19 @@ {{ $pages := .Paginate (where .Site.RegularPages "Type" "ne" "page") }} +
+ +
{{ end }} diff --git a/layouts/_default/list.html b/layouts/_default/list.html index c8b8619..06a96d0 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,16 +1,20 @@ {{ define "main" }} - {{ .Content }} + {{ .Content }} +
+ +
{{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 5a186f0..fd3a8e0 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,14 +1,15 @@ {{ define "main" }}
- {{ $dateMachine := .Lastmod | time.Format "2006-01-02T15:04:05-07:00" }} - {{ $dateHuman := .Lastmod | time.Format ":date_long" }} - - + {{ $dateHuman := .Date | time.Format ":date_long" }} + {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }} + {{ $lastmodDateHuman := .Lastmod | time.Format ":date_long" }} + {{ $lastmodDateMachine := .Lastmod | time.Format "2006-01-02T15:04:05-07:00" }} +
+

Editiert:

+

+

{{ .Title }}

-

{{ .Description }}

- {{ .Content }}
- {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }} {{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 29da459..d860b53 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -6,8 +6,10 @@
  • + {{ partial "logo.svg" . }} {{ site.Title }} +
  • 2021–{{ now.Year }}
    • diff --git a/layouts/partials/terms.html b/layouts/partials/terms.html index 09500fa..42b929d 100644 --- a/layouts/partials/terms.html +++ b/layouts/partials/terms.html @@ -10,10 +10,13 @@ }} {{- $label := (index . 0).Parent.LinkTitle }}
    +
    {{- end }}