« get me outta code hell

clean up carousel HTML/styling a bit - hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
path: root/src/static
diff options
context:
space:
mode:
author(quasar) nebula <qznebula@protonmail.com>2022-12-29 08:08:32 -0400
committer(quasar) nebula <qznebula@protonmail.com>2022-12-29 08:08:32 -0400
commitd634bcafffbbfee89a6a81dc7b667b97b7f7a467 (patch)
treed6a68033ad56b41dfc24657202bb2e4dada90507 /src/static
parentf09d71082b755a7ef652cf1c9eee5c27c9386701 (diff)
clean up carousel HTML/styling a bit
Diffstat (limited to 'src/static')
-rw-r--r--src/static/site2.css34
1 files changed, 19 insertions, 15 deletions
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;