mise en page de gallery dans feuille image-css

2021-02-20 18:13:26 +01:00
parent 6903e63ec0
commit d5df4a5a85
3 changed files with 352 additions and 169 deletions
--- a/styles/images.css
+++ 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;
+}