From 3cfee6d1aec55cf8f83e8dc2c884a6a56f06df5e Mon Sep 17 00:00:00 2001
From: hugogogo <hugogogo@protonmail.com>
Date: Sun, 21 Feb 2021 16:52:32 +0100
Subject: [PATCH] test avec les poissons

---
 pages/litterall.html | 91 +++++++++++++++++++++++++++++++++++++++-----
 styles/images.css    | 36 +++++++++++-------
 2 files changed, 103 insertions(+), 24 deletions(-)

diff --git a/pages/litterall.html b/pages/litterall.html
index 2ae3e60..c209038 100644
--- a/pages/litterall.html
+++ b/pages/litterall.html
@@ -178,43 +178,63 @@
 
 				<div class="galery frame" id="tous_numeros">
 					<div class="card">
-						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<div class="image">
+							<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						</div>
 						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
 					</div>
 					<div class="card">
-						<img src="./docs/revues/litt21.jpg" alt="revue litterall">
+						<div class="image">
+							<img src="./docs/revues/litt21.jpg" alt="revue litterall">
+						</div>
 						<p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p>
 					</div>
 					<div class="card">
-						<img src="./docs/revues/litt19.jpg" alt="revue litterall">
+						<div class="image">
+							<img src="./docs/revues/litt19.jpg" alt="revue litterall">
+						</div>
 						<p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p>
 					</div>
 					<div class="card">
-						<img src="./docs/revues/litt17.jpg" alt="revue litterall">
+						<div class="image">
+							<img src="./docs/revues/litt17.jpg" alt="revue litterall">
+						</div>
 						<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
 					</div>
 					<div class="card">
-						<img src="./docs/revues/litt19.jpg" alt="revue litterall">
+						<div class="image">
+							<img src="./docs/revues/litt19.jpg" alt="revue litterall">
+						</div>
 						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
 					</div>
 					<div class="card">
-						<img src="./docs/revues/litt17.jpg" alt="revue litterall">
+						<div class="image">
+							<img src="./docs/revues/litt17.jpg" alt="revue litterall">
+						</div>
 						<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
 					</div>
 					<div class="card">
-						<img src="./docs/revues/lion.jpg" alt="lion">
+						<div class="image">
+							<img src="./docs/revues/lion.jpg" alt="lion">
+						</div>
 						<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
 					</div>
 					<div class="card">
-						<img src="./docs/revues/litt21.jpg" alt="revue litterall">
+						<div class="image">
+							<img src="./docs/revues/litt21.jpg" alt="revue litterall">
+						</div>
 						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
 					</div>
 					<div class="card">
-						<img src="./docs/revues/litt20.jpg" alt="revue litterall">
+						<div class="image">
+							<img src="./docs/revues/litt20.jpg" alt="revue litterall">
+						</div>
 						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
 					</div>
 					<div class="card">
-						<img src="./docs/revues/litt19.jpg" alt="revue litterall">
+						<div class="image">
+							<img src="./docs/revues/litt19.jpg" alt="revue litterall">
+						</div>
 						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
 					</div>
 				</div>
@@ -263,6 +283,57 @@
 					</div>
 				</div>
 
+
+				<div class="galery">
+					<div class="card">
+						<img src="https://media.mercola.com/ImageServer/Public/2010/July/Thumbnail/727fish-thmb.jpg">
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
+					</div>
+					<div class="card">
+						<img src="https://4.bp.blogspot.com/_0Js4q23LxSc/S9z_EhlbSuI/AAAAAAAABE0/frTJgUQiewg/w1200-h630-p-k-no-nu/banggai+cardinalfish.png">
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
+					</div>
+					<div class="card">
+						<img src="https://www.liveanimalslist.com/fish/images/koi-fish.jpg">
+						<p>Lorem ipsum dolor sit amet, consectetur</p>
+					</div>
+					<div class="card">
+						<img src="https://r.ddmcdn.com/s_f/o_1/cx_87/cy_0/cw_450/ch_450/w_162/APL/uploads/2014/06/10-aquarium-fish-for-every-budget-pictures1.jpg">
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
+					</div>
+					<div class="card">
+						<img src="https://www.liveanimalslist.com/fish/images/killifish.jpg">
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<img src="https://aquariumfish.net/images_01/scat_silver_110217b3_w0090.jpg">
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices massa eu</p>
+					</div>
+					<div class="card">
+						<img src="https://sites.google.com/site/muranozoo/_/rsrc/1371868925930/fish-invertebrates/fish-invertebrates-2/FormiaMarlin.jpg?height=200&width=148">
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
+					</div>
+					<div class="card">
+						<img src="https://aquariumfish.net/images_01/blue_leopard_angelfish_151204a2_w0090.jpg">
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices massa eu efficitur</p>
+					</div>
+					<div class="card">
+						<img src="https://www.liveanimalslist.com/fish/images/cat-fish.jpg">
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices massa</p>
+					</div>
+					<div class="card">
+						<img src="https://www.webindia123.com/pets/fish/bett.jpg">
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices massa eu efficitur luctus</p>
+					</div>
+					<div class="card">
+						<img src="https://www.aboutfishonline.com/images/anemonefish2.jpg">
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices massa eu efficitur luctus</p>
+					</div>
+					<div class="card">
+						<img src="https://www.webindia123.com/pets/fish/neon.jpg">
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+
 			</article>
 		</main>
 	</body>
diff --git a/styles/images.css b/styles/images.css
index 9056464..69e6910 100644
--- a/styles/images.css
+++ b/styles/images.css
@@ -70,9 +70,6 @@
 .gallery .card {
 	display: flex;
 	flex-direction: column;
-	flex-wrap: wrap;
-	/*
-	*/
 	flex: 1;
 	padding: 0px;
 	margin: 0px;
@@ -86,7 +83,7 @@
 }
 .gallery .card img {
 	/*height of imgs hence of lines*/
-	max-height: var(--gallery-img-height);
+	height: var(--gallery-img-height);
 	/*appearence of border of imgs*/
 	border-style: solid;
 	border-width: var(--gallery-img-border-width);
@@ -114,6 +111,7 @@
 	border-color: var(--gallery-frame-color);
 }
 .gallery.frame .card > * {
+	/*the auto is what avoid img to stretch towards edges*/
 	margin: var(--gallery-gap-unit) auto;
 }
 
@@ -126,23 +124,33 @@
 .galery .card {
 	display: flex;
 	flex-direction: column;
-	margin: 20px;
-	margin-left: 0px;
-	/* flex: 1; =
-	flex: 1 0 0;
-	or
+	/*
 	flex-grow: 1;
 	flex-shrink: 0;
 	flex-basis: 0;
 	*/
-	flex: 0 1 0;
-	border: 1px solid black;
+	flex: 1 1 0;
+	padding: 0px;
+	margin: 20px 20px 20px 0px;
+}
+.galery .card .image {
+	display: flex;
+	width: 100%;
+	background-color: hsl(0, 0%, 95%);
 }
 .galery .card img {
+	margin: 0px;
 	height: 200px;
-	border: 1px solid lightgrey;
+}
+.galery .card p {
+	margin-left: 0px;
 }
 .galery .card > * {
-	margin: 10px auto;
-	flex: 1 1 auto;
+	margin: 5px auto;
 }
+.galery::after {
+	content: "";
+	flex: 100;
+}
+
+