racine racine racine racine racine racine racine racine racine racine racine racine racine racine racine racine racine racine racine racine
*-------------------------*
|   C'est trop sombre !   |
*-------------------------*
    
*------*
| Menu |
*------*
    

Avant de lire !

Cette documentation va expliquer étape par étape comment générer un site web avec HzMycelium, mais attention !!!

▒ Ici, le but c'est d'accompagner toustes les artistes depuis le début, donc partant d'un niveau de connaissances techniques de ZÉRO.
Si tu es déjà à l'aise avec le système de dépôt sur git, l'utilisation et le lancement de scripts Python, tu vas pouvoir sauter une grosse partie des explications du début (cool).

▒ Toute cette page est aussi dispo sous la forme d'un tuto sur YouTube, pour celleux qui préfèrent ! Ce sera peut-être plus facile à suivre.

▒ Je travaille sur Windows, donc les images pour illustrer la doc le seront aussi, mais je préciserai quand des manipulations seront différentes sur Mac (si t'es sur Linux t'es déjà habitué·e à trouver les réponses tout·e seul·e)

▒ Je te conseille d'éteindre la lumière en bas à gauche de l'écran (ou tout en haut sur mobile). L'effet est marrant mais c'est pas le top pour lire à la longue :)

Mise en place avec Python

Toute cette partie détaille les étapes d'installation et de préparation nécessaires avant de pouvoir parler du générateur de sites.
Si tu sais déjà créer un environnement virtuel et installer les requirements.txt, tu peux télécharger le dossier sur Codeberg et passer directement à la présentation de l'outil !

Avec HzM, on va surtout travailler depuis le terminal. Je sais que l'interface est rude, ça fait un peu peur et c'est un fonctionnement différent auquel il faut s'habituer, mais tu vas voir qu'en expliquant bien on s'habitue très vite et y'a rien de trop compliqué en fait.

▓ Télécharger le script depuis Codeberg

Le plus simple, c'est de commencer par télécharger tout le dossier qui contient le script et les éléments dont on aura besoin pour générer le site.
Il y a juste à aller sur la page Codeberg du projet, cliquer sur les trois petits points à droite au-dessus de la liste des fichiers, et choisir «Télécharger le ZIP».
Juste pour information, voilà tout ce qu'il y a dans ce dossier :

▒ les fichiers python qui forment le script

▒ le fichier requirements.txt qui liste les librairies à installer pour fonctionner correctement

▒ les templates pour choisir l'apparence du site

▒ un modèle du dossier artiste que tu pourras utiliser pour remplir les infos de ton site

▓ Installer Python

Ensuite, on va devoir installer Python sur ton ordinateur. Le plus simple c'est de le faire depuis le site officiel, en prenant la dernière version en date (normalement proposée par défaut).
Une fois l'installeur téléchargé et exécuté, on va juste vérifier que Python est bien détecté par l'ordinateur.
En ouvrant le terminal et en entrant simplement la commande «python --version», la version que tu viens de télécharger devrait s'afficher. python terminal Si tout est ok, tu peux passer à l'étape suivante !

Si le terminal t'a renvoyé une erreur, il va peut-être falloir indiquer à ton ordinateur où aller chercher Python. Ça va se faire en ajoutant une variable d'environnement système, plus précisément dans le path.
C'est terrifiant écrit comme ça mais en suivant les étapes de ce tuto tout devrait bien se passer (pour Linux et Mac il faut descendre un peu plus sur la page).

Une fois que le terminal a bien accès à Python, go suivant !

▓ Créer un environnement virtuel

Maintenant, il va falloir choisir le dossier dans lequel on va travailler. Le plus simple, c'est de tout faire directement dans le dossier obtenu après l'avoir téléchargé depuis Codeberg. Tu peux le déplacer et le renommer si tu veux.

Le nom du dossier n'a pas d'importance, mais petit conseil : quand on travaille avec ce genre d'outil, il vaut mieux garder ses noms de fichiers les plus «propres» possibles. Pas de majuscules, d'accents ou de caractères spéciaux, et les espaces sont remplacés par des tirets du 6 ou du 8 (- ou _).
Exemple : «J'ai passé 10 heures sur le mix !.mp3» devient «j_ai_passe_10_heures_sur_le_mix.mp3».
Normalement le script prévoit ce cas de figure et nettoie les noms des fichiers pour ne pas que ça casse, mais c'est toujours bien de prendre l'habitude au cas où.

