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

main page fixes and styling

Browse source
This commit is contained in:
Xanazf 2024-10-13 16:37:48 +03:00
parent d42b26f0b6
commit 2d68d8b526
Signed by: Xanazf
GPG key ID: 4E4A5AD1FB748427
3 changed files with 75 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/layouts/BaseLayout.astro
View file

@ -24,7 +24,6 @@ const { title, description } = Astro.props;
</head> </head>
<body class="baselayout"> <body class="baselayout">
<Header /> <Header />
<h1>{title}</h1>
<slot /> <slot />
<Footer /> <Footer />
</body> </body>

9
src/pages/index.astro
View file

@ -1,11 +1,14 @@
--- ---
import BaseLayout from "@layouts/BaseLayout.astro"; import BaseLayout from "@layouts/BaseLayout.astro";
const title = "Quickshell";
--- ---
<BaseLayout title="Quickshell" 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>
<section class="main-page_hero-text"> <section class="main-page_hero-text">
<h2>A fully <em>user-customizable</em> desktop <em>shell</em></h2> <h2>A fully <em class="green">user-customizable</em> desktop <em class="navy">shell</em></h2>
<h3>Based on QtQuick</h3> <h3>Based on <em class="green">QtQuick</em></h3>
</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">

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

@ -1,32 +1,72 @@
.main-page_hero { .main-page_hero {
position: relative; position: relative;
margin-block: 9rem 4rem;
width: 100%;
height: 100%; height: 100%;
margin-block: 5rem;
margin-inline: 0.612rem;
min-height: calc(100svh - 3.5rem);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; 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;
}
}
& em {
font-style: normal;
}
& .navy {
color: hsl(var(--blue) 66 60);
}
& .green {
color: hsl(var(--accent-400));
}
} }
.main-page_hero-text { .main-page_hero-text {
color: hsl(var(--secondary-400)); color: hsl(var(--secondary-400));
text-align: center;
text-wrap: balance;
margin-block: 0.618rem;
& h2 { & h2 {
display: flex;
flex-direction: column;
font-size: 2rem; font-size: 2rem;
letter-spacing: 0.018rem; letter-spacing: 0.018rem;
margin-bottom: 1.117rem; margin-bottom: 1.117rem;
text-wrap: pretty;
& em { & em {
all: unset; all: unset;
&:first-child { &:first-child {
color: hsl(var(--blue) 66 60); color: hsl(var(--accent-400));
} }
&:last-child { &:last-child {
color: hsl(var(--accent-400)); color: hsl(var(--blue) 66 60);
} }
} }
} }
@ -79,10 +119,12 @@
&:nth-child(1), &:nth-child(1),
&:nth-child(2) { &:nth-child(2) {
&::before { &::before {
background: linear-gradient(115deg, background: linear-gradient(
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 {
@ -97,10 +139,12 @@
&:nth-child(3), &:nth-child(3),
&:nth-child(4) { &:nth-child(4) {
&::before { &::before {
background: linear-gradient(115deg, background: linear-gradient(
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 {
@ -117,9 +161,21 @@
} }
} }
.baselayout footer {
bottom: 0;
}
@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;
& h2 {
display: block;
}
} }
.main-page_links { .main-page_links {