summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorRomain Gonçalves <me@rgoncalves.se>2024-05-26 12:46:49 +0200
committerRomain Gonçalves <me@rgoncalves.se>2024-05-26 14:23:37 +0200
commit426b9fb3e1c2a77f813409e82ba2c8ddd7b21b30 (patch)
tree2f6e98ae6ef7953c439699191556cb4aec5ce8c3 /src
parentab54573f8fe1803f0599efbc2ce53ff04e72ec7f (diff)
downloadsousleciel.lol-426b9fb3e1c2a77f813409e82ba2c8ddd7b21b30.tar.gz
refactor(styles): img-item are now figure tags
Diffstat (limited to 'src')
-rw-r--r--src/projects/future-nostalgie.md10
-rw-r--r--src/projects/ktarnaval-2024.md14
-rw-r--r--src/styles/main.css14
3 files changed, 19 insertions, 19 deletions
diff --git a/src/projects/future-nostalgie.md b/src/projects/future-nostalgie.md
index 9ca8c69..956dac5 100644
--- a/src/projects/future-nostalgie.md
+++ b/src/projects/future-nostalgie.md
@@ -10,13 +10,9 @@ en février 2024.
disparue dont il ne resterait que des fossiles. Dans un futur où nous aurions
détruit notre écosystème, ces traces seraient nos seuls souvenirs de la nature.
-<div class="img-container">
- <div class="img-item">
- <img src="/static/projects/future-nostalgie-01.webp">
- </div>
- <div class="img-item">
- <img src="/static/projects/future-nostalgie-02.webp">
- </div>
+<div class="figure-container">
+ <figure><img src="/static/projects/future-nostalgie-01.webp"></figure>
+ <figure><img src="/static/projects/future-nostalgie-02.webp"></figure>
</div>
Ce projet questionne la notion de solastalgie : il invite à s’interroger sur le
diff --git a/src/projects/ktarnaval-2024.md b/src/projects/ktarnaval-2024.md
index 7726022..19e6a12 100644
--- a/src/projects/ktarnaval-2024.md
+++ b/src/projects/ktarnaval-2024.md
@@ -4,16 +4,10 @@ title: Ktarnaval (2024)
Le Ktarnaval 2024 s'est déroulé autour du thème du *Sacre du Printemps*.
-<div class="img-container">
- <div class="img-item">
- <img src="/static/projects/ktarnaval-01.webp">
- </div>
- <div class="img-item">
- <img src="/static/projects/ktarnaval-02.webp">
- </div>
- <div class="img-item">
- <img src="/static/projects/ktarnaval-03.webp">
- </div>
+<div class="figure-container">
+ <figure><img src="/static/projects/ktarnaval-01.webp"></figure>
+ <figure><img src="/static/projects/ktarnaval-02.webp"></figure>
+ <figure><img src="/static/projects/ktarnaval-03.webp"></figure>
</div>
Plusieurs centaines de carnavaliers se sont retrouvé sous-terre afin
diff --git a/src/styles/main.css b/src/styles/main.css
index fb5aa62..4e25486 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -103,16 +103,26 @@ img {
max-width: 100%;
}
-.img-container {
+.figure-container {
display: flex;
flex-direction: row;
width: 100%;
+ margin: 4em 0 4em 0;
+}
+
+.figure-container figure {
+ margin: 0;
+ width: 100%;
}
-.img-item:not(:last-child) {
+.figure-container figure:not(:last-child) {
margin-right: 1em;
}
+figcaption {
+ padding: 0 1em 0 1em;
+}
+
/* mobile */
@media only screen and (max-width: 72ch) {
remember that computers suck.