form select arrow

focused elements styling

src/scss/_theme.scss

@@ -14,7 +14,7 @@
   --color-selection-bg: #{get-color('dark')};
   --color-stroke: #{get-color('mid')};
   --color-action-bg: #{get-color('primary')};
-  --color-action-text: #{get-color('light')};
+  --color-action-text: #{get-color('dark')};
   --color-theme-primary: #{get-color('primary')};
   --color-theme-primary-glare: #{get-color('primary-glare')};
   --color-theme-highlight: #{get-color('highlight')};

src/scss/components/_button.scss

@@ -24,9 +24,9 @@
 }
 
 .button:focus:not(:hover),
-.btn:focus:not(:hover) {
-  outline: 1px solid var(--color-action-text);
-  outline-offset: -4px;
+.btn:not(button):focus:not(:hover) {
+  outline: 1px dotted var(--color-white);
+  outline-offset: -1rem;
 }
 
 .button:active,
@@ -44,6 +44,10 @@
   font-size: 1.125rem;
   font-weight: 600;
 
+  &:focus {
+    outline: none;
+  }
+
   + .btn {
     margin-left: 2rem;
   }
@@ -52,6 +56,10 @@
     color: var(--color-dark);
     background-color: var(--color-primary);
     font-weight: 700;
+
+    &:focus:not(:hover) {
+      outline-color: var(--color-dark);
+    }
   }
 
   &.btn-secondary {

src/scss/components/_form.scss

@@ -48,6 +48,11 @@ select {
   padding: .75rem 1.5rem;
   border-radius: 1.5rem;
   width: 100%;
+
+  &:focus {
+    outline: none;
+    box-shadow: var(--color-dark) 0 0 1.5px 1px;
+  }
 }
 
 textarea {
@@ -55,6 +60,11 @@ textarea {
 }
 
 select {
+  background-image: url("data:image/svg+xml,%3Csvg width='32' height='48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23 32l-7.794-12h15.588L23 32z' fill='%23333'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
+  background-position: right 1.5rem top 50%;
+  background-size: 2rem 3rem;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;

src/scss/components/_heading-permalink.scss

@@ -1,5 +1,5 @@
 .heading-permalink {
-  color: var(--color-theme-primary-glare);
+  color: var(--color-dark);
   font-size: .8em;
   margin-left: .3em;
   margin-top: .2em;

src/scss/components/_site-foot.scss

@@ -28,6 +28,10 @@
     &:hover {
       text-decoration: none;
     }
+
+    &:focus {
+      outline-color: var(--color-white);
+    }
   }
 
   &__credit {

src/scss/components/_site-head.scss

@@ -6,5 +6,9 @@
     font-weight: 700;
     text-decoration: none;
     color: var(--color-text);
+    
+    &:focus {
+      outline-color: var(--color-secondary);
+    }
   }
 }

src/scss/global.scss

@@ -48,7 +48,7 @@ img {
 }
 
 :focus {
-  outline: 1px solid var(--color-theme-primary-glare);
+  outline: 1px solid var(--color-dark);
   outline-offset: 0.25rem;
 }