Add home page and search page

sass/includes/base.sass

@@ -18,6 +18,9 @@ input, select, button
 button
   cursor: pointer
 
+:focus
+  outline: none
+
 :-moz-focusring
   outline: none
 

sass/includes/home-page.sass

@@ -0,0 +1,36 @@
+@use "colors.sass" as c
+
+.home-page
+  padding: 40px
+
+.top-header
+  font-size: 48px
+  text-align: center
+
+.tagline
+  font-size: 30px
+  text-align: center
+
+.encouraging-message
+  max-width: max-content
+  margin: 0 auto
+  text-align: center
+  padding: 16px
+  border-radius: 4px
+  font-size: 20px
+  background-color: c.$bg-darker
+  color: c.$fg-main
+
+  p
+    margin: 0 32px
+
+    &:not(:last-child)
+      margin-bottom: 0.6em
+
+.encouraging-search-form
+  display: flex
+
+  .search
+    margin-top: 16px
+    flex: 1
+    font-size: 18px

sass/includes/search-page.sass

@@ -0,0 +1,44 @@
+@use "video-list-item.sass" as *
+@use "colors.sass" as c
+
+.search-page
+  padding: 40px 20px 20px
+  max-width: 900px
+  margin: 0 auto
+
+.search-result
+  @include video-list-item
+
+  grid-gap: 16px
+  grid-template-columns: 240px 1fr
+  margin-bottom: 20px
+  overflow: hidden
+
+  .image
+    width: 240px
+    height: 135px
+
+  .duration
+    font-size: 17px
+    padding: 4px 5px
+    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
+
+    b
+      font-weight: normal
+      color: c.$fg-main

sass/includes/video-list-item.sass

@@ -0,0 +1,50 @@
+@use "colors.sass" as c
+
+@mixin video-list-item
+  display: grid
+  grid-template-columns: 160px 1fr
+  grid-gap: 8px
+  align-items: start
+  align-content: start
+  margin-bottom: 12px
+
+  .thumbnail
+    position: relative
+    display: flex
+    background: c.$bg-darkest
+
+  .image
+    width: 160px
+    height: 90px
+
+  .duration
+    position: absolute
+    bottom: 3px
+    right: 3px
+    color: c.$fg-bright
+    font-size: 14px
+    background: rgba(20, 20, 20, 0.85)
+    line-height: 1
+    padding: 3px 5px 4px
+    border-radius: 4px
+
+  .title
+    font-size: 15px
+    line-height: 1.2
+
+  .title-link
+    color: c.$fg-main
+    text-decoration: none
+
+  .author-line
+    margin-top: 4px
+    font-size: 15px
+    color: c.$fg-dim
+
+  .author
+    color: c.$fg-dim
+    text-decoration: none
+
+    &:hover, &:active
+      color: c.$fg-bright
+      text-decoration: underline

sass/includes/video-page.sass

@@ -1,4 +1,5 @@
 @use "colors.sass" as c
+@use "video-list-item.sass" as *
 
 .video-page
   display: grid
@@ -44,7 +45,8 @@
     .info-secondary
       display: flex
       flex-direction: column
-      align-items: end
+      align-items: flex-end
+      text-align: right
       margin-top: 6px
       margin-left: 6px
 
@@ -68,50 +70,4 @@
   font-size: 26px
 
 .related-video
-  display: grid
-  grid-template-columns: 160px 1fr
-  grid-gap: 8px
-  align-items: start
-  align-content: start
-  margin-bottom: 16px
-
-  .thumbnail
-    position: relative
-    display: flex
-    background: c.$bg-darkest
-
-    .image
-      width: 160px
-      height: 90px
-
-    .duration
-      position: absolute
-      bottom: 3px
-      right: 3px
-      color: c.$fg-bright
-      font-size: 14px
-      background: rgba(20, 20, 20, 0.85)
-      line-height: 1
-      padding: 3px 5px 4px
-      border-radius: 4px
-
-  .title
-    font-size: 15px
-    line-height: 1.2
-
-    .title-link
-      color: c.$fg-main
-      text-decoration: none
-
-  .author-line
-    margin-top: 4px
-    font-size: 15px
-    color: c.$fg-dim
-
-    .author
-      color: c.$fg-dim
-      text-decoration: none
-
-      &:hover, &:active
-        color: c.$fg-bright
-        text-decoration: underline
+  @include video-list-item

sass/main.sass

@@ -2,6 +2,8 @@
 @use "includes/colors.sass" as c
 @use "sass:selector"
 @use "includes/video-page.sass"
+@use "includes/search-page.sass"
+@use "includes/home-page.sass"
 
 @font-face
   font-family: "Bariol"
@@ -52,6 +54,9 @@
   &:active
     background-color: c.$bg-dark
 
+.base-border-look
+  @include border-button
+
 .border-look
   @include border-button
   @include button-size
@@ -78,11 +83,17 @@
     &:focus, &:hover
       background-color: c.$bg-accent-x
 
-  .search
-    @include button-bg
+  .search-form
+    display: flex
     flex: 1
-    margin: 1px
+    align-items: center
 
-    &:hover, &:focus
-      border: 1px solid c.$edge-grey
-      margin: 0px
+    .search
+      @include button-bg
+      padding: 10px
+      flex: 1
+      margin: 1px
+
+      &:hover, &:focus
+        border: 1px solid c.$edge-grey
+        margin: 0px