Styx 3.7-beta1 und PHP 8.0.13

😱 ..... 😂

So wie da --> https://styx.beatsblog.ch/categories/BLOG <-- siehts dann in echt aus.

SCNR

Ich habe es gleich noch mal zum Anlass genommen ein paar Sachen nachzutragen, für die shariff social buttons, die /comments/ summary Seiten und für ein paar code hightlight Farben. Schon committed.

Bitte unbedingt melden wenn noch Dinge fehlen oder farblich noch nicht optimal sind!!!

Was kümmert mich meine Meinung von Vor-Vor-Vor-Gestern... 😆 Jedenfalls habe ich das gestern geändert, aufgrund der neuen kontrastreicheren Farbgegebenheiten. Dazu wurde in der mobilen Ansicht bis 640px der Umschaltbutton immer sichtbar in die pure eigene "foot Hamburgerleiste" verschoben. Sonst klebt er ja dauerhaft knapp unter dem oberen Rand. Dazu wurde das button markup aus der "banner" Klammer nach oben verschoben. Das musst du bei der eventuellen Übernahme für dein Theme (bei dem das ja anders ist) bedenken.

Hmm kniffelig....

Erstmal würde ich denken das der float button bei dir (hier!) im mobile view nicht unten, sondern konsistent oben angebracht sein sollte, sonst kommt er sich mit dem UP Button ins Gehege.

Ist denn das beschriebene Verhalten auch auf einem Smartphone so oder nur existent wenn man die previews der Browser Dev-Tools nutzt?

Ansonsten würde ich vorschlagen aus dem

.float {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    position: fixed !important;
    top: 24px;
    bottom: 10px;
    ....

das top: auto mit 24px (wie bereits eingearbeitet) zu ersetzen. Ganz vorher stand es auf 12px. Das allerdings wirkt nicht mehr wenn man nun leicht von oben herunterscrollt so dass das BAnner verschwunden ist und so klebt im mobile view das icon sehr knapp am bzw unterhalb des oberen mobile Randes. Das muss man also nicht nur in den DEV-Tools sondern auch am echten Mobile überprüfen.

Dann könnte man das fixed - wie hier ebenfalls bereits eingearbeitet - mit einem !important forcieren, so dass es wieder mitschwimmt.  In meinem kurzen Test in den tools tat es das jedenfalls. Es ist aber auch immer gut zu wissen ob es das auch mit echten reloads tut.

Super!! 😀

Was so ein paar zusätzliche Augen so ausmacht... siehe Wald und Baum und so... 🙂

Danke! Ist gefixt.

🤗 Aber eigentlich sind es nur ein paar wenige Farben und um die geht es ja eigentlich, denn du hast ja nichts am Strukturgerüst verändert. Und ... du musst ja gar nicht alles ändern!!

Eigentlich kann man hier im dark mode gut sehen, woran du in deinem theme überall geschraubt hast. Nicht alles davon ist wirklich sinnvoll gewesen, wie zum Beispiel der dicke text shadow vom h1 banner. Der ist selbst im light mode eher schlecht, wenn er einen Eintragstitel enthält und über deine evolution Grafik ragt.

Ach und übrigens ... warum gibt es in den shariff button styles einen .theme-white selector? Kann man da am Plugin irgendetwas einstellen?

Oh Mist! Danke. Dann muss ich versuchen das zu überschreiben. Kannst du meinen Fix mal übernehmen und eventuell mal kurz ausprobieren ob die dark-theme styles auch wirklich alle drei Varianten überschreiben?

Hier ist das ja echt furchtbar...  besser wäre es drüben, denn da weiß ich dass da keine anderen styles dazwischenfunken... 😉

Ist gefixt (hoffentlich). Bitte bestätigen und dann wieder auf weiß zurück, bitte. Danke.

Ich werde wahrscheinlich noch ein paar Verbesserungen vornehmen für content und sidebar und footer Farbe (analog zu Banner) und darauf bezogen auch für die comment Grundbox.

Außerdem habe ich heute ein Blog post über dark mode(s) geschrieben. Ist vielleicht auch für dich interessant.

O.K. Auf https://styx.beatsblog.ch/categories/BLOG ist nun die aktuelle style.css ...

Das kann nicht sein! Da fehlt ja die Hälfte.. sehe ich gerade. Da kann ich ja rumdoktorn wie ich will... Vielleicht nutzt du falsche Zwischenstände über commit hashes?! Nur so bekommst du wirklich das aktuelle und das auch gleich richtig zum abspeichern:
https://raw.githubusercontent.com/ophian/styx/master/templates/pure/style.css

Es kann sein das ich jetzt sogar wieder etwas zurückstellen muss.

Viel lustiger wäre es gewesen die Länge des header würde die Grafik zur Seite schieben ...  vielleicht sogar animiert.

Aber dann müsste sie annders aufgebaut sein.

Das Bild müsste und dürfte nur so groß sein wie sein eigentlicher Inhalt, also die Bikevolution. Dazu der Hintergrund transparent. Den Rest könnte man (wahrscheinlich) mit CSS machen und vielleicht einem zusätzlichen div Element.

Spielkram für Winterabende! 😎

Das stammt aber von dir! 😊 aus deiner user.css.

Wieso nicht?

Weil der dark-theme selector ein class selector des body Elementes ist.

.dark-theme {
    background-color: #22272e;
    color: #cbcbcb;
}

Du könntest es in der user entweder genau so überschreiben oder sagst "body.theme-dark {}" mit höherer Wertigkeit.

Allerdings würde ich vorschlagen es nicht so kompliziert zu machen und den dark mode gegenüber deinen user styles besser einfach abzuspecken, also gradients und shadow etc eher besser heraus zu nehmen..🙄

So. Ich habe gerade die letzten changes raufgeladen.
Irgendwann muss ich damit aufhören, denn sonst fummele ich da noch nächstes Jahr dran rum....

Für heute ist erstmal Schluß.

Viel Spaß noch...

zb so

.dark-theme #serendipity_banner {
    background: -webkit-linear-gradient(bottom, rgb(2, 2, 54) 16%, rgb(234, 234, 244) 100%), url(/uploads/bb-head_1024.png);
    background: linear-gradient(0deg, rgb(2, 2, 54) 16%, rgb(234, 234, 244) 100%), url(/uploads/bb-head_1024.png);
    background-blend-mode: multiply;
    background-size: cover;
}

