feat: style layers, imports and nesting

src/assets/styles/pages/404.css

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

src/assets/styles/pages/about.css

@@ -5,28 +5,26 @@
 .avatar__wrapper {
   margin-bottom: var(--sizing-xl);
   width: 100%;
-}
-
-.avatar__wrapper .avatar__wrapper--interior {
-  width: var(--avatar-size);
-  height: var(--avatar-size);;
-  border: 1px solid var(--accent-color);
-  border-radius: var(--rounded-full);
-  display: flex;
-  padding: var(--sizing-lg);
-  background-color: var(--color-lightest);
-}
-
-.avatar__wrapper,
-.avatar__wrapper .avatar__wrapper--interior {
   justify-content: center;
   overflow: hidden;
-}
 
-.avatar__wrapper .avatar__wrapper--interior picture > *,
-.avatar__wrapper .avatar__wrapper--interior img {
-  width: 100%;
-  height: 100%;
+  & .avatar__wrapper--interior {
+    width: var(--avatar-size);
+    height: var(--avatar-size);;
+    border: 1px solid var(--accent-color);
+    border-radius: var(--rounded-full);
+    display: flex;
+    padding: var(--sizing-lg);
+    background-color: var(--color-lightest);
+    justify-content: center;
+    overflow: hidden;
+
+    & picture > *,
+    & img {
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
 
 @media screen and (min-width: 768px) {

src/assets/styles/pages/blogroll.css

@@ -1,11 +1,11 @@
 .blog--roll__icons {
   display: flex;
-  flex-direction: row;
+  flex-direction: row !important;
   gap: var(--sizing-xs);
-}
 
-.blog--roll__icons a {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  & a {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
 }

src/assets/styles/pages/contact.css

@@ -1,27 +1,31 @@
 .contact__wrapper {
   display: flex;
   flex-direction: column;
+
+  & textarea {
+    height: calc(var(--sizing-3xl) * 5);
+    resize: none;
+  }
+
+  & .column.contact__description p:first-child {
+    margin-top: 0;
+  }
 }
 
-.contact__wrapper textarea {
-  height: calc(var(--sizing-3xl) * 5);
-  resize: none;
-}
-
-.contact__wrapper .column.contact__description p:first-child {
-  margin-top: 0;
+.contact__success--header {
+  margin: 0 0 var(--sizing-lg);
 }
 
 @media screen and (min-width: 768px) {
   .contact__wrapper {
     flex-direction: row;
-  }
 
-  .contact__wrapper .column {
-    width: 50%;
-  }
+    & .column {
+      width: 50%;
+    }
 
-  .contact__wrapper .column.contact__description {
-    padding-right: var(--sizing-xl);
+    & .column.contact__description {
+      padding-right: var(--sizing-xl);
+    }
   }
 }

src/assets/styles/pages/links.css

@@ -1,5 +1,4 @@
-.link__list {
-  padding-left: 0;
+.default__wrapper > .link__list {
   margin-top: 0;
   margin-bottom: var(--sizing-3xl);
 }

src/assets/styles/pages/now.css

@@ -1,26 +1,25 @@
 /* now */
 .now__section--text {
   padding-left: var(--sizing-base);
+
+  & p {
+    margin: var(--sizing-xs) 0;
+
+    & > svg {
+      display: inline;
+      vertical-align: middle;
+      height: var(--sizing-base);
+      width: var(--sizing-base);
+    }
+  }
 }
 
-.now__section--text p {
-  margin: var(--sizing-xs) 0;
-}
-
-.now__section--text p > svg {
-  display: inline;
-  vertical-align: middle;
-  height: var(--sizing-base);
-  width: var(--sizing-base);
-}
-
-.now__section--header,
-.recent__links-header {
+.now__section--header {
   margin: var(--sizing-3xl) 0 var(--sizing-lg);
 }
 
 .default__wrapper > .now__section--header:first-of-type {
-  margin-top: 0;
+  margin-top: 0 !important;
 }
 
 .link__list {
@@ -31,10 +30,4 @@
   font-size: var(--font-size-xs);
   line-height: var(--line-height-xs);
   padding-top: var(--sizing-lg);
-}
-
-@media screen and (min-width: 768px) {
-  .now__section--text {
-    padding-left: var(--sizing-3xl);
-  }
 }

src/assets/styles/pages/post.css

@@ -11,10 +11,10 @@ hr.footnotes-sep {
 .footnotes-list {
   margin-bottom: 0 !important;
   padding-left: 0 !important;
-}
 
-.footnotes-list li:last-child {
-  margin-bottom: 0;
+  & li:last-child {
+    margin-bottom: 0;
+  }
 }
 
 .footnotes {

src/assets/styles/pages/webrings.css

@@ -1,7 +1,11 @@
 .webring__wrapper {
   margin: var(--sizing-base) 0;
-}
 
-.webring__wrapper > .webring__centered {
-  justify-content: center;
+  h3 {
+    margin: var(--sizing-2xl) 0 var(--sizing-lg);
+  }
+
+  & > .webring__centered {
+    justify-content: center;
+  }
 }