From 9b3676c4eacca7a8224e0a774033c2317861ed85 Mon Sep 17 00:00:00 2001
From: juhnsa
 <git config --global user.email 12345678+username@users.noreply.github.com>
Date: Wed, 23 Jul 2025 18:25:07 +0200
Subject: [PATCH] Responsive images and proper styling for images with caption

---
 assets/css/main.css       | 36 ++++++++++++++++++++++++++++++++++++
 content/theme_overview.md |  2 ++
 2 files changed, 38 insertions(+)

diff --git a/assets/css/main.css b/assets/css/main.css
index 3c60d07..6d2b0d7 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -40,6 +40,42 @@ a {
   text-decoration: none;
 }
 
+/* Media */
+
+img {
+  max-width: 100%;
+  height: auto;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+figure {
+  display: inline-block;
+  margin: 2rem auto;
+  text-align: center;
+  max-width: 100%;
+}
+
+figure img {
+  max-width: 100%;
+  height: auto;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+figcaption {
+  margin-top: 0.75rem;
+  font-size: 0.95rem;
+  color: var(--text-highlight-secondary);
+  font-style: italic;
+  line-height: 1.4;
+}
+
+.center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: fit-content;
+}
+
 /* Menubar */
 
 nav {
diff --git a/content/theme_overview.md b/content/theme_overview.md
index 2e3a638..6de28a8 100644
--- a/content/theme_overview.md
+++ b/content/theme_overview.md
@@ -53,6 +53,8 @@ draft = false
 
 ![Sample Image](https://placehold.co/600x400)
 
+{{< figure src="https://placehold.co/300x200" caption="This is an image with a caption. I'm centered :)" class="center" >}}
+
 ---
 
 ## Code Blocks
-- 
2.54.0