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

basic marquee roller done

Browse source
This commit is contained in:
Xanazf 2024-10-29 01:42:25 +02:00
parent f5edced908
commit a417b18c94
Signed by: Xanazf
GPG key ID: 4E4A5AD1FB748427
5 changed files with 213 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
src/components/marquee/Marquee.astro Normal file
View file

@ -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>

4
src/layouts/BaseLayout.astro
View file

@ -1,5 +1,5 @@
--- ---
import Header from "@components/Header.astro"; //import Header from "@components/Header.astro";
import Footer from "@src/components/Footer.astro"; import Footer from "@src/components/Footer.astro";
import Head from "@config/Head.astro"; import Head from "@config/Head.astro";
import PreTheme from "@config/PreTheme.astro"; import PreTheme from "@config/PreTheme.astro";
@ -18,7 +18,7 @@ const { title, description } = Astro.props;
<PreTheme /> <PreTheme />
</head> </head>
<body class="baselayout"> <body class="baselayout">
<Header /> <!--<Header />-->
<slot /> <slot />
<Footer /> <Footer />
</body> </body>

10
src/pages/index.astro
View file

@ -1,14 +1,20 @@
--- ---
import BaseLayout from "@layouts/BaseLayout.astro"; import BaseLayout from "@layouts/BaseLayout.astro";
import Marquee from "@components/marquee/Marquee.astro";
const title = "Quickshell"; const title = "Quickshell";
const subtitle = "A framework for building fully custom";
--- ---
<BaseLayout title={title} description="A fully user customizable desktop shell" image="/quickshell.png"> <BaseLayout title={title} description="A fully user customizable desktop shell" image="/quickshell.png">
<div class="main-page_hero" data-pagefind-ignore> <div class="main-page_hero" data-pagefind-ignore>
<h1>Quick<em>shell</em></h1> <h1>Quick<em>shell</em></h1>
<section class="main-page_hero-text"> <section class="main-page_hero-text">
<h2>A fully <em class="green">user-customizable</em> desktop <em class="navy">shell</em></h2> <h2>{subtitle}</h2>
<h3>Based on <em class="green">QtQuick</em></h3> </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>
<section class="main-page_links"> <section class="main-page_links">
<a href="/docs/configuration" class="main-page_link-card"> <a href="/docs/configuration" class="main-page_link-card">

10
src/styles/global.css
View file

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

160
src/styles/main-page.css
View file

@ -1,34 +1,16 @@
.main-page_hero { .main-page_hero {
position: relative; position: relative;
margin-block: 5rem; margin-block: 1.618rem;
margin-inline: 0.612rem; margin-inline: 0.612rem;
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: flex-start;
align-items: center; align-items: center;
& h1 { & h1 {
position: relative; position: relative;
font-size: 2.618rem; font-size: 4.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;
}
} }
& em { & em {
@ -55,29 +37,105 @@
flex-direction: column; flex-direction: column;
font-size: 2rem; font-size: 2rem;
letter-spacing: 0.018rem; letter-spacing: 0.018rem;
margin-bottom: 1.117rem; margin-bottom: 0.117rem;
& em {
all: unset;
&:first-child {
color: hsl(var(--accent-400));
}
&:last-child {
color: hsl(var(--blue) 66 60);
}
}
} }
}
& h3 { .marquee-buttons {
font-size: 1.5rem; display: flex;
letter-spacing: 0.015rem; gap: 3rem;
color: hsla(var(--secondary-400) / 0.8); font-size: 1.874rem;
margin-bottom: 1.5rem; 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 { .main-page_links {
position: relative; position: relative;
display: flex; display: flex;
@ -118,12 +176,10 @@
&:nth-child(1), &:nth-child(1),
&:nth-child(2) { &:nth-child(2) {
&::before { &::before {
background: linear-gradient( background: linear-gradient(115deg,
115deg, hsla(var(--green) 20 15 / 0.7) 25%,
hsla(var(--green) 20 15 / 0.7) 25%, hsla(var(--green) 25 25 / 0.8) 50%,
hsla(var(--green) 25 25 / 0.8) 50%, hsla(var(--green) 60 60 / 0.6) 80%);
hsla(var(--green) 60 60 / 0.6) 80%
);
} }
&:hover { &:hover {
@ -138,12 +194,10 @@
&:nth-child(3), &:nth-child(3),
&:nth-child(4) { &:nth-child(4) {
&::before { &::before {
background: linear-gradient( background: linear-gradient(115deg,
115deg, hsla(var(--blue) 10 15 / 0.7) 25%,
hsla(var(--blue) 10 15 / 0.7) 25%, hsla(var(--blue) 15 25 / 0.8) 50%,
hsla(var(--blue) 15 25 / 0.8) 50%, hsla(var(--blue) 60 60 / 0.6) 80%);
hsla(var(--blue) 60 60 / 0.6) 80%
);
} }
&:hover { &:hover {
@ -165,10 +219,6 @@
} }
@media (min-width: 65rem) { @media (min-width: 65rem) {
.main-page_hero {
margin: 0;
}
.main-page_hero-text { .main-page_hero-text {
text-align: end; text-align: end;