diff options
| author | Joe Carstairs <118172583+jcarstairs-scottlogic@users.noreply.github.com> | 2024-01-26 16:27:34 +0000 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-01-26 16:27:34 +0000 |
| commit | 08a61f7bcbbb140863b0f2c3523929bfe4076d9f (patch) | |
| tree | 156ad5aec39a4c1496ff24d083155a79aa8e6e45 /scss/modules/_link-gallery.xs.scss | |
| parent | 64c5ee53a0d158b38caff3285dac008826d7ae88 (diff) | |
| parent | 9b41ae7410058dbe0d0d2b8d276d96a1fe6f48e1 (diff) | |
Merge pull request #72 from joeacarstairs/deployment-staging
Update from staging
Diffstat (limited to 'scss/modules/_link-gallery.xs.scss')
| -rw-r--r-- | scss/modules/_link-gallery.xs.scss | 55 |
1 files changed, 40 insertions, 15 deletions
diff --git a/scss/modules/_link-gallery.xs.scss b/scss/modules/_link-gallery.xs.scss index 805073d..a8f48ac 100644 --- a/scss/modules/_link-gallery.xs.scss +++ b/scss/modules/_link-gallery.xs.scss @@ -1,21 +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; + } } + |