feat: improved tab navigation

src/assets/styles/base/index.css

@@ -35,6 +35,11 @@ body {
   height: var(--sizing-xs);
 }
 
+a:focus,
+a:focus-within {
+  outline: 2px dashed var(--accent-color);
+}
+
 body::-webkit-scrollbar {
   width: var(--sizing-md);
   height: var(--sizing-md);

src/assets/styles/components/buttons.css

@@ -1,4 +1,9 @@
 button {
+  &:focus,
+  &:focus-within {
+    outline: 2px dashed var(--accent-color);
+  }
+
   &:not(.theme-toggle) {
     border-radius: var(--rounded-full);
     padding: var(--sizing-sm) var(--sizing-lg);

src/assets/styles/components/forms.css

@@ -18,16 +18,13 @@ textarea {
   margin-bottom: var(--sizing-base);
   font-weight: var(--font-weight-base);
   line-height: var(--line-height-base);
-  transition-property: border-color;
-  transition-timing-function: var(--transition-ease-in-out);
-  transition-duration: var(--transition-duration-default);
 }
 
-input[type="text"]:focus,
-input[type="email"]:focus,
-input[type="search"]:focus,
-textarea:focus {
-  border: 1px solid var(--accent-color-hover);
+input:focus,
+input:focus-within,
+textarea:focus,
+textarea:focus-within {
+  outline: 2px dashed var(--accent-color);
 }
 
 .search__results {

src/assets/styles/components/menu.css

@@ -24,22 +24,25 @@
 .menu-button-container {
   display: none;
   margin-left: var(--sizing-md);
+  outline: 0;
 
-  & .menu-open,
-  & .menu-closed {
-    cursor: pointer;
+  &:focus,
+  &:focus-within {
+    outline: 2px dashed var(--accent-color);
   }
 
   & svg {
+    cursor: pointer;
     transform: rotate(0deg);
     transition-property: transform;
     transition-timing-function: var(--transition-ease-in-out);
     transition-duration: var(--transition-duration-default);
   }
 
-  & svg:hover,
-  & svg:active,
-  & svg:focus {
+  &:hover svg,
+  &:focus svg,
+  &:focus-within svg,
+  &:active svg {
     stroke: var(--accent-color-hover);
     transform: rotate(8deg);
   }
@@ -49,24 +52,24 @@
   display: none;
 }
 
-#menu-toggle:checked + .menu-button-container {
-  & .menu-closed {
-    display: none;
-  }
-
-  & .menu-open {
-    display: block;
-  }
+#menu-toggle:checked + .menu-button-container .menu-closed {
+  display: none;
 }
 
-#menu-toggle:not(:checked) + .menu-button-container {
-  & .menu-closed {
-    display: block;
-  }
+#menu-toggle:checked + .menu-button-container .menu-open {
+  display: block;
+}
 
-  & .menu-open {
-    display: none;
-  }
+#menu-toggle:not(:checked) + .menu-button-container .menu-closed {
+  display: block;
+}
+
+#menu-toggle:not(:checked) + .menu-button-container .menu-open {
+  display: none;
+}
+
+a[role="menu-item"]:focus {
+  outline: none;
 }
 
 @media (max-width: 768px) {
@@ -120,6 +123,17 @@
     & .active {
       font-size: var(--font-size-lg);
     }
+
+    &:focus a,
+    &:focus-within a {
+      outline: 0;
+    }
+
+    &:focus,
+    &:focus-within {
+      border-top: 2px dashed var(--accent-color);
+      border-bottom: 2px dashed var(--accent-color);
+    }
   }
 
   .menu-button-container {

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

@@ -11,6 +11,18 @@ theme-toggle {
 
   & svg {
     cursor: pointer;
+    transform: rotate(0deg);
+    transition-property: transform;
+    transition-timing-function: var(--transition-ease-in-out);
+    transition-duration: var(--transition-duration-default);
+  }
+
+  &:hover svg,
+  &:focus svg,
+  &:focus-within svg,
+  &:active svg {
+    stroke: var(--accent-color-hover);
+    transform: rotate(8deg);
   }
 
   & > .light svg { stroke: var(--sun) !important; }

src/assets/styles/pages/books.css

@@ -37,8 +37,8 @@
     }
 
     & .progress-bar-wrapper {
-      margin-top: var(--font-size-xs);
       max-width: 75%;
+      margin-bottom: 0;
     }
 
     & blockquote.description {
@@ -65,6 +65,7 @@
     & p {
       &.title {
         font-size: var(--font-size-xl);
+        line-height: 1;
       }
 
       &.sub-meta {
@@ -109,6 +110,7 @@
       align-items: start;
 
       & .progress-bar-wrapper {
+        margin-top: 0;
         max-width: 40%;
       }
     }