Split header & add profile link

HuskyNator · Jan 5, 2024 · 021e89a · 021e89a
1 parent 1871eff
commit 021e89a
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -13,13 +13,18 @@
 
 
 <body>
-	<header class="h_flex">
-		<svg width="32" height="32">
-			<polygon class="svg_blue" points="3,0 10,31 31,10" />
-			<polygon class="svg_orange" points="0,15 3,21 30,15" />
-			<line class="svg_red" x2="15" y2="14" x1="0" y1="27" />
-		</svg>
-		<h1>Ray - A Dlang Raytracer</h1>
+	<header>
+		<a href="https://huskynator.github.io/" id="profile">
+			<img src="https://gravatar.com/avatar/259b2b7e592ff2409050ccf09358789d8409af45964b9ac61555aeb663fe583f?s=60" alt="Profile Page">
+		</a>
+		<div class="h_flex" id="banner">
+			<svg width="32" height="32">
+				<polygon class="svg_blue" points="3,0 10,31 31,10" />
+				<polygon class="svg_orange" points="0,15 3,21 30,15" />
+				<line class="svg_red" x2="15" y2="14" x1="0" y1="27" />
+			</svg>
+			<h1>Ray - A Dlang Raytracer</h1>
+		</div>
 	</header>
 	<main>
 		<img src="web/helmet.gif" alt="Damaged Helmet Rotating Gif">

diff --git a/style.css b/style.css
@@ -6,11 +6,39 @@ a:hover {
 	color: #40a0ff
 }
 
+header {
+	display: grid;
+	grid-template-columns: 80px 1fr;
+	grid-template-rows: 1fr;
+	background-color: #353535;
+}
+
+#profile {
+	z-index: 1;
+	justify-self: center;
+	align-self: center;
+	grid-area: 1 / 1 / 1 / 2;
+}
+
+#profile>img {
+	border-radius: 25%;
+}
+
+#profile>img:hover {
+	/* transform: scale(1.1); */
+	border-style: solid;
+	border-width: 2px;
+	border-color: #40a0ff
+}
+
+#banner {
+	grid-area: 1 / 1 / 1 / 3;
+}
+
 .h_flex {
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	background-color: #353535;
 	gap: 10px;
 }
 
@@ -55,6 +83,10 @@ main img {
 	width: min(480px, 100vw);
 }
 
+footer {
+	background-color: #353535;
+}
+
 footer a {
 	height: 100%;
 	text-decoration: none;