From beb7642637c860d8af73b2ae949cfbfda2ac9808 Mon Sep 17 00:00:00 2001
From: Marco Kohn <marco.kohn@noris.de>
Date: Mon, 23 Dec 2024 23:43:38 +0100
Subject: [PATCH] add some styling

---
 src/layouts/Layout.astro | 104 +++++++++++++++++++++++++++++++++++++--
 src/pages/index.astro    |  70 +++++++++++++++++++++++++-
 2 files changed, 170 insertions(+), 4 deletions(-)

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 46cb4cb..2fca55d 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -14,7 +14,105 @@
 </html>
 
 <style is:global>
-	/* Unscoped, delivered as-is to the browser.
-	   Applies to all <h1> tags on your site. */
-	h1 { color: red; }
+	* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	}
+
+	h1 {
+	font-size: 1.25rem;
+	line-height: 1.25;
+	}
+
+	h2 {
+	font-size: 0.875rem;
+	}
+
+	p {
+	margin-block-end: 1.5rem;
+	}
+
+	body {
+	font-family: system-ui, sans-serif;
+	font-size: 1rem;
+	line-height: 1.7;
+	color: #161616;
+	background-color: #f3f3f3;
+
+	min-block-size: 100vh;
+	min-block-size: 100dvh;
+	display: grid;
+	/* grid-template-columns: 100px 150px 200px 200px; */
+	/* grid-template-columns: 100px auto 10rem 200px; */
+	/* grid-template-columns: 100px auto repeat(2, 200px); */
+	/* grid-template-columns: repeat(2, 100px 200px); */
+	grid-template-columns: 5rem 1fr;
+
+	/* grid-template-rows: 100px 200px 100px; */
+	grid-template-rows: auto 1fr auto;
+
+	grid-template-areas:
+		"header header"
+		"sidebar main"
+		"footer footer";
+
+	grid-template-areas:
+		"sidebar header"
+		"sidebar main"
+		"footer footer";
+
+		transition: grid-template-columns 0.3s ease;
+	}
+
+	body.sb-expand {
+	grid-template-columns: 12.5rem 1fr;
+	}
+
+	.dashboard-header {
+	grid-area: header;
+	background-color: #fff;
+	padding: 1.25rem;
+	}
+
+	.dashboard-footer {
+	grid-area: footer;
+	background-color: #fff;
+	padding: 1.25rem;
+	}
+
+	.dashboard-main {
+	grid-area: main;
+	padding: 1.25rem;
+	}
+
+	.dashboard-sidebar {
+		overflow: hidden;
+	position: relative;
+	grid-area: sidebar;
+	color: #fff;
+	background-color: #1d1d29;
+	}
+
+	.dashboard-sidebar button {
+	position: absolute;
+	inset: 4.5rem -0.75rem auto auto;
+	width: 1.5rem;
+	aspect-ratio: 1;
+	background-color: #fff;
+	border: solid 1px;
+	border-radius: 50%;
+	cursor: pointer;
+	}
+
+	.logo {
+	display: flex;
+	justify-content: center;
+	font-size: 3rem;
+	line-height: 1.3;
+	}
+
+	.mynavi {
+		overflow-x: auto;
+	}
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 689554c..27fe5a6 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -7,5 +7,73 @@ import Layout from '../layouts/Layout.astro';
 ---
 
 <Layout>
-	<h1>bla bla bla</h1>
+	<header class="dashboard-header">
+		<h1>CSS Grid - Full-Height Page Layout</h1>
+	</header>
+
+	<aside class="dashboard-sidebar">
+		<div class="logo">&#9812;</div>
+		<button type="button" id="resize">
+			&#9776;
+		</button>
+		<div class="mynav">
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+			blabla<br/>
+		</div>
+	</aside>
+
+	<main class="dashboard-main">
+		Main<br/>
+		Main<br/>
+		Main<br/>
+		Main<br/>
+		Main<br/>
+		Main<br/>
+		Main<br/>
+	</main>
+
+	<footer class="dashboard-footer">
+		Footer
+	</footer>
 </Layout>
+
+<script is:inline>
+    const resizeBtn = document.getElementById('resize');
+    resizeBtn.addEventListener('click', function(e) {
+      e.preventDefault();
+      document.body.classList.toggle('sb-expand');
+    });
+</script>