From 2ede958e971799df4611dbc84db17ef0cb389ae5 Mon Sep 17 00:00:00 2001 From: ewen Date: Wed, 1 Apr 2026 20:47:20 +0200 Subject: [PATCH] REFACTORING TEST TEST TEST ATTENTION --- assets/main.js | 143 +++++++++ assets/styles.css | 347 +++++++++++++++++++++ blog/entries/index.html | 70 +---- blog/entries/march2026/bonjour.html | 69 +--- blog/entries/march2026/multipotentiel.html | 67 +--- blog/entries/march2026/retransmettre.html | 68 +--- depeches.html | 153 +-------- index.html | 128 +------- qui.html | 66 +--- reviews/albums/az.html | 154 +-------- reviews/index.html | 181 +---------- 11 files changed, 519 insertions(+), 927 deletions(-) create mode 100644 assets/main.js create mode 100644 assets/styles.css diff --git a/assets/main.js b/assets/main.js new file mode 100644 index 0000000..ca7d724 --- /dev/null +++ b/assets/main.js @@ -0,0 +1,143 @@ +/* === ANIMATION TITRE-NAV (toutes les pages) === */ +function animerTitreNav() { + document.querySelectorAll('.fenetre-nom').forEach(el => { + el.innerHTML = el.textContent.split('').map((c, i) => { + if (c === ' ') return ' '; + const delayColor = (i * 0.3).toFixed(1); + const delayLevite = (Math.random() * 4).toFixed(2); + const duree = (3 + Math.random() * 3).toFixed(2); + return `${c}`; + }).join(''); + }); +} + +/* === /NOW (index.html) === */ +function afficherNow() { + const phrasesNow = [ + "/now : faut que je fasses les courses.", + "/now : les arbres vibrent !", + "/now : les mains, les jambes, avancent..", + "/now : lave toi le visage.", + "/now : il pleut, et c'est très bien comme ça.", + "/now : pas mal la page d'accueil !", + "/now : i love my computer", + "/now : demain je serais en cours, j'espère", + "/now : je resterais auprès de toi pour toujours", + "/now : je serais toi j'irais prendre l'air", + "/now : je dois vraiment aller dormir la" + ]; + + const spanNow = document.querySelector('.now'); + if (spanNow) { + const indexAleatoire = Math.floor(Math.random() * phrasesNow.length); + spanNow.textContent = phrasesNow[indexAleatoire]; + } +} + +/* === GRILLE ALBUMS (reviews/index.html) === */ +function toSlug(titre) { + return titre + .toLowerCase() + .normalize('NFD').replace(/[\u0300-\u036f]/g, '') + .replace(/\s+/g, '-') + .replace(/[^a-z0-9-]/g, ''); +} + +function chargerAlbums() { + fetch('data/albums.json') + .then(r => r.json()) + .then(albums => { + const grille = document.getElementById('grille'); + + albums.forEach(album => { + const carte = document.createElement('div'); + carte.className = 'carte'; + + const media = album.cover + ? `${album.titre}` + : `
${album.titre}
`; + + const fav = album.favoris ? '♥' : ''; + + carte.innerHTML = ` + ${fav} + ${media} +
+ ${album.titre}
+ ${album.artiste} +
+ `; + + carte.addEventListener('mouseenter', () => { + grille.classList.add('hovering'); + carte.classList.add('actif'); + }); + carte.addEventListener('mouseleave', () => { + grille.classList.remove('hovering'); + carte.classList.remove('actif'); + }); + + carte.addEventListener('click', () => { + window.location.href = `albums/${toSlug(album.titre)}.html`; + }); + + grille.appendChild(carte); + }); + }) + .catch(() => { + document.getElementById('grille').textContent = 'impossible de charger les albums.'; + }); +} + +/* === FEED DEPECHES (depeches.html) === */ +function chargerDepeches() { + fetch('/api/depeches') + .then(r => r.json()) + .then(depeches => { + const feed = document.getElementById('feed'); + feed.innerHTML = ''; + + if (depeches.length === 0) { + feed.innerHTML = '

aucune dépêche pour l\'instant.

'; + return; + } + + depeches.forEach(d => { + const el = document.createElement('div'); + el.className = 'depeche'; + + const img = d.image + ? `` + : ''; + + el.innerHTML = ` +
ewen - ${d.date}
+
${d.texte}
+ ${img} + `; + + feed.appendChild(el); + }); + }) + .catch(() => { + document.getElementById('feed').innerHTML = + '

impossible de charger les dépêches.

'; + }); +} + +/* === INIT === */ +document.addEventListener('DOMContentLoaded', () => { + animerTitreNav(); + + if (document.querySelector('.now')) { + afficherNow(); + } + + if (document.getElementById('grille')) { + chargerAlbums(); + } + + if (document.getElementById('feed')) { + chargerDepeches(); + } +}); diff --git a/assets/styles.css b/assets/styles.css new file mode 100644 index 0000000..284d312 --- /dev/null +++ b/assets/styles.css @@ -0,0 +1,347 @@ +/* === BASE === */ +body { + font-family: 'IM Fell English', serif; + font-size: 20px; +} + +/* === ANIMATIONS === */ +@keyframes colorshift { + 0% { color: hsl(0, 60%, 70%); } + 25% { color: hsl(90, 60%, 70%); } + 50% { color: hsl(180, 60%, 70%); } + 75% { color: hsl(270, 60%, 70%); } + 100% { color: hsl(360, 60%, 70%); } +} + +@keyframes levite { + 0% { transform: translateY(0px); } + 50% { transform: translateY(-5px); } + 100% { transform: translateY(0px); } +} + +/* === LAYOUT === */ +.fenetre { + max-width: 600px; + border: 1px solid black; + padding: 0.3rem 1.5rem 0 1.5rem; + padding-bottom: 0; + margin-top: 0px; + position: relative; + display: grid; + grid-template-columns: 1fr auto; + align-items: start; + gap: 1rem; + overflow-wrap: break-word; +} + +.fenetre--large { max-width: 950px; } +.fenetre--medium { max-width: 900px; } +.fenetre--small { max-width: 550px; } + +.fenetre-nom { + margin-bottom: 1px; + margin-left: 2px; +} + +.fenetre-contenu { + padding: 0 1rem 1.5rem 1rem; + min-width: 0; +} + +/* === NAVIGATION === */ +.retour { + font-family: 'IM Fell English', serif; + font-size: 20px; + color: inherit; + display: inline-block; + margin-bottom: 1px; + margin-right: 0.4rem; + text-decoration: none; +} + +.retour:hover { + text-decoration: underline; +} + +/* === COMPONENTS === */ +.now { + font-size: 0.75rem; + font-style: italic; + color: #555; + padding-top: 0.6rem; + margin-top: 0.8rem; + line-height: 1.6; + text-align: right; +} + +.index-header { + display: flex; + align-items: baseline; + justify-content: space-between; + max-width: 550px; +} + +.index-header .now { + margin-right: -3rem; +} + +.now-titre { + font-style: normal; + color: #999; + font-size: 0.7rem; + display: block; + margin-bottom: 0.2rem; +} + +.soustitre { + font-size: medium; + font-style: italic; + color: grey; +} + +.thanks { + width: 450px; +} + +/* === REVIEWS: GRILLE === */ +.grille { + display: flex; + flex-wrap: wrap; + gap: 1rem; + margin-top: 1rem; +} + +.carte { + width: 150px; + cursor: pointer; + transition: transform 0.2s ease, opacity 0.25s ease; + position: relative; +} + +.carte img { + width: 150px; + height: 150px; + object-fit: cover; + display: block; + border: 1px solid #111; +} + +.carte .placeholder { + width: 150px; + height: 150px; + background: #eee; + border: 1px solid #111; + display: flex; + align-items: center; + justify-content: center; + font-style: italic; + color: #999; + font-size: 0.8rem; + text-align: center; + padding: 0.5rem; +} + +.carte .nom { + margin-top: 0.3rem; + font-size: 0.8rem; + line-height: 1.3; +} + +.carte .nom .artiste { + font-style: italic; + color: #555; +} + +.grille.hovering .carte { + opacity: 0.15; +} + +.grille.hovering .carte.actif { + opacity: 1; + transform: scale(1.07); + z-index: 10; +} + +.badge-fav { + position: absolute; + top: 4px; + right: 4px; + font-size: 0.7rem; + background: #fff; + border: 1px solid #111; + padding: 1px 4px; + pointer-events: none; +} + +/* === REVIEWS: ALBUM PAGE === */ +.col-cover { + position: sticky; + top: 1rem; + display: flex; + flex-direction: column; + align-items: center; + gap: 0.4rem; + padding-top: 1rem; + padding-bottom: 1.5rem; +} + +.cover { + height: 280px; + width: auto; + display: block; + border: 1px solid #111; + margin-top: 1rem; +} + +.cover-legende { + font-size: 0.75rem; + font-style: italic; + color: #888; + text-align: center; +} + +.meta-ligne { + display: flex; + align-items: baseline; + flex-wrap: wrap; + gap: 0.8rem; + font-size: 0.85rem; + color: #555; + border-bottom: 1px solid #ddd; + padding-bottom: 0.6rem; + margin-bottom: 1.2rem; +} + +.note { + color: #111; + font-size: 1rem; +} + +.genre-tag { + border: 1px solid #bbb; + padding: 1px 5px; + font-style: italic; +} + +.review p { + margin-bottom: 1rem; + line-height: 1.5; +} + +.review p:last-child { + margin-bottom: 0; +} + +.nav-albums { + margin-top: 1.2rem; + padding-top: 0.6rem; + border-top: 1px solid #ddd; + display: flex; + gap: 1.5rem; + font-size: 0.9rem; +} + +.nav-albums a:hover { + border-bottom-style: dashed; +} + +/* === DEPECHES: FEED === */ +.feed { + margin-top: 1.2rem; + display: flex; + flex-direction: column; + gap: 0; +} + +.depeche { + border-top: 1px solid #ddd; + padding: 1rem 0; +} + +.depeche:last-child { + border-bottom: 1px solid #ddd; +} + +.depeche-date { + font-size: 0.75rem; + font-style: italic; + color: #999; + margin-bottom: 0.4rem; +} + +.depeche-texte { + line-height: 1.6; + color: #111; +} + +.depeche-image { + margin-top: 0.8rem; + max-height: 400px; + max-width: 100%; + width: auto; + border: 1px solid #ddd; + display: block; +} + +.chargement { + font-style: italic; + color: #aaa; + padding: 1rem 0; +} + +.rss-link { + position: absolute; + top: 0.5rem; + right: 0.5rem; + font-size: 1rem; + font-style: italic; + color: #aaa; + text-decoration: none; +} + +.rss-link:hover { + color: #111; +} + +/* === PERSO IMAGES === */ +.fenetre img.perso { + height: 400px; + width: auto; + display: block; +} + +.fenetre img.perso--offset { + margin-top: 22px; +} + +/* === RESPONSIVE === */ +@media (max-width: 600px) { + body { + font-size: 17px; + } + + .fenetre { + grid-template-columns: 1fr; + } + + .fenetre img.perso, + .fenetre img.cover, + .thanks { + width: 100%; + height: auto; + } + + .col-cover { + position: static; + padding-top: 0; + } + + .index-header { + flex-direction: column; + gap: 0.3rem; + } + + .now { + text-align: left; + } +} diff --git a/blog/entries/index.html b/blog/entries/index.html index bcdf682..cc2358a 100644 --- a/blog/entries/index.html +++ b/blog/entries/index.html @@ -20,69 +20,14 @@ - - +
← eweng.space ☆
-
+

entrées

@@ -95,15 +40,6 @@
- + diff --git a/blog/entries/march2026/bonjour.html b/blog/entries/march2026/bonjour.html index aca2e56..f5445cd 100644 --- a/blog/entries/march2026/bonjour.html +++ b/blog/entries/march2026/bonjour.html @@ -19,66 +19,14 @@ - +
← eweng.space ☆
-
+

bonjour

21 mars - 2026

@@ -91,16 +39,7 @@

bye ! ☆

merci d'avoir lu
-
- +
+ diff --git a/blog/entries/march2026/multipotentiel.html b/blog/entries/march2026/multipotentiel.html index fa0aab1..888dc60 100644 --- a/blog/entries/march2026/multipotentiel.html +++ b/blog/entries/march2026/multipotentiel.html @@ -19,66 +19,14 @@ - +
← eweng.space ☆
-
+

multipotentiel

25 mars - 2026

@@ -99,15 +47,6 @@ merci d'avoir lu
- + diff --git a/blog/entries/march2026/retransmettre.html b/blog/entries/march2026/retransmettre.html index 1b723c1..c11e43b 100644 --- a/blog/entries/march2026/retransmettre.html +++ b/blog/entries/march2026/retransmettre.html @@ -19,67 +19,14 @@ - - +
← eweng.space ☆
-
+

retransmettre

30 mars - 2026

@@ -93,15 +40,6 @@ merci d'avoir lu
- + diff --git a/depeches.html b/depeches.html index 459f19f..ef2e46f 100644 --- a/depeches.html +++ b/depeches.html @@ -8,113 +8,7 @@ - + @@ -132,49 +26,6 @@
- - + diff --git a/index.html b/index.html index 98e3a23..64919c2 100644 --- a/index.html +++ b/index.html @@ -17,97 +17,14 @@ - - + -
- eweng.space ☆ +
+ eweng.space ☆ /now : faut que je fasses les courses.
-
+

bienvenue sur mon blog personnel, j'y artage mes états d'âme, mes pensées, mes musiques, mon art préféré, mes sentiments... bonne visite!

    @@ -124,41 +41,6 @@
- + diff --git a/qui.html b/qui.html index d41dff6..7882179 100644 --- a/qui.html +++ b/qui.html @@ -17,63 +17,14 @@ - - +
← eweng.space ☆
-
+

qui suis-je

salut! si vous êtes sur ce site, c'est soit que vous me connaissez et que par la force des choses vous êtes tombés sur ce site à cause de moi et de mon larping, soit que vous êtes un complet inconnu et que vous ne me connaissez pas et inversement.

@@ -99,21 +50,12 @@

enfin bref, voilà c'est à peu près tout, oui c'est un peu vague mais ça suffiras je pense, merci d'avoir lu et bonne visite du site !

- +
moi en perso rpg que j'ai dessiné, basé sur
l'UI de Ragnarok Online
- + diff --git a/reviews/albums/az.html b/reviews/albums/az.html index 603c988..ac7e5fe 100644 --- a/reviews/albums/az.html +++ b/reviews/albums/az.html @@ -8,145 +8,7 @@ - + @@ -154,7 +16,7 @@ ←eweng.space ☆
-
+

AZ

@@ -204,16 +66,6 @@
- - + \ No newline at end of file diff --git a/reviews/index.html b/reviews/index.html index 1d16672..75a8140 100644 --- a/reviews/index.html +++ b/reviews/index.html @@ -8,122 +8,7 @@ - + @@ -139,68 +24,6 @@
- - + \ No newline at end of file