fix: title + styles

src/assets/styles/components/badge-grid.css

@@ -10,7 +10,7 @@
   }
 
   & a {
-    outline: 0;
+    outline: none;
 
     &:focus img,
     &:focus-within img {

src/assets/styles/components/forms.css

@@ -32,9 +32,17 @@ input:focus,
 input:focus-within,
 textarea:focus,
 textarea:focus-within {
+  padding: calc(var(--sizing-sm) + 1px);
+}
+
+input:focus,
+input:focus-within,
+textarea:focus,
+textarea:focus-within,
+select:focus,
+select:focus-within {
   border: 0;
   outline: var(--outline-default);
-  padding: calc(var(--sizing-sm) + 1px);
 }
 
 select {
@@ -43,12 +51,6 @@ select {
   border-radius: var(--border-radius-slight);
   background-color: var(--background-color);
   padding: var(--sizing-xs) var(--sizing-sm);
-
-  &:focus,
-  &:focus-within {
-    border: 0;
-    outline: var(--outline-default)
-  }
 }
 
 .search__form {

src/assets/styles/components/media-grid.css

@@ -52,7 +52,7 @@
       content: '';
       top: 0;
       left: 0;
-      box-shadow: inset 0 -85px 60px -60px var(--black);
+      box-shadow: var(--box-shadow-media);
       width: 100%;
       height: 100%;
       border: var(--border-default);

src/assets/styles/components/menu.css

@@ -24,8 +24,12 @@
 
 .menu-button-container {
   display: none;
+  outline: none;
   margin-left: var(--sizing-md);
-  outline: 0;
+
+  & svg {
+    cursor: pointer;
+  }
 
   &:focus,
   &:focus-within {
@@ -33,10 +37,6 @@
     border-radius: var(--border-radius-slight);
   }
 
-  & svg {
-    cursor: pointer;
-  }
-
   &:hover svg,
   &:focus svg,
   &:focus-within svg,
@@ -123,7 +123,7 @@
 
     &:focus a,
     &:focus-within a {
-      outline: 0;
+      outline: none;
     }
 
     &:focus,

src/assets/styles/components/modal.css

@@ -20,30 +20,8 @@
       position: absolute;
       top: var(--sizing-lg);
       right: var(--sizing-lg);
-      cursor: pointer;
       height: var(--sizing-svg-base);
       width: var(--sizing-svg-base);
-
-      &:focus svg,
-      &:focus-within svg {
-        outline: var(--outline-default);
-        border-radius: var(--border-radius-slight);
-      }
-
-      & svg {
-        stroke: var(--accent-color);
-
-        &:focus {
-          outline: var(--outline-default);
-          border-radius: var(--border-radius-slight);
-        }
-
-        &:hover,
-        &:focus,
-        &:active {
-          stroke: var(--accent-color-hover);
-        }
-      }
     }
   }
 }
@@ -60,7 +38,8 @@
   }
 }
 
-.modal-toggle {
+.modal-toggle,
+.modal-close {
   cursor: pointer;
   display: inline-flex;
   vertical-align: middle;

src/assets/styles/components/music-chart.css

@@ -61,7 +61,7 @@
       line-height: 1.5;
 
       & a {
-        outline: 0;
+        outline: none;
       }
 
       &:focus,

src/assets/styles/components/progress-bar.css

@@ -1,10 +1,10 @@
 .progress-bar-wrapper {
   display: flex;
+  height: var(--sizing-lg);
+  width: 100%;
   background-color: rgba(217, 222, 228, .6);
   border-radius: var(--border-radius-full);
   overflow: hidden;
-  height: var(--sizing-lg);
-  width: 100%;
 
   & .progress-bar {
     background-color: var(--accent-color);

src/assets/styles/components/text-toggle.css

@@ -13,7 +13,7 @@
       position: absolute;
       z-index: 1;
       content: '';
-      box-shadow: inset 0 -120px 60px -60px var(--background-color);
+      box-shadow: var(--box-shadow-text-toggle);
       width: 100%;
       height: 20%;
       bottom: 0;