WIP: Layout junk.

assets/css/app.css

@@ -1,13 +1,74 @@
-@layer theme, layout;
+@layer reset theme,layout;
 
 @font-face {
     font-family: "BerkeleyMono";
-    src: url("/assets/BerkeleyMonoVariable-Regular") format("woff2");
+    src: url("/fonts/BerkeleyMonoVariable-Regular.woff2") format("woff2");
 }
 
 @font-face {
     font-family: "BerkeleyMonoItalic";
-    src: url("/assets/BerkeleyMonoVariable-Italic") format("woff2");
+    src: url("/fonts/BerkeleyMonoVariable-Italic.woff2") format("woff2");
+}
+
+@layer reset {
+    /*
+    1. Use a more-intuitive box-sizing model.
+    */
+    *,
+    *::before,
+    *::after {
+        box-sizing: border-box;
+    }
+    /*
+    2. Remove default margin
+    */
+    * {
+        margin: 0;
+    }
+    /*
+  Typographic tweaks!
+    3. Add accessible line-height
+    4. Improve text rendering
+    */
+    body {
+        line-height: 1.5;
+    }
+    /*
+    5. Improve media defaults
+    */
+    img,
+    picture,
+    video,
+    canvas,
+    svg {
+        display: block;
+        max-width: 100%;
+    }
+    /*
+    6. Remove built-in form typography styles
+    */
+    input,
+    button,
+    textarea,
+    select {
+        font: inherit;
+    }
+    /*
+    7. Avoid text overflows
+    */
+    p,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        overflow-wrap: break-word;
+    }
+
+    p {
+        margin-bottom: 1em;
+    }
 }
 
 @layer theme {
@@ -18,9 +79,7 @@
         --main-background-color: #001626;
         --main-text-color: #ffffff;
 
-        --default-grid-repeat: 3;
-        --default-grid-gap: 3vmax;
-        --fluid-min: 35ch;
+        --default-grid-gap: 0vmax;
     }
 }
 
@@ -30,5 +89,73 @@
 body {
     color: var(--main-text-color);
     background: var(--main-background-color);
-    font: BerkeleyMono;
+    font-family: var(--header-font);
+    margin: 1rem;
+}
+
+main {
+    display: grid;
+    gap: var(--default-grid-gap);
+    grid-template-areas:
+        "header"
+        "sidebar"
+        "content"
+        "sidebar2"
+        "footer";
+    overflow: hidden;
+    height: 90vh;
+}
+
+@media only screen and (min-width: 600px) {
+    body {
+        margin: 1rem;
+    }
+
+    main {
+        grid-template-columns: 1fr 4fr;
+        grid-template-areas:
+            "header   header"
+            "sidebar  content"
+            "sidebar2 sidebar2"
+            "footer   footer";
+    }
+}
+
+@media only screen and (min-width: 1100px) {
+    body {
+        margin: 1rem 5rem;
+    }
+
+    main {
+        grid-template-columns: min-content 3fr min-content;
+        grid-template-areas:
+            "header  header  header"
+            "sidebar content sidebar2"
+            "footer  footer  footer";
+    }
+}
+
+header {
+    grid-area: header;
+    color: var(--main-accent-color);
+}
+
+div#sidebar {
+    grid-area: sidebar;
+}
+
+div#sidebar2 {
+    grid-area: sidebar2;
+}
+
+div#content {
+    grid-area: content;
+    padding: 0 1em;
+}
+
+footer {
+    grid-area: footer;
+}
+
+.gridbox {
 }

lib/jol_web/components/layouts/app.html.heex

@@ -1,6 +1,11 @@
-<header>
-  Jessica Phoenix Canady
-</header>
 <main>
+  <header class="gridbox">
+      <h1>Jessica Phoenix Canady</h1>
+  </header>
+  <div id="content" class="gridbox">
     <%= @inner_content %>
+  </div>
+  <footer class="gridbox">
+      <p>YOU MADE IT!</p>
+  </footer>
 </main>

lib/jol_web/controllers/page_html/home.html.heex

@@ -1,2 +1,5 @@
-<h1>Jessica Phoenix Canady</h1>
-<h2>Chief Trans Officer</h2>
+<h2>is some kind of dingus anyway</h2>
+
+<p>Hey I'm Jessica.</p>
+<p>You probably know me from nothing.</p>
+<p>Suggit.</p>