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*/
/* /*
.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 { .gallery {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -99,24 +90,34 @@
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
flex: 1; flex: 1;
justify-content: space-between; padding: 0px;
margin: 3px 6px 3px 0px; margin: 0px;
border: 1px solid lightgrey; /*space between columns of cards*/
margin-right: calc(var(--gallery-gap-unit) / 2);
} }
.gallery .card > * { .gallery .card > * {
margin: 5px; /*vertical space between elements inside of cards*/
margin: var(--gallery-gap-unit) 0px;
} }
.gallery .card img { .gallery .card img {
max-height: 200px; max-height: 200px;
border: 1px solid lightgrey; border: 1px solid lightgrey;
} }
.gallery .card p { /*to avoid last element of gallery to stretch untill end of line*/
display: none;
}
.gallery::after { .gallery::after {
content: ""; content: "";
flex: 100; 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*/ /*settings specifics*/
main { main {
@@ -149,7 +150,7 @@
<div class="image_container"> <div class="image_container">
<img id="dernier_numero" src="./docs/revues/litt23.jpg" alt="revue litterall"> <img id="dernier_numero" src="./docs/revues/litt23.jpg" alt="revue litterall">
</div> </div>
<div class="gallery" id="tous_numeros"> <div class="gallery frame" id="tous_numeros">
<div class="card"> <div class="card">
<img src="./docs/revues/litt22.jpg" alt="revue litterall"> <img src="./docs/revues/litt22.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p> <p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>