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;

src/assets/styles/defaults/vars.css

@@ -123,6 +123,10 @@
   --stroke-width-bold: 2;
   --inline-margin-bottom: -5px;
 
+  /* shadows */
+  --box-shadow-media: inset 0 -85px 60px -60px var(--black);
+  --box-shadow-text-toggle: inset 0 -120px 60px -60px var(--background-color);
+
   /* input accent color */
   accent-color: var(--accent-color);
 }

src/assets/styles/pages/blogroll.css

@@ -5,7 +5,7 @@
   & a {
     display: flex;
     align-items: center;
-    outline: 0;
+    outline: none;
 
     &:focus svg,
     &:focus-within svg {

src/assets/styles/pages/books.css

@@ -17,7 +17,6 @@
     display: flex;
   }
 
-
   & img {
     max-width: calc(var(--sizing-3xl) * 4);
     height: auto;
@@ -115,10 +114,6 @@
       }
     }
   }
-
-  p {
-    margin: var(--sizing-base) 0;
-  }
 }
 
 @media screen and (min-width: 768px) {

src/assets/styles/pages/contact.css

@@ -18,6 +18,10 @@
   justify-content: center;
   align-items: center;
   min-height: 60vh;
+
+  h2 {
+    margin: 0;
+  }
 }
 
 @media screen and (min-width: 768px) {

src/assets/styles/pages/watching.css

@@ -58,7 +58,7 @@ a:active > .watching.hero::after {
       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);
@@ -140,7 +140,7 @@ a:active > .watching.hero::after {
       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);