clean up carousel HTML/styling a bit

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 {