chore: group media queries with rules

src/assets/styles/base/index.css

@@ -232,12 +232,52 @@ h1, h2, h3, h4, h5, h6 {
   margin: var(--margin-vertical-base-horizontal-zero);
 }
 
-h1 { font-size: var(--font-size-2xl); }
-h2 { font-size: var(--font-size-xl); }
-h3 { font-size: var(--font-size-lg); }
-h4 { font-size: var(--font-size-base); }
-h5 { font-size: var(--font-size-md); }
-h6 { font-size: var(--font-size-sm); }
+h1 {
+  font-size: var(--font-size-2xl);
+
+  @media screen and (min-width: 768px) {
+    font-size: var(--font-size-3xl);
+  }
+}
+
+h2 {
+  font-size: var(--font-size-xl);
+
+  @media screen and (min-width: 768px) {
+    font-size: var(--font-size-2xl);
+  }
+}
+
+h3 {
+  font-size: var(--font-size-lg);
+
+  @media screen and (min-width: 768px) {
+    font-size: var(--font-size-xl);
+  }
+}
+h4 {
+  font-size: var(--font-size-base);
+
+  @media screen and (min-width: 768px) {
+    font-size: var(--font-size-lg);
+  }
+}
+
+h5 {
+  font-size: var(--font-size-md);
+
+  @media screen and (min-width: 768px) {
+    font-size: var(--font-size-base);
+  }
+}
+
+h6 {
+  font-size: var(--font-size-sm);
+
+  @media screen and (min-width: 768px) {
+    font-size: var(--font-size-md);
+  }
+}
 
 .section-header-wrapper {
   justify-content: space-between;
@@ -396,6 +436,10 @@ main {
   width: 80%;
   margin-left: auto;
   margin-right: auto;
+
+  @media screen and (min-width: 768px) {
+    max-width: 768px;
+  }
 }
 
 .status,
@@ -517,17 +561,4 @@ ul, ol {
 
 .justify-centered {
   justify-content: center;
-}
-
-@media screen and (min-width: 768px) {
-  h1 { font-size: var(--font-size-3xl); }
-  h2 { font-size: var(--font-size-2xl); }
-  h3 { font-size: var(--font-size-xl); }
-  h4 { font-size: var(--font-size-lg); }
-  h5 { font-size: var(--font-size-base); }
-  h6 { font-size: var(--font-size-md); }
-
-  main {
-    max-width: 768px;
-  }
 }

src/assets/styles/components/badge-grid.css

@@ -4,6 +4,10 @@
   grid-template-columns: repeat(3, 1fr);
   margin-top: var(--spacing-2xl);
 
+  @media screen and (min-width: 768px) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
   & > * {
     display: flex;
     justify-content: center;
@@ -21,10 +25,4 @@
   & img {
     image-rendering: pixelated;
   }
-}
-
-@media screen and (min-width: 768px) {
-  .badge-grid {
-    grid-template-columns: repeat(4, 1fr);
-  }
 }

src/assets/styles/components/media-grid.css

@@ -1,6 +1,11 @@
 :root {
   --grid-square: repeat(2, minmax(0, 1fr));
   --grid-vertical: repeat(3, minmax(0, 1fr));
+
+  @media screen and (min-width: 768px) {
+    --grid-square: repeat(4, minmax(0, 1fr));
+    --grid-vertical: repeat(6, minmax(0, 1fr));
+  }
 }
 
 .media-grid {
@@ -99,11 +104,4 @@
       text-overflow: ellipsis;
     }
   }
-}
-
-@media screen and (min-width: 768px) {
-  :root {
-    --grid-square: repeat(4, minmax(0, 1fr));
-    --grid-vertical: repeat(6, minmax(0, 1fr));
-  }
 }

src/assets/styles/components/modal.css

@@ -16,6 +16,13 @@
     border-radius: var(--border-radius-slight);
     padding: var(--spacing-lg) var(--spacing-2xl);
 
+    @media screen and (min-width: 768px) {
+      max-height: 75%;
+      max-width: 75%;
+      inset: 12.5%;
+      border: var(--border-gray);
+    }
+
     & .modal-close {
       position: absolute;
       top: var(--spacing-lg);
@@ -66,13 +73,4 @@
       stroke: var(--accent-color-hover);
     }
   }
-}
-
-@media screen and (min-width: 768px) {
-  .modal-wrapper .modal-body {
-    max-height: 75%;
-    max-width: 75%;
-    inset: 12.5%;
-    border: var(--border-gray);
-  }
 }

src/assets/styles/components/music-chart.css

@@ -5,6 +5,10 @@
     padding-left: 0;
     margin-top: 0;
 
+    @media screen and (min-width: 768px) {
+      list-style-position: outside;
+    }
+
     & li:first-of-type {
       margin-top: 0;
     }
