kernelschmelze.de

So aller paar Jahre überkommt es mich und ich habe das Verlangen das Blog Design neu zu bauen. Beim letzten mal habe ich zuerst die Hugo Templates gebaut und dann das CSS drumherum. Diesmal habe ich erst das CSS gebaut und anschließend die Hugo Templates. Das hatte den angenehmen Effekt, das das CSS direkt um 30% geschrumpft ist.

Strukturiert habe ich das wie folgt:

css
├── base.css
├── theme.css
└── mod.css

Das base.css kümmert sich um das responsive Layout der Elemente, theme.css um die Farbgebung und mod.css um individuelle Anpassungen für den Blog.

Für die Farbgebung setze ich lediglich die Hintergrundfarbe,

html {
  --red: 32;
  --green: 32;
  --blue: 32;
}

und lasse mir die entsprechende Vordergrundfarbe und deren Abstufungen automatisch berechnen.

html {
  --aa-brightness: ((var(--red) * 299) + (var(--green) * 587) + (var(--blue) * 114)) / 1000;
  --aa-color: calc((var(--aa-brightness) - 128) * -1000);
  --background: rgb(var(--red), var(--green), var(--blue));
  --color: rgb(var(--aa-color), var(--aa-color), var(--aa-color));
  --color-dim: rgba(var(--aa-color), var(--aa-color), var(--aa-color), 0.6);
  --color-dim-max: rgba(var(--aa-color), var(--aa-color), var(--aa-color), 0.15);
}

body {
  background: var(--background);
  color: var(--color);
}

Das Blog wird per Voreinstellung in einem dunklen Design ausgeliefert. Sofern dein Betriebssystem über einen dark/light Modus verfügt, wird bei einem bevorzugtem hellen Design die Hintergrundfarbe auf Weiß gesetzt und die optimale Vordergrundfarbe automatisch durch obige Funktion berechnet.

@media screen and (prefers-color-scheme: light) {
  html {
    --red: 243;
    --green: 242;
    --blue: 241;
  }
}

Die Templates sind auf ein minimum reduziert und alles was nicht zwingend nötig ist, wurde erst gar nicht eingebaut. Sozialmedia Seiten Hinweiße im HTTP Header, raus. Homepage Icon für die komplette Geräteflotte, raus. Itemscope, raus. Favicon? Ein einfaches Unicode Zeichen tut es auch.

<head>
    <title>{{ site.Title }}</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>☕</text></svg>">
</head>

<body>
  <div>
    <header><nav></nav></header>
    <main>
      <section>
        <p>
          Lorem ipsum dolor sit amet ...
        </p>
      </section>
    </main>
    <footer><nav></nav></footer>
  </div>
</body>

Bislang habe ich auf System Fonts gesetzt, was den Vorteil hat, das kein Font nachgeladen werden muss, jedoch den Nachteil hat, das das Blog doch nicht immer gleich aussieht. Diesmal setze ich auf Roboto Mono. Das sind aktuell im schlimmsten Fall 25kb die einmalig geladen werden müssen.

In diesem Sinne - viel Spass mit extenden to minimum.