feat: better marquee and js-less theme switch

src/styles/components/marquee.css

@@ -30,29 +30,31 @@
   display: flex;
   width: 100%;
   margin-block: var(--xl);
-  justify-content: space-between;
-  align-items: center;
-  scroll-snap-type: x mandatory;
+  justify-content: flex-start;
+  align-items: flex-start;
+  overflow: hidden;
 }
 
 .marquee-content {
   height: 100%;
-  overflow: hidden;
   display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  margin: 0;
+  padding: 0;
   will-change: transform;
   transform: translateX(0);
 }
 
 .marquee-item {
   position: relative;
-  flex: 1 0 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
-  transition: left 0.3s var(--ease-in-out);
-  left: var(--scroll);
   gap: var(--md);
   padding-inline: 0.5rem;
+  box-sizing: border-box;
+  will-change: opacity;
 
   &>* {
     z-index: 11;
@@ -72,32 +74,37 @@
 
 .marquee-item-content {
   border-radius: var(--radius-sm);
+  will-change: transform;
 }
 
 .marquee-scroll {
   position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
   width: 100%;
   max-width: 85rem;
   height: 100%;
   display: flex;
   justify-content: space-between;
+  align-items: stretch;
   transition:
     background-color 0.3s,
     opacity 0.3s;
   z-index: 20;
   user-select: none;
-  align-items: stretch;
   pointer-events: none;
-  padding-inline: 1rem;
 }
 
 .marquee-scroll-arrow {
-  max-width: 8rem;
+  width: 8rem;
   font-size: 2rem;
   pointer-events: all;
   display: flex;
   flex-direction: column;
   justify-content: center;
+  align-items: center;
+  height: 100%;
 
   &>div {
     width: 2.5rem;
@@ -152,9 +159,5 @@
       border-radius: var(--radius-xs);
     }
   }
-
-  .marquee-scroll {
-    width: 92%;
-    left: 4%;
-  }
 }
+

src/styles/css-config/base.css

@@ -21,7 +21,7 @@ html {
   position: relative;
   margin: 0;
   padding: 0;
-  transition: all 0.3s var(--ease-in-out);
+  /* transition: all 0.15s var(--ease-in-out); */
 }
 
 body {

src/styles/css-config/colors.css

@@ -56,7 +56,7 @@
   --footer-bkg-border: var(--blue) 32% 84%;
 }
 
-html.dark {
+html:has(input#theme-manual-toggle:checked) {
   /* accent */
   --green: 141deg;
   --accent-400: var(--green) 100% 67%;