Nav and search better mobile support

sass/includes/buttons.sass

@@ -0,0 +1,58 @@
+@use "sass:selector"
+@use "colors.sass" as c
+
+@mixin button-base
+  -webkit-appearance: none
+  -moz-appearance: none
+  color: c.$fg-bright
+  border: none
+  border-radius: 4px
+  padding: 8px
+  margin: 0
+  text-decoration: none
+  line-height: 1.25
+
+  @at-root #{selector.unify(&, "select")}
+    padding: 8px 27px 8px 8px
+    background: url(/static/images/arrow-down-wide.svg) right 53% no-repeat c.$bg-accent-x
+
+  @at-root #{selector.unify(&, "a")}
+    padding: 7px 8px
+
+  @at-root #{selector.unify(&, "button")}
+    cursor: pointer
+
+  .button-icon
+    position: relative
+    top: 3px
+    margin-right: 8px
+    margin-left: 2px
+
+@mixin button-bg
+  @include button-base
+
+  background-color: c.$bg-accent-x
+
+@mixin border-button
+  @include button-bg
+
+  border: 1px solid c.$edge-grey
+
+@mixin button-size
+  margin: 4px
+  font-size: 16px
+
+@mixin button-hover
+  &:hover
+    background-color: c.$bg-accent
+
+  &:active
+    background-color: c.$bg-dark
+
+.base-border-look
+  @include border-button
+
+.border-look
+  @include border-button
+  @include button-size
+  @include button-hover