diff options
| author | Joe Carstairs <118172583+jcarstairs-scottlogic@users.noreply.github.com> | 2024-01-26 16:18:15 +0000 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-01-26 16:18:15 +0000 |
| commit | 87cf8d81c2ac791eec5a621c1b1fc97d9f69168a (patch) | |
| tree | 156ad5aec39a4c1496ff24d083155a79aa8e6e45 /scss/modules/_link-gallery.xs.scss | |
| parent | fab184fe597c1c833cd0afee66387160f3029bdf (diff) | |
| parent | f478077f01603f35816d768b6c6057e93fa00d95 (diff) | |
Merge pull request #71 from joeacarstairs/fix-furthsettins-aspect-ratio
Various furthsettins improvements
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; + } } + |