Dieser Blog mit seinem vom Theme codeschmiede abgwandelten Design verwendete ein klassisches Float-Layout:
<div id="mainpane">
<div id="serendipitySideBarContainer">...</div>
<div id="content">....</div>
</div>
Das #content-div war 75% lang, das #serendipitySideBarContainer-div 25% und war mit float nach rechts positioniert. Damit das ganze auf kleinen Displays lesbar blieb schaltete ein Mediaquery auf diesen die Seitenleiste aus, per display: none;, und setzte die Breite von #content auf 100%.
Die fehlende Seitenleiste auf kleinen Bilschirmen war mir aber inzwischen nervig geworden. Sie sollte doch besser noch irgendwo sein, damit die Suche erreichbar bleibt. Gleichzeitig eine Chance, die Abfolge zu verbessern, sodass mit #content der Inhalt des Blogs oben steht. Dass das vorher nicht ging hatte ich schon damals bedauert.
Mittlerweile ist CSS weiter und man kann das besser machen. Das HTML wird via der index.tpl nun andersrum ausgegeben:
<div id="mainpane">
<div id="content">....</div>
<div id="serendipitySideBarContainer">...</div>
</div>
Die Anordnung erledigt ein bisschen CSS, das Grid-Layout, das in allen Browsern verstanden wird:
#mainpane {
display: grid;
}
#content {
grid-column-start: 1;
}
#serendipitySideBarContainer {
grid-column-start: 2;
}
Schon funktioniert die Standardanordnung wieder!
Die Anpassung an die kleinen Telefonbildschirme ist nun einfach. Statt die Seitenleiste zu verstecken kann sie per Grid einfach unter die Blogartikel gesetzt werden:
@media all and (max-width: 500px) {
#serendipitySideBarContainer {
grid-column-start: 1;
grid-row-start: 2;
padding-left: 1em;
}
}
Das ist alles hier im Blog auch schon aktiv. Wer wie ich auf ein altes Theme aufsetzt, kann hiervon hoffentlich profitieren und sich hierdran orientieren.
Bitte geb mir Bescheid, wenn hier im Blog jetzt etwas kaputt ist.
