Change dropdown marker to be more visible

The colour now contrasts more and the outline is reduced so that less
space is hinted in the middle of the arrow.

References: https://todo.sr.ht/~cadence/tube/46

html/static/images/arrow-down-wide.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.821 2.117" height="8" width="22"><path d="M1.587.53l.53.528.529-.529h.264v.265l-.793.793-.794-.793V.529z" fill="#bbb" paint-order="markers stroke fill"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="8" viewBox="0 0 5.821 2.117"><path d="M1.269.53l.767.793h.161L2.964.53h.211v.265L2.117 1.852 1.058.794V.529z" fill="#d7d7d7" paint-order="markers stroke fill"/></svg>

pug/channel.pug

@@ -21,7 +21,7 @@ block content
           .logo
             img(src=thumbnail.url width=thumbnail.width height=thumbnail.height alt="").thumbnail-image
         .about
-          .name= data.author
+          h1.name= data.author
           .subscribers= data.second__subCountText
         +subscribe_button(data.authorId, subscribed, `/channel/${data.authorId}`).subscribe-button.base-border-look
       .description!= data.descriptionHtml

pug/home.pug

@@ -11,5 +11,5 @@ block content
       p You're in control. Watch things your way.
       p Go on. What do you want to watch?
       form(method="get" action="/search").encouraging-search-form
-        input(type="text" name="q" placeholder="I'd like to watch..." autocomplete="off" autofocus=!mobile).search.base-border-look
+        input(type="text" name="q" placeholder="I'd like to watch..." aria-label="Search a video" autocomplete="off" autofocus=!mobile).search.base-border-look
       p: a(href="/cant-think") ...can't think of anything?

pug/includes/layout.pug

@@ -23,7 +23,7 @@ html
               image(href=getStaticURL("html", "/static/images/settings.svg") alt="Settings.").icon
               title Settings
         form(method="get" action="/search").search-form
-          input(type="text" placeholder="Search" name="q" autocomplete="off" value=query).search
+          input(type="text" placeholder="Search" aria-label="Search a video" name="q" autocomplete="off" value=query).search
 
     div
       block content

pug/video.pug

@@ -20,11 +20,11 @@ block content
         script(type="module" src=getStaticURL("html", "/static/js/continuous.js"))
         noscript
           meta(http-equiv="refresh" content=`${video.lengthSeconds+5};url=/watch?v=${first.videoId}&continuous=1&session-watched=${sessionWatchedNext}`)
-    main.video-page(class={
+    .video-page(class={
       "video-page--recommended-below": settings.recommended_mode === 1,
       "video-page--recommended-hidden": settings.recommended_mode === 2
     })
-      .main-video-section
+      main.main-video-section
         .video-container
           - const format = formats[0]
           if format
@@ -69,7 +69,7 @@ block content
         .button-container
           +subscribe_button(video.authorId, subscribed, `/watch?v=${video.videoId}`).border-look
           //- button.border-look#theatre Theatre
-          select(autocomplete="off").border-look#quality-select
+          select(aria-label="Quality" autocomplete="off").border-look#quality-select
             each f in formats
               option(value=f.itag)= f.cloudtube__label
           //-

sass/includes/base.sass

@@ -31,6 +31,12 @@ input, select, button
 button
   cursor: pointer
 
+::placeholder
+  color: #c4c4c4
+  opacity: 1
+
+// focus section
+
 :focus
   outline: none
 

sass/includes/channel-page.sass

@@ -43,7 +43,9 @@
 
       .name
         font-size: 30px
+        font-weight: normal
         color: c.$fg-bright
+        margin: 0
 
       .subscribers
         color: c.$fg-main

sass/includes/colors.sass

@@ -10,8 +10,8 @@ $fg-main: #ddd
 $fg-dim: #bbb
 $fg-warning: #fdca6d
 
-$edge-grey: #808080
+$edge-grey: #a0a0a0
 
-$link: #72b4f6
+$link: #8ac2f9
 
 $power-deep: #c62727