Refactors links-gallery CSS component

2 files changed, 26 insertions, 20 deletions

diff --git a/public/main.css b/public/main.css
index 49335d4..4fad865 100644
--- a/public/main.css
+++ b/public/main.css
@@ -366,14 +366,14 @@ footer {
   border-radius: 50%;
 }
 
-.lallans-issues-gallery {
+.link-gallery {
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-inline-sm);
   padding-block: var(--spacing-block-md);
 }
 
-.lallans-issues-gallery__issue-container {
+.link-gallery__container {
   display: flex;
   flex-direction: column;
   width: fit-content;
@@ -403,21 +403,31 @@ footer {
   height: auto;
 }
 
-.lallans-issues-gallery__issue-cover-image {
+.link-gallery--lallans {
+  --gallery-item-width: 6rem;
+  --gallery-item-height: auto;
+}
+
+.link-gallery__image {
   align-self: start;
-  width: 100%;
-  max-width: 6rem;
-  height: auto;
+  max-width: var(--gallery-item-width);
+  max-height: var(--gallery-item-height);
 }
 
-.lallans-issues-gallery__issue-title {
+.link-gallery__image img {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.link-gallery__title {
   justify-self: end;
-  max-width: 6rem;
-  overflow: hidden;
+  max-width: var(--gallery-item-width);
+  min-height: 4.7ex;
   text-overflow: ellipsis;
   display: -webkit-box;
+  -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
+  overflow: hidden;
   text-align: center;
 }
 
diff --git a/src/components/LallansIssuesGallery.astro b/src/components/LallansIssuesGallery.astro
index 5e45a9e..bee50c8 100644
--- a/src/components/LallansIssuesGallery.astro
+++ b/src/components/LallansIssuesGallery.astro
@@ -4,19 +4,15 @@ import { getAllLallansIssues } from '$data/lallans';
 const issues = await getAllLallansIssues();
 ---
 
-<ul class="lallans-issues-gallery">
+<ul class="link-gallery link-gallery--lallans">
   {
     issues.map((issue) => (
       <li>
-        <a
-          class="link lallans-issues-gallery__issue-container"
-          href={`lallans/${issue.issueNumber}`}
-        >
-          <img
-            class="lallans-issues-gallery__issue-cover-image"
-            src={`/images/lallans/issue${issue.issueNumber}.jpg`}
-          />
-          <p class="lallans-issues-gallery__issue-title">
+        <a class="link link-gallery__container" href={`lallans/${issue.issueNumber}`}>
+          <div class="link-gallery__image">
+            <img src={`/images/lallans/issue${issue.issueNumber}.jpg`} />
+          </div>
+          <p class="link-gallery__title">
             Lallans {issue.issueNumber} | {issue.issueName}
           </p>
         </a>