diff options
-rw-r--r-- | src/misc-templates.js | 11 | ||||
-rw-r--r-- | src/static/site2.css | 34 | ||||
-rwxr-xr-x | src/upd8.js | 2 |
3 files changed, 27 insertions, 20 deletions
diff --git a/src/misc-templates.js b/src/misc-templates.js index f27074b5..7072e57f 100644 --- a/src/misc-templates.js +++ b/src/misc-templates.js @@ -706,13 +706,16 @@ function unbound_getCarouselHTML({ items = items.slice(0, maxCarouselLayoutItems + 1); - return (x => x)(html.tag('div', {class: 'carousel-container'}, + return html.tag('div', + { + class: 'carousel-container', + 'data-carousel-rows': rows, + 'data-carousel-columns': columns, + }, repeat(3, html.tag('div', { class: 'carousel-grid', - 'data-carousel-rows': rows, - 'data-carousel-columns': columns, 'aria-hidden': 'true', }, items @@ -732,7 +735,7 @@ function unbound_getCarouselHTML({ lazy: typeof lazy === 'number' ? i >= lazy : lazy, square: true, }), - }))))))); + })))))); } // Nav-bar links diff --git a/src/static/site2.css b/src/static/site2.css index c28ca192..b5ae3ef9 100644 --- a/src/static/site2.css +++ b/src/static/site2.css @@ -584,6 +584,10 @@ ul.quick-info li:not(:last-child)::after { font-weight: 800; } +.carousel-container + .quick-info { + margin-top: 25px; +} + #intro-menu { margin: 24px 0; padding: 10px; @@ -860,6 +864,10 @@ img { /* Carousel */ .carousel-container { + --carousel-tile-min-width: 120px; + --carousel-row-count: 3; + --carousel-column-count: 6; + position: relative; overflow: hidden; margin: 20px 0 5px 0; @@ -898,6 +906,17 @@ img { animation-play-state: running; } +html[data-url-key="localized.home"] .carousel-container { + --carousel-tile-size: 140px; +} + +.carousel-container[data-carousel-rows="1"] { --carousel-row-count: 1; } +.carousel-container[data-carousel-rows="2"] { --carousel-row-count: 2; } +.carousel-container[data-carousel-rows="3"] { --carousel-row-count: 3; } +.carousel-container[data-carousel-columns="4"] { --carousel-column-count: 4; } +.carousel-container[data-carousel-columns="5"] { --carousel-column-count: 5; } +.carousel-container[data-carousel-columns="6"] { --carousel-column-count: 6; } + .carousel-grid:nth-child(2), .carousel-grid:nth-child(3) { position: absolute; @@ -945,10 +964,6 @@ img { } .carousel-grid { - --carousel-tile-min-width: 120px; - --carousel-row-count: 3; - --carousel-column-count: 6; - /* Thanks to: https://css-tricks.com/an-auto-filling-css-grid-with-max-columns/ */ --carousel-gap-count: calc(var(--carousel-column-count) - 1); --carousel-total-gap-width: calc(var(--carousel-gap-count) * 10px); @@ -968,17 +983,6 @@ img { z-index: 5; } -html[data-url-key="localized.home"] .carousel-grid { - --carousel-tile-size: 140px; -} - -.carousel-grid[data-carousel-rows="1"] { --carousel-row-count: 1; } -.carousel-grid[data-carousel-rows="2"] { --carousel-row-count: 2; } -.carousel-grid[data-carousel-rows="3"] { --carousel-row-count: 3; } -.carousel-grid[data-carousel-columns="4"] { --carousel-column-count: 4; } -.carousel-grid[data-carousel-columns="5"] { --carousel-column-count: 5; } -.carousel-grid[data-carousel-columns="6"] { --carousel-column-count: 6; } - .carousel-item { display: inline-block; margin: 0; diff --git a/src/upd8.js b/src/upd8.js index 35ed7549..545e8375 100755 --- a/src/upd8.js +++ b/src/upd8.js @@ -147,7 +147,7 @@ import FileSizePreloader from './file-size-preloader.js'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); -const CACHEBUST = 16; +const CACHEBUST = 17; let COMMIT; try { |