Kommentare von

beats TEST blog

Weblog Kommentare

Styx 3.7-beta1 und PHP 8.0.13

Ian Styx am |

Na Klar! Du hast noch gar keine svg icons. Sie liegen im icons/ Verzeichnis von pure. Die musst du zu dir rüberholen, so das der themePath mit den angegebenen svg Pfaden im scriptlet übereinstimmt.
Für den runden Hintergrund ist der  (pure) .float selector zustandig, siehe background-color: #294564;.

Dass das icon (sun/moon) weiß ist, liegt am fill="#ffffff" attribute des svg icons selbst. Aufmachen in Notepad++ und in #800080 (purple) ändern. 😀

Ich war heute nochmal fleißig und so könnte ein neues update der style.css nicht schaden.

Warst du schon unterwegs mit deinem neuen Flitzer? 🚴‍♂️

Ian Styx am |

Na klar! Lesen müsste man (ich) können.... Entschuldige.

Statt

.dark-theme svg {
    color: red !important;
}
.dark-theme svg {
    fill: red;
}

schreiben.

Beat Post author am |

Hier hat's heute 10cm geschneit (also nur eine Mini-Testrunde). Muss gleich raus und Schnee schippen, damit die liebe Frau dann in die Garage fahren statt rutschen kann.

Vielen Dank für die Tipps. Werde ich mich morgan dahinterklemmen!

Schönen Abend! :wave:

Beat Post author am |

soooooo cute!

Many thanks! :heart:

Ian Styx am |

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.

Ian Styx am |

Irgendwer müsste mir mal langsam auf die Finger hauen...✋

Ich habe noch etwas finetuning und Ordnung hinzugefügt.

Beat Post author am |

A propos Banner. Ich habe mir irgend einen blöden Fehler eingebaut, der sich wie folgt äussert. Sobald die Displaygrösse einen bestimmten Wert unterschreitet, ändert sich die background-color des Banners nicht. Das ist doof, doch ich weiss einfach noch nicht, woran das liegt...

Beat Post author am |

Werde gleich mal den neusten pure-Ordner downloaden und hier einspielen...

Nachtrag 12:22 Uhr -> Erledigt.

Beat Post author am |

Hmm... Habe den neusten pure-Ordner auch nach https://styx.beatsblog.ch/ hochgeladen. Der Dark-Mode-Umschalter ist jetzt in der Navigationsleiste ganz unten, was ich recht gut finde. Bloss, wenn ich nun die Navigation öffne, wird mir die nicht direkt oben am Bildschirmrand angezeigt, sondern ich muss zuerst ganz hochscrollen um sie zu sehen (und das ohne scroll-to-top-button). Die direkte Einblendung, ohne scrollen, fand ich früher besser.

Falsch! Ich hätte nur mal den Browser-Cache löschen sollen... 🙄 Am Mobile sieht das ganz gut aus! 👍

Ian Styx am |

👍 Hatte auch noch einen kleinen Nachtrag, den du glaube ich noch nicht erwischt hast, da wir uns da gerade in die Quere gekommen sind. Ist aber nur für styx.doku wirklich zu erkennen.

Beat Post author am |

Arghh... Die Änderungen waren für pure-beat aber nicht gut... In der Mobile-Ansicht habe ich nun kein Menü und auch kein Light-/Dark-Mode-Umschalter mehr. Zudem ist in der >1024px Darstellung die Banner-Grafik verschwunden... Muss mir wohl die neuste index.tpl mal zu Gemüte führen.

Ian Styx am |

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.

Ian Styx am |

Komischerweise habe ich schon wieder die eigentliche Frage nicht beantwortet. Sorry.

Da ist irgend etwas aktiv was ich noch nicht heraus habe... Also Moment. 🙂
Vielleicht kannst du ja inwischen die Button Frage lösen (wenn du überhaupt willst).

Ian Styx am |

Kann es sein das dafür auch hier der Schalter aus dem Banner raus muss?!

Ian Styx am |

Also..., das liegt wohl am (von dir) eingebauten linear-gradient des .dark-theme {} selectors und du könntest es durch ein zusätzliches

.dark-theme #serendipity_banner {
    background: linear-gradient(0deg, #020236 33%, rgb(234, 234, 244) 100%);
}

für das eigentliche Banner irgendwo unterhalb davon wieder aufheben - vielleicht auch nur als media screen bis 1000px width. Achte darauf das nicht noch ein rule für das banner danach kommt.

Dies nur als Beispiel mit nur einer Farbänderung.

Beat Post author am |

Laut meiner user.css gibt es im Dark-Mode gar keinen Gradient. Folgendes steht drin:

.dark-theme #serendipity_banner,
.dark-theme #footer {
    background-color: #020236;
}

Der Footer wird korrekt angezeigt, nur das Banner nicht. 🤔

Moment. Ich kann ja mal folgendes anfügen:

background: none;

 

Ian Styx am |

Doch .. irgendwo tief unten schon

#serendipity_banner {
    background: rgb(252,250,250);
	background: -moz-linear-gradient(0deg, rgba(252,250,250,1) 33%, rgba(234,234,244,1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(252,250,250,1) 33%, rgba(234,234,244,1) 100%);
	background: linear-gradient(0deg, rgba(252,250,250,1) 33%, rgba(234,234,244,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fcfafa",endColorstr="#eaeaf4",GradientType=1);
	box-shadow: none;
    text-shadow: none;
	}

 

Beat Post author am |

💡 Es werde Licht! 💡

Der erwähnte Gradient ist richtig für die Light-Ansicht und wird (jetzt) im Dark-Mode mit "background: none;" gelöscht und durch "background-color: #020236;" ersetzt. Nun klappt das auch. Der Übeltäter war wohl, dass ich den background-Gradienten mit dem "none" zur Ruhe bringen musste und nicht einfach eine Farbe "drüber" setzen konnte.

... blöd nur, dass mir das "none" nun auch gleich die evo-grafik abgemurkst hat.

Ian Styx am |

background: ... ist höherwertig als sein sub attribute background-color oder background-url, etc.

Also statt background: none kannst du dort auch alles zugleich einbauen, siehe https://developer.mozilla.org/de/docs/Web/CSS/background - auch das Bild und center und color usw.

Beispiel

background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;

Beat Post author am |

mein Kopf raucht...  ich mach mal ne Pause und gehe Weihnachtsbeleuchtung aufhängen. Kümmere mich später noch darum.   :wave:

Beat Post author am |

😎 Immer wieder erstaunlich, was ein ";" am richtigen Ort alles ausmacht. 😉

Ian Styx am |

Zwischen 540 und 1000px im responsive mode hast du immer noch den gradient aktiv. Da muss also noch ein media screen angepasst werden.

Beat Post author am |

Ich konnte die background-Kombination auch nach mehrmaligem Lesen der Mozilla-Seite nicht umsetzen 🙄.

Nun gibt es halt die evo-Grafik in jeder Bildschirmgrösse (bei kleinen Screens halt abgeschnitten), dafür ist nun auch der Gradient überall weg. Mit diesem Kompromiss kann ich leben und es macht es auch insofern einfacher, weil ich nun keine spezifischen Einträge in den @media-Bereichen mehr habe.

Ian Styx am |

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)