First working video page

sass/includes/base.sass

@@ -0,0 +1,34 @@
+@use "colors.sass" as c
+
+body
+  background-color: c.$bg-dark
+  color: c.$fg-main
+  font-family: "Bariol", sans-serif
+  font-size: 18px
+  margin: 0
+  padding: 0
+
+a
+  color: c.$link
+
+input, select, button
+  font-family: inherit
+  font-size: 16px
+
+button
+  cursor: pointer
+
+:-moz-focusring
+  outline: none
+
+::-moz-focus-inner
+  border: 0
+
+select:-moz-focusring
+  color: transparent
+  text-shadow: 0 0 0 c.$fg-bright
+
+body.show-focus
+  a, select, button, input, video
+    &:focus
+      outline: 2px dotted #ddd

sass/includes/colors.sass

@@ -0,0 +1,14 @@
+$bg-darkest: #202123
+$bg-darker: #303336
+$bg-dark: #36393f
+$bg-accent: #4f5359
+$bg-accent-x: #3f4247
+$bg-accent-area: #44474b
+
+$fg-bright: #fff
+$fg-main: #ddd
+$fg-dim: #bbb
+
+$edge-grey: #808080
+
+$link: #72b4f6

sass/includes/video-page.sass

@@ -0,0 +1,117 @@
+@use "colors.sass" as c
+
+.video-page
+  display: grid
+  grid-auto-flow: row
+  padding: 20px
+  grid-gap: 16px
+
+  @media screen and (min-width: 1000px)
+    grid-template-columns: 1fr 400px
+
+.main-video-section
+  .video-container
+    text-align: center
+
+    .video
+      display: inline-block
+      width: 100%
+      height: auto
+      max-height: 80vh
+
+  .info
+    display: flex
+    margin: 8px 4px 16px
+    font-size: 17px
+
+    .info-main
+      flex: 1
+
+      .title
+        margin: 0px 0px 4px
+        font-size: 30px
+        font-weight: normal
+        color: c.$fg-bright
+
+      .author-link
+        color: c.$fg-main
+        text-decoration: none
+
+        &:hover, &:active
+          color: c.$fg-bright
+          text-decoration: underline
+
+    .info-secondary
+      display: flex
+      flex-direction: column
+      align-items: end
+      margin-top: 6px
+      margin-left: 6px
+
+    .rating-bar
+      margin-top: 8px
+      width: 140px
+      height: 8px
+      border-radius: 3px
+      background: linear-gradient(to right, #1a1 var(--rating), #bbb var(--rating))
+
+  .description
+    font-size: 17px
+    margin: 16px 4px 4px 4px
+    background-color: c.$bg-accent-area
+    padding: 12px
+    border-radius: 4px
+
+.related-header
+  margin: 4px 0px 12px 2px
+  font-weight: normal
+  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

sass/main.sass

@@ -0,0 +1,88 @@
+@use "includes/base.sass"
+@use "includes/colors.sass" as c
+@use "sass:selector"
+@use "includes/video-page.sass"
+
+@font-face
+  font-family: "Bariol"
+  src: url(/static/fonts/bariol.woff)
+
+@mixin button-base
+  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: 7px 27px 7px 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
+
+  .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
+
+.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
+
+    &.home
+      font-weight: bold
+
+    &, &:visited
+      color: #fff
+
+    &:focus, &:hover
+      background-color: c.$bg-accent-x
+
+  .search
+    @include button-bg
+    flex: 1
+    margin: 1px
+
+    &:hover, &:focus
+      border: 1px solid c.$edge-grey
+      margin: 0px