From 6903e63ec094476f0a862c37df5316190ecfb9fc Mon Sep 17 00:00:00 2001
From: hugogogo <hugogogo@protonmail.com>
Date: Thu, 18 Feb 2021 14:16:45 +0100
Subject: [PATCH] mise en place des global variables

---
 pages/litterall.html | 69 ++++++++++++++++++++++----------------------
 1 file changed, 35 insertions(+), 34 deletions(-)

diff --git a/pages/litterall.html b/pages/litterall.html
index ec68bd6..76ecbf6 100644
--- a/pages/litterall.html
+++ b/pages/litterall.html
@@ -36,60 +36,51 @@
 
 			/*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;
@@ -99,24 +90,34 @@
 				flex-direction: column;
 				flex-wrap: wrap;
 				flex: 1;
-				justify-content: space-between;
-				margin: 3px 6px 3px 0px;
-				border: 1px solid lightgrey;
+				padding: 0px;
+				margin: 0px;
+				/*space between columns of cards*/
+				margin-right: calc(var(--gallery-gap-unit) / 2);
 			}
 			.gallery .card > * {
-				margin: 5px;
+				/*vertical space between elements inside of cards*/
+				margin: var(--gallery-gap-unit) 0px;
 			}
 			.gallery .card img {
 				max-height: 200px;
 				border: 1px solid lightgrey;
 			}
-			.gallery .card p {
-				display: none;
-			}
+			/*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 {
@@ -149,7 +150,7 @@
 				<div class="image_container">
 					<img id="dernier_numero" src="./docs/revues/litt23.jpg" alt="revue litterall">
 				</div>
-				<div class="gallery" id="tous_numeros">
+				<div class="gallery 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>