Ich möchte bei größerer screenwidth meine Artikel in der Übersicht des Blogstils so darstellen, dass abwechselnd mal links, mal rechts ein Bild steht und im Raum neben dem Bild der Einleitungstext zentriert angezeigt wird, umgeben von einem großzügigen Weißraum.
Bei schmalerer Screenwidth sollen die Artikel alle untereinander gereiht sein, wobei die Bilder natürlich am Kopf des Artikels stehen und der Einleitungstext darunter (wie beim Standard-Layout von Cassiopeia).
Wenn man den Weiterlesen-Button klickt, soll der Artikel in voller Breite der Screenwidth erscheinen und der Text soll abhängig von der jeweiligen Screenwidth auf gut lesbare Spaltenbreite aufgeteilt werden, wobei die Spaltenanzahl sich ebenfalls anpasst.
Für den Spaltensatz hatte ich bereits eine CSS-Lösung entdeckt, die aber natürlich nicht alles abdeckt, was ich mir hier wünsche: https://www.mediaevent.de/css/text-columns.html
Generell sollen alle auf dem feststehenden Hintergrundbild erscheinenden Artikel, Module usw. – nicht aber das Signet, der Hamburger-Button – einen "Frostglas-Effekt" mit leichtem Schattenwurf als Hintergrund bekommen. Die CSS-Lösung für den Effekt habe ich, aber ich habe noch nicht entdeckt, wie ich dafür sorgen kann, dass er einzeln auf jeden Artikel und jedes platzierte Modul angewendet wird.
CSS für den Blur-Frostglas-Effekt:
-webkit-backdrop-filter: blur(5px); /* Safari 9+ */
backdrop-filter: blur(5px); /* Chrome and Opera */
box-shadow: 0px 10px 15px 10px rgb(0 0 0 / 15%);
background-color: rgb(228 228 228 / 15%);
Meine bisherigen Versuche, mit Hilfe des Firefox Inspektors die nötigen Klassen zu finden und dann entsprechende Einträge in der user.css vorzunehmen, brachten nicht die gewünschten Ergebnisse.