montage -> carousel

5 files changed, 160 insertions, 168 deletions

diff --git a/src/data/things/homepage-layout.js b/src/data/things/homepage-layout.js
index 32b8cf2..344716c 100644
--- a/src/data/things/homepage-layout.js
+++ b/src/data/things/homepage-layout.js
@@ -89,7 +89,7 @@ export class HomepageLayoutAlbumsRow extends HomepageLayoutRow {
       flags: {update: true, expose: true},
 
       update: {
-        validate: validateFromConstants('grid', 'montage'),
+        validate: validateFromConstants('grid', 'carousel'),
       },
 
       expose: {
diff --git a/src/misc-templates.js b/src/misc-templates.js
index 253d5b4..7887dcb 100644
--- a/src/misc-templates.js
+++ b/src/misc-templates.js
@@ -640,9 +640,9 @@ function unbound_getFlashGridHTML({
   });
 }
 
-// Montage reels
+// Carousel reels
 
-function unbound_getMontageHTML({
+function unbound_getCarouselHTML({
   html,
   img,
 
@@ -653,18 +653,18 @@ function unbound_getMontageHTML({
   linkFn = (x, {text}) => text,
   srcFn,
 }) {
-  return (x => x)(html.tag('div', {class: 'montage-container'},
+  return (x => x)(html.tag('div', {class: 'carousel-container'},
     repeat(3,
       html.tag('div',
         {
-          class: 'montage-grid',
+          class: 'carousel-grid',
           'aria-hidden': 'true',
         },
         items
           .filter(item => srcFn(item))
           .filter(item => item.artTags.every(tag => !tag.isContentWarning))
           .map((item, i) =>
-            html.tag('div', {class: 'montage-item'},
+            html.tag('div', {class: 'carousel-item'},
               linkFn(item, {
                 attributes: {
                   tabindex: '-1',
@@ -878,7 +878,7 @@ export {
   unbound_getAlbumGridHTML as getAlbumGridHTML,
   unbound_getFlashGridHTML as getFlashGridHTML,
 
-  unbound_getMontageHTML as getMontageHTML,
+  unbound_getCarouselHTML as getCarouselHTML,
 
   unbound_generateInfoGalleryLinks as generateInfoGalleryLinks,
   unbound_generateNavigationLinks as generateNavigationLinks,
diff --git a/src/page/homepage.js b/src/page/homepage.js
index 703c78f..67b2c64 100644
--- a/src/page/homepage.js
+++ b/src/page/homepage.js
@@ -60,8 +60,8 @@ export function writeTargetless({wikiData}) {
     page: ({
       getAlbumGridHTML,
       getAlbumCover,
+      getCarouselHTML,
       getLinkThemeString,
-      getMontageHTML,
       html,
       language,
       link,
@@ -114,8 +114,8 @@ export function writeTargetless({wikiData}) {
 
                   ...html.fragment(
                     entry.type === 'albums' &&
-                    entry.displayStyle === 'montage' && [
-                      getMontageHTML({
+                    entry.displayStyle === 'carousel' && [
+                      getCarouselHTML({
                         items: entry.entries.map(e => e.item),
                         lazy: i > 0,
                         srcFn: getAlbumCover,
diff --git a/src/static/site2.css b/src/static/site2.css
index d699f24..fe90d4d 100644
--- a/src/static/site2.css
+++ b/src/static/site2.css
@@ -189,131 +189,6 @@ body::before {
   margin: 5px 12%;
 }
 
-/* Layout - Wide (most computers) */
-
-@media (min-width: 900px) {
-  #secondary-nav:not(.no-hide) {
-    display: none;
-  }
-}
-
-/* Layout - Medium (tablets, some landscape mobiles)
- *
- * Note: Rules defined here are exclusive to "medium" width, i.e. they don't
- * additionally apply to "thin". Use the later section which applies to both
- * if so desired.
- */
-
-@media (min-width: 600px) and (max-width: 899.98px) {
-}
-
-/* Layout - Wide or Medium */
-
-@media (min-width: 600px) {
-  .content-sticky-heading-container {
-    /* Safari doesn't always play nicely with position: sticky,
-     * this seems to fix images sometimes displaying above the
-     * position: absolute subheading (h2) child
-     *
-     * See also: https://stackoverflow.com/questions/50224855/
-     */
-    transform: translate3d(0, 0, 0);
-    z-index: 1;
-  }
-
-  /* Cover art floats to the right. It's positioned in HTML beneath the
-   * heading, so pull it up a little to "float" on top.
-   */
-  #cover-art-container {
-    float: right;
-    width: 40%;
-    max-width: 400px;
-    margin: -60px 0 10px 10px;
-
-    position: relative;
-    z-index: 2;
-  }
-
-  .layout-columns.has-one-sidebar .grid-listing {
-    grid-template-columns: repeat(12, 1fr);
-  }
-
-  .layout-columns.has-one-sidebar .grid-listing > .grid-item:not(:nth-child(n+7)) {
-    grid-column: span 4;
-  }
-
-  .layout-columns.has-one-sidebar .grid-listing > .grid-item:nth-child(n+7) {
-    grid-column: span 3;
-  }
-
-  .layout-columns.has-zero-sidebars .grid-listing {
-    grid-template-columns: repeat(20, 1fr);
-  }
-
-  .layout-columns.has-zero-sidebars .grid-listing > .grid-item:not(:nth-child(n+9)) {
-    grid-column: span 5;
-  }
-
-  .layout-columns.has-zero-sidebars .grid-listing > .grid-item:nth-child(n+9) {
-    grid-column: span 4;
-  }
-}
-
-/* Layout - Medium or Thin */
-
-@media (max-width: 899.98px) {
-  .sidebar-column:not(.no-hide) {
-    display: none;
-  }
-
-  #secondary-nav {
-    display: block;
-  }
-
-  .layout-columns.vertical-when-thin {
-    flex-direction: column;
-  }
-
-  .layout-columns.vertical-when-thin > *:not(:last-child) {
-    margin-bottom: 10px;
-  }
-
-  .sidebar-column.no-hide {
-    max-width: unset !important;
-    flex-basis: unset !important;
-    margin-right: 0 !important;
-    margin-left: 0 !important;
-  }
-
-  .sidebar .news-entry:not(.first-news-entry) {
-    display: none;
-  }
-}
-
-/* Layout - Thin (phones) */
-
-@media (max-width: 600px) {
-  .content-columns {
-    columns: 1;
-  }
-
-  #cover-art-container {
-    margin: 25px 0 5px 0;
-    width: 100%;
-    max-width: unset;
-  }
-
-  /* Disable grid features, just line header children up vertically */
-
-  #header {
-    display: block;
-  }
-
-  #header > div:not(:first-child) {
-    margin-top: 0.5em;
-  }
-}
-
 /* Design & Appearance - Layout elements */
 
 body {
@@ -667,6 +542,11 @@ h1 {
   font-size: 2em;
 }
 
+html[data-url-key="localized.home"] #content h1 {
+  text-align: center;
+  font-size: 2.5em;
+}
+
 #content.flash-index h2 {
   text-align: center;
   font-size: 2.5em;
@@ -896,16 +776,11 @@ img {
 /* Grid listings */
 
 .grid-listing {
-  /*
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: flex-start;
-  */
-
-  display: grid;
-  padding: 15px;
-  grid-gap: 30px;
+  padding: 5px 15px;
 }
 
 .grid-item {
@@ -919,6 +794,7 @@ img {
   border: 1px dotted var(--primary-color);
   border-radius: 2px;
   padding: 5px;
+  margin: 10px;
 }
 
 .grid-item img {
@@ -958,11 +834,11 @@ img {
 }
 
 .grid-listing > .grid-item {
-  flex: 1 1 26%;
+  flex: 1 25%;
+  max-width: 200px;
 }
 
 .grid-actions {
-  grid-column: span 12;
   display: flex;
   flex-direction: row;
   margin: 15px;
@@ -979,16 +855,16 @@ img {
   --dim-color: inherit !important;
 }
 
-/* Montage */
+/* Carousel */
 
-.montage-container {
+.carousel-container {
   position: relative;
   overflow: hidden;
   margin: 20px 0 5px 0;
   padding: 8px 0;
 }
 
-.montage-container::before {
+.carousel-container::before {
   content: "";
   position: absolute;
   top: 0;
@@ -1000,7 +876,7 @@ img {
   filter: brightness(0.6);
 }
 
-.montage-container::after {
+.carousel-container::after {
   content: "";
   pointer-events: none;
   position: absolute;
@@ -1016,27 +892,27 @@ img {
     inset -20px -2px 40px var(--shadow-color);
 }
 
-.montage-container:hover .montage-grid {
+.carousel-container:hover .carousel-grid {
   animation-play-state: running;
 }
 
-.montage-grid:nth-child(2),
-.montage-grid:nth-child(3) {
+.carousel-grid:nth-child(2),
+.carousel-grid:nth-child(3) {
   position: absolute;
   top: 8px;
   left: 0;
   right: 0;
 }
 
-.montage-grid:nth-child(2) {
-  animation-name: montage-marquee2;
+.carousel-grid:nth-child(2) {
+  animation-name: carousel-marquee2;
 }
 
-.montage-grid:nth-child(3) {
-  animation-name: montage-marquee3;
+.carousel-grid:nth-child(3) {
+  animation-name: carousel-marquee3;
 }
 
-@keyframes montage-marquee1 {
+@keyframes carousel-marquee1 {
   0% {
     transform: translateX(0%) translateX(-70px);
   }
@@ -1046,7 +922,7 @@ img {
   }
 }
 
-@keyframes montage-marquee2 {
+@keyframes carousel-marquee2 {
   0% {
     transform: translateX(100%) translateX(-70px);
   }
@@ -1056,7 +932,7 @@ img {
   }
 }
 
-@keyframes montage-marquee3 {
+@keyframes carousel-marquee3 {
   0% {
     transform: translateX(200%) translateX(-70px);
   }
@@ -1066,7 +942,7 @@ img {
   }
 }
 
-.montage-grid {
+.carousel-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
   grid-template-rows: repeat(2, auto);
@@ -1080,26 +956,26 @@ img {
   z-index: 1;
 
   transform: translateX(0);
-  animation: montage-marquee1 40s linear infinite;
+  animation: carousel-marquee1 40s linear infinite;
   animation-play-state: paused;
   z-index: 5;
-  filter: brightness(0.6);
 }
 
-.montage-item {
+.carousel-item {
   display: inline-block;
   margin: 0;
   flex: 1 1 150px;
   padding: 3px;
   border-radius: 10px;
+  filter: brightness(0.8);
 }
 
-.montage-item .image-container {
+.carousel-item .image-container {
   border: none;
   padding: 0;
 }
 
-.montage-item img {
+.carousel-item img {
   width: 100%;
   height: 100%;
   margin-top: auto;
@@ -1107,8 +983,8 @@ img {
   border-radius: 6px;
 }
 
-.montage-item:hover {
-  filter: brightness(1.2);
+.carousel-item:hover {
+  filter: brightness(1);
   background: var(--dim-color);
 }
 
@@ -1411,4 +1287,120 @@ html[data-language-code="preview-en"][data-url-key="localized.home"] #content
   font-family: cursive;
   display: block;
   content: "(Preview Build)";
+  font-size: 0.8em;
+}
+
+/* Layout - Wide (most computers) */
+
+@media (min-width: 900px) {
+  #secondary-nav:not(.no-hide) {
+    display: none;
+  }
+}
+
+/* Layout - Medium (tablets, some landscape mobiles)
+ *
+ * Note: Rules defined here are exclusive to "medium" width, i.e. they don't
+ * additionally apply to "thin". Use the later section which applies to both
+ * if so desired.
+ */
+
+@media (min-width: 600px) and (max-width: 899.98px) {
+}
+
+/* Layout - Wide or Medium */
+
+@media (min-width: 600px) {
+  .content-sticky-heading-container {
+    /* Safari doesn't always play nicely with position: sticky,
+     * this seems to fix images sometimes displaying above the
+     * position: absolute subheading (h2) child
+     *
+     * See also: https://stackoverflow.com/questions/50224855/
+     */
+    transform: translate3d(0, 0, 0);
+    z-index: 1;
+  }
+
+  /* Cover art floats to the right. It's positioned in HTML beneath the
+   * heading, so pull it up a little to "float" on top.
+   */
+  #cover-art-container {
+    float: right;
+    width: 40%;
+    max-width: 400px;
+    margin: -60px 0 10px 10px;
+
+    position: relative;
+    z-index: 2;
+  }
+
+  html[data-url-key="localized.home"] .layout-columns.has-one-sidebar .grid-listing > .grid-item:not(:nth-child(n+7)) {
+    flex-basis: 23%;
+    margin: 15px;
+  }
+
+  html[data-url-key="localized.home"] .layout-columns.has-one-sidebar .grid-listing > .grid-item:nth-child(n+7) {
+    flex-basis: 18%;
+    margin: 10px;
+  }
+}
+
+/* Layout - Medium or Thin */
+
+@media (max-width: 899.98px) {
+  .sidebar-column:not(.no-hide) {
+    display: none;
+  }
+
+  #secondary-nav {
+    display: block;
+  }
+
+  .layout-columns.vertical-when-thin {
+    flex-direction: column;
+  }
+
+  .layout-columns.vertical-when-thin > *:not(:last-child) {
+    margin-bottom: 10px;
+  }
+
+  .sidebar-column.no-hide {
+    max-width: unset !important;
+    flex-basis: unset !important;
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+  }
+
+  .sidebar .news-entry:not(.first-news-entry) {
+    display: none;
+  }
+
+  .grid-listing > .grid-item {
+    flex-basis: 40%;
+  }
+}
+
+/* Layout - Thin (phones) */
+
+@media (max-width: 600px) {
+  .content-columns {
+    columns: 1;
+  }
+
+  #cover-art-container {
+    margin: 25px 0 5px 0;
+    width: 100%;
+    max-width: unset;
+  }
+
+  /* Disable grid features, just line header children up vertically */
+
+  #header {
+    display: block;
+  }
+
+  #header > div:not(:first-child) {
+    margin-top: 0.5em;
+  }
 }
diff --git a/src/upd8.js b/src/upd8.js
index 9bf4a5b..d735026 100755
--- a/src/upd8.js
+++ b/src/upd8.js
@@ -89,7 +89,7 @@ import {
   getFlashGridHTML,
   getFooterLocalizationLinks,
   getGridHTML,
-  getMontageHTML,
+  getCarouselHTML,
   getRevealStringFromTags,
   getRevealStringFromWarnings,
   getThemeString as unbound_getThemeString,
@@ -147,7 +147,7 @@ import FileSizePreloader from './file-size-preloader.js';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
-const CACHEBUST = 15;
+const CACHEBUST = 16;
 
 let COMMIT;
 try {
@@ -2494,7 +2494,7 @@ async function main() {
           getGridHTML: bound.getGridHTML,
         });
 
-        bound.getMontageHTML = bindOpts(getMontageHTML, {
+        bound.getCarouselHTML = bindOpts(getCarouselHTML, {
           [bindOpts.bindIndex]: 0,
           img,
           html,