Refactor Astro components and layouts

src/components/Header.astro

@@ -2,6 +2,52 @@
 
 ---
 
+<style lang="scss">
+	@import "../scss/_variables.scss";
+
+	header {
+		background-color: $colorBg;
+		border-bottom: 1px solid $colorHeader;
+		box-shadow: 0 5px 5px $colorBg;
+		left: 0;
+		line-height: 3.5em;
+		opacity: 0.975;
+		position: fixed;
+		right: 0;
+		top: 0;
+	}
+
+	nav {
+		margin: auto;
+		max-width: 60em;
+		padding: 0 4em;
+		text-align: right;
+
+		a {
+			color: $colorText;
+			padding: 0 1em;
+
+			&:visited {
+				color: $colorText;
+			}
+		}
+	}
+
+	@media (width <=684px) {
+		header {
+			box-shadow: none;
+		}
+
+		nav {
+			padding: 0 2em;
+
+			span {
+				display: none;
+			}
+		}
+	}
+</style>
+
 <header>
 	<nav>
 		<a href="/feed.xml">RSS</a>