67 lines
1.4 KiB
CSS
67 lines
1.4 KiB
CSS
/*
|
|
table of content :
|
|
- global settings
|
|
- GALLERY
|
|
- IMAGE single
|
|
*/
|
|
|
|
/*----------------------------------------------------*/
|
|
/*adjusting global 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;
|
|
/*IMAGE single*/
|
|
}
|
|
|
|
/*----------------------------------------------------*/
|
|
/*GALLERY*/
|
|
|
|
/*design*/
|
|
.gallery {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.gallery .card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 0 1 0;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
/*space between columns of cards*/
|
|
margin-right: calc(var(--gallery-gap-unit) * 2);
|
|
/*space between lines of cards*/
|
|
margin-top: calc(var(--gallery-gap-unit) * 2);
|
|
}
|
|
.gallery .card > * {
|
|
/*vertical space between elements inside of cards*/
|
|
margin: var(--gallery-gap-unit) 0px;
|
|
}
|
|
.gallery .card img {
|
|
/*height of imgs, hence of lines*/
|
|
height: var(--gallery-img-height);
|
|
margin: auto auto auto 0px;
|
|
/*appearence of border of imgs*/
|
|
border-style: solid;
|
|
border-width: var(--gallery-img-border-width);
|
|
border-color: var(--gallery-img-border-color);
|
|
}
|
|
|
|
/*----------------------------------------------------*/
|
|
/*IMAGE single*/
|
|
.image {
|
|
margin: auto;
|
|
margin-left: 0px;
|
|
}
|
|
.image img {
|
|
}
|
|
.image.full img {
|
|
max-width: 100vw;
|
|
margin-left: calc(-1 * var(--screen-gap));
|
|
}
|
|
|