summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorRomain Gonçalves <me@rgoncalves.se>2024-05-26 15:41:32 +0200
committerRomain Gonçalves <me@rgoncalves.se>2024-05-26 15:41:56 +0200
commit32d8ce7c2e66d56ec35896c5a221bc6b5b387d10 (patch)
tree53bd925a645b808c7827cf70a984c8f7a572c61e
parentef052a07c6c769f334a0954f84ca869c4d362444 (diff)
downloadsousleciel.lol-32d8ce7c2e66d56ec35896c5a221bc6b5b387d10.tar.gz
refactor(styles): introduce wrap container selector
-rw-r--r--src/projects/galerie-des-tracts.md4
-rw-r--r--src/styles/main.css37
2 files changed, 38 insertions, 3 deletions
diff --git a/src/projects/galerie-des-tracts.md b/src/projects/galerie-des-tracts.md
index 0e72d81..3db7064 100644
--- a/src/projects/galerie-des-tracts.md
+++ b/src/projects/galerie-des-tracts.md
@@ -8,7 +8,7 @@ objectif de se faire connaître sous terre.
Véritables moyens de communication là où les antennes 5G n'émettent pas, ils
sont le plus souvent plastifiés et cachés dans les interstices de la roche.
-<div class="figure-container">
+<div class="figure-container wrap-container">
<figure>
<img src="/static/projects/2023-12-09--Le-Sousterreux--cochon.jpg">
<figcaption>le Sousterreux "Avoir Une Bonne Alimentation Sous Terre", distribué à Cochon pendant la tractofolie de 2023</figcaption>
@@ -23,7 +23,7 @@ sont le plus souvent plastifiés et cachés dans les interstices de la roche.
</figure>
</div>
-<div class="figure-container">
+<div class="figure-container wrap-container">
<figure>
<img src="/static/projects/2023-12-09--L-Acet-Famille--rue-St-Jacques--C.jpg">
<figcaption>carte de l'Acet Family, "Famille cataflics, I - Ancien.ne", échangée sous terre en décembre 2023</figcaption>
diff --git a/src/styles/main.css b/src/styles/main.css
index 4e25486..2cdb7be 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -103,6 +103,8 @@ img {
max-width: 100%;
}
+/* figure container */
+
.figure-container {
display: flex;
flex-direction: row;
@@ -110,6 +112,14 @@ img {
margin: 4em 0 4em 0;
}
+.figure-container:has(+ .figure-container) {
+ margin-bottom: 1em;
+}
+
+.figure-container + .figure-container {
+ margin-top: 1em;
+}
+
.figure-container figure {
margin: 0;
width: 100%;
@@ -129,6 +139,31 @@ figcaption {
/* title */
header h1 a {
- font-size: 13vw;
+ font-size: 12vw;
+ }
+
+ /* figure container */
+
+ .figure-container figure:not(:last-child) {
+ margin-right: .5em;
+ }
+
+ /* wrap container */
+
+ .wrap-container {
+ flex-wrap: wrap;
+ }
+
+ .wrap-container:has(+ .wrap-container) {
+ margin-bottom: 0em;
+ }
+
+ .wrap-container + .wrap-container {
+ margin-top: 0em;
+ }
+
+ .wrap-container figure,
+ .wrap-container figure:not(:last-child) {
+ margin: 1em 0 1em 0;
}
}
remember that computers suck.