diff --git a/src/components/marquee/Marquee.astro b/src/components/marquee/Marquee.astro
new file mode 100644
index 0000000..e78afde
--- /dev/null
+++ 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();
+---
+
+
+
+
+
+
+
left
+
right
+
+ {ph.map(item =>
{item}
)}
+
+
+
+
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 8ce9586..40f5b9e 100644
--- 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;
-
+
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c1e0e6e..891d4ac 100644
--- 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";
---
Quickshell
- A fully user-customizable desktop shell
- Based on QtQuick
+ {subtitle}
+
+
+
diff --git a/src/styles/global.css b/src/styles/global.css
index 6ff1e60..1064165 100644
--- 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;
}
diff --git a/src/styles/main-page.css b/src/styles/main-page.css
index 1d25b2e..eb79e5a 100644
--- 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;