chore: never did like those class conventions

src/assets/styles/pages/404.css

@@ -1,9 +1,9 @@
-.four-oh-four__wrapper {
-  & .image__banner {
+.four-oh-four-wrapper {
+  & .image-banner {
     margin-bottom: var(--sizing-base);
   }
 
-  & .page__header {
+  & .page-header {
     margin-bottom: var(--sizing-xs);
   }
 }

src/assets/styles/pages/about.css

@@ -2,15 +2,15 @@
   --avatar-size: 16rem;
 }
 
-.avatar__wrapper {
+.avatar-wrapper {
   margin-bottom: var(--sizing-xl);
   width: 100%;
   justify-content: center;
   overflow: hidden;
 
-  & .avatar__wrapper--interior {
+  & .interior {
     width: var(--avatar-size);
-    height: var(--avatar-size);;
+    height: var(--avatar-size);
     border: 1px solid var(--accent-color);
     border-radius: var(--rounded-full);
     display: flex;

src/assets/styles/pages/blogroll.css

@@ -1,4 +1,4 @@
-.blog--roll__icons {
+.blog-roll-icons {
   display: flex;
   flex-direction: row !important;
   gap: var(--sizing-xs);

src/assets/styles/pages/contact.css

@@ -1,4 +1,4 @@
-.contact__wrapper {
+.contact-wrapper {
   display: flex;
   flex-direction: column;
 
@@ -7,24 +7,24 @@
     resize: none;
   }
 
-  & .column.contact__description p:first-child {
+  & .column.description p:first-child {
     margin-top: 0;
   }
 }
 
-.contact__success--header {
+.contact-success-header {
   margin: 0 0 var(--sizing-lg);
 }
 
 @media screen and (min-width: 768px) {
-  .contact__wrapper {
+  .contact-wrapper {
     flex-direction: row;
 
     & .column {
       width: 50%;
     }
 
-    & .column.contact__description {
+    & .column.description {
       padding-right: var(--sizing-xl);
     }
   }

src/assets/styles/pages/links.css

@@ -1,4 +1,4 @@
-.default__wrapper > .link__list {
+.default-wrapper > .link-list {
   margin-top: 0;
   margin-bottom: var(--sizing-3xl);
 }

src/assets/styles/pages/now.css

@@ -1,5 +1,5 @@
 /* now */
-.now__section--text {
+.now-text {
   padding-left: var(--sizing-base);
 
   & p {
@@ -14,20 +14,18 @@
   }
 }
 
-.now__section--header {
+.now-header {
   margin: var(--sizing-3xl) 0 var(--sizing-lg);
 }
 
-.default__wrapper > .now__section--header:first-of-type {
+.default-wrapper > .now-header:first-of-type {
   margin-top: 0 !important;
 }
 
-.link__list {
+.link-list {
   margin-top: 0;
 }
 
-.now__explainer {
-  font-size: var(--font-size-xs);
-  line-height: var(--line-height-xs);
+.now-explainer {
   padding-top: var(--sizing-lg);
 }