From 1f9d3bce4de8a3a89105862304ea1544106a18ee Mon Sep 17 00:00:00 2001 From: Joe Carstairs Date: Fri, 26 Jan 2024 14:13:45 +0000 Subject: Improves link gallery styling --- scss/modules/_index.sm.scss | 1 + scss/modules/_link-gallery.scss | 3 ++- scss/modules/_link-gallery.sm.scss | 4 ++++ scss/modules/_link-gallery.xs.scss | 4 ++++ 4 files changed, 11 insertions(+), 1 deletion(-) create mode 100644 scss/modules/_link-gallery.sm.scss diff --git a/scss/modules/_index.sm.scss b/scss/modules/_index.sm.scss index a4fb988..ab51eb2 100644 --- a/scss/modules/_index.sm.scss +++ b/scss/modules/_index.sm.scss @@ -1,3 +1,4 @@ @use 'committee.sm' as *; +@use 'link-gallery.sm' as *; @use 'nav.sm' as *; diff --git a/scss/modules/_link-gallery.scss b/scss/modules/_link-gallery.scss index d321419..a7b7090 100644 --- a/scss/modules/_link-gallery.scss +++ b/scss/modules/_link-gallery.scss @@ -14,8 +14,9 @@ } img { - max-width: 100%; + max-width: 50%; max-height: 100%; + height: fit-content; margin: auto; object-fit: contain; } diff --git a/scss/modules/_link-gallery.sm.scss b/scss/modules/_link-gallery.sm.scss new file mode 100644 index 0000000..723dffc --- /dev/null +++ b/scss/modules/_link-gallery.sm.scss @@ -0,0 +1,4 @@ +.link-gallery { + --gallery-item-column-span: 3; +} + diff --git a/scss/modules/_link-gallery.xs.scss b/scss/modules/_link-gallery.xs.scss index 805073d..9bfc8d6 100644 --- a/scss/modules/_link-gallery.xs.scss +++ b/scss/modules/_link-gallery.xs.scss @@ -7,6 +7,10 @@ --gallery-item-column-span: 2; --gallery-row-title-height: 11ex; text-align: center; + + img { + max-width: 100%; + } } .link-gallery__title { -- cgit v1.2.3 From 85ee3a64d521a85a7aa2e655bb3a6d3368502372 Mon Sep 17 00:00:00 2001 From: Joe Carstairs Date: Fri, 26 Jan 2024 15:46:10 +0000 Subject: Adds .link-gallery--splash-first variant --- scss/modules/_link-gallery.scss | 67 +++++++++++++++++++++++++++----------- scss/modules/_link-gallery.xs.scss | 51 ++++++++++++++++++++--------- 2 files changed, 84 insertions(+), 34 deletions(-) diff --git a/scss/modules/_link-gallery.scss b/scss/modules/_link-gallery.scss index a7b7090..0f0c187 100644 --- a/scss/modules/_link-gallery.scss +++ b/scss/modules/_link-gallery.scss @@ -1,19 +1,37 @@ .link-gallery { - display: grid; - grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width)); - gap: var(--grid-gutter-width); padding-block: var(--spacing-block-md); + --gallery-item-column-span: 1; --gallery-row-image-height: 12rem; --gallery-row-title-height: fit-content; - text-align: center; - li { - list-style-type: none; - grid-column: span var(--gallery-item-column-span); + &:not(.link-gallery--splash-first) { + display: grid; + grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width)); + gap: var(--grid-gutter-width); + + li { + list-style-type: none; + grid-column: span var(--gallery-item-column-span); + + :is(&.link-gallery__container, & .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(--spacing-block-sm); + } + + .link-gallery__title { + width: 100%; + height: min-content; + text-align: center; + margin-inline: var(--spacing-inline-xs); + } + } } img { + display: block; max-width: 50%; max-height: 100%; height: fit-content; @@ -22,22 +40,33 @@ } } -.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(--spacing-block-sm); -} - .link-gallery--furthsettins img { box-sizing: border-box; border-radius: 50%; border: solid var(--border-width) var(--text-color); } -.link-gallery__title { - width: 100%; - height: min-content; - text-align: center; - margin-inline: var(--spacing-inline-xs); +.link-gallery--splash-first { + .link-gallery__container { + display: block; + width: fit-content; + } + + li:first-of-type { + list-style-type: none; + + :is(&.link-gallery__container, & .link-gallery__container) { + width: 100%; + } + + .link-gallery__title { + text-align: center; + } + } + + li + li { + margin-block-start: var(--spacing-block-lg); + margin-inline-start: 1em; + } } + diff --git a/scss/modules/_link-gallery.xs.scss b/scss/modules/_link-gallery.xs.scss index 9bfc8d6..a8f48ac 100644 --- a/scss/modules/_link-gallery.xs.scss +++ b/scss/modules/_link-gallery.xs.scss @@ -1,25 +1,46 @@ .link-gallery { - grid-auto-rows: calc( - var(--gallery-row-image-height) + - var(--spacing-block-sm) + - var(--gallery-row-title-height) - ); --gallery-item-column-span: 2; --gallery-row-title-height: 11ex; - text-align: center; + + &:not(.link-gallery--splash-first) { + grid-auto-rows: calc( + var(--gallery-row-image-height) + + var(--spacing-block-sm) + + var(--gallery-row-title-height) + ); + + .link-gallery__title { + width: 100%; + height: 9.9ex; + height: 3lh; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + } + } img { max-width: 100%; } } -.link-gallery__title { - width: 100%; - height: 9.9ex; - height: 3lh; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; +.link-gallery--splash-first li:first-of-type { + :is(&.link-gallery__container, & .link-gallery__container) { + display: grid; + grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width)); + gap: var(--grid-gutter-width); + } + + img { + grid-column: span 2; + } + + .link-gallery__title { + grid-column: span calc(var(--grid-prose-column-count) - 2); + align-self: center; + text-align: start; + } } + -- cgit v1.2.3 From 87a291cc6b79610cc48e804fb94e6ab558a05528 Mon Sep 17 00:00:00 2001 From: Joe Carstairs Date: Fri, 26 Jan 2024 15:46:42 +0000 Subject: Lallans gallery splashes most recent issue only --- src/components/LallansIssuesGallery.astro | 26 ++++++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/src/components/LallansIssuesGallery.astro b/src/components/LallansIssuesGallery.astro index 3e79de9..f4c8e16 100644 --- a/src/components/LallansIssuesGallery.astro +++ b/src/components/LallansIssuesGallery.astro @@ -10,19 +10,37 @@ const issues = (await getAllLallansIssues()).sort(issueNumberDescending); function issueNumberDescending(issue1: LallansIssue, issue2: LallansIssue) { return issue2.issueNumber - issue1.issueNumber; } + +const mostRecentIssue = issues[0]; +const allOtherIssues = issues.slice(1); --- -