pro/2022_WEBSITE_kosmopolit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mise en place des global variables

Browse Source
This commit is contained in:
hugogogo
2021-02-18 14:16:45 +01:00
parent f85e008a29
commit 6903e63ec0
1 changed files with 35 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
pages/litterall.html
View File

@@ -36,60 +36,51 @@
/*GALLERY*/
/*
.gallery
----- ---- --- ----
' '' '' '' '
' '' '' '' '
'-----''----''---''----'
~~ ~ ~~ ~~ ~~ ~
---- --- --- ------
' '' '' '' '
' '' '' '' '
'----''---''---''------'
~~~ ~ ~ ~ ~~ ~~
------ ---
' '' '
' '' '
'------''---'
~~ ~ ~ ~
images are stretched to cover the entire raw
it works well with images of similar size
-------------
' --------- '
' ' ' '
' ' ' '
' ' ' '
' --------- '
' ~ ~ ~~ '
' ~~ ~ ~~ '
-------------
.gallery.frame
-------- --------- ---------- ---------
' ------ '' ------- '' -------- '' ------- '
' ---- '' ----- '' ------ '' ----- '
' ' ' '' ' ' '' ' ' '' ' ' '
' ' ' '' ' ' '' ' ' '' ' ' '
' ------ '' ------- '' -------- '' ------- '
' '----' '' '-----' '' '------' '' '-----' '
' ~~ ~~ '' ~~~ ~ '' ~~ ~~ ~ '' ~~ ~~ '
'--------''---------''----------''---------'
----------- -------
' --------- '' ----- '
' ------- '' --- '
' ' ' '' ' ' '
' ' ' '' ' ' '
' --------- '' ----- '
' '-------' '' '---' '
' ~~ ~~ '' ~~~ '
'-----------''-------'
images keeps their real ratio, but a frame appear around them
-------- --------- ---------- ---------
' '' '' '' '
' '' '' '' '
' '' '' '' '
'--------''---------''----------''---------'
~~~ ~~ ~~~~ ~ ~~~ ~~ ~ ~~~ ~~ ~
----------- -------
' '' '
' '' '
' '' '
'-----------''-------'
~~~ ~ ~~ ~~~~
*/
:root {
/*GALLERY*/
/*space between columns of cards*/
--gallery-gap-unit: 6px;
}
.gallery {
display: flex;
flex-wrap: wrap;
@@ -99,24 +90,34 @@
flex-direction: column;
flex-wrap: wrap;
flex: 1;
justify-content: space-between;
margin: 3px 6px 3px 0px;
border: 1px solid lightgrey;
padding: 0px;
margin: 0px;
/*space between columns of cards*/
margin-right: calc(var(--gallery-gap-unit) / 2);
}
.gallery .card > * {
margin: 5px;
/*vertical space between elements inside of cards*/
margin: var(--gallery-gap-unit) 0px;
}
.gallery .card img {
max-height: 200px;
border: 1px solid lightgrey;
}
.gallery .card p {
display: none;
}
/*to avoid last element of gallery to stretch untill end of line*/
.gallery::after {
content: "";
flex: 100;
}
/*in case of frames*/
.gallery.frame .card {
padding-left: var(--gallery-gap-unit);
padding-right: var(--gallery-gap-unit);
margin: 6px 12px 6px 0px;
border: 1px solid lightgrey;
}
.gallery.frame .card > * {
margin: var(--gallery-gap-unit) auto;
}
/*settings specifics*/
main {
@@ -149,7 +150,7 @@
<div class="image_container">
<img id="dernier_numero" src="./docs/revues/litt23.jpg" alt="revue litterall">
</div>
<div class="gallery" id="tous_numeros">
<div class="gallery frame" id="tous_numeros">
<div class="card">
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>