From d56676e523200b8eba175485049d7350e936cfcf Mon Sep 17 00:00:00 2001 From: Alype Date: Tue, 12 Aug 2025 16:24:16 +0200 Subject: [PATCH 1/2] source + typo --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index f29dea9..43d6c8b 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@

Une page pour tester le dithering des images

-

Fortement inspiré par https://site.sarahgarcin.com/web-frugal/#images

+

Fortement inspiré par le site "web frugal" de Sarah Garcin.

@@ -17,7 +17,7 @@
-

Goinement Lundi

+

Gouinement Lundi

From 5ebf4f66cfc4da0287d2c0b3be2f2c7bce6813a7 Mon Sep 17 00:00:00 2001 From: Alype Date: Tue, 12 Aug 2025 16:24:51 +0200 Subject: [PATCH 2/2] suppr lignes inutiles + commentaires + style des liens --- style.css | 100 +++++++++++++++++++++++++++++++++--------------------- 1 file changed, 61 insertions(+), 39 deletions(-) diff --git a/style.css b/style.css index 213f6b7..1eba730 100644 --- a/style.css +++ b/style.css @@ -1,18 +1,10 @@ -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) -*/ - -html { - /* reset display */ - display: block; -} body{ + /* affichage du contenu en colonne */ display: flex; flex-direction: column; align-items: center; - + /* style background et font */ background-color: black; color: white; font-family: sans-serif; @@ -20,11 +12,11 @@ body{ section{ width: 100%; + /* affichage des images en lignes avec retour à la ligne (wrap)*/ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; - align-content: center; } h1,h2,h3,h4,h5,h6{ @@ -32,39 +24,69 @@ h1,h2,h3,h4,h5,h6{ text-decoration-color: fuchsia; } -img{ - width: 300px; - display: block; +/* Styling des liens */ +a{ + color: white; + text-decoration-color: fuchsia; } +/* lors du hover : fushia */ +a:hover, +a:active, +a:focus, +a:focus-within { + color: fuchsia; +} + +img{ + /* Normalize images */ + display: block; + /* taille des images */ + width: 300px; +} + +div{ + /* position relative pour la >p absolute */ + position: relative; + /* background pour l’effet blend de l’image */ + background-color: rgb(255, 20, 255); + /* Prends la taille des images */ + height: fit-content; + /* Centre les rectangles avec les carrés dans le row (ex: image interlopes)*/ + align-self: center; +} + +div>p{ + /* N’affiche pas la balise p par défaut */ + display:none; + /* Fixe la position du p à l’intérieur de la div / de l’image, au centre */ + position: absolute; + bottom: calc((100% / 2) - 1em); + /* style du paragraphe */ + margin: 10px 0; + width: 100%; + background-color: rgba(0, 0, 0, 0.5); + /* style de la font */ + color: white; + font-size: larger; + font-weight: bolder; + /* centre le texte */ + text-align: center; +} + +/* HOVER */ + +/* Simule un élément interactif pour le proto (le pointer change) */ +div:hover{ + cursor: pointer; +} + +/* lors du hover de la div : blend le background de la div avec l’image */ div:hover>img{ mix-blend-mode:multiply; } -div{ - position: relative; - background-color: rgb(255, 20, 255); - height: fit-content; -} - -div>p{ - position: absolute; - display:none; - bottom: calc((100% / 2) - 1em); - margin: 10px 0; - padding: 0; - width: 100%; - color: white; - background-color: rgba(0, 0, 0, 0.5); - font-size: larger; - font-weight: bolder; - text-align: center; -} - +/* Lors du hover de la div, afficher le paragraphe */ div:hover>p{ display: block; -} - - - - +} \ No newline at end of file