chore(*): remove unused styles, images, clean up and format

src/assets/styles/components/dialog.css

@@ -8,11 +8,6 @@
   to { opacity: 0; transform: scale(0.95); }
 }
 
-dialog {
-  width: var(--sizing-full);
-  height: var(--sizing-full);
-}
-
 .dialog-open,
 .dialog-close {
   display: inline-flex;
@@ -32,11 +27,18 @@ dialog {
 }
 
 dialog {
+  width: var(--sizing-full);
+  height: var(--sizing-full);
   background: var(--background-color);
   padding: var(--spacing-lg) var(--spacing-base);
   overflow-y: auto;
   border-radius: var(--border-radius-slight);
   font-size: var(--font-size-base);
+  animation: fadeIn var(--transition-duration-default) var(--transition-ease-in-out);
+
+  &::backdrop {
+    background: var(--dialog-overlay-background);
+  }
 
   &.closing {
     animation: fadeOut var(--transition-duration-default) var(--transition-ease-in-out);
@@ -78,11 +80,3 @@ dialog {
     }
   }
 }
-
-dialog {
-  animation: fadeIn var(--transition-duration-default) var(--transition-ease-in-out);
-}
-
-dialog::backdrop {
-  background: var(--dialog-overlay-background);
-}

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

@@ -5,19 +5,19 @@ progress {
   background-color: var(--gray-light);
   border-radius: var(--border-radius-full);
   overflow: hidden;
-}
 
-progress::-webkit-progress-bar {
-  background-color: var(--gray-light);
-  border-radius: var(--border-radius-full);
-}
+  &::-webkit-progress-bar {
+    background-color: var(--gray-light);
+    border-radius: var(--border-radius-full);
+  }
 
-progress::-webkit-progress-value {
-  background-color: var(--accent-color);
-  border-radius: var(--border-radius-full);
-}
+  &::-webkit-progress-value {
+    background-color: var(--accent-color);
+    border-radius: var(--border-radius-full);
+  }
 
-progress::-moz-progress-bar {
-  background-color: var(--accent-color);
-  border-radius: var(--border-radius-full);
+  &::-moz-progress-bar {
+    background-color: var(--accent-color);
+    border-radius: var(--border-radius-full);
+  }
 }

src/assets/styles/index.css

@@ -11,7 +11,6 @@
 @import url("./base/index.css") layer(base);
 
 /* page styles */
-@import url("./pages/about.css") layer(page);
 @import url("./pages/books.css") layer(page);
 @import url("./pages/contact.css") layer(page);
 @import url("./pages/links.css") layer(page);

src/assets/styles/noscript.css

@@ -8,7 +8,8 @@
   height: unset !important;
   overflow: unset !important;
   margin-bottom: unset !important;
-}
-[data-toggle-content].text-toggle-hidden::after {
-  display: none !important;
+
+  &::after {
+    display: none !important;
+  }
 }

src/assets/styles/pages/about.css

@@ -1,21 +0,0 @@
-.avatar-wrapper {
-  --avatar-size: 16rem;
-
-  display: flex;
-  justify-content: center;
-  width: var(--sizing-full);
-
-  @media screen and (min-width: 768px) {
-    --avatar-size: 24rem;
-  }
-
-  img {
-    width: var(--avatar-size);
-    height: var(--avatar-size);
-  }
-}
-
-.about-title {
-  margin: var(--margin-vertical-base-horizontal-zero);
-  text-align: center;
-}

src/assets/styles/pages/media.css

@@ -21,7 +21,7 @@
   }
 }
 
-.image-media {
+.media-image {
   border: var(--border-gray);
 }
 

src/assets/styles/pages/music.css

@@ -1,5 +1,5 @@
 .artist-focus {
-  .image-media {
+  .media-image {
     aspect-ratio: var(--aspect-ratio-square);
     width: var(--sizing-full);
     height: auto;