Caleidoscopio è il mio fantastico sito personale!
È fatto per essere visto anche senza CSS, o anche per non essere visto affatto, con un lettore di schermo o col braille, per quanto riesco. Se una parte del sito è rotta per te me la puoi segnalare con i miei contatti!
La mia iconcina sono 4 gemme disposte insieme a forma di stella a 4 punte, e quei simboli colorati intorno si leggono "ma wawa [kiwen kule]", che è il nome del mio sito in toki pona. Si può leggere anche ma Kiku.
Ecco il mio bottoncino:
<div> <a href="https://prismarcobaleno.github.io" lang="it" style="display: inline-flex; align-items: center;"> <img alt="" src="https://prismarcobaleno.github.io/cuore.png"> Caleidoscopio</a> </div>
Nota: se togli la scritta, mettila nel testo alternativo (dentro l'attributo alt), così l'immagine è accessibile!
Un bottone più semplice sta sulla versione toki pona di questa pagina.
Il sito è nato come Caleidoscopio su Neocities, e poi si è unito ad un altro mio sito di GitHub che parlava di un gruppo musicale, che adesso sarebbe la sezione di Idea Ficus. Ecco perché lì il tema è diverso!
Vorrei fare sia il tema chiaro che quello scuro, ma ho deciso di fare una grafica prevalentemente scura, perché il tema chiaro viene da sè se disattivi gli stili, quindi si tappa così finché non lo implemento per benino.
Le scatoline che uso di solito sono 2, che si chiamano appunto scatola e scatolina. Scatola è questa col bordo verdino, scatolina ha il testo e il bordo azzurri. Tutt'e due hanno lo sfondo un po' più scuro di quello dei genitori, così se ne metto tante una dentro l'altra viene un effetto quasi 3d carino.
Poi c'è anche verdolina che è tutta verde scuro, quella l'ho usata per i div flessibili della pagina principale e forse per altro.
La prima volta che ho fatto la grafica avevo messo lo stile direttamente ai nomi delle tag, e poi ho notato che mi si rompevano alcune delle mie millemila estensioni del browser, tra cui quella per controllare l'accessibilità. Questo perché applicava le mie classi anche a roba di altri.
Quindi ho fatto per esempio una classe di nome "a" che devo aggiungere a tutti i link per fare in modo che viene giallo e arancione. E se la scordo, invece, viene blu su blu e non si legge una cippa.
Immediatamente dopo, mi serviva mettere uno stile verde ai dettagli, e l'ho messo direttamente senza classi perché mi siddìa.
Se ispezioni sulla testa della pagina a volte vedrai due collegamenti allo stesso foglio di stile, perché uno non funziona offline, ma l'altro è assoluto e non si rompe se lo sposto, e quindi li metto tutti e due per comodità.