From 7b2bd5a6da08b7d238d2ee5b931eaf511a71b95b Mon Sep 17 00:00:00 2001
From: Gregory Trolliet <gregory@trolliet.info>
Date: Fri, 8 Sep 2023 21:00:34 +0200
Subject: [PATCH] [STYLE] Make navbar sticky

---
 static/css/style.css | 40 ++++++++++++++++++++++++++++++++++------
 1 file changed, 34 insertions(+), 6 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 8567eda..69cf5e4 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -14,7 +14,8 @@
 	--color03: #871818;
 
 	--image-margin-side: 2.5em;
-
+	--navigation-height: 4em;
+	
 	--content-width: 900px;
 }
 
@@ -24,7 +25,7 @@
 }
 html {
 	background-color: var(--background-color);
-	font-family: Lato, Helvetica, sans-serif;
+	font-family: serif;
 	font-size: medium;
 	color: var(--font-color);
 }
@@ -86,9 +87,13 @@ a.not(.anchor):focus {
 
 /******************* Navbar *******************/
 #navigation {
-	height: 4em;
+	position: fixed;
+	top: 0;
+	height: var(--navigation-height);
 	width: 100%;
-	line-height: 4em;
+	line-height: var(--navigation-height);
+	background-color: var(--background-color);
+	z-index: 100;
 }
 #navigation a {
 	padding: 1em;
@@ -302,6 +307,7 @@ a.not(.anchor):focus {
 .container {
 	max-width: 90vw;
 	margin: 0 auto;
+	margin-top: var(--navigation-height);
 	width: 100%;
 	display: flex;
 	flex: 1;
@@ -333,9 +339,24 @@ a.not(.anchor):focus {
 }
 
 /******************* Archives List *******************/
+#blog-list {
+	max-width: 95vw;
+}
+
 .archives-list {
 	list-style: none;
 	padding-left: 0;
+	display: flex;
+	flex-wrap: wrap;
+	align-content: flex-start;
+	justify-content: space-between;
+	gap: 1em;
+}
+
+.archives-list::after {
+	content: "";
+	flex: auto;
+	flex-basis: 20em;
 }
 .archives-list .archive {
 	display: block;
@@ -343,6 +364,7 @@ a.not(.anchor):focus {
 	margin: 1em 0;
 	overflow: auto;
 	border: none;
+	width: 100%;
 }
 .archives-list .archive:hover {
 	border: none;
@@ -352,11 +374,13 @@ a.not(.anchor):focus {
 }
 .archives-list .thumbnail {
 	display: inline-block;
-	width: 15em;
+	width: 100%;
 	text-align: left;
-	margin-right: 1.5em;
 }
 @media only screen and (min-width: 768px) {
+	.archives-list .archive {
+		width: 48%;
+	}
 	.archives-list .thumbnail {
 		display: inline-block;
 		text-align: right;
@@ -378,6 +402,10 @@ a.not(.anchor):focus {
 	bottom: 0;
 	right: 0;
 	font-style: italic;
+	display: none;
+}
+.archive:hover .more {
+	display: inherit;
 }
 
 /******************* Letters *******************/