main layout nearly done

.stylelintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "@punkfairie/stylelint-config"
+  "extends": "@punkfairie/stylelint-config",
+  "rules": {
+    "rem-over-px/rem-over-px": false
+  }
 }

src/index.liquid

@@ -13,20 +13,23 @@
 <div class="site">
   <header>
     <h1>Epiphany</h1>
+
+    <nav class="main-nav">
+      <a href="/">index</a>
+      <a href="#">adoptions</a>
+      <a href="#">about</a>
+    </nav>
   </header>
 
   <main class="flow">
     <p>Hello and welcome to Epiphany Petz! This is a Petz 4 website.</p>
 
-    <p>If there are any broken links or typos, please let me know in the
-      cbox!</p>
-
     <div class="divide"></div>
 
     <h2>Affiliate Sites</h2>
 
-    <p><a href="https://harvestpetz.neocities.org/" title="harvest">scribble @
-        harvest</a></p>
+    <p><a href="https://harvestpetz.neocities.org/" title="harvest"
+        target="_blank">scribble @ harvest</a></p>
 
     <div class="divide"></div>
 
@@ -51,7 +54,7 @@
       for whatever I feel like posting :)</p>
   </main>
 
-  <nav></nav>
+  <nav class="secondary-nav"></nav>
 </div>
 </body>
 </html>

src/style/layout.css

@@ -7,45 +7,61 @@
 
     /* noinspection Stylelint */
     .site {
-        inline-size: 64rem;
-        block-size: 48rem;
-        background: url('/img/theme/baby-its-cold-outside/bg.png');
-        border: 1px solid hsl(233deg 66% 20%);
-        padding: var(--space-xs);
-
         display: grid;
         grid-template:
             '.      .'      1.5fr
             'header header' 0.5fr
-            'nav    main'   2.5fr / 1fr 5fr;
+            's-nav  main'   2.5fr / 1fr 5fr;
+        inline-size: 64rem;
+        block-size: 48rem;
+        padding: var(--space-xs);
+        background: url('/img/theme/baby-its-cold-outside/bg.png');
+        border: 1px solid hsl(233deg 66% 20%);
     }
 
     header {
         grid-area: header;
-        text-align: right;
         align-self: end;
-        padding-right: var(--space-xs);
+        padding-inline-end: var(--space-xs);
+        padding-bottom: var(--space-2xs);
+        text-align: end;
+
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: baseline;
+        column-gap: var(--space-m);
+    }
+
+    h1 {
+
+    }
+
+    .main-nav {
+        display: flex;
+        column-gap: var(--space-xs);
     }
 
     main {
         --flow-space: var(--space-xs);
 
         grid-area: main;
-        overflow: auto;
         padding: var(--space-s);
+        overflow: auto;
         text-align: center;
+        background-color: rgba(255, 255, 255, 0.49);
     }
 
-    nav {
-        grid-area: nav;
+    s
+    .secondary-nav {
+        grid-area: s-nav;
         padding: var(--space-s);
     }
 
     .divide {
-        background: url('/img/theme/baby-its-cold-outside/divider.gif');
-        height: 20px;
-        width: 239px;
         display: inline-block;
-        margin-top: var(--space-m);
+        width: 239px;
+        height: 20px;
+        margin-block-start: var(--space-m);
+        background: url('/img/theme/baby-its-cold-outside/divider.gif');
     }
 }