create two version old and new

2022-03-26 18:56:28 +01:00
parent e10fc7ce33
commit 3d938681a0
575 changed files with 10766 additions and 3 deletions
--- a/old/styles/images_test.css
+++ b/old/styles/images_test.css
@@ -0,0 +1,193 @@
+/*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: 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*/
+	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 > * {
+	/*the auto is what avoid img to stretch towards edges*/
+	margin: var(--gallery-gap-unit) auto;
+}
+
+
+/*GALERY*/
+.galery {
+	display: flex;
+	flex-wrap: wrap;
+}
+.galery .card {
+	display: flex;
+	flex-direction: column;
+	/*
+	flex-grow: 1;
+	flex-shrink: 0;
+	flex-basis: 0;
+	*/
+	flex: 1 1 0;
+	padding: 0px;
+	margin: 20px 20px 20px 0px;
+}
+.galery .card img {
+	height: 200px;
+}
+.galery .card p {
+	margin-left: 0px;
+}
+.galery .card > * {
+	margin: 5px 0px;
+}
+.galery::after {
+	content: "";
+	flex: 10;
+}
+/*space*/
+.galery.space .card .image_background {
+	display: flex;
+	width: 100%;
+	background-color: hsl(0, 0%, 95%);
+}
+.galery.space .card .image_background img {
+	margin: auto;
+}
+/*cut*/
+.galery.cut .card {
+	display: flex;
+}
+.galery.cut .card > * {
+	margin: 5px auto;
+}
+.galery.cut .card .image_background {
+	display: flex;
+	width: 100%;
+	overflow: hidden;
+	background-color: hsl(0, 0%, 95%);
+}
+.galery.cut .card .image {
+	margin: auto;
+}
+.galery.cut .card .image img {
+	margin: auto -30px;
+}
+/*minwidth*/
+.galery.minwidth .card {
+	min-width: 150px;
+}
+
+
+/*image du haut*/
+div.image_container {
+	border: 1px solid green;
+	margin: auto;
+	margin-left: 0px;
+	overflow: visible;
+}
+div.image_container img {
+	margin-left: -10px;
+	margin-right: -10px;
+}