From e0fcefb3a3c31a6eea35afaa63f442a3c14a58f5 Mon Sep 17 00:00:00 2001
From: jay-tux <sys.jonas@yahoo.com>
Date: Sat, 5 Jul 2025 22:04:32 +0200
Subject: [PATCH] Styling for mobile

---
 index.html    |  4 ++++
 jaytux.com.md |  4 ++++
 overrides.css | 15 +++++++++++++++
 3 files changed, 23 insertions(+)

diff --git a/index.html b/index.html
index 500d645..4d97705 100644
--- a/index.html
+++ b/index.html
@@ -182,6 +182,10 @@
 <p class="date">2025-04-13</p>
 </header>
 <div class="header-container">
+<div class="mobile-image">
+<img src="./picture.jpg" alt="A picture of me" class="header-image" />
+<img src="./pfp.png" alt="My typical profile picture" class="header-image" />
+</div>
 <img src="./picture.jpg" alt="A picture of me" class="header-image left" />
 <div class="header-details">
 <h1>
diff --git a/jaytux.com.md b/jaytux.com.md
index 6d65be7..4382827 100644
--- a/jaytux.com.md
+++ b/jaytux.com.md
@@ -11,6 +11,10 @@ header-includes:
 ---
 
 <div class="header-container">
+ <div class="mobile-image">
+  <img src="./picture.jpg" alt="A picture of me" class="header-image" />
+  <img src="./pfp.png" alt="My typical profile picture" class="header-image" />
+ </div>
  <img src="./picture.jpg" alt="A picture of me" class="header-image left" />
  <div class="header-details">
   <h1>Jonas Sys</h1>
diff --git a/overrides.css b/overrides.css
index cd4c81c..f0a2f40 100644
--- a/overrides.css
+++ b/overrides.css
@@ -32,3 +32,18 @@ header {
   vertical-align: middle;
   height: 1em;
 }
+
+.mobile-image {
+  display: none;
+}
+
+@media(max-width: 700px) {
+  .mobile-image {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .left, .right {
+    display: none;
+  }
+}