Update styles for header and footer

3 files changed, 33 insertions, 17 deletions

diff --git a/assets/css/partials/article.scss b/assets/css/partials/article.scss
index 91c79db..f93d460 100644
--- a/assets/css/partials/article.scss
+++ b/assets/css/partials/article.scss
@@ -2,11 +2,20 @@ main {
 	margin: 0 auto 3rem;
 	padding: 1rem;
 	box-sizing: border-box;
-	
+
 	max-width: 65ch;
 	width: 100%;
 	font-size: 1.25rem;
 
+	a {
+		color: var(--accent-1);
+		transition: color 0.2s ease-in-out;
+
+		&:hover {
+			color: var(--accent-2);
+		}
+	}
+
 	>* {
 		margin-top: 0;
 		margin-bottom: 1.75rem;
diff --git a/assets/css/partials/footer.scss b/assets/css/partials/footer.scss
index 8073bcc..60ad7a6 100644
--- a/assets/css/partials/footer.scss
+++ b/assets/css/partials/footer.scss
@@ -1,23 +1,12 @@
 footer {
 	background-color: #333;
 	color: white;
+	text-align: center;
 
 	padding: 0.5rem 1rem;
 
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
 
 	a {
 		color: var(--accent-7);
 	}
-
-	div {
-		display: flex;
-		gap: 1rem;
-		
-		font-size: 1.125rem;
-
-		font-family: var(--font-mono);
-	}
 }
\ No newline at end of file
diff --git a/assets/css/partials/header.scss b/assets/css/partials/header.scss
index 16fb314..1562952 100644
--- a/assets/css/partials/header.scss
+++ b/assets/css/partials/header.scss
@@ -1,5 +1,6 @@
 header {
-	background-color: var(--accent-5);
+	border-top: 4px solid var(--accent-5);
+	background-color: #EFEFEF;
 	color: black;
 
 	display: flex;
@@ -7,9 +8,22 @@ header {
 	align-items: center;
 	justify-content: space-between;
 
-	padding: 1rem 2rem;
+	padding: 0 2rem;
 	margin-bottom: 1rem;
 
+	a {
+		display: inline-block;
+		padding-top: 1rem;
+		padding-bottom: calc(1rem - 4px);
+	}
+
+	>div {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: 1rem;
+	}
+
 	h1 {
 		font-size: 2rem;
 		margin: 0;
@@ -26,7 +40,7 @@ header {
 		font-weight: 300;
 	}
 
-	nav > a {
+	nav>a {
 		text-decoration: none;
 		font-weight: 700;
 		font-size: 1.2rem;
@@ -36,7 +50,11 @@ header {
 		transition: color 0.2s ease-in-out;
 
 		&:hover {
-			color: var(--accent-dark);
+			color: var(--accent-3);
+		}
+
+		&.active {
+			border-bottom: 2px solid var(--accent-3);
 		}
 	}
 }