lots of styling

src/layouts/RootLayout.astro

@@ -0,0 +1,91 @@
+---
+import BaseHead from '../components/BaseHead.astro';
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
+import NotchedBox from '../components/NotchedBox.tsx';
+import Sidebar from '../components/Sidebar.astro';
+import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
+
+interface Props {
+
+}
+---
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
+	</head>
+	<body>
+    <div class="header">
+      <Header />
+    </div>
+    <div class="sidebar">
+      <Sidebar />
+    </div>
+    <main>
+      <slot>
+    </main>
+    <div class="footer">
+      <Footer />
+    </div>
+	</body>
+  <style>
+    @media (max-width: 720px) {
+      body {
+        grid-template-areas: 
+          "header"
+          "main"
+          "footer";
+        grid-template-columns: 1fr;
+
+      }
+      .header {
+        display: block;
+      }
+      .sidebar {
+        display: none;
+      }
+    }
+    @media (min-width: 720px) {
+      body {
+        grid-template-areas: 
+          "header header"
+          "sidebar main"
+          "footer footer";
+        grid-template-columns: 20rem 1fr;
+      }
+      .header {
+        display: none;
+      }
+      .sidebar {
+        display: block;
+      }
+    }
+    body {
+      display: grid;
+      margin: 2rem 3rem;
+    }
+
+    .header {
+      grid-area: header;
+    }
+
+    .sidebar {
+      grid-area: sidebar;
+    }
+
+    main {
+      grid-area: main;
+      margin: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      justify-content: stretch;
+    }
+
+    .footer { 
+      grid-area: footer;
+    }
+  </style>
+</html>