From d5df4a5a8589ea8b09e318a67c79843ca20c7545 Mon Sep 17 00:00:00 2001
From: hugogogo <hugogogo@protonmail.com>
Date: Sat, 20 Feb 2021 18:13:26 +0100
Subject: [PATCH] mise en page de gallery dans feuille image-css

---
 pages/litterall.html | 353 +++++++++++++++++++++++--------------------
 styles/images.css    | 148 ++++++++++++++++++
 styles/style.css     |  20 ++-
 3 files changed, 352 insertions(+), 169 deletions(-)
 create mode 100644 styles/images.css

diff --git a/pages/litterall.html b/pages/litterall.html
index 76ecbf6..2ae3e60 100644
--- a/pages/litterall.html
+++ b/pages/litterall.html
@@ -7,122 +7,15 @@
 		<base href="../" />
 		<meta name="description" content="description du site web">
 		<meta name="keywords" content="truc, bidule, chouette">
-		<!--
 		<link href="./styles/style.css" type="text/css" rel="stylesheet">
-		<link href="./styles/header.css" type="text/css" rel="stylesheet">
-		<link href="./styles/litterall.css" type="text/css" rel="stylesheet">
-		-->
 		<style>
-			/*general settings*/
-			body {
-				margin: 0px;
-				padding: 1%;
-				width: calc(98%);
-			}
-			.horizontal {
-				display: flex;
-				flex-direction: row;
-			}
-			.horizontal > * {
-				margin: 20px;
-			}
-			.vertical {
-				display: flex;
-				flex-direction: column;
-			}
-			.vertical > * {
-				margin: 20px 0px;
-			}
-
-			/*GALLERY*/
-			/*
-			.gallery
-			 -----  ----  ---  ----
-			'     ''    ''   ''    '
-			'     ''    ''   ''    '
-			'-----''----''---''----'
-			 ~~     ~ ~~  ~~   ~~ ~
-			 ----  ---  ---  ------
-			'    ''   ''   ''      '
-			'    ''   ''   ''      '
-			'----''---''---''------'
-			 ~~~   ~    ~ ~  ~~ ~~
-			 ------  --- 
-            '      ''   '
-            '      ''   '
-            '------''---'
-			 ~~ ~    ~ ~
-			images are stretched to cover the entire raw
-			it works well with images of similar size
-
-
-			.gallery.frame
-			 --------  ---------  ----------  --------- 
-			'  ----  ''  -----  ''  ------  ''  -----  '
-			' '    ' '' '     ' '' '      ' '' '     ' '
-			' '    ' '' '     ' '' '      ' '' '     ' '
-			' '----' '' '-----' '' '------' '' '-----' '
-			' ~~ ~~  '' ~~~ ~   '' ~~ ~~ ~  '' ~~ ~~   '
-			'--------''---------''----------''---------'
-			 -----------  ------- 
-			'  -------  ''  ---  '
-			' '       ' '' '   ' '
-			' '       ' '' '   ' '
-			' '-------' '' '---' '
-			' ~~    ~~  '' ~~~   '
-			'-----------''-------'
-			images keeps their real ratio, but a frame appear around them
-
-
-
-			*/
-			:root {
-				/*GALLERY*/
-				/*space between columns of cards*/
-				--gallery-gap-unit: 6px;
-			}
-			.gallery {
-				display: flex;
-				flex-wrap: wrap;
-			}
-			.gallery .card {
-				display: flex;
-				flex-direction: column;
-				flex-wrap: wrap;
-				flex: 1;
-				padding: 0px;
-				margin: 0px;
-				/*space between columns of cards*/
-				margin-right: calc(var(--gallery-gap-unit) / 2);
-			}
-			.gallery .card > * {
-				/*vertical space between elements inside of cards*/
-				margin: var(--gallery-gap-unit) 0px;
-			}
-			.gallery .card img {
-				max-height: 200px;
-				border: 1px solid lightgrey;
-			}
-			/*to avoid last element of gallery to stretch untill end of line*/
-			.gallery::after {
-				content: "";
-				flex: 100;
-			}
-			/*in case of frames*/
-			.gallery.frame .card {
-				padding-left: var(--gallery-gap-unit);
-				padding-right: var(--gallery-gap-unit);
-				margin: 6px 12px 6px 0px;
-				border: 1px solid lightgrey;
-			}
-			.gallery.frame .card > * {
-				margin: var(--gallery-gap-unit) auto;
-			}
-
-			/*settings specifics*/
 			main {
 				margin-left: 20px;
 			}
