From 56727131486612f69cd776d062477a60faa5f1c7 2021-10-19 13:47:58
From: Ben Sturmfels <ben@sturm.com.au>
Date: 2021-10-19 13:47:58
Subject: [PATCH] Add link and button focus/active states.

---

diff --git a/www/conservancy/static/css/conservancy.css b/www/conservancy/static/css/conservancy.css
index 236cd03d0aac8c87e67a9e250e822296c8d8f31c..400bc532edd1c0dbbfda450b6583b9dfb88a9541 100644
--- a/www/conservancy/static/css/conservancy.css
+++ b/www/conservancy/static/css/conservancy.css
@@ -54,6 +54,13 @@ a {
 }
 a:hover { text-decoration: underline; }
 
+input:focus {
+  z-index: 3;
+  border-color: #86b7fe;
+  box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
+};
+
+
 a.read-more {
     cursor: pointer;
     font-style: italic;
@@ -64,21 +71,26 @@ a.read-more {
   background: var(--orange);
   border: 1px solid var(--orange-dim);
 }
-.btn-orange:hover {
+.btn-orange:hover, .btn-orange:active {
   background: var(--orange-dim);
   text-decoration: none;
   box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
 }
+.btn-orange:focus {
+  box-shadow: 0 0 0 .25rem var(--orange-dim);
+}
 .btn-white {
   color: var(--orange);
   background: white;
 }
-.btn-white:hover {
+.btn-white:hover .btn-white:active {
   background: #eee;
   text-decoration: none;
   box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
 }
-
+.btn-white:focus {
+  box-shadow: 0 0 0 .25rem #ddd;
+}
 
 a svg {
   transition: all .2s ease;
@@ -160,7 +172,7 @@ h3 { margin-top: .6em; margin-bottom: .4em; }
   text-decoration: none;
   border-bottom: 4px solid transparent;
 }
-#navbar li:hover a {
+#navbar li:hover a, #navbar li a:focus {
   border-bottom: 4px solid var(--light-green);
 }
 #navbar li { float: left; display: inline; margin-bottom: 3px; }