Small CSS improvements

- Helper (<small>) for <select> and <textarea>
- Better roll for a.contrast

css/pico.classless.css

@@ -27,6 +27,7 @@
   --contrast-hover:    #0d1419;
   --contrast-focus:    rgba(115, 130, 140, 0.125);
   --contrast-border:   rgba(255, 223, 128, 0.5);
+  --contrast-border-h: #ffdf80;
   --contrast-inverse:  #FFF;
   --input-background:  #FFF;
   --input-border:      #c8d1d8;
@@ -73,6 +74,7 @@
     --contrast-hover:    #FFF;
     --contrast-focus:    rgba(89, 107, 120, 0.25);
     --contrast-border:   rgba(255, 223, 128, 0.33);
+    --contrast-border-h: rgba(255, 223, 128, 0.5);
     --contrast-inverse:  #10181e;
     --input-background:  #10181e;
     --input-border:      #374956;
@@ -673,7 +675,9 @@ form small {
   color: var(--muted-text);
 }
 
-input + small {
+input + small,
+select + small,
+textarea + small {
   margin-top: -1rem;
   margin-bottom: 1.5rem;
 }

css/pico.css

@@ -27,6 +27,7 @@
   --contrast-hover:    #0d1419;
   --contrast-focus:    rgba(115, 130, 140, 0.125);
   --contrast-border:   rgba(255, 223, 128, 0.5);
+  --contrast-border-h: #ffdf80;
   --contrast-inverse:  #FFF;
   --input-background:  #FFF;
   --input-border:      #c8d1d8;
@@ -73,6 +74,7 @@
     --contrast-hover:    #FFF;
     --contrast-focus:    rgba(89, 107, 120, 0.25);
     --contrast-border:   rgba(255, 223, 128, 0.33);
+    --contrast-border-h: rgba(255, 223, 128, 0.5);
     --contrast-inverse:  #10181e;
     --input-background:  #10181e;
     --input-border:      #374956;
@@ -437,7 +439,9 @@ a.contrast:not([role="button"]) {
 }
 
 a.contrast:not([role="button"]):hover, a.contrast:not([role="button"]):active, a.contrast:not([role="button"]):focus {
+  box-shadow: inset 0 -0.33rem 0 var(--contrast-border-h);
   color: var(--contrast-hover);
+  text-decoration: none;
 }
 
 a.contrast:not([role="button"]):focus {
@@ -779,7 +783,9 @@ form small {
   color: var(--muted-text);
 }
 
-input + small {
+input + small,
+select + small,
+textarea + small {
   margin-top: -1rem;
   margin-bottom: 1.5rem;
 }

css/pico.fluid.classless.css

@@ -27,6 +27,7 @@
   --contrast-hover:    #0d1419;
   --contrast-focus:    rgba(115, 130, 140, 0.125);
   --contrast-border:   rgba(255, 223, 128, 0.5);
+  --contrast-border-h: #ffdf80;
   --contrast-inverse:  #FFF;
   --input-background:  #FFF;
   --input-border:      #c8d1d8;
@@ -73,6 +74,7 @@
     --contrast-hover:    #FFF;
     --contrast-focus:    rgba(89, 107, 120, 0.25);
     --contrast-border:   rgba(255, 223, 128, 0.33);
+    --contrast-border-h: rgba(255, 223, 128, 0.5);
     --contrast-inverse:  #10181e;
     --input-background:  #10181e;
     --input-border:      #374956;
@@ -669,7 +671,9 @@ form small {
   color: var(--muted-text);
 }
 
-input + small {
+input + small,
+select + small,
+textarea + small {
   margin-top: -1rem;
   margin-bottom: 1.5rem;
 }

css/pico.slim.css

@@ -30,6 +30,7 @@
   --contrast-hover:    #0d1419;
   --contrast-focus:    rgba(115, 130, 140, 0.125);
   --contrast-border:   rgba(255, 223, 128, 0.5);
+  --contrast-border-h: #ffdf80;
   --contrast-inverse:  #FFF;
   --input-background:  #FFF;
   --input-border:      #c8d1d8;
@@ -76,6 +77,7 @@
     --contrast-hover:    #FFF;
     --contrast-focus:    rgba(89, 107, 120, 0.25);
     --contrast-border:   rgba(255, 223, 128, 0.33);
+    --contrast-border-h: rgba(255, 223, 128, 0.5);
     --contrast-inverse:  #10181e;
     --input-background:  #10181e;
     --input-border:      #374956;
@@ -375,7 +377,9 @@ a.contrast:not([role="button"]) {
 }
 
 a.contrast:not([role="button"]):hover, a.contrast:not([role="button"]):active, a.contrast:not([role="button"]):focus {
+  box-shadow: inset 0 -0.33rem 0 var(--contrast-border-h);
   color: var(--contrast-hover);
+  text-decoration: none;
 }
 
 a.contrast:not([role="button"]):focus {
@@ -691,7 +695,9 @@ form small {
   color: var(--muted-text);
 }
 
-input + small {
+input + small,
+select + small,
+textarea + small {
   margin-top: -1rem;
   margin-bottom: 1.5rem;
 }

scss/content/_form.scss

@@ -225,9 +225,13 @@ form small {
   color: var(--muted-text);
 }
 
-input + small {
+input,
-  margin-top: -$spacing-typography/1.5;
+select,
-  margin-bottom: $spacing-typography;
+textarea {
+  + small {
+    margin-top: -$spacing-typography/1.5;
+    margin-bottom: $spacing-typography;
+  }
 }
 
 // Styles for Input inside a label

scss/content/_typography.scss

@@ -115,7 +115,9 @@ a {
     &:hover,
     &:active,
     &:focus {
+      box-shadow: inset 0 -.33rem 0 var(--contrast-border-h);
       color: var(--contrast-hover);
+      text-decoration: none;
     }
 
     &:focus {
@@ -179,7 +181,7 @@ hgroup {
   *{
     margin-bottom: 0;
   }
-  
+
   > *:last-child {
     color: var(--muted-text);
     font-size: 1.125rem;

scss/themes/default/_dark.scss

@@ -31,7 +31,8 @@
     --contrast:          #{$grey-100};
     --contrast-hover:    #{$white};
     --contrast-focus:    #{rgba($grey-600, .25)};
-    --contrast-border:   #{rgba($amber-200, .33)}; // For links
+    --contrast-border:   #{rgba($amber-200, .33)}; // Links underline for
+    --contrast-border-h: #{rgba($amber-200, .5)};  // Links hover underline
     --contrast-inverse:  #{darken($grey-900, 6%)};
 
     // Form elements

scss/themes/default/_light.scss

@@ -31,7 +31,8 @@
   --contrast:          #{$grey-800};
   --contrast-hover:    #{mix($grey-900, $black)};
   --contrast-focus:    #{rgba($grey-500, .125)};
-  --contrast-border:   #{rgba($amber-200, .5)}; // For links
+  --contrast-border:   #{rgba($amber-200, .5)}; // Links underline
+  --contrast-border-h: #{rgba($amber-200, 1)};  // Links hover underline
   --contrast-inverse:  #{$white};
 
   // Form elements