Alype/arq-front_image-dithered
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Getting Started

Browse source
This commit is contained in:
Alype 2025-08-12 13:46:49 +02:00
parent 43910299b5
commit da801b9b87
13 changed files with 169 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
img/dither_1PCT_logo.jpg (Stored with Git LFS) Normal file
View file

Binary file not shown.

BIN
img/dither_categorieTrans_logo.jpg (Stored with Git LFS) Normal file
View file

Binary file not shown.

BIN
img/dither_chroniquesMutantes_logo.jpg (Stored with Git LFS) Normal file
View file

Binary file not shown.

BIN
img/dither_gouinementLundi_logo.jpg (Stored with Git LFS) Normal file
View file

Binary file not shown.

BIN
img/dither_ingenrables_logo.jpg (Stored with Git LFS) Normal file
View file

Binary file not shown.

BIN
img/dither_interlope_logo.jpg (Stored with Git LFS) Normal file
View file

Binary file not shown.

BIN
img/dither_leFeuLaRageLOrage_logo.jpg (Stored with Git LFS) Normal file
View file

Binary file not shown.

BIN
img/dither_meufsATeubs_logo.jpg (Stored with Git LFS) Normal file
View file

Binary file not shown.

BIN
img/dither_nosVoixTrans_logo.jpg (Stored with Git LFS) Normal file
View file

Binary file not shown.

52
index.html Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="description" content="Page de test">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Une page pour tester le dithering des images</h1>
<p>Fortement inspiré par https://site.sarahgarcin.com/web-frugal/#images</p>
<section>
<div>
<img src="/img/dither_interlope_logo.jpg" alt="">
<p>Interlope</p>
</div>
<div>
<img src="/img/dither_gouinementLundi_logo.jpg" alt="">
<p>Goinement Lundi</p>
</div>
<div>
<img src="/img/dither_categorieTrans_logo.jpg" alt="">
<p>Catégorie : Trans</p>
</div>
<div>
<img src="/img/dither_chroniquesMutantes_logo.jpg" alt="">
<p>Chroniques Mutantes</p>
</div>
<div>
<img src="/img/dither_ingenrables_logo.jpg" alt="">
<p>Ingenrables</p>
</div>
<div>
<img src="/img/dither_1PCT_logo.jpg" alt="" class="fig">
<p>Un podcast trans</p>
</div>
<div>
<img src="/img/dither_leFeuLaRageLOrage_logo.jpg" alt="">
<p>Le Feu la Rage l’Orage</p>
</div>
<div>
<img src="/img/dither_meufsATeubs_logo.jpg" alt="">
<p>Meufs à teubs</p>
</div>
<div>
<img src="/img/dither_nosVoixTrans_logo.jpg" alt="">
<p>Nos voix trans</p>
</div>
</section>
</body>
</html>

8
scripts/dither_nb.bat Normal file
View file

@ -0,0 +1,8 @@
:: YOU HAVE TO INSTALL IMAGEMAGICK ON WINDOWS TO RUN THIS SCRIPT. (SEE the .sh script for linux)
:: Source : https://site.sarahgarcin.com/web-frugal/#images
:: USE :
:: 1- place the dither_nb.bat in a folder with your images.
:: 2- Make sure the .bat is executable.
:: 3- Double-click: It’s done !
for %%i in (*.jpg) do convert "%%i" -resize 400x400 -strip -quality 86 -colorspace Gray -dither FloydSteinberg -colors 4 "dither_%%i"

12
scripts/dither_nb.sh Normal file
View file

@ -0,0 +1,12 @@
# YOU HAVE TO INSTALL IMAGEMAGICK ON LINUX TO RUN THIS SCRIPT. (SEE the .bat script for Windows)
# Source : https://site.sarahgarcin.com/web-frugal/#images
# USE :
# 1- place the dither_nb.sh in a folder with your images.
# 2- Make sure the .sh is executable.
# 3- Double-click: It’s done !
# TODO : Test this script on linux. (if you have tested it and it works, let me know !)
for img in *.jpg;
do convert "$img" -resize 400x400 -strip -quality 86 -colorspace Gray -dither FloydSteinberg -colors 4 "dither_$img";
done

70
style.css Normal file
View file

@ -0,0 +1,70 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html {
/* reset display */
display: block;
}
body{
display: flex;
flex-direction: column;
align-items: center;
background-color: black;
color: white;
font-family: sans-serif;
}
section{
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
h1,h2,h3,h4,h5,h6{
text-decoration-line: underline;
text-decoration-color: fuchsia;
}
img{
width: 300px;
display: block;
}
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;
}
div:hover>p{
display: block;
}