Nav and search better mobile support

pug/includes/layout.pug

@@ -9,6 +9,7 @@ html
 
   body.show-focus
     nav.main-nav
+      .links
         a(href="/").link.home CloudTube
         a(href="/subscriptions" title="Subscriptions").link.icon-link
           img(src=getStaticURL("html", "/static/images/subscriptions.svg") width=30 height=25 alt="Subscriptions.").icon

sass/includes/base.sass

@@ -22,6 +22,7 @@ code
 input, select, button
   font-family: inherit
   font-size: 16px
+  min-width: 0px
 
 button
   cursor: pointer

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

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

sass/includes/video-list-item.sass

@@ -1,5 +1,13 @@
 @use "colors.sass" as c
 
+@mixin thin
+  @media screen and (max-width: 499px)
+    @content
+
+@mixin wide
+  @media screen and (min-width: 500px)
+    @content
+
 @mixin video-list-item
   display: grid
   grid-template-columns: 160px 1fr
@@ -55,8 +63,12 @@
 @mixin large-item
   @include video-list-item
 
+  .title
+    font-size: 17px
+
+  +wide
     grid-gap: 16px
-  grid-template-columns: 240px 1fr
+    grid-template-columns: auto 1fr
     margin-bottom: 20px
     overflow: hidden
     max-height: 150px
@@ -86,6 +98,10 @@
       font-size: 15px
       color: c.$fg-dim
 
+  +thin
+    .description
+      display: none
+
 @mixin search-result
   @include large-item
 

sass/main.sass

@@ -8,105 +8,12 @@
 @use "includes/subscriptions-page.sass"
 @use "includes/settings-page.sass"
 @use "includes/forms.sass"
+@use "includes/nav.sass"
 
 @font-face
   font-family: "Bariol"
   src: url(/static/fonts/bariol.woff?statichash=1)
 
-@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
-
-.main-nav
-  background-color: c.$bg-accent
-  display: flex
-  padding: 8px
-  box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.1)
-
-  .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
-
 .icon-link:hover, .icon-link:focus
   .icon
     filter: brightness(2)