update homepage styling

- New header design
- Embed pinapelz.moe as iframe bottom

1 files changed, 62 insertions, 6 deletions

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 774b864..0c2e5c0 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -4,21 +4,77 @@ import { SITE_TITLE } from '../consts';
 ---
 
 <header>
-	<h2>
-		{SITE_TITLE}
-	</h2>
+	<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="603-pfp.png" alt="Profile Picture">
+	</div>
 </header>
+
 <style>
 	header {
-		margin: 0em 0 2em;
+		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;
+	}
+
+	h1 {
+		margin: 0;
+		font-size: 2em;
+	}
+
+	nav {
+		display: flex;
+		align-items: center;
+		font-size: larger;
+	}
+
+	nav > * {
+		margin-left: 1em;
+		text-decoration: none;
+		color: inherit;
+		transition: color 0.3s ease;
+		position: relative;
+	}
+
+	nav > *:first-child {
+		margin-left: 0;
+	}
+
+	nav > *:hover {
+		color: #ccc;
 	}
-	h2 {
-		margin: 0.5em 0;
+
+	nav > *:hover::before {
+		content: "";
+		position: absolute;
+		bottom: -5px;
+		left: 0;
+		width: 100%;
+		height: 2px;
+		background-color: #ccc;
 	}
 </style>