@@ -16,6 +20,12 @@
     justify-content: start;
     align-items: start;
 
+    @media screen and (min-width: 768px) {
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+    }
+
     &:not(:last-of-type) {
       margin-bottom: var(--spacing-md);
     }
@@ -23,6 +33,10 @@
     & .progress-bar-wrapper {
       margin-top: var(--spacing-sm);
       max-width: 40%;
+
+      @media screen and (min-width: 768px) {
+        margin-left: var(--spacing-lg);
+      }
     }
 
     & img {
@@ -30,30 +44,51 @@
       border-radius: var(--border-radius-slight);
       width: calc(var(--sizing-3xl) * 1.5);
       height: calc(var(--sizing-3xl) * 1.5);
+
+      @media screen and (min-width: 768px) {
+        width: calc(var(--sizing-3xl) * 2);
+        height: calc(var(--sizing-3xl) * 2);
+      }
     }
 
     & .presentation .info {
       display: flex;
       flex-direction: column;
       gap: var(--spacing-sm);
+
+      @media screen and (min-width: 768px) {
+        max-width: calc(75% - var(--sizing-lg));
+      }
     }
 
     & .meta,
     & .presentation {
       justify-content: start;
       gap: var(--spacing-md);
+
+      @media screen and (min-width: 768px) {
+        width: calc(80% - var(--sizing-lg));
+      }
     }
 
     & .meta {
       display: flex;
       flex-direction: row;
       align-items: center;
+
+      @media screen and (min-width: 768px) {
+        width: calc(75% - var(--sizing-lg));
+      }
     }
 
     & .meta-text {
       display: flex;
       flex-direction: column;
       justify-content: start;
+
+      @media screen and (min-width: 768px) {
+        max-width: 85%;
+      }
     }
 
     & .title {
@@ -76,6 +111,12 @@
     & .timestamp {
       margin-top: var(--spacing-sm);
       margin-left: 0;
+
+      @media screen and (min-width: 768px) {
+        margin-left: var(--spacing-lg);
+        text-align: right;
+        white-space: nowrap;
+      }
     }
   }
 
@@ -85,6 +126,10 @@
     grid-template-columns: repeat(2, 1fr);
     margin-bottom: var(--spacing-base);
 
+    @media screen and (min-width: 768px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
     & .item .meta {
       max-width: 80%;
 
@@ -98,54 +143,4 @@
       }
     }
   }
-}
-
-@media screen and (min-width: 768px) {
-  .music-chart {
-    & ol {
-      list-style-position: outside;
-    }
-
-    & .meta,
-    & .presentation {
-      width: calc(80% - var(--sizing-lg));
-    }
-
-    & .item {
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-
-      & .meta {
-        width: calc(75% - var(--sizing-lg));
-      }
-
-      & .meta-text {
-        max-width: 85%;
-      }
-
-      & .timestamp {
-        margin-left: var(--spacing-lg);
-        text-align: right;
-        white-space: nowrap;
-      }
-
-      & .info {
-        max-width: calc(75% - var(--sizing-lg));
-      }
-
-      & .progress-bar-wrapper {
-        margin-left: var(--spacing-lg);
-      }
-    }
-
-    &.grid {
-      grid-template-columns: repeat(3, 1fr);
-
-      & .item img {
-        width: calc(var(--sizing-3xl) * 2);
-        height: calc(var(--sizing-3xl) * 2);
-      }
-    }
-  }
 }

src/assets/styles/pages/about.css

@@ -1,5 +1,9 @@
 :root {
   --avatar-size: 16rem;
+
+  @media screen and (min-width: 768px) {
+    --avatar-size: 24rem;
+  }
 }
 
 .avatar-wrapper {
@@ -16,10 +20,4 @@
       image-rendering: pixelated;
     }
   }
-}
-
-@media screen and (min-width: 768px) {
-  :root {
-    --avatar-size: 24rem;
-  }
 }

src/assets/styles/pages/books.css

@@ -4,6 +4,12 @@
   align-items: center;
   gap: var(--spacing-sm);
 
+  @media screen and (min-width: 768px) {
+    flex-direction: row;
+    gap: var(--spacing-base);
+    align-items: start;
+  }
+
   &:last-of-type {
     border-bottom: 0;
     margin-bottom: 0;
@@ -39,6 +45,10 @@
   & .book-meta {
     align-items: center;
 
+    @media screen and (min-width: 768px) {
+      align-items: start;
+    }
+
     & p {
       margin: 0;
       overflow: hidden;
@@ -47,9 +57,20 @@
       width: fit-content;
     }
 
+    & .description {
+      @media screen and (min-width: 768px) {
+        margin-bottom: var(--spacing-base);
+      }
+    }
+
     & .progress-bar-wrapper {
       max-width: 75%;
       margin-bottom: 0;
+
+      @media screen and (min-width: 768px) {
+        margin-top: 0;
+        max-width: 50%;
+      }
     }
   }
 }
