quickshell/quickshell-web
3
1
Fork 0
Code Issues Projects Activity

restyle homepage showcase

Browse source
This commit is contained in:
outfoxxed 2024-10-30 16:20:04 -07:00
parent 77ab369187
commit 905c91ad80
Signed by: outfoxxed
GPG key ID: 4C88A185FB89301E
4 changed files with 54 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/components/marquee/Marquee.astro
View file

@ -1,4 +1,5 @@
---
import { Icon } from "astro-icon/components";
function placeholders() {
const word = "placeholder";
@ -19,10 +20,19 @@ const ph = placeholders();
<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 class="marquee-scroll">
<div id="marquee-scroll-left" class="marquee-scroll-arrow">
<div><Icon name="caret-left"/></div>
</div>
<div class="marquee-item-spacing"/>
<div id="marquee-scroll-right" class="marquee-scroll-arrow">
<div><Icon name="caret-right"/></div>
</div>
</div>
<div id="marquee-content" class="marquee-content" data-scroll="0">
{ph.map(item => <div class="marquee-item">{item}</div>)}
{ph.map(item => <div class="marquee-item">
<div class="marquee-item-spacing marquee-item-content">{item}</div>
</div>)}
</div>
</div>
@ -32,11 +42,6 @@ const ph = placeholders();
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")!;