From 34b61fc6708d043824573a48649ab4d5c8036b7e Mon Sep 17 00:00:00 2001
From: cspark <git@cspark.dev>
Date: Wed, 24 Apr 2024 16:40:22 +0100
Subject: [PATCH] Implement tiling grid layouts in preperation for the blog
 editor, settings etc.

---
 src/App.tsx   | 10 ++++++++++
 src/index.css | 49 +++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+)

diff --git a/src/App.tsx b/src/App.tsx
index 571dbef..41439c1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,6 +9,8 @@ import Home from "./pages/Home.tsx";
 import Login from "./pages/Login.tsx";
 import Logout from "./pages/Logout.tsx";
 import About from "./pages/About.tsx";
+import Settings from "./pages/Settings.tsx";
+import BlogEditor from "./pages/BlogEditor.tsx";
 
 import {
   usernameStorageHandlerInit,
@@ -68,12 +70,20 @@ export default function App() {
           ) : (
             <NavbarButton>Login</NavbarButton>
           )}
+          <NavbarButton>Settings</NavbarButton>
+          <NavbarButton>BlogEditor</NavbarButton>
         </Navbar>
         <div id="page">
           <Routes>
             <Route path="/" exact element={<Home></Home>} />
             <Route path="/home" exact element={<Home></Home>} />
             <Route path="/about" exact element={<About></About>} />
+            <Route
+              path="/blogeditor"
+              exact
+              element={<BlogEditor></BlogEditor>}
+            />
+            <Route path="/settings" exact element={<Settings></Settings>} />
             <Route path="/login" exact element={<Login></Login>} />
             <Route path="/logout" exact element={<Logout></Logout>} />
           </Routes>
diff --git a/src/index.css b/src/index.css
index 11af8a8..091c314 100644
--- a/src/index.css
+++ b/src/index.css
@@ -18,6 +18,7 @@ body,
   --blog-card-height: 20rem;
   --border-radii: 5px;
   --blog-card-image-radius: 1px;
+  --tiling-gap: 10px;
 }
 
 h1 {
@@ -56,6 +57,54 @@ a {
   text-align: center;
 }
 
+.standardHorizontalTilingGrid {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  max-width: calc(100% - var(--tiling-gap) * 2);
+  max-height: calc(100% - var(--tiling-gap) * 2);
+  gap: var(--tiling-gap);
+  padding: var(--tiling-gap);
+  grid-auto-flow: column;
+}
+
+.standardVerticalTilingGrid {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  max-width: calc(100% - var(--tiling-gap) * 2);
+  max-height: calc(100% - var(--tiling-gap) * 2);
+  gap: var(--tiling-gap);
+  padding: var(--tiling-gap);
+  grid-auto-flow: row;
+}
+
+.standardTilingBox {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  border-radius: var(--border-radii);
+  background: white;
+}
+
+.standardTilingTitlebar {
+  height: 20px;
+  width: 100%;
+  max-height: 20px;
+  max-width: 100%;
+  text-align: center;
+  background: black;
+}
+
+.standardTilingTitlebar > p {
+  margin: 0px;
+  padding: 0px;
+  color: white;
+}
+
 .blogEntryGrid {
   display: grid;
   gap: 20px;