diff --git a/img/dither_1PCT_logo.jpg b/img/dither_1PCT_logo.jpg new file mode 100644 index 0000000..a9a3a37 --- /dev/null +++ b/img/dither_1PCT_logo.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:892dd00814d7e8f9f670fb47b3bd113c27575006c8c8105d0f136d50ab2c8063 +size 36766 diff --git a/img/dither_categorieTrans_logo.jpg b/img/dither_categorieTrans_logo.jpg new file mode 100644 index 0000000..8d7dd21 --- /dev/null +++ b/img/dither_categorieTrans_logo.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7a929e6fbcc657ae9b299c89743d58f7812fdec0e4539ce6957f8f1af6f80fc3 +size 55320 diff --git a/img/dither_chroniquesMutantes_logo.jpg b/img/dither_chroniquesMutantes_logo.jpg new file mode 100644 index 0000000..009e88a --- /dev/null +++ b/img/dither_chroniquesMutantes_logo.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7ce77252f72578988d58792f75873e3ff02650b88b450cff864d2affa22c716f +size 54134 diff --git a/img/dither_gouinementLundi_logo.jpg b/img/dither_gouinementLundi_logo.jpg new file mode 100644 index 0000000..cdcc318 --- /dev/null +++ b/img/dither_gouinementLundi_logo.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b698c0152197f110093b07d9790f57b8175ded180ab5401f522f8fde153c35d7 +size 15868 diff --git a/img/dither_ingenrables_logo.jpg b/img/dither_ingenrables_logo.jpg new file mode 100644 index 0000000..2560047 --- /dev/null +++ b/img/dither_ingenrables_logo.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0ff18fa8893d1b37c12fa1b4498b61cb8334c7bf4b00478ecdf5231271565199 +size 70592 diff --git a/img/dither_interlope_logo.jpg b/img/dither_interlope_logo.jpg new file mode 100644 index 0000000..7458ba7 --- /dev/null +++ b/img/dither_interlope_logo.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:caa7b611a20f6b1e876d0993d9b90d11f7ff760cec97e69eaf8bf05f00792cbf +size 15577 diff --git a/img/dither_leFeuLaRageLOrage_logo.jpg b/img/dither_leFeuLaRageLOrage_logo.jpg new file mode 100644 index 0000000..cdbea59 --- /dev/null +++ b/img/dither_leFeuLaRageLOrage_logo.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ce8d409639028cb419b4b8936164e3c20143d544a8a0767079493348b26f86ee +size 52341 diff --git a/img/dither_meufsATeubs_logo.jpg b/img/dither_meufsATeubs_logo.jpg new file mode 100644 index 0000000..a4a05c2 --- /dev/null +++ b/img/dither_meufsATeubs_logo.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:dad777806cbe82a7f2cabda46311f8332a5adb526210e0c58ab391f231e9fabd +size 51639 diff --git a/img/dither_nosVoixTrans_logo.jpg b/img/dither_nosVoixTrans_logo.jpg new file mode 100644 index 0000000..8332477 --- /dev/null +++ b/img/dither_nosVoixTrans_logo.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:28ac45680f322659e0ba2647e052ce38fe0627fb2043011cadaf2a896f2b9c6d +size 43980 diff --git a/index.html b/index.html new file mode 100644 index 0000000..f29dea9 --- /dev/null +++ b/index.html @@ -0,0 +1,52 @@ + + + + Test + + + + + + +

Une page pour tester le dithering des images

+

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

+
+
+ +

Interlope

+
+
+ +

Goinement Lundi

+
+
+ +

Catégorie : Trans

+
+
+ +

Chroniques Mutantes

+
+
+ +

Ingenrables

+
+
+ +

Un podcast trans

+
+
+ +

Le Feu la Rage l’Orage

+
+
+ +

Meufs à teubs

+
+
+ +

Nos voix trans

+
+
+ + \ No newline at end of file diff --git a/scripts/dither_nb.bat b/scripts/dither_nb.bat new file mode 100644 index 0000000..1a12947 --- /dev/null +++ b/scripts/dither_nb.bat @@ -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" \ No newline at end of file diff --git a/scripts/dither_nb.sh b/scripts/dither_nb.sh new file mode 100644 index 0000000..26508c9 --- /dev/null +++ b/scripts/dither_nb.sh @@ -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 \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..213f6b7 --- /dev/null +++ b/style.css @@ -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; +} + + + +