Add channels page

sass/includes/channel-page.sass

@@ -0,0 +1,63 @@
+@use "colors.sass" as c
+@use "video-list-item.sass" as *
+
+.channel-page
+  padding: 40px 20px 20px
+  max-width: 900px
+  margin: 0 auto
+
+.banner
+  display: flex
+
+.banner-image
+  width: 100%
+  height: auto
+  border-radius: 8px
+
+.channel-data
+  background-color: c.$bg-darker
+  padding: 24px
+  margin: 12px 0px 24px
+  border-radius: 8px
+
+  .info
+    display: flex
+
+    .thumbnail-image
+      $size: 120px
+
+      width: $size
+      height: $size
+      border-radius: 50%
+      margin-right: 24px
+
+    .about
+      flex: 1
+      margin-top: 10px
+
+      .name
+        font-size: 30px
+        color: c.$fg-bright
+
+      .subscribers
+        color: c.$fg-main
+        font-size: 18px
+
+    .subscribe
+      margin-top: 24px
+
+      .subscribe-button
+        $padding: 14px
+
+        padding: $padding - 2px $padding $padding
+        line-height: 1
+        border-radius: 8px
+        font-size: 22px
+        background-color: c.$power-deep
+        border: none
+
+  .description
+    margin-top: 16px
+
+.channel-video
+  @include channel-video

sass/includes/colors.sass

@@ -12,3 +12,5 @@ $fg-dim: #bbb
 $edge-grey: #808080
 
 $link: #72b4f6
+
+$power-deep: #c62727

sass/includes/video-list-item.sass

@@ -48,3 +48,49 @@
     &:hover, &:active
       color: c.$fg-bright
       text-decoration: underline
+
+@mixin recommendation-item
+  @include video-list-item
+
+@mixin large-item
+  @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
+
+@mixin search-result
+  @include large-item
+
+  .description b
+    font-weight: normal
+    color: c.$fg-main
+
+@mixin channel-video
+  @include large-item

sass/main.sass

@@ -4,6 +4,7 @@
 @use "includes/video-page.sass"
 @use "includes/search-page.sass"
 @use "includes/home-page.sass"
+@use "includes/channel-page.sass"
 
 @font-face
   font-family: "Bariol"