Dieses Blog nutzt den Outpost-Theme von Mike Haynes mit einigen Modifikationen. Der Original-Theme gefiel mir sehr gut; einige Kleinigkeiten störten mich aber. Bei micro.blog gibt es die Möglichkeit, Anpassungen am CSS vorzunehmen. Der folgende Code ist also eine Modifikation zum eigentlichen Outpost-CSS-Code; nur die Änderungen sind unten aufgeführt. Ansonsten gilt das eigentliche CSS weiter. Am meisten habe ich den Hell-Dunkel-Modus vermist. Durch Ändern der Farbvariablen unter root kann man relativ schnell den Theme hell bekommen. Mit @media (prefers-color-scheme: dark) kann man dann die Farben für den Dunkelmodus einstellen. Das sind wieder die Farben, wie das Original sie verwendet. Im Wesentlichen habe ich für den hellen Modus nur die Farbe für text und background vertauscht. Außerdem habe ich die Akzentfarbe geändert, wiel ich eine etwas grellere Farbe wollte. Unter Table Formating habe ich dann noch Anpassungen für Tabellen aufgenommen. Etwas komplizierter war die Anpassung des Code-Blocks unter Code Formatting. Ich vermute, dass micro.blog hier selbst Vorgaben macht und daher meine eigenen Einstellungen im pre-container keine Geltung haben. Nach einigem Ausprobieren habe ich mich dem Schicksal gebeugt. Unabhängig ob der Theme hell oder dunkel ist, ist der Code-Block daher immer dunkel. Ob ich mit !important hier etwas überschreiben könnte, weiß ich nicht und ich wollte es auch nicht weiter ausprobieren. Für Code-Text (sowohl im Fließtext als auch im Code-Block) habe ich noch eine Ergänzung der Schriftgröße für mobile Geräte hinzugefügt, die nun - wie der restliche Mobile-Theme - etwas kleiner ist. Outpost verwendet für Text auf mobilen Geräten 20px, während ansonsten 24px verwendet werden. Ohne diese Anpassung ist auf mobilen Geräten der Code weiter bei 24px, was vor allem im Fließtext zu einem unregelmäßigen Ergebnis führt.

:root {
  --text: #012030;
  --background: #F1F1F1;
  --accent: #c918bb;
  --codetext: #f1f1f1;
  --codebg: #012030;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --text: #f1f1f1;
    --background: #012030;
    --accent: #c918bb;
    --codetext: #012030;
    --codebg: #f1f1f1;
    }
}

/** Code Formatting */
code {
  font-size: 24px;
  border-radius: 4px;
  background: var(--codebg);
  color: var(--codetext);
}

pre {
  border-radius: 4px;
  padding: 4px 16px;
  overflow-x: scroll;
}

pre > code {
  background-color: transparent;
  color: #f1f1f1;
  border: 0;
  padding-right: 0;
  padding-left: 0;
}

/**Table Formatting */
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  margin: 40px 0;
  border-radius: 5px;
}

table, th, td {
  border-left: 0px;
  border-right: 0px;
  border-top: 1px solid;
  border-bottom: 0px;
  border-color: var(--text);
  padding: 10px;
  overflow-x: hidden;
}

th {
  background: var(--text);
  color: var(--background);
  border: 0px;
  text-align: left;
}

/** Mobile */
@media screen and (max-width: 800px) {
  code {
    font-size: 20px;
  }
}

Hier folgt noch ein kleines Beispiel zum Aussehen der Tabelle: