basic marquee roller done

2024-10-29 01:42:25 +02:00 · 2024-10-29 01:42:25 +02:00 · a417b18c94
parent f5edced908
commit a417b18c94
5 changed files with 213 additions and 64 deletions
--- a/src/components/marquee/Marquee.astro
+++ b/src/components/marquee/Marquee.astro
@ -0,0 +1,93 @@
+---
+
+function placeholders() {
+  const word = "placeholder";
+  let str: string;
+  const arr: string[] = [];
+  for (let i = 0; i < 10; i++) {
+    str = `${word}-${i}`;
+    arr.push(str);
+  }
+  return arr;
+}
+
+const ph = placeholders();
+---
+<div class="marquee-buttons">
+  <button id="button-widget" class="marquee-button marquee-button-widget">widgets</button>
+  <button id="button-panel" class="marquee-button marquee-button-panel">panels</button>
+  <button id="button-overlay" class="marquee-button marquee-button-overlay">overlays</button>
+</div>
+<div class="marquee">
+  <div id="marquee-scroll-left" class="marquee-scroll marquee-scroll-left">left</div>
+  <div id="marquee-scroll-right" class="marquee-scroll marquee-scroll-right">right</div>
+  <div id="marquee-content" class="marquee-content" data-scroll="0">
+    {ph.map(item => <div class="marquee-item">{item}</div>)}
+  </div>
+</div>
+
+<script>
+  // marquee
+  // const dataNum = 10 // number of elements
+  const marquee = document.getElementById("marquee-content")!;
+  marquee.style.setProperty("--scroll", "0")
+
+  // go-to buttons
+  const buttonWidget = document.getElementById("button-widget")!;
+  const buttonPanel = document.getElementById("button-panel")!;
+  const buttonOverlay = document.getElementById("button-overlay")!;
+
+  // left-right buttons
+  const scrollLeft = document.getElementById("marquee-scroll-left")!;
+  const scrollRight = document.getElementById("marquee-scroll-right")!;
+
+  scrollLeft.addEventListener("mousedown", () => {
+    const dataScroll = marquee.getAttribute("data-scroll")!;
+    const hashMap = {
+      "0": () => {
+        const scrollToLast = "-900%" // dataNum
+        marquee.setAttribute("data-scroll", scrollToLast);
+      },
+      "lt0": () => {
+        const oldDataScroll = marquee.getAttribute("data-scroll")!.slice(1, -1);
+        const oldNumScroll = Number(oldDataScroll)
+        const newScroll = oldNumScroll - 100;
+        newScroll <= 900 && newScroll > 0 ?
+          marquee.setAttribute("data-scroll",`-${newScroll.toString()}%`)
+          : marquee.setAttribute("data-scroll", "0")
+      }
+    }
+
+    hashMap[dataScroll === "0" ?
+      "0"
+      : "lt0"
+    ]()
+    const updatedScroll = marquee.getAttribute("data-scroll")!;
+    marquee.style.setProperty("--scroll", updatedScroll)
+  })
+
+  scrollRight.addEventListener("mousedown", () => {
+    const dataScroll = marquee.getAttribute("data-scroll")!;
+    const hashMap = {
+      "900": () => { // dataNum
+        const scrollToFirst = "0";
+        marquee.setAttribute("data-scroll", scrollToFirst);
+      },
+      "mt0": () => {
+        const oldDataScroll = marquee.getAttribute("data-scroll")!.slice(1, -1);
+        const oldNumScroll = Number(oldDataScroll)
+        const newScroll = oldNumScroll + 100;
+        newScroll <= 900 && newScroll < 1000 ?
+          marquee.setAttribute("data-scroll",`-${newScroll.toString()}%`)
+          : marquee.setAttribute("data-scroll", "0")
+      }
+    }
+
+    hashMap[dataScroll === "900" ?
+      "900"
+      : "mt0"
+    ]()
+    const updatedScroll = marquee.getAttribute("data-scroll")!;
+    marquee.style.setProperty("--scroll", updatedScroll)
+  })
+</script>
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@ -1,5 +1,5 @@
 ---
-import Header from "@components/Header.astro";
+//import Header from "@components/Header.astro";
 import Footer from "@src/components/Footer.astro";
 import Head from "@config/Head.astro";
 import PreTheme from "@config/PreTheme.astro";
@ -18,7 +18,7 @@ const { title, description } = Astro.props;
    <PreTheme />
  </head>
  <body class="baselayout">
-    <Header />
+    <!--<Header />-->
    <slot />
    <Footer />
  </body>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@ -1,14 +1,20 @@
 ---
 import BaseLayout from "@layouts/BaseLayout.astro";
+import Marquee from "@components/marquee/Marquee.astro";

 const title = "Quickshell";
+const subtitle = "A framework for building fully custom";
 ---
 <BaseLayout title={title} description="A fully user customizable desktop shell" image="/quickshell.png">
  <div class="main-page_hero" data-pagefind-ignore>
    <h1>Quick<em>shell</em></h1>
    <section class="main-page_hero-text">
-      <h2>A fully <em class="green">user-customizable</em> desktop <em class="navy">shell</em></h2>
-      <h3>Based on <em class="green">QtQuick</em></h3>
+      <h2>{subtitle}</h2>
+    </section>
+    <Marquee/>
+    <section class="call-buttons">
+      <span class="call-button call-install"><a href="/docs/intro">Install</a></span>
+      <span class="call-button call-get-started"><a href="/docs/intro">Get Started</a></span>
    </section>
    <section class="main-page_links">
      <a href="/docs/configuration" class="main-page_link-card">
--- a/src/styles/global.css
+++ b/src/styles/global.css
@ -37,11 +37,6 @@ a {
  }
 }

-[id] {
-  /*offset for header*/
-  scroll-margin-top: 4rem;
-}
-
 html.dark {
  & .header {
    background-color: hsl(var(--secondary-900));
@ -60,6 +55,11 @@ html.dark {
  all: unset;
 }

+[id] {
+  /*offset for header*/
+  scroll-margin-top: 4rem;
+}
+
 body {
  overflow: auto;
 }
--- a/src/styles/main-page.css
+++ b/src/styles/main-page.css
@ -1,34 +1,16 @@
 .main-page_hero {
  position: relative;
-  margin-block: 5rem;
+  margin-block: 1.618rem;
  margin-inline: 0.612rem;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
-  justify-content: center;
+  justify-content: flex-start;
  align-items: center;

  & h1 {
    position: relative;
-    font-size: 2.618rem;
-
-    &::before {
-      content: "Quick";
-      position: absolute;
-      color: hsl(var(--accent-400));
-      inset: 0;
-      filter: blur(1rem);
-      text-shadow: 0 0 3px white;
-    }
-
-    & em::before {
-      content: "shell";
-      position: absolute;
-      inset: 0;
-      color: hsl(var(--blue) 66 60);
-      filter: blur(1rem);
-      text-shadow: 0 0 3px white;
-    }
+    font-size: 4.618rem;
  }

  & em {
@ -55,29 +37,105 @@
    flex-direction: column;
    font-size: 2rem;
    letter-spacing: 0.018rem;
-    margin-bottom: 1.117rem;
-
-    & em {
-      all: unset;
-
-      &:first-child {
-        color: hsl(var(--accent-400));
-      }
-
-      &:last-child {
-        color: hsl(var(--blue) 66 60);
-      }
-    }
+    margin-bottom: 0.117rem;
  }
+}

-  & h3 {
-    font-size: 1.5rem;
-    letter-spacing: 0.015rem;
-    color: hsla(var(--secondary-400) / 0.8);
-    margin-bottom: 1.5rem;
+.marquee-buttons {
+  display: flex;
+  gap: 3rem;
+  font-size: 1.874rem;
+  font-weight: 600;
+}
+
+.marquee-button {
+  all: unset;
+  position: relative;
+  color: hsl(var(--accent-400));
+
+  &::before {
+    content: "";
+    position: absolute;
+    bottom: 3px;
+    left: 2px;
+    right: 2px;
+    height: 3px;
+    background-color: hsla(var(--accent-400) / 0.3);
+    z-index: -1;
  }
 }

+.marquee {
+  position: relative;
+  width: 80%;
+  aspect-ratio: 19 / 10;
+  background-color: hsla(var(--blue) 66 60 / 0.4);
+  margin-block: 1.817rem;
+  border-radius: 8px;
+}
+
+.marquee-content {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: inherit;
+  display: flex;
+}
+
+.marquee-item {
+  flex: 1 0 100%;
+  height: 100%;
+  border: 1px solid red;
+  border-radius: inherit;
+  transition: transform 0.3s linear;
+  transform: translateX(var(--scroll));
+}
+
+.marquee-scroll {
+  position: absolute;
+  width: 3rem;
+  height: 100%;
+  background-color: hsla(0 0 100 / 0.1);
+  border: 1px solid white;
+  border-radius: 8px;
+  opacity: 0.3;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: background-color 0.3s, opacity 0.3s;
+  z-index: 10;
+  user-select: none;
+
+  &:hover {
+    cursor: pointer;
+    opacity: 0.7;
+    background-color: hsla(0 0 100 / 0.2);
+  }
+}
+
+.marquee-scroll-left {
+  left: -3.117rem;
+}
+
+.marquee-scroll-right {
+  right: -3.117rem;
+}
+
+.call-buttons {
+  margin-bottom: 1.618rem;
+  display: flex;
+  gap: 3rem;
+}
+
+.call-button {
+  width: 15rem;
+  font-size: 1.874rem;
+  font-weight: 600;
+  border: 1px solid hsl(var(--accent-400));
+  border-radius: 4px;
+  text-align: center;
+}
+
 .main-page_links {
  position: relative;
  display: flex;
@ -118,12 +176,10 @@
  &:nth-child(1),
  &:nth-child(2) {
    &::before {
-      background: linear-gradient(
-        115deg,
-        hsla(var(--green) 20 15 / 0.7) 25%,
-        hsla(var(--green) 25 25 / 0.8) 50%,
-        hsla(var(--green) 60 60 / 0.6) 80%
-      );
+      background: linear-gradient(115deg,
+          hsla(var(--green) 20 15 / 0.7) 25%,
+          hsla(var(--green) 25 25 / 0.8) 50%,
+          hsla(var(--green) 60 60 / 0.6) 80%);
    }

    &:hover {
@ -138,12 +194,10 @@
  &:nth-child(3),
  &:nth-child(4) {
    &::before {
-      background: linear-gradient(
-        115deg,
-        hsla(var(--blue) 10 15 / 0.7) 25%,
-        hsla(var(--blue) 15 25 / 0.8) 50%,
-        hsla(var(--blue) 60 60 / 0.6) 80%
-      );
+      background: linear-gradient(115deg,
+          hsla(var(--blue) 10 15 / 0.7) 25%,
+          hsla(var(--blue) 15 25 / 0.8) 50%,
+          hsla(var(--blue) 60 60 / 0.6) 80%);
    }

    &:hover {
@ -165,10 +219,6 @@
 }

@media (min-width: 65rem) {
-  .main-page_hero {
-    margin: 0;
-  }
-
  .main-page_hero-text {
    text-align: end;