Fixed focus indicators

* Fixes focus indicators for links and CTAs
* Fixes padding on the navigation items
* Adds focus indicators for buttons same as links

Refs #1381

djangoproject/scss/_dark-mode.scss

@@ -278,11 +278,8 @@ html[data-theme="dark"] {
  border: none;
  background: transparent;
  vertical-align: middle;
- padding: 20px 10px;
-
- @include respond-max(768px) {
- padding: 0;
- }
+ padding: 0;
+ color: var(--menu);
 }
 
 .theme-toggle svg {

djangoproject/scss/_style.scss

@@ -41,13 +41,21 @@ a {
  color: var(--text-l10);
  }
 
+ &:focus {
+ outline: 2px solid currentColor;
+ }
+
  &:active,
  &:focus,
  &:hover {
  color: var(--text-l20);
  }
 }
 
+button:focus {
+ outline: 2px solid currentColor;
+}
+
 ::selection {
  // Text Selection Colors
  background-color: var(--selection);
@@ -586,12 +594,14 @@ blockquote {
  text-transform: uppercase;
  margin: 0 10px;
  border-top: 1px solid lighten($green-dark, 5%);
+ padding: 20px 0px;
 
  @include respond-min(768px) {
  margin: 0;
  border: 0;
  float: left;
  text-align: left;
+ padding: 20px 10px;
  }
 
  &.active a {
@@ -602,17 +612,12 @@ blockquote {
  a {
  color: var(--menu);
  display: block;
- padding: 20px 0px;
  text-decoration: none;
 
  &:active,
  &:hover {
  color: var(--secondary-accent);
  }
-
- @include respond-min(768px) {
- padding: 20px 10px;
- }
  }
 
  span {
@@ -1229,11 +1234,15 @@ a.cta {
  font-style: normal;
  }
 
- &:hover,
- &:focus {
+ &:hover {
  background: lighten($green-medium, 4%);
  }
 
+ &:focus {
+ outline-offset: 2px;
+ outline-color: var(--primary);
+ }
+
  &:active {
  background: darken($green-medium, 2%);
  }