+			.card p {
+				display: none;
+				display: block;
+			}
 			img#dernier_numero {
 				width: 240px;
 				max-width: 98vw;
@@ -150,6 +43,51 @@
 				<div class="image_container">
 					<img id="dernier_numero" src="./docs/revues/litt23.jpg" alt="revue litterall">
 				</div>
+
+				<div class="gallery framme" id="tous_numeros">
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+					</div>
+				</div>
+
+
 				<div class="gallery frame" id="tous_numeros">
 					<div class="card">
 						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
@@ -159,14 +97,6 @@
 						<img src="./docs/revues/litt21.jpg" alt="revue litterall">
 						<p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p>
 					</div>
-					<div class="card">
-						<img src="./docs/revues/litt20.jpg" alt="revue litterall">
-						<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
-					</div>
-					<div class="card">
-						<img src="./docs/revues/litt20.jpg" alt="revue litterall">
-						<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">
 						<p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p>
@@ -179,6 +109,10 @@
 						<img src="./docs/revues/litt19.jpg" alt="revue litterall">
 						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
 					</div>
+					<div class="card">
+						<img src="./docs/revues/litt17.jpg" alt="revue litterall">
+						<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">
 						<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
@@ -187,14 +121,6 @@
 						<img src="./docs/revues/litt21.jpg" alt="revue litterall">
 						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
 					</div>
-					<div class="card">
-						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<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">
-						<p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p>
-					</div>
 					<div class="card">
 						<img src="./docs/revues/litt20.jpg" alt="revue litterall">
 						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
@@ -203,47 +129,140 @@
 						<img src="./docs/revues/litt19.jpg" alt="revue litterall">
 						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
 					</div>
-					<div class="card">
-						<img src="./docs/revues/litt17.jpg" alt="revue litterall">
-						<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">
-						<p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p>
-					</div>
-					<div class="card">
-						<img src="./docs/revues/litt21.jpg" alt="revue litterall">
-						<p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p>
-					</div>
-					<div class="card">
-						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
-					</div>
-					<div class="card">
-						<img src="./docs/revues/litt21.jpg" alt="revue litterall">
-						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
-					</div>
-					<div class="card">
-						<img src="./docs/revues/litt20.jpg" alt="revue litterall">
-						<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">
-						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
-					</div>
-					<div class="card">
-						<img src="./docs/revues/litt17.jpg" alt="revue litterall">
-						<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">
-						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
-					</div>
-					<div class="card">
-						<img id="last-child-img" src="./docs/revues/litt21.jpg" alt="revue litterall">
-						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
-					</div>
 				</div>
+
+
+				<div class="gallery" id="tous_numeros">
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt21.jpg" alt="revue litterall">
+						<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">
+						<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">
+						<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">
+						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt17.jpg" alt="revue litterall">
+						<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">
+						<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">
+						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt20.jpg" alt="revue litterall">
+						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt19.jpg" alt="revue litterall">
+						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+					</div>
+				</div>
+
+
+				<div class="galery frame" id="tous_numeros">
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt21.jpg" alt="revue litterall">
+						<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">
+						<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">
+						<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">
+						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt17.jpg" alt="revue litterall">
+						<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">
+						<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">
+						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt20.jpg" alt="revue litterall">
+						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt19.jpg" alt="revue litterall">
+						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+					</div>
+				</div>
+
+
+				<div class="galery framme" id="tous_numeros">
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+					</div>
+				</div>
+
 			</article>
 		</main>
 	</body>