Une fois que ton dossier est choisi, on va ouvrir une fenêtre du terminal et se déplacer dans le dossier.
Ça se fait avec la commande « cd » + le chemin d'accès au dossier

cd chemin/dacces/au/dossier

terminal cd On voit que l'adresse à laquelle s'exécute la commande a changé et affiche maintenant le nom de notre dossier, ce qui indique qu'on se situe bien dedans.

Pour faire fonctionner le générateur, le script Python a besoin d'accéder à plein de librairies extérieures qu'il va falloir installer (le fichier requirements.txt dont on parlera juste après).
Pour éviter qu'elles aillent se mettre n'importe où dans ton ordinateur, on va créer un dossier : l'environnement virtuel (que je vais abréger en venv, c'est plus court), qui va stocker tous ces modules. Pour ça, on entre cette commande dans le terminal, qui est toujours la même à peu près partout :

python -m venv venv

Le deuxième « venv » sert à nommer le dossier, ça pourrait être n'importe quoi d'autre mais la norme c'est de garder ça, c'est plus simple.
Le venv est créé, maintenant il va falloir l'activer pour qu'on puisse travailler dedans, dans son contexte.
Ça se fait avec cette commande sur Windows :

./venv/Scripts/activate.ps1

Et celle-là sur Mac :

source venv/bin/activate

Si un gros message rouge terrifiant est apparu, c'est que ton ordinateur bloque l'exécution des scripts (plutôt logique, en temps normal on évite de lancer des scripts inconnus comme ça). Pour contourner cette règle (dans cette fenêtre de terminal seulement), copie et entre cette commande (sur Windows uniquement):

Set-ExecutionPolicy -ExecutionPolicy Bypass -Scope Process -Force