@@ -100,51 +121,30 @@
     gap: var(--spacing-base);
     margin-bottom: var(--spacing-base);
 
+    @media screen and (min-width: 768px) {
+      flex-direction: row;
+      align-items: start;
+    }
+
     & .book-meta {
       width: 100%;
       align-items: center;
 
+      @media screen and (min-width: 768px) {
+        width: auto;
+        align-items: start;
+      }
+
       & p {
         margin: 0;
       }
 
       & .progress-bar-wrapper {
         max-width: 50%;
-      }
-    }
-  }
-}
 
-@media screen and (min-width: 768px) {
-  .book-entry {
-    flex-direction: row;
-    gap: var(--spacing-base);
-    align-items: start;
-
-    & .book-meta {
-      align-items: start;
-
-      & .progress-bar-wrapper {
-        margin-top: 0;
-        max-width: 50%;
-      }
-
-      & .description {
-        margin-bottom: var(--spacing-base);
-      }
-    }
-  }
-
-  .book-focus .book-display {
-    flex-direction: row;
-    align-items: start;
-
-    & .book-meta {
-      width: auto;
-      align-items: start;
-
-      & .progress-bar-wrapper {
-        max-width: none;
+        @media screen and (min-width: 768px) {
+          max-width: none;
+        }
       }
     }
   }

src/assets/styles/pages/contact.css

@@ -2,13 +2,29 @@
   display: flex;
   flex-direction: column;
 
+  @media screen and (min-width: 768px) {
+    flex-direction: row;
+  }
+
   & textarea {
     height: calc(var(--sizing-3xl) * 5);
     resize: none;
   }
 
-  & .column.description p:first-of-type {
-    margin-top: 0;
+  & .column {
+    @media screen and (min-width: 768px) {
+      width: 50%;
+    }
+
+    &.description {
+      & p:first-of-type {
+        margin-top: 0;
+      }
+
+      @media screen and (min-width: 768px) {
+        padding-right: var(--spacing-xl);
+      }
+    }
   }
 }
 
@@ -22,18 +38,4 @@
   h2 {
     margin: 0;
   }
-}
-
-@media screen and (min-width: 768px) {
-  .contact-wrapper {
-    flex-direction: row;
-
-    & .column {
-      width: 50%;
-    }
-
-    & .column.description {
-      padding-right: var(--spacing-xl);
-    }
-  }
 }

src/assets/styles/pages/links.css

@@ -4,15 +4,13 @@
   grid-template-columns: repeat(1, minmax(0, 1fr));
   margin-bottom: var(--spacing-base);
 
+  @media screen and (min-width: 768px) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   & .link-box {
     border: var(--border-gray);
     border-radius: var(--border-radius-slight);
     padding: var(--spacing-xs) var(--spacing-sm);
   }
-}
-
-@media screen and (min-width: 768px) {
-  .link-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
 }

src/assets/styles/pages/music.css

@@ -16,6 +16,10 @@
     width: 100%;
     height: auto;
     aspect-ratio: var(--aspect-ratio-square);
+
+    @media screen and (min-width: 768px) {
+      max-width: 240px;
+    }
   }
 
   & .artist-display {
@@ -24,12 +28,21 @@
     gap: var(--spacing-xs);
     margin-bottom: var(--spacing-base);
 
+    @media screen and (min-width: 768px) {
+      flex-direction: row;
+      gap: var(--spacing-md);
+    }
+
     & .artist-meta {
       display: flex;
       flex-direction: column;
       gap: var(--spacing-sm);
       margin-top: var(--spacing-base);
 
+      @media screen and (min-width: 768px) {
+        margin-top: 0;
+      }
+
       & p {
         margin: 0;
 
@@ -66,21 +79,4 @@
 
 p.concerts + ul + hr {
   display: none;
-}
-
-@media screen and (min-width: 768px) {
-  .artist-focus {
-    & img {
-      max-width: 240px;
-    }
-
-    & .artist-display {
-      flex-direction: row;
-      gap: var(--spacing-md);
-
-      & .artist-meta {
-        margin-top: 0;
-      }
-    }
-  }
 }

src/assets/styles/pages/watching.css

@@ -75,6 +75,10 @@ a:active > .watching.hero::after {
     grid-template-columns: repeat(2, minmax(0, 1fr));
     margin-bottom: var(--spacing-base);
 
+    @media screen and (min-width: 768px) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
     & a {
       display: flex;
       aspect-ratio: var(--aspect-ratio-banner);
@@ -188,10 +192,4 @@ a:active > .watching.hero::after {
   & .footnotes {
     padding-bottom: 0;
   }
-}
-
-@media screen and (min-width: 768px) {
-  .watching.grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
 }