diff --git a/styles/images.css b/styles/images.css
new file mode 100644
index 0000000..9056464
--- /dev/null
+++ b/styles/images.css
@@ -0,0 +1,148 @@
+/*GALLERY*/
+/*
+	<div class="gallery">
+		<div class="card">
+			<img src="img.jpg">
+			<p>description</p>
+		</div>
+	</div>
+
+	.gallery
+	 -----  ----  ---  ----
+	'     ''    ''   ''    '
+	'     ''    ''   ''    '
+	'-----''----''---''----'
+	 ~~     ~ ~~  ~~   ~~ ~
+	 ----  ---  ---  ------
+	'    ''   ''   ''      '
+	'    ''   ''   ''      '
+	'----''---''---''------'
+	 ~~~   ~    ~ ~  ~~ ~~
+	 ------  --- 
+	'      ''   '
+	'      ''   '
+	'------''---'
+	 ~~ ~    ~ ~
+	images are stretched to cover the entire raw
+	it works well with images of similar size
+	
+	
+	<div class="gallery frame">
+	</div>
+	.gallery.frame
+	 --------  ---------  ----------  --------- 
+	'  ----  ''  -----  ''  ------  ''  -----  '
+	' '    ' '' '     ' '' '      ' '' '     ' '
+	' '    ' '' '     ' '' '      ' '' '     ' '
+	' '----' '' '-----' '' '------' '' '-----' '
+	' ~~ ~~  '' ~~~ ~   '' ~~ ~~ ~  '' ~~ ~~   '
+	'--------''---------''----------''---------'
+	 -----------  ------- 
+	'  -------  ''  ---  '
+	' '       ' '' '   ' '
+	' '       ' '' '   ' '
+	' '-------' '' '---' '
+	' ~~    ~~  '' ~~~   '
+	'-----------''-------'
+	images keeps their real ratio, but a frame appear around them
+*/
+
+/*adjusting settings*/
+:root {
+	/*GALLERY*/
+	/*space between columns of cards*/
+	--gallery-gap-unit: 6px;
+	/*images height and border*/
+	--gallery-img-height: 200px;
+	--gallery-img-border-width: 1px;
+	--gallery-img-border-color: lightgrey;
+	/*frames width and color*/
+	--gallery-frame-width: 1px;
+	--gallery-frame-color: lightgrey;
+	--gallery-frame-color: transparent;
+}
+
+/*design*/
+.gallery {
+	display: flex;
+	flex-wrap: wrap;
+}
+.gallery .card {
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+	/*
+	*/
+	flex: 1;
+	padding: 0px;
+	margin: 0px;
+	/*space between columns of cards*/
+	margin-right: calc(var(--gallery-gap-unit) * 2);
+}
+.gallery .card > * {
+	/*vertical space between elements inside of cards*/
+	/*that also handle vertical space between cards without frames*/
+	margin: var(--gallery-gap-unit) 0px;
+}
+.gallery .card img {
+	/*height of imgs hence of lines*/
+	max-height: var(--gallery-img-height);
+	/*appearence of border of imgs*/
+	border-style: solid;
+	border-width: var(--gallery-img-border-width);
+	border-color: var(--gallery-img-border-color);
+}
+/*to avoid last element of gallery to stretch untill end of line*/
+.gallery::after {
+	content: "";
+	flex: 100;
+}
+/*in case of frames*/
+.gallery.frame .card {
+	/*spaces between cards*/
+	margin-top: var(--gallery-gap-unit);
+	margin-right: calc(var(--gallery-gap-unit) * 2);
+	margin-bottom: var(--gallery-gap-unit);
+	margin-left: 0px;
+	/*horizontal spaces inside of cards*/
+	/*vertical space is handled below by margins of childs elements*/
+	padding-left: var(--gallery-gap-unit);
+	padding-right: var(--gallery-gap-unit);
+	/*width and color of frames*/
+	border-style: solid;
+	border-width: var(--gallery-frame-width);
+	border-color: var(--gallery-frame-color);
+}
+.gallery.frame .card > * {
+	margin: var(--gallery-gap-unit) auto;
+}
+
+
+/*GALERY*/
+.galery {
+	display: flex;
+	flex-wrap: wrap;
+}
+.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;
+}
+.galery .card img {
+	height: 200px;
+	border: 1px solid lightgrey;
+}
+.galery .card > * {
+	margin: 10px auto;
+	flex: 1 1 auto;
+}
diff --git a/styles/style.css b/styles/style.css
index 085ba45..0245a18 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -5,6 +5,7 @@
 @import url(./fonts.css);
 @import url(./header.css);
 @import url(./footer.css);
+@import url(./images.css);
 
 
 
@@ -59,12 +60,27 @@ html {
 body {
 	display: flex;
 	flex-direction: column;
+	margin: 0px;
+	padding: 1%;
+	width: calc(98%);
 }
 main {
 	min-height: calc(100vh - 70px);
 }
-
-
+.horizontal {
+	display: flex;
+	flex-direction: row;
+}
+.horizontal > * {
+	margin: 20px;
+}
+.vertical {
+	display: flex;
+	flex-direction: column;
+}
+.vertical > * {
+	margin: 20px 0px;
+}
 
 
 /*/////////////////////////////////////////////*/