From 8b33a7fc4a11b0c0977e598704d0f67ba2ca503d Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <94913521+arielcostas@users.noreply.github.com>
Date: Thu, 15 Feb 2024 21:29:37 +0100
Subject: New navbar

---
 assets/css/_root.scss             | 19 +++++++++-----
 assets/css/base.scss              |  2 ++
 assets/css/partials/_article.scss | 15 +++++++----
 assets/css/partials/_header.scss  | 53 ++++++++++++++++++++++++++-------------
 4 files changed, 61 insertions(+), 28 deletions(-)

(limited to 'assets/css')

diff --git a/assets/css/_root.scss b/assets/css/_root.scss
index 6354cba..568691e 100644
--- a/assets/css/_root.scss
+++ b/assets/css/_root.scss
@@ -1,5 +1,5 @@
 :root {
-	--font-heading: "Roboto Slab", "Times New Roman", serif;
+	--font-heading: "Roboto Slab", "Segoe UI";
 	--font-body: Arial, Helvetica, sans-serif;
 	--font-mono: "Fira Code", "Consolas" , monospace;
 
@@ -8,12 +8,12 @@
 	line-height: 1.65;
 	font-family: var(--font-body);
 
-	--header-background: #efefef;
-	--header-color: var(--accent-1);
-
-	--body-background: #f5f5f5;
+	--body-background: #efefef;
 	--body-color: #212121;
 
+	--header-background: #ffffff;
+	--header-color: var(--accent-1);
+
 	--footer-background: #212121;
 	--footer-color: #ffffff;
 
@@ -22,4 +22,11 @@
 	--accent-3: hsl(152, 90%, 40%);
 	--accent-4: hsl(152, 90%, 60%);
 	--accent-5: hsl(152, 90%, 80%);
-}
\ No newline at end of file
+
+	--shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
+}
+
+$floatingRadius: 0.5rem;
+
+$breakpointTablet: 480px;
+$breakpointDesktop: 1024px;
\ No newline at end of file
diff --git a/assets/css/base.scss b/assets/css/base.scss
index 9a54972..083a667 100644
--- a/assets/css/base.scss
+++ b/assets/css/base.scss
@@ -12,8 +12,10 @@ body {
 body {
 	min-height: 100vh;
 	max-width: 100vw;
+
 	display: flex;
 	flex-direction: column;
+	gap: 0.5rem;
 	
 	background-color: var(--body-background);
 	color: var(--body-color);
diff --git a/assets/css/partials/_article.scss b/assets/css/partials/_article.scss
index 11da92b..22c27ce 100644
--- a/assets/css/partials/_article.scss
+++ b/assets/css/partials/_article.scss
@@ -1,12 +1,17 @@
 main {
-	margin: 0 auto 3rem;
-	padding: 1rem;
 	box-sizing: border-box;
+	margin: 0.75rem 1rem 3rem;
+	padding: 1.5rem 2.5rem;
+	border-radius: $floatingRadius;
+	box-shadow: var(--shadow);
 
-	max-width: 72ch;
-	width: 100%;
+	align-self: center;
+
+	max-width: 82ch;
 	font-size: 1.25rem;
 
+	background-color: var(--header-background);
+
 	a {
 		color: var(--accent-1);
 		transition: color 0.2s ease-in-out;
@@ -30,7 +35,7 @@ main {
 	}
 
 	h1 {
-		font-size: 2.25rem;
+		font-size: 2.75rem;
 		line-height: 1;
 		margin-bottom: 1rem;
 	}
diff --git a/assets/css/partials/_header.scss b/assets/css/partials/_header.scss
index 31b3dbb..00d211a 100644
--- a/assets/css/partials/_header.scss
+++ b/assets/css/partials/_header.scss
@@ -1,19 +1,37 @@
 header {
-	border-top: 4px solid var(--header-color);
 	background-color: var(--header-background);
 	color: var(--header-color);
+	box-shadow: var(--shadow);
 
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
+	gap: 0.5rem 0;
 
-	padding: 0 1rem;
+	padding: 1rem 1rem;
+	margin: 0.75rem;
 	margin-bottom: 1rem;
 
+	border-radius: $floatingRadius;
+
+	position: relative;
+	overflow: hidden;
+
+	&:before {
+		content: "";
+		height: 4px;
+		width: 100%;
+
+		background-color: var(--header-color);
+
+		position: absolute;
+		display: block;
+		top: 0;
+		left: 0;
+	}
+
 	a {
 		display: inline-block;
-		padding-top: 0.5rem;
-		padding-bottom: calc(0.5rem - 4px);
 	}
 
 	#brand {
@@ -26,9 +44,10 @@ header {
 			font-size: 2rem;
 			margin: 0;
 			font-weight: 900;
-			letter-spacing: 0.15rem;
+			line-height: 1;
 
 			a {
+				font-family: var(--font-heading);
 				color: var(--header-color);
 				text-decoration: none;
 			}
@@ -39,6 +58,7 @@ header {
 		display: flex;
 		flex-direction: column;
 		align-items: flex-start;
+		gap: 0.25rem;
 
 		padding-inline-start: 2.5rem;
 
@@ -70,13 +90,14 @@ header {
 		letter-spacing: 0.1rem;
 		transition: color 0.2s ease-in-out;
 		color: var(--header-color);
+		line-height: 1;
 
 		&:hover {
 			color: var(--accent-3);
 		}
 
 		&.active {
-			border-bottom: 2px solid var(--accent-3);
+			color: var(--accent-1);
 		}
 	}
 
@@ -87,8 +108,11 @@ header {
 		font-size: 2rem;
 		cursor: pointer;
 	}
+}
 
-	&.collapsed {
+@media (max-width: $breakpointTablet) {
+	header.collapsed {
+		gap: 0;
 
 		#nav-pages,
 		#nav-socials {
@@ -98,17 +122,12 @@ header {
 	}
 }
 
-@media (min-width: 480px) {
+@media (min-width: $breakpointTablet) {
 	header {
 		flex-direction: row;
-		align-items: center;
+		align-items: baseline;
 		justify-content: space-between;
 
-		a {
-			padding-top: 1rem;
-			padding-bottom: calc(1rem - 4px);
-		}
-
 		#nav-pages {
 			justify-self: start;
 			flex-direction: row;
@@ -131,11 +150,11 @@ header {
 	}
 }
 
-@media (min-width: 1024px) {
+@media (min-width: $breakpointDesktop) {
 	header {
-		padding: 0 1rem;
+		padding: 1rem 1.25rem;
 		gap: 1.5rem;
-		justify-content: start;
+		justify-content: center;
 
 		h1 {
 			margin-bottom: 0.5rem;
-- 
cgit v1.3