Dieser Artikel wird ständig erweitert solange das Projekt läuft. <--- Wenn abgeschlossen nehme ich diese Zeile raus ;-)
Es sollte ursprünglich der Versuch sein, meinen Gaming-Laptop von Windows zu befreien, da ich gehört hatte dass mit der Bibliothek PROTON eine gute Kompatibilität und Performance von DirektX erreicht wird. Es gibt eine Proton-Datenbank, in der geprüft werden kann wie gut Spiele auf Proton funktionieren.
Mittlerweile ist das hier zu einem Projekt geworden, in dem geprüft wird, ob nicht Linux grundsätzlich reicht.
Die Installation werde ich nur kurz anreißen, aber dann auf die Herausforderungen eingehen.
Zum Einsatz kommt CachyOS, da es eine gute Unterstützung von Grafikkarten (NVidia, AMD) bietet und ein fertiges Gaming-Paket mitbringt.
CachyOS basiert auf ArchLinux.
Ich habe zwischenzeitlich auch andere Distributionen (Ubunut Gaming Package, PopOS!) getestet, aber keine davon konnte überzeugen.
Für meine Web-Projekte benutze ich gerne Bootstrap. Man muss ja nicht alles selbst erfinden und dien Nutzung ist wirklich komfortabel. Außerdem kann man über CSS dann auch noch die Farben anpassen.
Und dann habe ich das Accordion benutzt. Dachte das wäre ein Musikinstrument.
Aber wie ändert man die Farben?
Auf der Suche nach einer Möglichkeit ein Icon oder Buchstaben vor einen Text zu setzen bin ich über folgenden Code gestolpert.
CSS:
initial {
align-items: center ;
display: flex ;
font-size: 12px ;
margin: 10px 0px 10px 0px ;
}
.initial::before {
content: attr( data-initials ) ;
align-items: center ;
display: flex ;
justify-content: center ;
background-color: #111111 ;
border-radius: 100% 100% 100% 100% ;
color: #ffffff ;
font-size: 12px ;
font-weight: 600 ;
height: 36px ;
letter-spacing: 1px ;
line-height: 12px ;
margin-right: 10px ;
text-transform: uppercase ;
width: 36px ;
}
HTML:
<div data-initials="A" class="initial">
This is a smaller text.
</div>
<div data-initials="A" class="initial">
This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text.
</div>Soweit so gut. Allerdings bemerkte ich schnell dass immer, wenn der Text zu lang war und es einen Umbruch gab, die runden Kreise mit den Buchstaben nicht mehr 36px groß waren, sondern zu Eiern schrumpften, obwohl im CSS so angegeben :-)
Der Grund ist, dass es einem Element standardmäßig erlaubt ist sich im Flexbox-Context zu verkleinern. Ein kleiner Eintrag im CSS behebt dies.
.initial::before {
...
flex-shrink: 0;
...
}Das Ergebnis sieht dann so aus:
Seite 1 von 6