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
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>
<body class="baselayout">
<Header />
<h1>{title}</h1>
<slot />
<Footer />
</body>

9
src/pages/index.astro
View file

@ -1,11 +1,14 @@
---
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>
<h1>Quick<em>shell</em></h1>
<section class="main-page_hero-text">
<h2>A fully <em>user-customizable</em> desktop <em>shell</em></h2>
<h3>Based on QtQuick</h3>
<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>
</section>
<section class="main-page_links">
<a href="/docs/configuration" class="main-page_link-card">

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

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