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