meta: Update design and structure

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;
   }

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.

content/eth.md

@@ -19,7 +19,3 @@ tags: [crypto]
 ```txt
 jankremer.eu
 ```
-
-## OpenSea
-
-[Echinacea](https://opensea.io/Echinacea)

content/posts/_index.md

@@ -1,4 +0,0 @@
----
-title: Posts
-date: 2022-12-10
----

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

layouts/_default/home.html

@@ -3,17 +3,19 @@
   {{ $pages := .Paginate (where
     .Site.RegularPages "Type" "ne" "page")
   }}
+  <div class="list">
+  <ul>
   {{ range $pages.Pages }}
+  <li>
     <a href="{{ .RelPermalink }}" style="display: block">
-      <div class="list">
         <h2>{{ .Title }}</h2>
-
         <p class="lead">{{ .Description }}</p>
-
-        {{ $dateMachine := .Lastmod | time.Format "2006-01-02T15:04:05-07:00" }}
-        {{ $dateHuman := .Lastmod | time.Format ":date_long" }}
+        {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
+        {{ $dateHuman := .Date | time.Format ":date_long" }}
         <time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
-      </div>
     </a>
+  </li>
   {{ end }}
+</ul>
+</div>
 {{ end }}

layouts/_default/list.html

@@ -1,16 +1,20 @@
 {{ define "main" }}
   {{ .Content }} 
+  <div class="list">
+  <ul>
   {{ range .Pages }}
-    <a href="{{ .RelPermalink }}" style="display: block">
-      <div class="list">
+  <li> 
+  <a href="{{ .RelPermalink }}" style="display: block">
         <h2>{{ .Title }}</h2>
 
         <p class="lead">{{ .Description }}</p>
 
-        {{ $dateMachine := .Lastmod | time.Format "2006-01-02T15:04:05-07:00" }}
-        {{ $dateHuman := .Lastmod | time.Format ":date_long" }}
+        {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
+        {{ $dateHuman := .Date | time.Format ":date_long" }}
         <time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
-      </div>
     </a>
+  </li> 
   {{ end }}
+</ul>
+  </div>
 {{ end }}

layouts/_default/single.html

@@ -1,14 +1,15 @@
 {{ define "main" }}
   <article>
-    {{ $dateMachine := .Lastmod | time.Format "2006-01-02T15:04:05-07:00" }}
-    {{ $dateHuman := .Lastmod | time.Format ":date_long" }}
-    <time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
-
+    {{ $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" }}
+    <div class="dates">
+      <p>Editiert: <time datetime="{{ $lastmodDateMachine }}">{{ $lastmodDateHuman }}</time></p> 
+      <p><time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time></p>
+    </div>
     <h1>{{ .Title }}</h1>
-
     <p class="lead">{{ .Description }}</p>
-
     {{ .Content }}
   </article>
-  {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
 {{ end }}

layouts/partials/footer.html

@@ -6,8 +6,10 @@
     </a>
   </li>
   <li>
+  <a href="/about" id="title">
     {{ partial "logo.svg" . }}
     {{ site.Title }}
+  </a>
   </li>
   <li>2021–{{ now.Year }}</li>
 </ul>

layouts/partials/terms.html

@@ -10,10 +10,13 @@
 }}
   {{- $label := (index . 0).Parent.LinkTitle }}
   <div class="tags">
+    <ul>
+      <li>Tags:</li>
     <ul>
       {{- range . }}
         <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
       {{- end }}
     </ul>
+    </ul>
   </div>
 {{- end }}