diff options
| author | Romain Gonçalves <me@rgoncalves.se> | 2024-05-26 12:46:49 +0200 |
|---|---|---|
| committer | Romain Gonçalves <me@rgoncalves.se> | 2024-05-26 14:23:37 +0200 |
| commit | 426b9fb3e1c2a77f813409e82ba2c8ddd7b21b30 (patch) | |
| tree | 2f6e98ae6ef7953c439699191556cb4aec5ce8c3 | |
| parent | ab54573f8fe1803f0599efbc2ce53ff04e72ec7f (diff) | |
| download | sousleciel.lol-426b9fb3e1c2a77f813409e82ba2c8ddd7b21b30.tar.gz | |
refactor(styles): img-item are now figure tags
| -rw-r--r-- | src/projects/future-nostalgie.md | 10 | ||||
| -rw-r--r-- | src/projects/ktarnaval-2024.md | 14 | ||||
| -rw-r--r-- | src/styles/main.css | 14 |
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) { |