From 3b4f2591a95e3938f97f94a4e34607936a6cda86 Mon Sep 17 00:00:00 2001
From: DrMint <29893320+DrMint@users.noreply.github.com>
Date: Sat, 8 Jun 2024 21:21:18 +0200
Subject: [PATCH] Small improvements to collectible pages

---
 src/components/AppLayout/AsideLayout.astro    |  5 +-
 .../AppLayout/components/Html.astro           |  3 +-
 src/pages/[locale]/api/pages/partial.astro    |  2 +-
 .../[slug]/_components/SubitemSection.astro   | 14 +++-
 .../[locale]/collectibles/[slug]/index.astro  | 84 +++++++++----------
 5 files changed, 61 insertions(+), 47 deletions(-)

diff --git a/src/components/AppLayout/AsideLayout.astro b/src/components/AppLayout/AsideLayout.astro
index f10f8d7..ee579d0 100644
--- a/src/components/AppLayout/AsideLayout.astro
+++ b/src/components/AppLayout/AsideLayout.astro
@@ -53,10 +53,11 @@ const { reducedAsideWidth = false } = Astro.props;
     @media (min-width: 1280.5px) {
       display: grid;
       justify-content: space-between;
-      grid-template-columns: 35rem 35rem;
+      gap: 5rem;
+      grid-template-columns: 1fr 35rem;
 
       &.reduced-width {
-        grid-template-columns: 35rem 27rem;
+        grid-template-columns: 1fr 27rem;
       }
 
       align-items: start;
diff --git a/src/components/AppLayout/components/Html.astro b/src/components/AppLayout/components/Html.astro
index e5dbd70..6e2ea8d 100644
--- a/src/components/AppLayout/components/Html.astro
+++ b/src/components/AppLayout/components/Html.astro
@@ -167,7 +167,8 @@ const { currentTheme } = Astro.locals;
   p,
   button,
   body,
-  html {
+  html,
+  hr {
     padding: 0;
     margin: 0;
     overflow-wrap: anywhere;
diff --git a/src/pages/[locale]/api/pages/partial.astro b/src/pages/[locale]/api/pages/partial.astro
index 5b979c7..6d6c520 100644
--- a/src/pages/[locale]/api/pages/partial.astro
+++ b/src/pages/[locale]/api/pages/partial.astro
@@ -128,7 +128,7 @@ if (updatedBy) {
     border: none;
     border-top: 3px dotted var(--color-base-500);
     margin-block: 24px;
-    width: 100%;
+    width: min(100%, 35rem);
   }
 
   #credits {
diff --git a/src/pages/[locale]/collectibles/[slug]/_components/SubitemSection.astro b/src/pages/[locale]/collectibles/[slug]/_components/SubitemSection.astro
index 4bc8f6b..840ceac 100644
--- a/src/pages/[locale]/collectibles/[slug]/_components/SubitemSection.astro
+++ b/src/pages/[locale]/collectibles/[slug]/_components/SubitemSection.astro
@@ -33,8 +33,20 @@ const { t } = await getI18n(Astro.locals.currentLocale);
 
     & > #values {
       display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
       gap: clamp(6px, 2vmin, 16px);
+
+      grid-template-columns: repeat(auto-fill, 270px);
+
+      @media (max-width: 600.5px) {
+        grid-template-columns: 1fr 1fr;
+        row-gap: 12px;
+      }
+
+      @media (max-width: 24rem) {
+        grid-template-columns: 1fr;
+      }
+
+      align-items: start;
     }
   }
 </style>
diff --git a/src/pages/[locale]/collectibles/[slug]/index.astro b/src/pages/[locale]/collectibles/[slug]/index.astro
index 4f0db9d..e439f62 100644
--- a/src/pages/[locale]/collectibles/[slug]/index.astro
+++ b/src/pages/[locale]/collectibles/[slug]/index.astro
@@ -154,50 +154,50 @@ if (price) {
     </Fragment>
 
     <Fragment slot="header-aside">
-      <div id="images">
-        {
-          thumbnail && (
-            <a
-              id="thumbnail"
-              href={getLocalizedUrl(`/images/${thumbnail.id}`)}
-              style={`aspect-ratio: ${thumbnail.width}/${thumbnail.height};`}>
-              <img
-                src={thumbnail.url}
-                srcset={sizesToSrcset(thumbnail.sizes)}
-                sizes={`(max-width: 550px) 90vw, 550px`}
-                width={thumbnail.width}
-                height={thumbnail.height}
-              />
-            </a>
-          )
-        }
-
-        {
-          (gallery || scans) && (
-            <div
-              id="gallery-scans"
-              class:list={{ "when-no-print": true, "with-two": gallery && scans }}>
-              {gallery && (
-                <ImageTile
-                  image={gallery.thumbnail}
-                  title={t("collectibles.gallery.title")}
-                  subtitle={t("collectibles.gallery.subtitle", { count: gallery.count })}
-                  href={getLocalizedUrl(`/collectibles/${slug}/gallery`)}
+      {
+        (thumbnail || gallery || scans) && (
+          <div id="images">
+            {thumbnail && (
+              <a
+                id="thumbnail"
+                href={getLocalizedUrl(`/images/${thumbnail.id}`)}
+                style={`aspect-ratio: ${thumbnail.width}/${thumbnail.height};`}>
+                <img
+                  src={thumbnail.url}
+                  srcset={sizesToSrcset(thumbnail.sizes)}
+                  sizes={`(max-width: 550px) 90vw, 550px`}
+                  width={thumbnail.width}
+                  height={thumbnail.height}
                 />
-              )}
+              </a>
+            )}
 
-              {scans && (
-                <ImageTile
-                  image={scans.thumbnail}
-                  title={t("collectibles.scans.title")}
-                  subtitle={t("collectibles.scans.subtitle", { count: scans.count })}
-                  href={getLocalizedUrl(`/collectibles/${slug}/scans`)}
-                />
-              )}
-            </div>
-          )
-        }
-      </div>
+            {(gallery || scans) && (
+              <div
+                id="gallery-scans"
+                class:list={{ "when-no-print": true, "with-two": gallery && scans }}>
+                {gallery && (
+                  <ImageTile
+                    image={gallery.thumbnail}
+                    title={t("collectibles.gallery.title")}
+                    subtitle={t("collectibles.gallery.subtitle", { count: gallery.count })}
+                    href={getLocalizedUrl(`/collectibles/${slug}/gallery`)}
+                  />
+                )}
+
+                {scans && (
+                  <ImageTile
+                    image={scans.thumbnail}
+                    title={t("collectibles.scans.title")}
+                    subtitle={t("collectibles.scans.subtitle", { count: scans.count })}
+                    href={getLocalizedUrl(`/collectibles/${slug}/scans`)}
+                  />
+                )}
+              </div>
+            )}
+          </div>
+        )
+      }
     </Fragment>
 
     <Fragment slot="aside">