89 lines
1.7 KiB
CSS
89 lines
1.7 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 {
|
|
font-size: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
.gallery .card {
|
|
font-size: 100%;
|
|
display: flex;
|
|
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);
|
|
}
|
|
.gallery .card p {
|
|
font-size: 12px;
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
/*----------------------------------------------------*/
|
|
/*IMAGE single*/
|
|
.image {
|
|
margin-right: auto;
|
|
margin-left: 0px;
|
|
width: 100%;
|
|
}
|
|
.image * {
|
|
margin: 0px;
|
|
}
|
|
.image img {
|
|
height: 400px;
|
|
width: auto;
|
|
}
|
|
.image h1, .image h2, .image h3, .image p {
|
|
width: auto;
|
|
margin-left: calc(var(--gap-unit) * 2 );
|
|
}
|
|
/*images in full page*/
|
|
.image.full img {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
/*images as icon, like for facebook links*/
|
|
.img_icon {
|
|
width: 25px;
|
|
}
|