Nav and search better mobile support

pug/includes/layout.pug

@@ -9,11 +9,12 @@ html
 
   body.show-focus
     nav.main-nav
-      a(href="/").link.home CloudTube
+      .links
-      a(href="/subscriptions" title="Subscriptions").link.icon-link
+        a(href="/").link.home CloudTube
-        img(src=getStaticURL("html", "/static/images/subscriptions.svg") width=30 height=25 alt="Subscriptions.").icon
+        a(href="/subscriptions" title="Subscriptions").link.icon-link
-      a(href="/settings" title="Settings").link.icon-link
+          img(src=getStaticURL("html", "/static/images/subscriptions.svg") width=30 height=25 alt="Subscriptions.").icon
-        img(src=getStaticURL("html", "/static/images/settings.svg") width=25 height=25 alt="Settings.").icon
+        a(href="/settings" title="Settings").link.icon-link
+          img(src=getStaticURL("html", "/static/images/settings.svg") width=25 height=25 alt="Settings.").icon
       form(method="get" action="/search").search-form
         input(type="text" placeholder="Search" name="q" autocomplete="off" value=query).search
 

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,36 +63,44 @@
 @mixin large-item
   @include video-list-item
 
-  grid-gap: 16px
-  grid-template-columns: 240px 1fr
-  margin-bottom: 20px
-  overflow: hidden
-  max-height: 150px
-
-  .image
-    width: 240px
-    height: 135px
-
-  .duration
-    font-size: 17px
-    padding: 4px 5px
-    right: 5px
-    bottom: 5px
-
   .title
-    font-size: 24px
+    font-size: 17px
 
-  .author-line
+  +wide
-    font-size: 15px
+    grid-gap: 16px
-    color: c.$fg-main
+    grid-template-columns: auto 1fr
+    margin-bottom: 20px
+    overflow: hidden
+    max-height: 150px
 
-  .author
+    .image
-    color: c.$fg-main
+      width: 240px
+      height: 135px
 
-  .description
+    .duration
-    margin-top: 16px
+      font-size: 17px
-    font-size: 15px
+      padding: 4px 5px
-    color: c.$fg-dim
+      right: 5px
+      bottom: 5px
+
+    .title
+      font-size: 24px
+
+    .author-line
+      font-size: 15px
+      color: c.$fg-main
+
+    .author
+      color: c.$fg-main
+
+    .description
+      margin-top: 16px
+      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)