frontpage work
This commit is contained in:
parent
09302ad58e
commit
da174f9ca2
GPG key ID:
4C88A185FB89301E
|
|
@ -26,18 +26,23 @@ const codeHTML = await processMarkdown(codeString);
|
|||
<li class="featurelist-item hot-reloading left">
|
||||
<section class="feature-text">
|
||||
<h3 class="feature-title">See your changes in real time</h3>
|
||||
<span class="feature-subtitle">Quickshell loads changes as soon as they're saved; you can iterate as fast as you can type.</span>
|
||||
<span class="feature-subtitle">
|
||||
Quickshell loads changes as soon as they're saved, letting you iterate as fast as you can type.
|
||||
</span>
|
||||
</section>
|
||||
<section class="feature-showcase">
|
||||
<span>
|
||||
hot reloading video
|
||||
</span>
|
||||
<video class="feature-video" style="height: 21rem" preload="metadata" controls>
|
||||
<source src="/assets/simple-shell-livereload.mp4" type="video/mp4"/>
|
||||
</video>
|
||||
</section>
|
||||
</li>
|
||||
<li class="featurelist-item qml right">
|
||||
<section class="feature-text">
|
||||
<h3 class="feature-title">Easy to use language</h3>
|
||||
<span class="feature-subtitle">Quickshell is configured in QML, a language that reacts to changes as they happen.</span>
|
||||
<span class="feature-subtitle">
|
||||
Quickshell is configured in QML, a simple language designed for creating flexible user interfaces.
|
||||
It also has LSP support.
|
||||
</span>
|
||||
</section>
|
||||
<section class="feature-showcase" id="qml-showcase">
|
||||
<Fragment set:html={codeHTML}/>
|
||||
|
|
@ -45,11 +50,13 @@ const codeHTML = await processMarkdown(codeString);
|
|||
</li>
|
||||
<li class="featurelist-item cloud left">
|
||||
<section class="feature-text">
|
||||
<h3 class="feature-title">Fully featured</h3>
|
||||
<span class="feature-subtitle">Everything you need to build your desktop, right out of the box.</span>
|
||||
<h3 class="feature-title">Extensive integrations</h3>
|
||||
<span class="feature-subtitle">
|
||||
Quickshell comes with a large set of integrations, with new ones arriving all the time.
|
||||
</span>
|
||||
</section>
|
||||
<section class="feature-showcase">
|
||||
<span>tag cloud</span>
|
||||
<span>image</span>
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -14,11 +14,6 @@ function placeholders() {
|
|||
|
||||
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 class="marquee-scroll">
|
||||
<div id="marquee-scroll-left" class="marquee-scroll-arrow">
|
||||
|
|
|
|||
|
|
@ -4,37 +4,34 @@ import Marquee from "@components/marquee/Marquee.astro";
|
|||
import FeatureList from "@src/components/featurelist/FeatureList.astro";
|
||||
|
||||
const title = "Quickshell";
|
||||
const subtitle = "A framework for building fully custom";
|
||||
---
|
||||
<BaseLayout title={title} description="A fully user customizable desktop shell" image="/quickshell.png">
|
||||
<div class="main-page_hero" data-pagefind-ignore>
|
||||
<h1 class="gradient-text">Quickshell</h1>
|
||||
<section class="main-page_hero-text">
|
||||
<h2>{subtitle}</h2>
|
||||
<h2>building blocks for your desktop</h2>
|
||||
</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 class="main-page_links">
|
||||
<section class="main-page_links_set">
|
||||
<a href="/docs/configuration/getting-started" class="main-page_link-card">
|
||||
<h3>Get started</h3>
|
||||
</a>
|
||||
<a href="/docs/types" class="main-page_link-card">
|
||||
<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>
|
||||
</section>
|
||||
<div class="separator-el"/>
|
||||
<section class="featurelist-section">
|
||||
<FeatureList/>
|
||||
</section>
|
||||
<div class="separator-el"/>
|
||||
<section class="main-page_links">
|
||||
<a href="/docs/configuration" class="main-page_link-card">
|
||||
<h3>Configuration</h3>
|
||||
</a>
|
||||
<a href="/docs/types" class="main-page_link-card">
|
||||
<h3>Type Definitions</h3>
|
||||
</a>
|
||||
<a href="https://git.outfoxxed.me/outfoxxed/quickshell-examples" class="main-page_link-card">
|
||||
<h3>Examples</h3>
|
||||
</a>
|
||||
<a href="https://git.outfoxxed.me/outfoxxed/quickshell" class="main-page_link-card">
|
||||
<h3>Source</h3>
|
||||
</a>
|
||||
</section>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
.featurelist-section {
|
||||
position: relative;
|
||||
margin-block: 1rem;
|
||||
}
|
||||
|
||||
.featurelist {
|
||||
max-width: 100%;
|
||||
max-width: 40rem;
|
||||
list-style: none;
|
||||
margin: unset;
|
||||
margin-inline: 0.618rem;
|
||||
margin: 1rem 1.618rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -18,7 +16,6 @@
|
|||
gap: 0.618rem;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-height: 330px;
|
||||
margin-block: 0.618rem;
|
||||
border-radius: 9px;
|
||||
background-color: hsla(var(--blue) 100 81 / 0.05);
|
||||
|
|
@ -44,8 +41,9 @@
|
|||
|
||||
.feature-text {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
& .feature-title {
|
||||
margin-bottom: 0.217rem;
|
||||
margin-bottom: 0.517rem;
|
||||
}
|
||||
& .feature-subtitle {
|
||||
color: #afafaf;
|
||||
|
|
@ -53,18 +51,22 @@
|
|||
}
|
||||
|
||||
.feature-showcase {
|
||||
width: max-content;
|
||||
height: 21rem;
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
|
||||
@media (min-width: 65rem) {
|
||||
.feature-video {
|
||||
border-radius: 0.681rem;
|
||||
}
|
||||
|
||||
@media (min-width: 68rem) {
|
||||
.featurelist {
|
||||
max-width: 75rem;
|
||||
width: auto;
|
||||
align-items: center;
|
||||
}
|
||||
.feature-text {
|
||||
margin-left: 2.218rem;
|
||||
width: 30rem;
|
||||
margin: 0 2.218rem;
|
||||
}
|
||||
.featurelist-item {
|
||||
width: 100%;
|
||||
|
|
@ -75,11 +77,6 @@
|
|||
}
|
||||
.featurelist-item.right {
|
||||
flex-direction: row-reverse;
|
||||
& .feature-text {
|
||||
margin-right: 2.118rem;
|
||||
margin-left: unset;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.feature-text {
|
||||
text-align: left;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
.main-page_hero {
|
||||
position: relative;
|
||||
margin-block: 1.618rem;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
|
|
@ -10,6 +9,7 @@
|
|||
& h1 {
|
||||
position: relative;
|
||||
font-size: 4.618rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
& .navy {
|
||||
|
|
@ -98,7 +98,7 @@ h1.gradient-text {
|
|||
|
||||
.marquee-item-spacing {
|
||||
width: 75svw;
|
||||
max-width: 80rem;
|
||||
max-width: 75rem;
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
|
||||
|
|
@ -140,39 +140,22 @@ h1.gradient-text {
|
|||
}
|
||||
}
|
||||
|
||||
/*.marquee-scroll-left {
|
||||
left: 3.117rem;
|
||||
}
|
||||
|
||||
.marquee-scroll-right {
|
||||
right: 3.117rem;
|
||||
}*/
|
||||
|
||||
.call-buttons {
|
||||
margin-bottom: 1rem;
|
||||
margin-inline: 0.618rem;
|
||||
.main-page_links {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
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;
|
||||
width: 75%;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
z-index: 0;
|
||||
max-width: 75%;
|
||||
gap: 1rem;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.main-page_links_set {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.main-page_link-card {
|
||||
|
|
@ -183,7 +166,8 @@ h1.gradient-text {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 9.67rem;
|
||||
min-width: 15rem;
|
||||
height: 3.67rem;
|
||||
border-radius: 9px;
|
||||
overflow: hidden;
|
||||
border: 1px solid transparent;
|
||||
|
|
@ -203,28 +187,24 @@ h1.gradient-text {
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
&: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%
|
||||
);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: hsl(var(--accent-600));
|
||||
|
||||
&::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 {
|
||||
border-color: hsl(var(--accent-600));
|
||||
|
||||
&::before {
|
||||
filter: blur(0.9rem) saturate(200%);
|
||||
}
|
||||
filter: blur(0.9rem) saturate(200%);
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3),
|
||||
&:nth-child(4) {
|
||||
&.main-page_bluecard {
|
||||
&::before {
|
||||
background: linear-gradient(
|
||||
115deg,
|
||||
|
|
@ -252,20 +232,14 @@ h1.gradient-text {
|
|||
bottom: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 65rem) {
|
||||
.main-page_hero-text {
|
||||
text-align: end;
|
||||
|
||||
& h2 {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.main-page_links {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.main-page_link-card {
|
||||
max-width: 21.33rem;
|
||||
@media (min-width: 40rem) {
|
||||
.main-page_links_set {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 86rem) {
|
||||
.main-page_links {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue