Nav and search better mobile support

sass/includes/nav.sass

@@ -0,0 +1,54 @@
+@use "colors.sass" as c
+@use "buttons.sass" as *
+
+@mixin thin
+  @media screen and (max-width: 499px)
+    @content
+
+.main-nav
+  background-color: c.$bg-accent
+  display: flex
+  padding: 8px
+  box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.1)
+
+  +thin
+    display: block
+
+  .links
+    display: flex
+
+    +thin
+      margin-bottom: 4px
+      padding: 1px
+
+  .link
+    @include button-base
+    text-decoration: none
+    margin: 1px 8px 1px 0px
+    font-size: 20px
+    display: flex
+    align-items: center
+
+    &.home
+      font-weight: bold
+
+    &, &:visited
+      color: #fff
+
+    &:focus, &:hover
+      background-color: c.$bg-accent-x
+
+  .search-form
+    display: flex
+    flex: 1
+    align-items: center
+
+    .search
+      @include button-bg
+      padding: 10px
+      flex: 1
+      margin: 1px
+
+      &:hover, &:focus
+        border: 1px solid c.$edge-grey
+        margin: 0px