diff options
| -rw-r--r-- | public/css/modules/link-gallery.css | 57 | ||||
| -rw-r--r-- | src/components/LallansIssuesGallery.astro | 6 | ||||
| -rw-r--r-- | src/components/ScotsounCdGallery.astro | 6 | ||||
| -rw-r--r-- | src/pages/[locale]/furthsettins/index.astro | 8 |
4 files changed, 30 insertions, 47 deletions
diff --git a/public/css/modules/link-gallery.css b/public/css/modules/link-gallery.css index fe771cd..acb77e2 100644 --- a/public/css/modules/link-gallery.css +++ b/public/css/modules/link-gallery.css @@ -1,53 +1,44 @@ .link-gallery { - display: flex; - flex-wrap: wrap; - gap: var(--spacing-inline-sm); + display: grid; + grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width)); + grid-auto-rows: calc( + var(--gallery-row-image-height) + + var(--margin-block-sm) + + var(--gallery-row-title-height) + ); + gap: var(--grid-gutter-width); padding-block: var(--margin-block-md); + --gallery-item-column-span: 2; + --gallery-row-image-height: 12rem; + --gallery-row-title-height: 11ex; + text-align: center; } -.link-gallery__container { - display: flex; - flex-direction: column; - width: fit-content; - align-items: center; - height: fit-content; -} - -.link-gallery--furthsettins { - --gallery-item-width: 6rem; - --gallery-item-height: 6rem; - justify-content: space-evenly; -} - -.link-gallery--lallans { - --gallery-item-width: 9rem; - --gallery-item-height: auto; -} - -.link-gallery--scotsoun { - --gallery-item-width: 8rem; - --gallery-item-height: 8rem; +.link-gallery li { + grid-column: span var(--gallery-item-column-span); } -.link-gallery__image { - max-width: var(--gallery-item-width); - max-height: var(--gallery-item-height); +.link-gallery__container { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: var(--gallery-row-image-height) var(--gallery-row-title-height); + row-gap: var(--margin-block-sm); } .link-gallery--furthsettins img { border-radius: 50%; } -.link-gallery__image img { +.link-gallery img { max-width: 100%; max-height: 100%; + margin: auto; } .link-gallery__title { - justify-self: end; - max-width: var(--gallery-item-width); - min-height: 11ex; - min-height: 3lh; + width: 100%; + height: min-content; + max-height: 100%; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; diff --git a/src/components/LallansIssuesGallery.astro b/src/components/LallansIssuesGallery.astro index 9ade033..b826525 100644 --- a/src/components/LallansIssuesGallery.astro +++ b/src/components/LallansIssuesGallery.astro @@ -11,7 +11,7 @@ function issueNumberDescending(issue1: LallansIssue, issue2: LallansIssue) { } --- -<ul class="link-gallery link-gallery--lallans"> +<ul class="link-gallery"> { issues.map((issue) => ( <li> @@ -19,9 +19,7 @@ function issueNumberDescending(issue1: LallansIssue, issue2: LallansIssue) { class="link link-gallery__container" href={`/${locale}/furthsettins/lallans/${issue.issueNumber}`} > - <div class="link-gallery__image"> - <img src={`/images/lallans/issue${issue.issueNumber}.jpg`} /> - </div> + <img src={`/images/lallans/issue${issue.issueNumber}.jpg`} /> <p class="link-gallery__title"> Lallans {issue.issueNumber} | {issue.issueName} </p> diff --git a/src/components/ScotsounCdGallery.astro b/src/components/ScotsounCdGallery.astro index 8ae2b22..40940a1 100644 --- a/src/components/ScotsounCdGallery.astro +++ b/src/components/ScotsounCdGallery.astro @@ -11,7 +11,7 @@ function scotsounIdDescending(scotsoun1: Scotsoun, scotsoun2: Scotsoun) { } --- -<ul class="link-gallery link-gallery--scotsoun"> +<ul class="link-gallery"> { scotsoun.map((scotsounItem) => ( <li> @@ -19,9 +19,7 @@ function scotsounIdDescending(scotsoun1: Scotsoun, scotsoun2: Scotsoun) { class="link link-gallery__container" href={`/${locale}/furthsettins/scotsoun/${scotsounItem.scotsounId}`} > - <div class="link-gallery__image"> - <img src={`/images/scotsoun/sscd${scotsounItem.scotsounId}.jpg`} /> - </div> + <img src={`/images/scotsoun/sscd${scotsounItem.scotsounId}.jpg`} /> <p class="link-gallery__title">{scotsounItem.title}</p> </a> </li> diff --git a/src/pages/[locale]/furthsettins/index.astro b/src/pages/[locale]/furthsettins/index.astro index eb4c92a..3c23ac4 100644 --- a/src/pages/[locale]/furthsettins/index.astro +++ b/src/pages/[locale]/furthsettins/index.astro @@ -22,17 +22,13 @@ const t = translate(locale); <ul class="link-gallery link-gallery--furthsettins"> <li> <a href={relativePath(Astro.url.pathname, 'lallans')} class="link link-gallery__container"> - <div class="link-gallery__image"> - <img src="/images/furthsettins/lallans.jpg" /> - </div> + <img src="/images/furthsettins/lallans.jpg" /> <p class="link-gallery__title">{t(tSite, { key: 'lallans' })}</p> </a> </li> <li> <a href={relativePath(Astro.url.pathname, 'scotsoun')} class="link link-gallery__container"> - <div class="link-gallery__image"> - <img src="/images/furthsettins/scotsoun.jpg" /> - </div> + <img src="/images/furthsettins/scotsoun.jpg" /> <p class="link-gallery__title">{t(tSite, { key: 'scotsoun' })}</p> </a> </li> |