Une fois que cette commande est entrée, réécrire la commande d'activation donnée plus haut devrait activer le venv, ce qui est indiqué par un petit «(venv)» vert avant le chemin. venv activé /!\ Attention, l'environnement reste actif tant que tu gardes cette fenêtre de terminal ouverte, mais il faudra refaire ces manips (autoriser l'exécution des scripts et activer le venv, pas le recréer) à chaque fois que tu ouvriras un nouveau terminal pour modifier ton site, ou le générer à nouveau...

▓ Installer les librairies requises (requirements)

Maintenant que le venv est créé et activé, on va pouvoir y installer les librairies Python dont le script a besoin pour fonctionner. Elles sont toutes listées avec leurs versions correspondantes dans le fichier requirements.txt, qui est présent dans le zip téléchargé.
Heureusement pour ne pas les installer une par une, Python a un outil, Pip, qui permet de gérer l'installation des librairies en le faisant en une seule commande :

python -m pip install -r requirements.txt

Une fois cette commande rentrée, tu pourras mettre ta capuche et regarder les lignes défiler hyper vite comme les hackeurs dans les films.
Normalement l'installation devrait se terminer sans problème, mais si tu veux vraiment vérifier que tout est ok, tu peux rentrer cette toute petite commande pour faire la liste des paquets installés et comparer avec ceux indiqués dans le requirements.txt.

pip list

C'est bon !!! On a fini toute la préparation pas très marrante, maintenant on peut passer à ce qui nous intéresse vraiment : transformer des fichiers et des dossiers en site internet.

Utiliser HzMycelium (enfin)

Avant d'organiser tes fichiers, on va parler des différents choix visuels possibles pour que tu puisses mieux t'imaginer à quoi va ressembler ton site. Tu auras la possibilité de choisir une template, une police de caractères, et une palette de couleurs.

▓ Présentation des templates

Il y a (pour l'instant) trois templates au choix. Leur aspect visuel change, mais l'interface fonctionne toujours de la même manière :

▒ une page d'accueil avec présentation de l'artiste, liste des sorties, liens vers les réseaux...

▒ une page par sortie avec les morceaux, un player audio, et l'affichage aléatoire d'images pendant l'écoute des morceaux

Choisir une template définit l'aspect GÉNÉRAL de ton site : deux pages de sorties différentes ne pourront pas utiliser une template chacune.

(ça pourrait être rendu possible si vraiment trop de gens sont frustré·es par ce choix, mais ça compliquerait les choses, au niveau du code mais surtout au niveau de la cohérence graphique des sites)

Voilà les trois templates, avec trois exemples d'utilisation chacune :

▒ Hyphe :

showcase hyphe En lançant un morceau, les images forment un scroll infini en bas de la page, position et taille aléatoires.
Exemple de site généré avec la template Hyphe ici !

▒ Spore :

showcase spore Les images sont placées en nuage 3D navigable pendant la lecture des morceaux.
Exemple de site généré avec la template Hyphe ici !

▒ Psilo :

showcase psilo showcase psilo photos En lançant un morceau, les images s'accumulent sur l'écran jusqu'à le recouvrir. Position, taille et rotation aléatoires.
Exemple de site généré avec la template Hyphe ici !

▓ Polices de caractères

Comme pour les templates, le choix d'une police va influer sur la totalité de ton site. Deux pages de sorties ne pourront pas avoir une police différente chacune.

(encore une fois ça pourrait être rendu possible, cette fois beaucoup plus facilement au niveau du code, mais je ne pense pas que ce soit une bonne idée graphiquement).

Il y a cinq polices au choix (pour l'instant ?) :

Wondertype
Actuellement utilisée par ce site :) Une sérif, avec des jolis détails pour les gros titres.


Inter Semibold
Sans sérif passe-partout, ultra sobre mais ultra efficace et lisible, impossible de se tromper.


GNF
Police en pixels qui imite celle de Minecraft, pour coller avec les univers numériques des scènes underground !


La Machine Company
À utiliser avec précaution, pour aller avec des identités visuelles très FORTES et expressives.


MBA Mono Sice
Pour les personnes qui trouvaient que la GNF était un peu trop sage, c'est la version un cran au-dessus.

▓ Palette de couleurs

Bonne nouvelle, contrairement aux templates et aux polices, chaque page de sortie possède sa propre palette de couleurs ! Tu vas voir que ça suffit largement pour différencier les pages des sorties les unes des autres, surtout quand la cover et les images qui apparaissent changent elles aussi.

Que ce soit pour la page d'accueil ou pour une page de sortie, le fonctionnement d'une palette de couleurs est toujours le même. Il y a quatre paramètres à écrire, un pour chaque couleur, mais on verra cette partie technique plus tard, pour l'instant on veut juste savoir ce qu'ils déterminent.

hyphe spore psilo
palette hyphe palette spore palette psilo

▒ la couleur principale
Sur toutes les templates, elle détermine la couleur du player en bas de l'écran (même si elle ne sert qu'à ça, ça donne le ton de la page, d'où le nom «principale»). Sur Psilo, elle est aussi utilisée dans pas mal de détails de l'interface comme les bordures des boites, les boutons lecture/pause, et les liens de la page d'accueil.

▒ la couleur secondaire
Elle est utilisée dans les détails de l'interface. La barre de progression pendant l'écoute d'un morceau, les liens vers d'autres sites... On s'en sert soit pour contraster, soit pour venir en complément de la couleur principale.

▒ la couleur du fond
Le nom dit tout, c'est juste le fond de la page. /!\ Attention, sur Psilo, c'est un peu différent parce que le fond est composé avec plusieurs couches, dont un dégradé entre les couleurs principale et secondaire. Le plus simple c'est de le mettre gris clair pour cette template, mais tu peux tester des trucs cools avec !

▒ la couleur de la police
Pareil, le nom dit tout. Dans beaucoup de palettes, la couleur de la police ne compte pas vraiment comme une couleur : tu verras qu'il est plus efficace (et plus joli) qu'elle soit la même que la couleur principale, ou qu'elle reste noire ou blanche pour contraster suffisamment avec le fond.


HzM n'impose pas de limitations sur la palette de couleurs, donc ça peut être difficile d'en trouver une jolie et lisible à la fois.
Le plus simple c'est sûrement de la prendre directement depuis ta cover. Avec un outil comme un color picker, choisis les trois/quatre teintes les plus présentes et teste les différentes associations entre elles.
Évidemment, pense toujours à garder un contraste entre ta couleur de fond et celle de la police pour que ce soit lisible. Tu peux utiliser une couleur de fond très forte (rouge vif par exemple) à condition que celle de la police soit plus terne en comparaison (noir ou rouge très foncé, voire blanc si ça fonctionne). Inversement, si tu veux une couleur de police flashy (vert fluo, bleu fluo...), garde une couleur de fond sombre.

▓ Organisation des dossiers (audios, images...)

Pour générer ton site web, HzM utilise un script Python pour récupérer les fichiers et les insérer dans la template que tu as choisi. Pour que ce soit possible, il faut organiser tes fichiers selon une arborescence de dossiers.
Dans le zip téléchargé plus tôt, il y avait un dossier nommé «artiste», qui est celui qui sera utilisé par le script (attention à ne pas le renommer !). Il contient déjà une arborescence type qui montre le modèle à suivre pour organiser les fichiers : arborescence des dossiers Au niveau 0 de l'aborescence, donc en entrant dans le dossier principal, on trouve :

▒ le fichier config_artist pour la page d'accueil (on parlera de ça juste après)

▒ la photo de l'artiste qui sera utilisée sur la page d'accueil

▒ un dossier pour chaque sortie (album, ep, ou même single si tu veux)


En entrant dans le dossier d'une sortie, on trouve :

▒ tous les audios de tes morceaux

▒ le fichier config_release pour cette page

▒ le fichier image pour la cover

▒ le fichier image pour la cover

▒ le dossier «medias» dans lequel sont stockées toutes les images qui apparaîtront pendant la lecture d'un morceau. Leur nom n'a pas d'importance. Si tu ne veux pas d'images pendant l'écoute, laisse le dossier vide !


Les éléments indiqués en violet sur le schéma sont ceux qui peuvent (et même doivent) être renommés comme tu veux, donc les noms des sorties pour chaque dossier, et des morceaux pour chaque fichier audio.
/!\ ATTENTION, ces éléments doivent aussi avoir un numéro + tiret du bas au début de leur nom (comme renomé dans le dossier modèle du zip). Pour les sorties ça détermine leur ordre d'affichage sur la page d'accueil, et pour les morceaux ça détermine leur ordre dans la tracklist.
Pour tous les autres fichiers ou dossiers, il faut bien respecter les noms indiqués et ne PAS LES RENOMMER, sinon le script ne pourra plus les détecter :(

Voici un exemple d'arborescence sous Windows : arborescence 0 Dossier artiste principal arborescence 1 À l'intérieur du dossier «3_la_pieuvre»

Truc cool à noter : comme on est sur le web, on peut faire un peu ce qu'on veut avec les formats et les dimensions d'images. Ça veut dire que les covers des sorties ne sont pas obligatoirement carrées (ratio 16:9, 9:16, 4:3...), ou qu'elles peuvent même être animées avec des fichiers .gif !

▓ Écriture des fichiers configs

Bon avec tout ce nom compliqué, c'est quoi un fichier de configuration ??? En fait, c'est juste un fichier texte qui s'ouvre et se modifie dans le bloc-notes par défaut de Windows ou Mac, rien de plus.
Un fichier config se compose en deux parties : les clés et les valeurs.
Une clé, c'est la partie avant les deux points, qui définit l'information qu'on va donner. Pour une sortie, on a besoin du titre de l'album, des artistes ayant participé, de la date de sortie etc. Ce sont les clés qui sont déjà écrites dans les fichiers du zip.
Tout ce que tu as à faire, c'est d'écrire les informations de ta sortie après les deux points : ce sont les valeurs de ces clés. Puis évidemment enregistrer le fichier pour que les modifications soient prises en compte.

release_title: J'ai passé 10 heures sur le mix
release_date: 01/01/2026

/!\ Attention à bien respecter la syntaxe, pas d'espace entre la clé et les deux points, mais un espace après les deux points ! (pour celleux qui veulent les détails, le .txt est lu comme du yaml par le script donc la syntaxe est très fragile)

Pourquoi récupérer les infos comme ça et pas directement depuis le titre du fichier ? Déjà parce que ça permet l'utilisation d'accents, de caractères spéciaux etc dans les titres des morceaux, mais aussi parce que ça permet de regrouper beaucoup plus d'informations, notamment celles relatives au style du site.

Pas de pression si tout n'est pas parfait en remplissant les fichiers ! Tu peux faire des tests, refaire tourner le script pour générer le site autant de fois que tu veux. Commence par remplir une première version des configs, regarde comment ça rend et modifie petit à petit.

▒ Remplir la config artiste

Puisque ce fichier config sert pour la page d'accueil, il n'y aura besoin de la remplir qu'une seule fois !
Valeurs à remplir :

▒ nom de l'artiste (toi quoi)

artist: XXXXXX


▒ description de l'artiste

artist_description: XXXXXX XX XX XXXXXXX XXX XX XX XXXXX X


▒ liens vers des réseaux sociaux. Ici c'est plus compliqué puisque tu pourras ajouter le nombre de liens que tu veux. La syntaxe est un peu différente puisqu'on crée un dictionnaire «links» qui, lui, va stocker des valeurs et des clés que tu détermines. Ce sont les noms des clés que tu écris qui seront affichés sur ta page d'accueil.
Il faut faire /!\ attention en ajoutant une nouvelle clé à bien faire une tabulation avant, pour qu'elle soit incluse dans le dictionnaire, sinon ça casse.

links:
 Spotify: https://XXXXXXX
 Deezer: https://XXXXXXX
 YouTube: https://XXXXXXX
 Mon autre site web super cool: https://XXXXXXX
 etc


▒ choix de la template

template: Hyphe

ou

template: Spore

ou

template: Psilo


▒ choix de la police. J'ai raccourci le nom de certaines polices pour éviter de se tromper dans l'ortographe, les espaces etc.

font: Wondertype

ou

font: Inter

ou

font: GNF

ou

font: LaMachine

ou

font: MBA


▒ couleur principale

maincolor: #ffffff


▒ couleur secondaire

secondarycolor: #ffffff


▒ couleur du fond

backgroundcolor: #ffffff


▒ couleur de la police

fontcolor: #ffffff


Si t'es paumé·e sur ce que sont ces 4 valeurs, il faut lire la partie sur la palette de couleurs.
Toutes les couleurs sont écrites en code hexadécimal, donc pense à inclure le dièse (je sais on dit croisillon askip).

Ooook tous les paramètres pour la config artiste sont là ! Le fonctionnement est à peu près le même pour les configs des sorties, mais il y a quelques différences à noter.

▒ Remplir une config release

Pour chaque page de sortie, il faudra remplir le fichier config qui lui est associé.

▒ nom de l'artiste (ou des artistes)

release_artist: XXXXXX(, XXXX)


▒ titre de la sortie

release_title: XXXXXX


▒ date de publication de la sortie. Le format jj/mm/année n'est pas obligatoire, tu peux y écrire n'importe quoi comme «quelque part, l'été dernier» !

release_date: XX/XX/XXXX


▒ description de la sortie. Raconte une histoire, crédite les personnes ayant participé, donne des détails sur les morceaux...

release_description: XXXXXX


▒ morceaux.
Ici, c'est presque pareil que pour les liens dans la config artiste, mais au lieu d'un dictionnaire, c'est une liste que tu vas remplir pour y ajouter les morceaux de ta sortie.
/!\ Attention, à la syntaxe : pour inclure un nouvel élément dans la liste, ajoute bien une tabulation, un tiret puis un espace, comme dans la commande exemple en dessous.

Je sais que tout est déjà écrit dans les titres des fichiers et que c'est pas hyper pratique de les réécrire ici, mais pour permettre les accents et caractères spéciaux, pas d'autre choix...
Si on voulait déterminer l'ordre des morceaux depuis cette liste, il faudrait check si les titres des fichiers audios correspondent à l'élément de la liste, donc aucune faute d'ortographe possible, bref c'est l'enfer. Si quelqu'un a une meilleure solution contactez-moi :)

release_tracks:
 - XXXXXX
 - XXXXXX
 - XXXXXX
 etc


▒ couleur principale.
Pour la palette de couleur c'est exactement le même fonctionnement que dans la config artiste !

maincolor: #ffffff


▒ couleur secondaire

secondarycolor: #ffffff


▒ couleur du fond

backgroundcolor: #ffffff


▒ couleur de la police

fontcolor: #ffffff


Maintenant que tous les fichiers configs sont remplis, on a les infos dont le site a besoin pour être généré, y'a plus qu'à le lancer !

▓ Écriture de la commande pour lancer le script

▓ Ouvrir, vérifier, modifier le site généré

▓ Hébergement du site

Si tu es arrivé·e jusque là, bravo, dernière étape.

Questions et réponses

▓ J'ai pas d'images à mettre dans mon dossier médias, je peux en trouver où ?

Il y a pas mal de sites qui mettent à disposition des images du domaine public, ça conviendra pas à tout le monde mais ça vaut le coup d'aller chercher là-bas :

Musée de Chicago : attention à bien taper «public domain» dans leur barre de recherche.

▒ Librairie du Congrès de Washington : catalogue assez grand, trié selon plein de catégories

Bibliothèque Nationale de France. Attention à cocher le paramètre «libre de droit» dans la recherche, juste au cas où.

/!\ Je recommande pas vraiment Pinterest pour plusieurs raisons. L'algorithme de recommandation est certes très puissant et recommande plein d'images similaires, donc ça fait envie pour se constituer un dossier très joli en 5 minutes.
C'est déjà assez risqué car la provenance et les auteur·ices des images sont très rarement crédité·es, donc assez problématique au pire et pas franchement sympa au mieux.
Ensuite, je trouve que les images présentes et recommandées ont tendance à se répéter, et à perdre en originalité, aussi à cause de cet algorithme peut-être trop efficace. Je trouve ça beaucoup plus intéressant de regrouper soi-même un ensemble d'images qu'on trouve cools, sans qu'elles soit servies sur un plateau.

▓ Pourquoi mes sons sont disponibles en téléchargement ???

C'est un choix que j'ai fait pour rester dans cette démarche d'écosystème indépendant et de circulation des morceaux. On est sur internet, tout se partage, se réutilise, et est accessible librement d'une manière ou d'une autre (même si une personne ou plutôt une entreprise veut vous empêcher d'accéder à des fichiers, il y aura toujours un moyen de les récupérer).

De toute façon, si vous publiez vos morceaux sur YoutubeMusic (proposé par Distrokid), tout le monde peut les télécharger avec un simple convertisseur Youtube vers mp3, alors autant simplifier les choses dès le début :)
Profitez-en pour faire des remix, des playlists, les graver sur des CDs, des K7 !!!

