From cbd9c56f5b42bbb533a6b4c4a7d8de3719dcde78 Mon Sep 17 00:00:00 2001
From: Frederick Muriuki Muriithi
Date: Mon, 3 Nov 2025 17:02:31 -0600
Subject: Rework templates and styling.

Begin work on new page layout and styling to improve navigation
through the system.
---
 uploader/static/css/layout-medium.css | 68 +++++++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 uploader/static/css/layout-medium.css

(limited to 'uploader/static/css/layout-medium.css')

diff --git a/uploader/static/css/layout-medium.css b/uploader/static/css/layout-medium.css
new file mode 100644
index 0000000..f504073
--- /dev/null
+++ b/uploader/static/css/layout-medium.css
@@ -0,0 +1,68 @@
+* {
+    box-sizing: border-box;
+}
+
+@media screen and (width > 8in) and (max-width: 20in) {
+    body {
+        display: grid;
+        grid-template-columns: 65fr 35fr;
+        grid-gap: 1em;
+    }
+
+    #header {
+        /* Place it in the parent element */
+        grid-column-start: 1;
+        grid-column-end: 3;
+
+        /* Define layout for the children elements */
+        display: grid;
+        grid-template-columns: 8fr 2fr;
+    }
+
+    #header #header-text {
+        /* Place it in the parent element */
+        grid-column-start: 1;
+        grid-column-end: 2;
+
+        /* Content styling */
+        padding-left: 1em;
+    }
+
+    #header #header-nav {
+        /* Place it in the parent element */
+        grid-column-start: 2;
+        grid-column-end: 3;
+    }
+
+    #main {
+        /* Place it in the parent element */
+        grid-column-start: 1;
+        grid-column-end: 3;
+
+        /* Define layout for the children elements */
+        display: grid;
+        grid-template-columns: 7fr 3fr;
+        grid-gap: 5px;
+    }
+
+    #main #breadcrumbs {
+        grid-column-start: 1;
+        grid-column-end: 3;
+        padding: 0 3px;
+    }
+
+    #main #main-content {
+        /* Place it in the parent element */
+        grid-column-start: 1;
+        grid-column-end: 2;
+        grid-gap: 5px;
+
+        /* Define layout for the children elements */
+        max-width: 70%;
+    }
+
+    #main #sidebar-content {
+        grid-column-start: 2;
+        grid-column-end: 3;
+    }
+}
-- 
cgit 1.4.1