chore: merge media grid styles

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

@@ -1,8 +1,13 @@
 :root {
-  --grid-square: repeat(2, minmax(0, 1fr));
+  --columns-two: repeat(2, minmax(0, 1fr));
-  --grid-vertical: repeat(3, minmax(0, 1fr));
+  --columns-three: repeat(3, minmax(0, 1fr));
+
+  --grid-poster: var(--columns-two);
+  --grid-square: var(--columns-two);
+  --grid-vertical: var(--columns-three);
 
   @media screen and (min-width: 768px) {
+    --grid-poster: var(--columns-three);
     --grid-square: repeat(4, minmax(0, 1fr));
     --grid-vertical: repeat(6, minmax(0, 1fr));
   }
@@ -20,6 +25,20 @@
     margin-top: var(--spacing-base);
   }
 
+  &.poster {
+    grid-template-columns: var(--grid-poster);
+
+    & a {
+      aspect-ratio: var(--aspect-ratio-banner);
+    }
+
+    & img {
+      border-radius: var(--border-radius-slight);
+      width: 100%;
+      height: auto;
+    }
+  }
+
   &.square {
     grid-template-columns: var(--grid-square);
 

src/assets/styles/pages/watching.css

@@ -3,7 +3,8 @@ a:active > .watching.hero::after {
   border-color: var(--accent-color-hover);
 }
 
-.watching.hero {
+.watching {
+  &.hero {
     position: relative;
     display: flex;
     aspect-ratio: var(--aspect-ratio-banner);
@@ -54,101 +55,9 @@ a:active > .watching.hero::after {
       border-radius: var(--border-radius-slight);
       transition: border-color var(--transition-duration-default) var(--transition-ease-in-out);
     }
-}
-
-.icon-link + .poster.grid {
-  margin-top: var(--spacing-base);
-}
-
-.poster {
-  & img {
-    border-radius: var(--border-radius-slight);
-    width: 100%;
-    height: auto;
   }
 
-  &.media-grid {
+  &.focus {
-    display: grid;
-    gap: var(--spacing-sm);
-    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);
-    }
-
-    & a:hover .item::after,
-    & a:active .item::after {
-      border-color: var(--accent-color-hover);
-    }
-
-    & div {
-      position: relative;
-
-      & .meta-text {
-        position: absolute;
-        z-index: 2;
-        padding: 0 var(--spacing-sm);
-        bottom: var(--spacing-sm);
-        width: 100%;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-
-        & .header,
-        & .subheader,
-        & .rating {
-          color: var(--color-lightest);
-          font-size: var(--font-size-sm);
-          line-height: var(--line-height-md);
-          text-shadow: var(--text-shadow-default);
-        }
-
-        & .header {
-          font-weight: var(--font-weight-bold);
-        }
-
-        & .subheader {
-          display: flex;
-          align-items: center;
-          gap: var(--spacing-xs);
-        }
-
-        & .rating {
-          font-size: calc(var(--font-size-sm) * 0.75);
-        }
-      }
-    }
-  }
-
-  &.item {
-    position: relative;
-    display: flex;
-    overflow: hidden;
-    aspect-ratio: var(--aspect-ratio-banner);
-
-    &::after {
-      position: absolute;
-      z-index: 1;
-      content: '';
-      top: 0;
-      left: 0;
-      box-shadow: var(--box-shadow-media);
-      width: 100%;
-      height: 100%;
-      border: var(--border-default);
-      border-radius: var(--border-radius-slight);
-      transition: border-color var(--transition-duration-default) var(--transition-ease-in-out);
-    }
-  }
-}
-
-.watching-focus {
     margin-top: var(--spacing-base);
     border-bottom: 0;
 
@@ -156,7 +65,7 @@ a:active > .watching.hero::after {
       aspect-ratio: var(--aspect-ratio-banner);
     }
 
-  & .watching-meta {
+    & .meta {
       display: flex;
       flex-direction: column;
       gap: var(--spacing-sm);
@@ -184,4 +93,9 @@ a:active > .watching.hero::after {
     & .footnotes {
       padding-bottom: 0;
     }
+  }
+}
+
+.icon-link + .poster.grid {
+  margin-top: var(--spacing-base);
 }

src/pages/dynamic/watching/movie.html

@@ -11,7 +11,7 @@ schema: movie
   {{ movie.title }} / {{ movie.year }}{% if move.rating %} ({{ movie.rating }}){% endif %}
 {%- endcapture -%}
 <a class="icon-link" href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" %} Back to watching</a>
-<article class="watching-focus">
+<article class="watching focus">
   <img
     srcset="
       https://cdn.coryd.dev{{ movie.backdrop }}?class=bannersm&type=webp 256w,
@@ -29,7 +29,7 @@ schema: movie
     width="256"
     height="180"
   />
-  <div class="watching-meta">
+  <div class="meta">
     <p class="title"><strong>{{ movie.title }}</strong>{%- if movie.year and not movie.rating %} ({{ movie.year }}){%- endif -%}</p>
     {%- if movie.rating -%}
       <p>

src/pages/dynamic/watching/show.html

@@ -11,7 +11,7 @@ schema: show
   {{ show.title }} / {{ show.year }}
 {%- endcapture -%}
 <a class="icon-link" href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" %} Back to watching</a>
-<article class="watching-focus">
+<article class="watching focus">
   <img
     srcset="
       https://cdn.coryd.dev{{ show.backdrop }}?class=bannersm&type=webp 256w,
@@ -29,7 +29,7 @@ schema: show
     width="256"
     height="180"
   />
-  <div class="watching-meta">
+  <div class="meta">
     <p class="title"><strong>{{ show.title }}</strong>{%- if show.year %} ({{ show.year }}){%- endif -%}</p>
     {%- if show.favorite -%}
       <p class="sub-meta favorite">{% tablericon "heart" %} This is one of my favorite shows!</p>