From 6874b149164a6a1ac9ae3d2ec39a729e63d0bb68 Mon Sep 17 00:00:00 2001
From: Chris <chris+dev@netsoj.nl>
Date: Sat, 12 Oct 2024 20:37:26 +0200
Subject: [PATCH] style: move to grid layout from flex

This allows to reposition items without hiding/showing classes
---
 public/static/style/base.css | 125 ++++++++++++++++++++++-------------
 views/parts/page.dt          |  32 ++++-----
 2 files changed, 95 insertions(+), 62 deletions(-)

diff --git a/public/static/style/base.css b/public/static/style/base.css
index 9d12161..6ac448a 100644
--- a/public/static/style/base.css
+++ b/public/static/style/base.css
@@ -1,32 +1,3 @@
-@media (max-width: 850px) {
-	body {
-		flex-wrap: wrap;
-	}
-
-	body > main {
-		box-sizing: border-box;
-		min-width: 100%;
-	}
-
-	body > section.header-navigation, body > footer {
-		width: 100%;
-		flex-grow: 1 !important;
-	}
-
-	.hide-small {
-		display: none;
-	}
-
-	.hide-big {
-		display: block !important;
-	}
-}
-
-
-.hide-big {
-	display: none;
-}
-
 :root {
 	font-family: "sans-serif";
 	--colour-bg: #f0f0f0;
@@ -62,48 +33,54 @@ body {
 	background-color: #f0f0f0;
 	background-color: var(--colour-bg);
 	margin: 0;
-	display: flex;
+	display: grid;
+	grid-template-columns: 2em 200px max-content min-content;
+	grid-column-gap: 2em;
+	grid-template-rows: 2em min-content min-content 1fr;
+	grid-template-areas:
+		". .       main  .      "
+		". header  main  sidebar"
+		". menu    main  sidebar"
+		". footer  main  sidebar";
 	justify-content: center;
 	min-height: 100vh;
 	color: #000000;
 	color: var(--colour-fg);
 }
 
-body > section.header-navigation {
-	flex: 0 0 200px;
-	padding: 2em;
-}
-
-@media (pointer: coarse) {
-	body > section.header-navigation li {
-		padding: 0.25em 0;
-	}
+body > nav {
+	grid-area: menu;
 }
 
 body > footer {
-	flex: 0 0 200px;
-	padding: 2em;
-	border: none;
+	grid-area: footer;
+	margin-top: 0;
 }
 
-body > section.header-navigation > header {
+body > header {
+	grid-area: header;
 	text-align: center;
+	margin-bottom: 0;
 }
 
-body > section.header-navigation > header > img {
+body > header > img {
 	width: 100%;
 	max-width: 160px;
 }
 
+body > section.main-sidebar {
+	grid-area: sidebar;
+}
+
 body > main {
-	flex: 1 1;
+	grid-area: main;
 	padding: 2em;
 	/* width: 600px; */
 	border-left: #7f0602 dotted 1px;
 	border-right: #7f0602 dotted 1px;
 	border-left: var(--colour-fg-highlight) dotted 1px;
 	border-right: var(--colour-fg-highlight) dotted 1px;
-	max-width: 600px;
+	max-width: calc(600px);
 	background-color: #ddd;
 	background-color: var(--colour-bg-main);
 }
@@ -274,11 +251,65 @@ a {
 	text-decoration: underline dotted;
 }
 
-a:hover {
+a:hover, a:focus {
 	color: var(--colour-fg);
 	text-decoration: underline solid;
 }
 
+@media (max-width: calc(800px + 8em)) {
+	body {
+		grid-template-columns: 100%;
+		grid-column-gap: 2em;
+		grid-template-rows: repeat(4, min-content);
+		grid-template-areas:
+		"header"
+		"menu"
+		"main"
+		"footer";
+	}
+
+	body > .main-sidebar {
+		display: none;
+	}
+
+	body > main {
+		box-sizing: border-box;
+		min-width: 100%;
+		border: none;
+		border-top: #7f0602 dotted 1px;
+		border-bottom: #7f0602 dotted 1px;
+		border-top: var(--colour-fg-highlight) dotted 1px;
+		border-bottom: var(--colour-fg-highlight) dotted 1px;
+	}
+
+	body > nav, body > footer {
+		width: calc(100% - 4em);
+		padding: 2em;
+	}
+}
+
+@media (pointer: coarse) {
+	body > nav li a {
+		display: inline-block;
+		padding: 1em 2em;
+		width: calc(100% - 4em);
+	}
+
+	body > nav > ul {
+		width: 100%;
+	}
+
+	body > nav li:not(:last-child) {
+		border-bottom: 1px dotted #000000;
+		border-bottom: 1px dotted var(--colour-fg);
+	}
+
+	body > nav {
+		padding: 1em 0em;
+		width: 100%;
+	}
+}
+
 @media print {
 	body {
 		background-color: initial;
diff --git a/views/parts/page.dt b/views/parts/page.dt
index 513f375..1c2e1a5 100644
--- a/views/parts/page.dt
+++ b/views/parts/page.dt
@@ -43,23 +43,25 @@ html(prefix="og: http://ogp.me/ns#")
 			li
 				a(href="#{link}") #{trWeb(text)}
 
-		section.header-navigation
-			header
-				img.logo(src="/static/img/logo.png", alt="The logo of the website: the letter C drawn in an unprofessional manner with wobbly eyes on put on top")
-				p #{trWeb("template.page.name")}
-			nav
-				ul
-					- menuItem("template.menu.home", "/");
-					- menuItem("template.menu.posts", "/posts/");
-					- menuItem("template.menu.projects", "/projects/");
-					- menuItem("template.menu.contact", "/contact");
+		header
+			img.logo(src="/static/img/logo.png", alt="The logo of the website: the letter C drawn in an unprofessional manner with wobbly eyes on put on top")
+			p #{trWeb("template.page.name")}
+
+		section.main-sidebar
 			block sidebar
-			footer.hide-small
-				block footer
-				include parts/footer
+
+		nav
+			ul
+				- menuItem("template.menu.home", "/");
+				- menuItem("template.menu.posts", "/posts/");
+				- menuItem("template.menu.projects", "/projects/");
+				- menuItem("template.menu.contact", "/contact");
+
 		main
 			block content
-		
-		footer.hide-big
+
+		footer
 			block footer
 			include parts/footer
+
+