Hellow ici ! J'vais apporter des grands changement à (blog.)tinerion.me, et j'ai bien envie de parler de tout ces changements aux fur et à mesure que j'y travaille !
Tout les pouets sur le sujet seront à la suite de celui-ci du coup 🙂 🍀
Tout d'abord, j'pense partir sur le générateur de site statique "Hugo" (https://gohugo.io). Et pour ce qui est de l'apparence, je vais prendre pour base le framework css Bulma (https://bulma.io) en en modifiant les variables 😃
Tout les éléments du site seront mis dans ce dépot : https://git.tinerion.me/tinerion/website
Comme indiqué dans la doc de bulma*, on peut en customiser de nombreux éléments via les variables, en se concoctant un ti fichier .scss. C'est rigolo comme tout, et ça permet vraiment d'adapter beaucoup d'éléments tout en gardant la simplicité d'accès de bulma.
À partir de ce fichier SCSS, on obtient un bon vieux CSS, contenant les parties de bulma qu'on a choisi d'importer, avec nos modifications.
En prime, on peut demander à générer notre css à un endroit précis.
Du coup, comme on peut le voir dans la capture d'écran du pouet précédent, j'ai créé un theme Hugo intitulé "tinerion-dark' et j'ai indiqué dans mon package.json que mon fichier css devais ce mettre dans le dossier de ce theme \o/
On reprend après "un petit peu" de temps ! Là du coup je m'occupe de la maquette du futur site. Pour ce faire, j'utilise l'outil en ligne "Figma"... cépalibre, mais c'est ce que je connais de plus efficace en étant pas designer. Du coup pour l'instant j'ai un truc comme ça, ça va surement être amené à évolué, voir a changer radicalement d'ici la mise en ligne.
D'ailleurs coolors permet aussi d'afficher les "versions" plus sombre ou plus claire de telle ou telle couleurs.
(Mes plus plates excuses aux designers, peintres, dessinateur·ices, et autre gens qui bricolent des trucs avec des couleurs, j'dois tellement mal parler des couleurs 😭 )
Allez, mille ans plus tard on reprend ! Du coup pas mal de changement depuis la dernière fois, et à la fois pas tant.
Niveau dev, j'ai partitionné un ptit peu plus : dorénavant, le Bulma Custom que j'utilise se trouve sur ce dépot : https://codeberg.org/olwe/CyberWitches_CSS, et le projet Hugo n'utilise plus que le fichier cyberwitches.css final. Si j'ai des modifs profondes à faire sur le CSS, je veux qu'elles opèrent sur tout les projets qui utilisent cyberwitches.css, donc je ferai ces changement dessus.
Du coup aujourd'hui je modifie CyberWitches_CSS pour qu'il corresponde à ce que je veux précisément, en ajoutant des variables que j'avais pas encore précisés, et en en modifant d'autres. Une fois ceci fait, je repasserais sur Hugo pour le blog en lui même
@Tinerion En libre, tu peux essayer Penpot -> https://penpot.app/
@gub
Merci beaucoup, je testerai pour mes prochains projets !
Pour la couleur du fond, j'voulais un truc à la fois sombre et coloré, et du coup vu que j'échouais à obtenir ça en essayant des couleurs au pif j'ai pris la couleur de fond du blog "https://www.getrichordevtryin.com" d' @alyve (si tu me lis, merci pour ton blog, il est vraiment chouette :) ).
Pour les autres couleurs, j'utilise le site "https://coolors.co/" qui trouve automatiquement des couleurs qui vont bien entre elle. Si on a déjà une couleur, le site proposera les autres en fonction.