▓ J'ai envie de modifier quelque chose sur mon site qui n'est pas prévu par les templates :(

Bonne nouvelle, c'est possible ! Il va juste falloir mettre les mains dans la machine en allant fouiller dans les fichiers HTML ou CSS.

Si tu maîtrises déjà le web, c'est super : t'auras juste à travailler sur ton dossier généré (built_site) comme sur n'importe quelle page web.

Si la mention de HTML et CSS t'as fait paniquer, ça va prendre un peu plus de temps, mais t'inquiètes. Ce sont des langages de programmation simples à comprendre, avec des milliers de tutos et forums adressés aux débutant·es qui partent de zéro.
Je parle rapidement des notions de base dans la documentation, c'est déjà un point de départ qui te permettra de modifier pas mal de trucs !

▓ J'ai trouvé un bug / j'ai envie de faire quelque chose qui ne fonctionne pas ou qui n'est pas prévu

Ça devait arriver, et franchement ça m'étonne pas ! Comme je suis pas développeur à la base, il y a plein de cas de figure et de façon d'utiliser l'outil que je n'ai pas prévu.

Si la réponse au problème ne se trouve pas dans la documentation, contacte-moi via un des liens en bas de la page et j'essaierai de répondre et d'aider.
Si c'est un bug, merci de me le signaler, il faut que je corrige ça !
Si c'est une fonctionnalité qui n'existe pas, c'est peut-être quelque chose sur lequel je peux travailler pour l'ajouter et en faire profiter tout le monde !

Fonctionnalités futures ? (roadmap)

Fonctionnalités prévues, ou que j'aimerais bien implémenter dans le futur.

▒ écrire en Markdown dans les fichiers config, notamment pour les descriptions : remplacer les balises br en HTML.


▒ webrings : mettre en place un dictionnaire dans la config artiste :

friend_links:  nom_artiste: lien_artiste  nom_artiste: lien_artiste  etc


▒ sur Spore, les images se mettent à tourner lentement si aucune interaction avec le canvas

Ressources et outils utilisés :

AmplitudeJS et leur documentation ultra pratique pour toute la partie audio

▒ ThreeJS et cet exemple par Julien Bidoret pour la disposition d'images sur la template Spore

cet exemple pour attraper et bouger les images sur la template Psilo

Les ressources, exemples et liens vers les forums dont je me suis servi sont aussi crédités en commentaires dans les fichiers HTML, CSS, JS, Python etc (quand j'ai pensé à le faire).

Polices utilisées :

Wondertype par Clémence Fontaine

Inter Semibold par Rasmus Andersson

▒ GNF par Nyt Rock

La Machine Company par Woodcutter

▒ MBA Slice Mono par Maksym Baluiev