oder nicht ganz so hell in der Abstufung

.dark-theme #serendipity_banner {
    background: -webkit-linear-gradient(bottom, rgb(2, 2, 54) 16%, rgb(140, 140, 150) 100%), url(/uploads/bb-head_1024.png);
    background: linear-gradient(0deg, rgb(2, 2, 54) 16%, rgb(140, 140, 150) 100%), url(/uploads/bb-head_1024.png);
    background-blend-mode: multiply;
    background-size: cover;
}

🙂

(das vergrößernde ... cover kann man auch weglassen)

Dafür ist

background-blend-mode

nicht zuständig (ein Verfahren zur Vermischung von Hintergrundbildern und -farbe).
Was du meinst wäre ein background attribute "no-repeat" Zusatz.
Du spielst doch gerne, insofern kannst du meine Beispiele doch einfach ausprobieren, sogar auch nur im Browser.
Dann siehst du was beim Wechsel von hell auf dark mode anders ist.

Das waren ja auch keine Endergebniss sondern nur Beispiele für deine bluebox ... 😀

Ich würde inzwischen background-blend-mode und background-size: cover wieder rausnehmen. Wenn das Bildschirmfenster groß bzw breit wird, hat das unangenehme Folgen. Und dafür lieber ein background-repeat: no-repeat; einsetzen.

Ist ok. Allerdings hast du den light mode vergessen.

Tja lustig...

Mache einfach im "light mode"

background-image: url(/uploads/bb-head_1024.png) !important;

Die background Kurzform ist einfach ein container für die verschiedenen sub-attribute und gleichzeitig höherwertig als seine Einzelteile. Ich nehme an das da irgendwer irgendwen überschreibt, obwohl er ja alle Attribute hat. Vielleicht sind sie nur falsch angeordnet...?! 🙄

Styx 3.7.0 ist released!

Edit: Übrigens Danke für die richtige "lässig" Interpretation und Korrektur. Das muss Gedanken Übertragung gewesen sein! 😚