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

revise button grid

Browse source
This commit is contained in:
outfoxxed 2025-06-08 05:50:28 -07:00
parent b608c936b3
commit bf3f86372e
Signed by: outfoxxed
GPG key ID: 4C88A185FB89301E
2 changed files with 50 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/pages/index.astro
View file

@ -13,23 +13,25 @@ const title = "Quickshell";
<h2>building blocks for your desktop</h2>
</section>
<Marquee/>
<section class="main-page_links">
<section class="main-page_links_set">
<section class="about">
<div class="about-txt">
<p>
Quickshell is a toolkit for building status bars, widgets, lockscreens,
and other desktop components using QtQuick. It can be used alongside your
wayland compositor or window manager to build a complete desktop environment.
<br class="about-break">
<br class="about-break">
<a href="/docs/about">More information</a>
</p>
</div>
<div class="about-buttons">
<a href="/docs/guide/install-setup" class="main-page_link-card">
<h3>Install</h3>
</a>
<a href="/docs/types" class="main-page_link-card">
<a href="/docs/types" class="main-page_link-card main-page_bluecard">
<h3>Documentation</h3>
</a>
</section>
<section class="main-page_links_set">
<a href="https://git.outfoxxed.me/quickshell/quickshell-examples" class="main-page_link-card main-page_bluecard">
<h3>Examples</h3>
</a>
<a href="https://git.outfoxxed.me/quickshell/quickshell" class="main-page_link-card main-page_bluecard">
<h3>Source Code</h3>
</a>
</section>
</div>
</section>
<section class="featurelist-section">
<FeatureList/>

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

@ -64,6 +64,27 @@ html.dark .main-page_hero-text {
}
}
.about {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
padding-inline: 0.5rem;
gap: 0.5rem;
}
.about-txt {
font-size: 1.1rem;
}
.about-break { display: none }
.about-buttons {
display: flex;
gap: 0.5rem;
min-width: 15rem;
}
.main-page_links {
display: flex;
flex-direction: row;
@ -123,55 +144,6 @@ html.dark .main-page_hero-text {
}
}
/*html.dark .main-page_link-card {
background-color: transparent;
border-color: transparent;
&::before {
content: "";
position: absolute;
inset: 0;
filter: blur(1.5rem) saturate(150%);
transition: filter 0.3s;
z-index: 1;
}
&::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%
);
}
&:hover {
&::before {
filter: blur(0.9rem) saturate(200%);
}
}
&.main-page_bluecard {
background-color: transparent;
border-color: transparent;
&::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%
);
}
&:hover {
&::before {
filter: blur(0.9rem) saturate(200%);
}
}
}
}*/
html.dark .main-page_link-card {
background-color: hsl(var(--green) 38% 25%);
color: hsl(194deg 0% 100%);
@ -201,6 +173,10 @@ html.dark .main-page_link-card {
.main-page_links_set {
flex-wrap: nowrap;
}
.about-buttons {
flex-direction: row;
}
}
@media (min-width: 63rem) {
@ -213,4 +189,15 @@ html.dark .main-page_link-card {
max-width: 78rem;
padding-inline: 1.5rem;
}
.about {
flex-wrap: nowrap;
max-width: 78rem;
padding-inline: 1.5rem;
flex-direction: row;
}
.about-txt { max-width: 70% }
.about-break { display: unset }
.about-buttons { flex-direction: column }
}