1 files changed, 147 insertions, 0 deletions
diff --git a/assets/css/partials/_header.scss b/assets/css/partials/_header.scss
new file mode 100644
index 0000000..21e746b
--- /dev/null
+++ b/assets/css/partials/_header.scss
@@ -0,0 +1,147 @@
+header {
+	border-top: 4px solid var(--accent-5);
+	background-color: #EFEFEF;
+	color: black;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+
+	padding: 0 1rem;
+	margin-bottom: 1rem;
+
+	a {
+		display: inline-block;
+		padding-top: 0.5rem;
+		padding-bottom: calc(0.5rem - 4px);
+	}
+
+	#brand {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: 1rem;
+
+		h1 {
+			font-size: 2rem;
+			margin: 0;
+			font-weight: 900;
+			letter-spacing: 0.15rem;
+
+			a {
+				text-decoration: none;
+			}
+		}
+	}
+
+	#nav-pages {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+
+		padding-inline-start: 2.5rem;
+
+		transition: max-height 0.2s linear;
+		max-height: 100vh;
+	}
+
+	#nav-socials {
+		align-self: center;
+
+		display: flex;
+		gap: 1.5rem;
+
+		transition: max-height 0.2s linear;
+		max-height: 100vh;
+
+		a {
+			font-size: 1.5rem;
+			transition: color 0.2s ease-in-out;
+			line-height: 1;
+		}
+	}
+
+	nav>a {
+		text-decoration: none;
+		font-weight: 700;
+		font-size: 1.2rem;
+		text-transform: uppercase;
+		letter-spacing: 0.1rem;
+		transition: color 0.2s ease-in-out;
+
+		&:hover {
+			color: var(--accent-3);
+		}
+
+		&.active {
+			border-bottom: 2px solid var(--accent-3);
+		}
+	}
+
+	button#mobile-menu {
+		display: block;
+		background-color: transparent;
+		border: none;
+		font-size: 2rem;
+		cursor: pointer;
+	}
+
+	&.collapsed {
+
+		#nav-pages,
+		#nav-socials {
+			max-height: 0;
+			overflow: hidden;
+		}
+	}
+}
+
+@media (min-width: 480px) {
+	header {
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+
+		a {
+			padding-top: 1rem;
+			padding-bottom: calc(1rem - 4px);
+		}
+
+		#nav-pages {
+			justify-self: start;
+			flex-direction: row;
+			gap: 1.5rem;
+			padding-inline-start: 0;
+		}
+
+		button#mobile-menu {
+			display: none;
+		}
+
+		&.collapsed {
+
+			#nav-pages,
+			#nav-socials {
+				display: flex;
+				max-height: unset;
+			}
+		}
+	}
+}
+
+@media (min-width: 1024px) {
+	header {
+		padding: 0 1rem;
+		gap: 1.5rem;
+		justify-content: start;
+
+		h1 {
+			margin-bottom: 0.5rem;
+		}
+
+		#nav-socials {
+			align-self: flex-end;
+			margin-left: auto;
+		}
+	}
+}
+\ No newline at end of file