feat: implement a simple loader

Play with htmx events

static/css/style.css

@@ -1,3 +1,89 @@
 h1 {
     color: blue;
 }
+
+[data-loader] {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    height: .2em;
+    padding: 0;
+    margin: 0;
+    background-color: blue;
+    transition: all 500ms;
+}
+
+body {
+    display: grid;
+    grid-template-columns: 15em 1fr;
+    grid-template-rows: 3em 1fr 3em;
+
+    grid-template-areas:
+        "nav header"
+        "nav main"
+        "nav footer";
+
+    margin: 0;
+    height: 100vh;
+}
+
+@media (max-width: 1080px) {
+    body {
+        grid-template-columns: 1fr;
+        grid-template-rows: 3em 1fr 3em;
+
+        grid-template-areas:
+            "header"
+            "main"
+            "footer";
+    }
+
+    nav {
+        position: fixed;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 15em;
+    }
+}
+
+body > * {
+    padding: 1em;
+}
+
+hgroup * {
+    margin: 0;
+}
+
+nav {
+    grid-area: nav;
+
+    background-color: lightgray;
+}
+
+header {
+    grid-area: header;
+
+    background-color: orange;
+
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+}
+
+main {
+    grid-area: main;
+
+    background-color: darkgray;
+}
+
+footer {
+    grid-area: footer;
+
+    background-color: grey;
+
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}