Für meinen Blog habe ich heute verschiedene CSS-Anpassungen vorgenommen, um Darstellung, Lesbarkeit und das allgemeine Layout weiter zu optimieren. Der Artikel beschreibt die Hintergründe der Änderungen sowie die jeweiligen CSS-Anpassungen im Detail.
Dabei ging es insbesondere um die Darstellung von Code-Blöcken, die Formatierung von Tabellen sowie die mobile Ansicht im Portrait-Modus. Ziel war es, die Styles des verwendeten WordPress-Themes gezielt an meine eigenen Anforderungen und den technischen Stil der Webseite anzupassen.
Code
Die Standard-Abstände innerhalb des umschließenden Containers sowie des eigentlichen Code-Blocks haben mir optisch nicht zugesagt. Da ich im Regelfall eher Quellcode und Kommandozeilenausgaben dokumentiere, sollte sich die Darstellung auf der Seite eher daran orientieren.
Der Code-Block soll bündig links beginnen, einen grauen Hintergrund besitzen und zusätzlich durch einen Rahmen hervorgehoben werden. Durch den zusätzlichen Border-Pixel wurde die Formatierung jedoch beeinflusst, weshalb das box-sizing entsprechend angepasst wird. Dabei ist zu beachten, dass das umschließende pre-Element die Klasse wp-block-code besitzt und nicht das eigentliche code-Element. Deshalb werden Hintergrundfarbe auf dem pre-Element und die Abstände auf dem code-Element gesetzt. Andernfalls entsteht zwischen pre und code ein unerwünschter weißer Bereich.
Inline-Code soll hingegen ohne zusätzliche Abstände dargestellt werden und keinen eigenen farblichen Hintergrund besitzen.
.wp-block-code{
margin-bottom:1em;
padding:0em;
background: rgb(242.25, 242.25, 242.25);
border-radius: 5px;
border-style: solid;
border-width:1px;
box-sizing: content-box;
}
.wp-block-code code {
font-family: Consolas, "Courier New", monospace;
margin:0em;
padding:0.5em;
}
code {
font-family: Consolas, "Courier New", monospace;
margin:0em;
padding:0.0em;
background-color:none;
}Tabellen
Der Abstand unterhalb der Tabelle war mir in der Standarddarstellung zu groß, da das umschließende Element bereits einen eigenen unteren Abstand besitzt. Daher wurde der zusätzliche margin-bottom der Tabelle entfernt.
Außerdem sollte die Tabellenüberschrift farblich hervorgehoben werden. Die Hintergrundfarbe wird dabei gezielt auf die th-Elemente innerhalb des thead gesetzt. Dadurch bleibt die Formatierung flexibel, falls th-Elemente später zusätzlich beispielsweise für die erste Spalte innerhalb des Tabelleninhalts verwendet werden sollen.
.wp-block-table table {
margin-bottom:0px;
}
.wp-block-table table > thead > tr > th {
background-color:#6d6d6d;
color:white;
border-color:#2b2b2b
}Website-Titel
Auf mobilen Geräten im Portrait-Modus war der Seitentitel in Kombination mit Logo und Beschreibung zu groß, wodurch der Text umgebrochen ist. Deshalb wurde die Schriftgröße innerhalb einer Media Query gezielt für Geräte im Hochformat reduziert.
Dadurch bleiben Titel, Beschreibung und Logo auch auf kleineren Displays sauber ausgerichtet und die Darstellung wirkt insgesamt kompakter und aufgeräumter.
@media screen and (orientation: portrait){
.site-branding .site-title{font-size:1.1em;}
.site-branding .site-description{font-size:0.6em;}
}