From bccdc1e2d014af0d723cde3735d30a90d081f847 Mon Sep 17 00:00:00 2001
From: Pinapelz <yukais@pinapelz.com>
Date: Tue, 12 Sep 2023 19:30:25 -0700
Subject: fix header mobile viewing - Adjust different style for header on
 mobile screen sizes

---
 src/components/Header.astro | 152 +++++++++++++++++++++++++-------------------
 1 file changed, 87 insertions(+), 65 deletions(-)

(limited to 'src/components')

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 9bab4a1..2a48dda 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -3,78 +3,100 @@ import HeaderLink from './HeaderLink.astro';
 import { SITE_TITLE } from '../consts';
 ---
 
-<header>
-	<h1>{SITE_TITLE}</h1>
-	<nav>
-		<HeaderLink href="/">Home</HeaderLink>
-		<HeaderLink href="/blog">Blog</HeaderLink>
-		<HeaderLink href="/about">About</HeaderLink>
-		<HeaderLink href="/rss.xml">RSS</HeaderLink>
-	</nav>
-	<div class="logo">
-		<img src="https://files.catbox.moe/grlaov.png" alt="Profile Picture">
-	</div>
-</header>
-
 <style>
-	header {
-		background-color: #333;
-		color: #fff;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 1em;
-		margin-bottom: 20px;
-	}
+  /* Default styles for non-mobile devices */
+  header {
+    background-color: #333;
+    color: #fff;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1em;
+    margin-bottom: 20px;
+  }
+
+  .logo {
+    width: 50px;
+    height: 50px;
+    overflow: hidden;
+    border-radius: 50%;
+    margin-right: 1em;
+  }
+
+  .logo img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 
-	.logo {
-		width: 50px;
-		height: 50px;
-		overflow: hidden;
-		border-radius: 50%;
-		margin-right: 1em;
-	}
+  h1 {
+    margin: 0;
+    font-size: 2em;
+  }
 
-	.logo img {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-	}
+  nav {
+    display: flex;
+    align-items: center;
+    font-size: larger;
+  }
 
-	h1 {
-		margin: 0;
-		font-size: 2em;
-	}
+  nav > * {
+    margin-left: 1em;
+    text-decoration: none;
+    color: inherit;
+    transition: color 0.3s ease;
+    position: relative;
+  }
 
-	nav {
-		display: flex;
-		align-items: center;
-		font-size: larger;
-	}
+  nav > *:first-child {
+    margin-left: 0;
+  }
 
-	nav > * {
-		margin-left: 1em;
-		text-decoration: none;
-		color: inherit;
-		transition: color 0.3s ease;
-		position: relative;
-	}
+  nav > *:hover {
+    color: #ccc;
+  }
 
-	nav > *:first-child {
-		margin-left: 0;
-	}
+  nav > *:hover::before {
+    content: "";
+    position: absolute;
+    bottom: -5px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background-color: #ccc;
+  }
 
-	nav > *:hover {
-		color: #ccc;
-	}
+  /* Media query for mobile devices */
+  @media (max-width: 768px) {
+    header {
+      flex-direction: column;
+      text-align: center;
+    }
 
-	nav > *:hover::before {
-		content: "";
-		position: absolute;
-		bottom: -5px;
-		left: 0;
-		width: 100%;
-		height: 2px;
-		background-color: #ccc;
-	}
+    .logo {
+      margin-bottom: 1em;
+    }
+
+    nav {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    nav > * {
+      margin: 0.5em 0;
+    }
+  }
 </style>
+
+<header>
+  <div class="logo">
+    <img src="https://files.catbox.moe/grlaov.png" alt="Profile Picture">
+  </div>
+  <h1>{SITE_TITLE}</h1>
+  <nav>
+    <HeaderLink href="/">Home</HeaderLink>
+    <HeaderLink href="/blog">Blog</HeaderLink>
+    <HeaderLink href="/about">About</HeaderLink>
+    <HeaderLink href="/rss.xml">RSS</HeaderLink>
+  </nav>
+</header>
-- 
cgit v1.2.3