Settings page and instance selection

sass/includes/base.sass

@@ -11,6 +11,14 @@ body
 a
   color: c.$link
 
+pre, code
+  font-size: 0.88em
+
+code
+  background: c.$bg-darker
+  padding: 3px 5px
+  border-radius: 4px
+
 input, select, button
   font-family: inherit
   font-size: 16px
@@ -38,3 +46,19 @@ body.show-focus
 
 video
   background-color: black
+
+details
+  background-color: c.$bg-accent-x
+  padding: 12px
+  border-radius: 8px
+
+  summary
+    text-decoration: underline
+    cursor: pointer
+    line-height: 1
+    margin-bottom: 0
+    user-select: none
+    color: c.$fg-main
+
+  &[open] summary
+    margin-bottom: 16px

sass/includes/forms.sass

@@ -0,0 +1,81 @@
+@use "colors.sass" as c
+
+@mixin disabled
+  background-color: c.$bg-dark
+  color: #808080
+
+fieldset
+  border: none
+  padding: 55px 0px 0px 0px
+  position: relative
+
+  @media screen and (max-width: 400px)
+    padding-top: 70px
+
+  legend
+    position: absolute
+    top: 5px
+    left: 0px
+    width: 100%
+    font-size: 28px
+    font-weight: bold
+    padding: 0
+    border-bottom: 1px solid #333
+    line-height: 1.56
+
+    @media screen and (max-width: 400px)
+      margin-top: 15px
+
+
+.field-row
+  line-height: 1
+  display: flex
+  align-items: center
+  justify-content: space-between
+  position: relative
+  padding-bottom: 5px
+  margin-bottom: 5px
+  border-bottom: 1px solid #bbb
+
+  @media screen and (max-width: 400px)
+    flex-direction: column
+    align-items: start
+    padding-bottom: 15px
+
+  .description
+    padding: 8px 8px 8px 0px
+
+//
+  .checkbox-row
+    .pill
+      display: flex
+      align-items: center
+      user-select: none
+
+    .fake-checkbox
+      -webkit-appearance: none
+      background-color: white
+      width: 16px
+      height: 16px
+      padding: 0px
+      border: 1px solid #666
+      border-radius: 3px
+      margin-left: 8px
+      position: relative
+      outline: none
+
+    .checkbox
+      display: none
+
+      &:checked + .pill .fake-checkbox
+        background: center center / contain url(/static/img/tick.svg)
+
+      &:disabled + .pill
+        @include disabled
+
+        .fake-checkbox
+          @include disabled
+
+      &.checkbox:not(:disabled) + .pill
+        @include acts-like-button
+        cursor: pointer

sass/includes/settings-page.sass

@@ -0,0 +1,11 @@
+.settings-page
+  padding: 40px 20px 20px
+  max-width: 600px
+  margin: 0 auto
+
+.save-settings
+  margin-top: 24px
+
+  .border-look
+    font-size: 22px
+    padding: 7px 16px 8px

sass/includes/subscriptions-page.sass

@@ -1,3 +1,4 @@
+@use "colors.sass" as c
 @use "video-list-item.sass" as *
 
 .subscriptions-page
@@ -7,3 +8,28 @@
 
 .subscriptions-video
   @include subscriptions-video
+
+.no-subscriptions
+  text-align: center
+
+.channels-details
+  margin-bottom: 24px
+
+.channels-list
+  display: grid
+  grid-gap: 8px
+
+.channel-item
+  display: flex
+  align-items: center
+  text-decoration: none
+
+  .thumbnail
+    width: 40px
+    height: 40px
+    border-radius: 50%
+    margin-right: 8px
+
+  .name
+    font-size: 22px
+    color: c.$fg-main

sass/includes/video-page.sass

@@ -74,3 +74,8 @@
 
 .related-video
   @include video-list-item
+
+.video-error-page
+  padding: 40px 20px 20px
+  margin: 0 auto
+  max-width: 600px

sass/main.sass

@@ -6,13 +6,15 @@
 @use "includes/home-page.sass"
 @use "includes/channel-page.sass"
 @use "includes/subscriptions-page.sass"
+@use "includes/settings-page.sass"
+@use "includes/forms.sass"
 
 @font-face
   font-family: "Bariol"
   src: url(/static/fonts/bariol.woff?statichash=1)
 
 @mixin button-base
-  appearance: none
+  -webkit-appearance: none
   -moz-appearance: none
   color: c.$fg-bright
   border: none
@@ -23,12 +25,15 @@
   line-height: 1.25
 
   @at-root #{selector.unify(&, "select")}
-    padding: 7px 27px 7px 8px
+    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
@@ -102,6 +107,9 @@
         border: 1px solid c.$edge-grey
         margin: 0px
 
-.subscriptions-link:hover, .subscriptions-link:focus
-  .subscriptions-icon
+.icon-link:hover, .icon-link:focus
+  .icon
     filter: brightness(2)
+
+.button-container
+  display: flex