Added mobile first menu and started responsive

Swithced the main nav to a mobile layout to cut down on complex
responsive styling to make the heaader work.

Also began touching up site wide responsive styles so the site works on
multiple devices.

public/assets/css/front/index.css

@@ -19,7 +19,7 @@ form.index-search-form {
 }
 
 form.index-search-form > input[type="text"] {
-  width: 91%;
+  width: 88%;
   height: 50px;
   font: 44px var(--base-type);
 }
@@ -29,6 +29,7 @@ form.index-search-form > button {
   width: 60px;
   position: relative;
   top: 9px;
+  right: 0;
 }
 
 ::placeholder {
@@ -39,3 +40,11 @@ form.index-search-form > button {
 section.index-meta article {
   margin-top: 20px;
 }
+
+@media only screen and (max-width: 800px) {
+  form.index-search-form > input[type="text"] {
+    width: 85%;
+    height: 50px;
+    font: 34px var(--base-type);
+  }
+}

public/assets/css/global/frame.css

@@ -19,10 +19,10 @@ html body {
 a {
   color: var(--highlight);
   text-decoration: none;
-
+  transition: all 0.2s linear;
   /*
   border-bottom: 1px solid var(--white);
-  transition: all 0.2s linear;
+
   */
 }
 
@@ -34,7 +34,7 @@ header {
 
 header > div:nth-child(1) {
   display: grid;
-  grid-template-columns: 200px 50% 1fr;
+  grid-template-columns: 200px 1fr 40px;
   padding: 10px;
   gap: 10px;
   height: 200px;
@@ -66,9 +66,12 @@ header > div i {
 }
 
 header > div nav {
-  position: absolute;
-  bottom: 20px;
-  right: 0;
+  background: var(--black);
+  position: relative;
+}
+
+.header-right {
+  text-align: right;
 }
 
 div.system-notice-error {
@@ -90,15 +93,47 @@ main > section > article {
   min-height: 400px;
 }
 
-/* GLOBALS */
+/* NAV */
 
-a.nav-links {
-  padding: 7px;
-  border-bottom: none;
+#main-nav {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--black);
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
+label[for="element-toggle"] {
+  cursor: pointer;
+}
+
+#element-toggle {
+  display: none;
+}
+
+#element-toggle:not(:checked) ~ #main-nav {
+  display: none;
+}
+
+a.nav-links {
+  border-bottom: none;
+  font-size: 40px;
+  color: var(--highlight);
+  text-decoration: none;
+}
+
+/* GLOBALS */
+
 a:hover {
+  /*
   border-bottom: 1px solid var(--secondary);
+  */
+  color: var(--white);
 }
 
 pre {
@@ -126,6 +161,14 @@ sup {
   padding-top: 3px;
 }
 
+.menu-icon {
+  width: 40px;
+}
+
+.location-title {
+  display: none;
+}
+
 .location-image {
   height: 200px;
   width: 200px;
@@ -133,8 +176,6 @@ sup {
   border-radius: 3px;
 }
 
-/* GLOBALS */
-
 footer {
   width: 100%;
   color: var(--primary);
@@ -153,3 +194,30 @@ footer > div:nth-child(1) {
   max-width: 1000px;
   position: relative;
 }
+
+/*
+    responsive
+ */
+
+@media only screen and (max-width: 960px) {
+  header > div:nth-child(1) {
+  }
+
+  header > div nav {
+    bottom: 17px;
+  }
+}
+
+@media only screen and (max-width: 960px) {
+  header > div:nth-child(1) {
+    grid-template-columns: 150px 65% 1fr;
+    height: 150px;
+  }
+
+  header > div nav {
+    bottom: 17px;
+  }
+}
+
+@media only screen and (max-width: 800px) {
+}

public/assets/css/global/typography.css

@@ -41,7 +41,7 @@
 }
 
 h1 {
-  font-size: 3em;
+  font-size: 2.5em;
   font-weight: 600;
   font-kerning: normal;
   letter-spacing: -5px;
@@ -50,11 +50,12 @@ h1 {
   margin: 0;
   position: absolute;
   bottom: 20px;
-  width: 66%;
+  width: 70%;
+  overflow-wrap: break-word;
 }
 
 h2 {
-  font-size: 2em;
+  font-size: 1.5em;
   font-weight: 500;
   line-height: 0.8em;
   color: var(--white);
@@ -62,6 +63,6 @@ h2 {
 }
 
 h3 {
-  font-size: 2em;
+  font-size: 1.5em;
   font-weight: 300;
 }

public/assets/images/global/close.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated by Pixelmator Pro 3.3.8 -->
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path id="Path" fill="none" stroke="none" d="M 0 0 L 24 0 L 24 24 L 0 24 Z"/>
+    <path id="path1" fill="none" stroke="#efebe3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 18 6 L 6 18"/>
+    <path id="path2" fill="none" stroke="#efebe3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 6 6 L 18 18"/>
+</svg>

public/assets/images/global/menu.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated by Pixelmator Pro 3.3.8 -->
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path id="Path" fill="none" stroke="none" d="M 0 0 L 24 0 L 24 24 L 0 24 Z"/>
+    <path id="path1" fill="none" stroke="#140d0d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 4 6 L 20 6"/>
+    <path id="path2" fill="none" stroke="#140d0d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 4 12 L 20 12"/>
+    <path id="path3" fill="none" stroke="#140d0d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 4 18 L 20 18"/>
+</svg>