Update styles for header and footer

5 files changed, 50 insertions, 31 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);
 		}
 	}
 }
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 8a06f09..1d98e95 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -5,10 +5,4 @@
 		Copyright &copy; 2023 Ariel Costas Guerrero. Todos los derechos reservados.<br>
 		Cedido bajo licencia <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.es">CC BY-SA 4.0</a> salvo que se indique lo contrario.
 	</p>
-
-	<div>
-		<a href="https://masto.es/@arielcg" rel="me">Mastodon</a>
-		<a href="https://github.com/arielcostas">GitHub</a>
-		<a href="https://linkedin.com/in/ariel-costas">LinkedIn</a>
-	</div>
 </footer>
\ No newline at end of file
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 9e51d9b..5cf34fc 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,13 +1,22 @@
 <header>
-	<h1>
-		<a href="{{ .Site.Home.RelPermalink }}">
-			CostasDEV
-		</a>
-	</h1>
+	<div>
+		<h1>
+			<a href="{{ .Site.Home.RelPermalink }}">
+				CostasDEV
+			</a>
+		</h1>
+
+		<nav>
+			{{$current := .}}
+			{{ range .Site.Home.Pages }}
+			<a href="{{ .RelPermalink }}"{{ if eq .RelPermalink $current.RelPermalink }} class="active"{{ end }}>{{ .Title }}</a>
+			{{ end }}
+		</nav>
+	</div>
 
 	<nav>
-		{{ range .Site.Home.Pages }}
-		<a href="{{ .RelPermalink }}">{{ .Title }}</a>
-		{{ end }}
+		<a rel="me" href="https://masto.es/@arielcg">Mastodon</a>
+		<a href="https://github.com/arielcostas">GitHub</a>
+		<a href="https://linkedin.com/in/ariel-costas">LinkedIn</a>
 	</nav>
 </header>
\ No newline at end of file