194 lines
4.0 KiB
CSS
194 lines
4.0 KiB
CSS
/*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;
|
|
}
|