fix: allow outline in buttons and a tags when on focus, esp. for tab …

…navigation (#311)

* fix: allow outline in buttons and a tags when on focus

* fix: using grass-color for outline

* focus-visible instead of focus

* fix:  focus color

* fix: using grass-color for the outline

Co-authored-by: daniel <daniel@daniel-debian.ipv6.infinitum.net.mx>

themes/grass/assets/css/style.css

@@ -159,6 +159,14 @@ a.nws:hover {
     font-size: 125%;
     text-align:top;
 }
+
+:focus:not(:focus-visible) {
+  outline: none;
+}
+:focus-visible {
+    outline: 2px solid var(--grass-color) !important;
+}
+
 .btn {
   font-size: 14px;
   font-family: open_sansregular;
@@ -171,27 +179,20 @@ a.nws:hover {
   z-index: 1;
   transition: .2s ease;
 }
-.btn:focus {
-  outline: 0;
-  box-shadow: none !important;
-}
 .btn:active {
   box-shadow: none;
 }
 .btn-primary {
   background: var(--grass-color-alt);
   color: var(--white-color);
 }
-.btn-primary:hover {
+.btn-primary:hover, .btn-primary:focus {
   background: var(--grass-color);
   color: var(--white-color) !important;
 }
 .btn-primary:active {
   background: var(--grass-color);
 }
-.btn-primary:hover {
-  background: var(--grass-color);
-}
 .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
   color: var(--white-color);
   background-color: var(--primary-color);
@@ -204,7 +205,7 @@ a.nws:hover {
 .btn-secondary:active {
   background: var(--grey-color-dark);
 }
-.btn-secondary:hover {
+.btn-secondary:hover, .btn-secondary:focus {
   background: var(--grey-color-dark);
   color: var(--white-color) !important;
 }
@@ -268,12 +269,6 @@ a, button, select {
   cursor: pointer;
   transition: .2s ease;
 }
-a:focus, button:focus, select:focus {
-  outline: 0;
-}
-.slick-slide {
-  outline: 0;
-}
 .section {
   padding-top: 30px;
   padding-bottom: 30px;
@@ -413,10 +408,6 @@ pre {
   background: #eff4e8;
 }
 
-
-.outline-0 {
-  outline: 0 !important;
-}
 .d-unset {
   display: unset !important;
 }
@@ -652,16 +643,13 @@ pre {
 .navbar-brand:hover {
   color: var(--grey-color-dark) !important;
 }
-.navbar-brand i {
 
-}
 
 .fdiv:hover {
   background: var(--grass-color-light) !important;
 }
 .fdiv:hover h3 {
   color: var(--grass-color-dark);
-  !important;
 }
 .gdiv:hover {
   background: #ffffff !important;
@@ -955,7 +943,7 @@ li.parent a {
 
   .separator {
     border-top: 1px solid #F6F6F6;
-f    padding: 5px;
+    padding: 5px;
     padding-left: 40px;
     font-style: italic;
     font-size: 0.9em;
@@ -1174,9 +1162,7 @@ f    padding: 5px;
 .timeline .panel-outline .panel-body {
   padding: 10px 10px;
 }
-.timeline .panel-body {
-  /* display: none; */
-}
+
 .timeline .panel-default {
   border: 0;
 }