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

begin styling standardization

Browse source
This commit is contained in:
Oleksandr 2025-11-22 10:54:00 +02:00
parent b9accda035
commit c5578f3dfe
Signed by: Xanazf
GPG key ID: 821EEC32761AC17C
9 changed files with 130 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/components/hooks/CreateCopyButtons.astro
View file

@ -1,36 +0,0 @@
---
---
<script>
// setTimeout(() => {
// // code copy
// let blocks = document.querySelectorAll("pre");
// if (blocks.length > 0) {
// blocks.forEach((block) => {
// let button = document.createElement("button");
// button.className = "copy-button";
// button.innerHTML = `<svg
// xmlns="http://www.w3.org/2000/svg"
// width="1em"
// height="1em"
// viewBox="0 0 256 256"
// >
// <path
// fill="currentColor"
// d="M200 32h-36.26a47.92 47.92 0 0 0-71.48 0H56a16 16 0 0 0-16 16v168a16 16 0 0 0 16 16h144a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16m-72 0a32 32 0 0 1 32 32H96a32 32 0 0 1 32-32m72 184H56V48h26.75A47.9 47.9 0 0 0 80 64v8a8 8 0 0 0 8 8h80a8 8 0 0 0 8-8v-8a47.9 47.9 0 0 0-2.75-16H200Z"
// />
// </svg>
// `;
// button.onclick = () => {
// let snippet = block.innerText ?? "";
// navigator.clipboard.writeText(snippet);
// button.classList.toggle("copied");
// setTimeout(() => button.classList.remove("copied"), 1000);
// };
// block.appendChild(button);
// });
// }
// }, 3001)
</script>

7
src/components/marquee/Marquee.astro
View file

@ -46,8 +46,8 @@ const videos = [
</div> </div>
</div> </div>
<div id="marquee-content" class="marquee-content" data-scroll="0" data-media-index="0"> <div id="marquee-content" class="marquee-content" data-scroll="0" data-media-index="0">
{videos.map(({ author, source, installable, path }, index) => <div class="marquee-item"> {videos.map(({ author, source, installable, path }, index) =>
<div> <div class="marquee-item">
<video <video
data-media-index={index} data-media-index={index}
data-media-author={author} data-media-author={author}
@ -65,18 +65,17 @@ const videos = [
{source && !installable && <>(<a href={source}>source code</a>)</>} {source && !installable && <>(<a href={source}>source code</a>)</>}
{source && installable && <>(<a href={source}>install</a>)</>} {source && installable && <>(<a href={source}>install</a>)</>}
</p> </p>
</div>
</div>)} </div>)}
</div> </div>
</div> </div>
<script> <script>
const videoCount = 6; // last array index
const marquee = document.getElementById("marquee-content")!; const marquee = document.getElementById("marquee-content")!;
marquee.style.setProperty("--scroll", "0") marquee.style.setProperty("--scroll", "0")
window.addEventListener("load", autoplayInit, false); window.addEventListener("load", autoplayInit, false);
const videos = document.getElementsByClassName("marquee-item-content") as HTMLCollectionOf<HTMLVideoElement>; const videos = document.getElementsByClassName("marquee-item-content") as HTMLCollectionOf<HTMLVideoElement>;
const videoCount = videos.length;
let currentVideoIndex = 0; let currentVideoIndex = 0;
let currentVideo: HTMLVideoElement | null = null; let currentVideo: HTMLVideoElement | null = null;

2
src/layouts/DocsLayout.astro
View file

@ -2,7 +2,6 @@
import { Breadcrumbs } from "astro-breadcrumbs"; import { Breadcrumbs } from "astro-breadcrumbs";
import "astro-breadcrumbs/breadcrumbs.css"; import "astro-breadcrumbs/breadcrumbs.css";
import CreateCopyButtons from "@components/hooks/CreateCopyButtons.astro";
import PreTheme from "@config/PreTheme.astro"; import PreTheme from "@config/PreTheme.astro";
import Header from "@components/Header.astro"; import Header from "@components/Header.astro";
import Head from "@config/Head.astro"; import Head from "@config/Head.astro";
@ -52,7 +51,6 @@ for (const segment of url) {
<head> <head>
<Head description={description} title={title} /> <Head description={description} title={title} />
<PreTheme /> <PreTheme />
<CreateCopyButtons />
</head> </head>
<body class="docslayout"> <body class="docslayout">
<Header title={title} headings={headings} type={type}/> <Header title={title} headings={headings} type={type}/>

52
src/styles/components/featurelist.css
View file

@ -12,22 +12,21 @@
.featurelist-item { .featurelist-item {
position: relative; position: relative;
display: flex; display: flex;
gap: 0.618rem; gap: var(--xs);
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-block: 0.618rem; margin-block: var(--xs);
border-radius: 9px; border-radius: var(--radius-md);
background-color: hsl(var(--blue) 60% 98%); background-color: hsl(var(--blue) 60% 98%);
padding: 0.618rem; padding: 0.618rem;
border: 1px solid hsl(var(--blue) 9% 75%); border: 1px solid hsl(var(--blue) 9% 75%);
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
inset: 0.618rem; inset: var(--xs);
background-image: radial-gradient( background-image: radial-gradient(hsl(var(--blue) 9% 75%) 1px,
hsl(var(--blue) 9% 75%) 1px, transparent 1px);
transparent 1px
);
background-position: 50% 50%; background-position: 50% 50%;
background-size: 1.1rem 1.1rem; background-size: 1.1rem 1.1rem;
} }
@ -38,20 +37,20 @@ html.dark .featurelist-item {
border-color: hsl(0deg 0% 100% / 0.05); border-color: hsl(0deg 0% 100% / 0.05);
&::before { &::before {
background-image: radial-gradient( background-image: radial-gradient(hsl(0deg 0% 100% / 0.1) 1px,
hsl(0deg 0% 100% / 0.1) 1px, transparent 1px);
transparent 1px
);
} }
} }
.feature-text { .feature-text {
margin: 1rem 0; margin: var(--sm) 0;
text-align: center; text-align: center;
font-size: 1.2rem; font-size: 1.2em;
& .feature-title { & .feature-title {
margin-bottom: 0.517rem; margin-bottom: 0.517rem;
} }
& .feature-subtitle { & .feature-subtitle {
color: #303030; color: #303030;
} }
@ -72,7 +71,8 @@ html.dark .feature-text {
& video { & video {
width: 100%; width: 100%;
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
border-radius: 0.681rem; border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
} }
& .shiki { & .shiki {
@ -80,6 +80,7 @@ html.dark .feature-text {
width: 100%; width: 100%;
height: 100%; height: 100%;
/*font-size: 0.55rem;*/ /*font-size: 0.55rem;*/
box-shadow: var(--shadow-md);
} }
& .showcase-desktop { & .showcase-desktop {
@ -118,6 +119,7 @@ html:not(.dark) .feature-showcase .shiki span {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
} }
& .cloud-center img { & .cloud-center img {
width: 80px; width: 80px;
height: 80px; height: 80px;
@ -140,6 +142,7 @@ html:not(.dark) .feature-showcase .shiki span {
&>div { &>div {
transform: rotate(0deg); transform: rotate(0deg);
animation: counter-spin 40s linear infinite; animation: counter-spin 40s linear infinite;
& .feature-icon { & .feature-icon {
width: 80px; width: 80px;
height: 80px; height: 80px;
@ -149,26 +152,34 @@ html:not(.dark) .feature-showcase .shiki span {
&.wayland { &.wayland {
transform: translate(-50%, 0) rotate(0deg); transform: translate(-50%, 0) rotate(0deg);
} }
&.hyprland { &.hyprland {
transform: translate(-50%, 0) rotate(72deg); transform: translate(-50%, 0) rotate(72deg);
& .feature-icon { & .feature-icon {
transform: rotate(-72deg); transform: rotate(-72deg);
} }
} }
&.pipewire { &.pipewire {
transform: translate(-50%, 0) rotate(144deg); transform: translate(-50%, 0) rotate(144deg);
& .feature-icon { & .feature-icon {
transform: rotate(-144deg); transform: rotate(-144deg);
} }
} }
&.x-org { &.x-org {
transform: translate(-50%, 0) rotate(216deg); transform: translate(-50%, 0) rotate(216deg);
& .feature-icon { & .feature-icon {
transform: rotate(-216deg); transform: rotate(-216deg);
} }
} }
&.sway { &.sway {
transform: translate(-50%, 0) rotate(288deg); transform: translate(-50%, 0) rotate(288deg);
& .feature-icon { & .feature-icon {
transform: rotate(-288deg); transform: rotate(-288deg);
} }
@ -180,6 +191,7 @@ html:not(.dark) .feature-showcase .shiki span {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
} }
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
@ -189,6 +201,7 @@ html:not(.dark) .feature-showcase .shiki span {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
} }
to { to {
transform: rotate(-360deg); transform: rotate(-360deg);
} }
@ -213,33 +226,42 @@ html:not(.dark) .feature-showcase .shiki span {
width: auto; width: auto;
align-items: center; align-items: center;
} }
.feature-text { .feature-text {
margin: 0 2.218rem; margin: 0 2.218rem;
} }
.featurelist-item { .featurelist-item {
width: 100%; width: 100%;
padding: 1.217rem; padding: 1.217rem;
justify-content: space-between; justify-content: space-between;
flex-direction: row; flex-direction: row;
} }
.featurelist-item.right { .featurelist-item.right {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.feature-showcase { .feature-showcase {
height: 22rem; height: 22rem;
} }
.feature-text { .feature-text {
text-align: left; text-align: left;
} }
.feature-showcase { .feature-showcase {
width: auto; width: auto;
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
& video { & video {
scale: 1; scale: 1;
} }
& .shiki { & .shiki {
font-size: 0.93rem; font-size: 0.93rem;
} }
.feature-cloud { .feature-cloud {
margin-bottom: 0; margin-bottom: 0;
} }

34
src/styles/components/marquee.css
View file

@ -2,10 +2,10 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
gap: 2.217rem; gap: var(--xl);
font-size: 1.874rem; font-size: var(--lg);
font-weight: 600; font-weight: 600;
margin-inline: 0.618rem; margin-inline: var(--sm);
} }
.marquee-button { .marquee-button {
@ -20,15 +20,16 @@
left: 2px; left: 2px;
right: 2px; right: 2px;
height: 3px; height: 3px;
background-color: hsl(var(--accent-400) / 0.3); background-color: hsla(var(--accent-400) / 0.3);
z-index: -1; z-index: -1;
} }
} }
.marquee { .marquee {
position: relative; position: relative;
display: flex; display: flex;
width: 100%; width: 100%;
margin-block: 1.618rem; margin-block: var(--lg);
justify-content: center; justify-content: center;
} }
@ -40,16 +41,25 @@
} }
.marquee-item { .marquee-item {
position: relative;
flex: 1 0 100%; flex: 1 0 100%;
transition: transform 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96); transition: transform 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
transform: translateX(var(--scroll)); transform: translateX(var(--scroll));
display: flex; display: flex;
justify-content: center; flex-direction: column;
align-items: center;
gap: var(--md);
padding-inline: 0.5rem; padding-inline: 0.5rem;
& > div { &>* {
z-index: 11;
}
& video {
position: relative;
max-width: 75rem; max-width: 75rem;
width: 100%;
box-shadow: var(--shadow-md);
} }
} }
@ -58,7 +68,7 @@
} }
.marquee-item-content { .marquee-item-content {
border-radius: 6px; border-radius: var(--radius-sm);
} }
.marquee-scroll { .marquee-scroll {
@ -68,7 +78,6 @@
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
transition: transition:
background-color 0.3s, background-color 0.3s,
opacity 0.3s; opacity 0.3s;
@ -95,10 +104,12 @@
justify-content: center; justify-content: center;
opacity: 0.5; opacity: 0.5;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
backdrop-filter: blur(var(--2xs));
} }
&:hover { &:hover {
cursor: pointer; cursor: pointer;
&>div { &>div {
opacity: 0.9; opacity: 0.9;
} }
@ -132,9 +143,10 @@
@media not (min-width: 83rem) { @media not (min-width: 83rem) {
.marquee-scroll-arrow { .marquee-scroll-arrow {
height: unset; height: unset;
&>div { &>div {
background-color: #55555580; background-color: #55555580;
border-radius: 0.2rem; border-radius: var(--radius-xs);
} }
} }

4
src/styles/css-config/base.css
View file

@ -1,5 +1,6 @@
html { html {
font-family: "Rubik Variable", Inter, system-ui, Avenir, Helvetica, Arial, font-family:
"Rubik Variable", Inter, system-ui, Avenir, Helvetica, Arial,
sans-serif; sans-serif;
font-size: 14px; font-size: 14px;
line-height: 1.272; line-height: 1.272;
@ -112,7 +113,6 @@ html.dark {
--var-link-color: 190deg 85% 60%; --var-link-color: 190deg 85% 60%;
--inner-param-color: 215deg 60% 70%; --inner-param-color: 215deg 60% 70%;
--inner-param-border-color: 215deg 26% 46%; --inner-param-border-color: 215deg 26% 46%;
--inner-param-color: 215deg 60% 70%;
--nav-hovered-bkg: var(--blue) 40% 10%; --nav-hovered-bkg: var(--blue) 40% 10%;
--nav-hovered-weak-bkg: var(--blue) 35% 8%; --nav-hovered-weak-bkg: var(--blue) 35% 8%;
--nav-selected-bkg: var(--blue) 40% 13%; --nav-selected-bkg: var(--blue) 40% 13%;

2
src/styles/css-config/entry.css
View file

@ -1,6 +1,6 @@
@import "normalize.css"; @import "normalize.css";
@import "animations.css";
@import "vars.css"; @import "vars.css";
@import "animations.css";
@import "base.css"; @import "base.css";
@import "code.css"; @import "code.css";
@import "colors.css"; @import "colors.css";

36
src/styles/css-config/vars.css
View file

@ -37,11 +37,37 @@
--radius-lg: var(--lg); --radius-lg: var(--lg);
--radius-xl: var(--xl); --radius-xl: var(--xl);
--shadow-sm: var(--shadow-sm); --shadow-sm-units: 0 0 1px 0;
--shadow-md: var(--shadow-md); --shadow-md-units-1: 0 4px 6px;
--shadow-lg: var(--shadow-lg); --shadow-md-units-2: 0 2px 4px;
--shadow-xl: var(--shadow-xl); --shadow-md-units-3: 0 0 1px;
--shadow-2xl: var(--shadow-2xl); --shadow-lg-units-1: 0 11px 15px -3px;
--shadow-lg-units-2: 0 2px 6px;
--shadow-lg-units-3: 0 0 1px;
--shadow-xl-units-1: 0 20px 25px;
--shadow-xl-units-2: 0 5px 11px;
--shadow-xl-units-3: 0 5px 11px;
--shadow-2xl-units-1: 0 25px 50px;
--shadow-2xl-units-2: 0 9px 18px;
--shadow-2xl-units-3: 0 0 1px;
--shadow-sm: var(--shadow-sm-units) rgba(0, 0, 0, 0.11);
--shadow-md:
var(--shadow-md-units-1) rgba(0, 0, 0, 0.08),
var(--shadow-md-units-2) rgba(0, 0, 0, 0.11),
var(--shadow-md-units-3) rgba(0, 0, 0, 0.4);
--shadow-lg:
var(--shadow-lg-units-1) rgba(0, 0, 0, 0.11),
var(--shadow-lg-units-2) rgba(0, 0, 0, 0.07),
var(--shadow-lg-units-3) rgba(0, 0, 0, 0.4);
--shadow-xl:
var(--shadow-xl-units-1) rgba(0, 0, 0, 0.09),
var(--shadow-xl-units-2) rgba(0, 0, 0, 0.12),
var(--shadow-xl-units-3) rgba(0, 0, 0, 0.4);
--shadow-2xl:
var(--shadow-2xl-units-1) rgba(0, 0, 0, 0.23),
var(--shadow-2xl-units-2) rgba(0, 0, 0, 0.1),
var(--shadow-2xl-units-3) rgba(0, 0, 0, 0.4);
--ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1);

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

@ -40,21 +40,15 @@
} }
h1.gradient-text { h1.gradient-text {
background: linear-gradient( background: linear-gradient(30deg,
30deg,
hsl(var(--green) 80% 42%), hsl(var(--green) 80% 42%),
hsl(var(--blue) 80% 49%) hsl(var(--blue) 80% 49%));
);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
html.dark h1.gradient-text { html.dark h1.gradient-text {
background: linear-gradient( background: linear-gradient(30deg, #42b96b, #4281b9);
30deg,
#42b96b,
#4281b9
);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
@ -95,7 +89,9 @@ html.dark .main-page_hero-text {
font-size: 1.1rem; font-size: 1.1rem;
} }
.about-break { display: none } .about-break {
display: none;
}
.about-buttons { .about-buttons {
display: flex; display: flex;
@ -130,11 +126,12 @@ html.dark .main-page_hero-text {
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 3.67rem; height: 3.67rem;
border-radius: 9px; border-radius: var(--radius-sm);
overflow: hidden; overflow: hidden;
border: 1px solid hsl(var(--green) 10% 10%); box-shadow: var(--shadow-md);
transition: transition:
background-color 0.3s, background-color 0.3s,
box-shadow 0.3s,
border-color 0.3s; border-color 0.3s;
background-color: hsl(var(--green) 38% 30%); background-color: hsl(var(--green) 38% 30%);
@ -143,17 +140,22 @@ html.dark .main-page_hero-text {
&:hover { &:hover {
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
border-color: hsl(var(--green) 20% 20%);
background-color: hsl(var(--green) 48% 40%); background-color: hsl(var(--green) 48% 40%);
box-shadow:
var(--shadow-md-units-1) hsla(var(--green) 48 45 / 0.08),
var(--shadow-md-units-2) hsla(var(--green) 48 45 / 0.11),
var(--shadow-md-units-3) hsla(var(--green) 48 45 / 0.4);
} }
&.main-page_bluecard { &.main-page_bluecard {
border-color: hsl(var(--blue) 10% 10%);
background-color: hsl(var(--blue) 38% 30%); background-color: hsl(var(--blue) 38% 30%);
&:hover { &:hover {
border-color: hsl(var(--blue) 20% 20%);
background-color: hsl(var(--blue) 48% 40%); background-color: hsl(var(--blue) 48% 40%);
box-shadow:
var(--shadow-md-units-1) hsla(var(--blue) 48 45 / 0.08),
var(--shadow-md-units-2) hsla(var(--blue) 48 45 / 0.11),
var(--shadow-md-units-3) hsla(var(--blue) 48 45 / 0.4);
} }
} }
@ -226,7 +228,15 @@ html.dark .main-page_link-card {
flex-direction: row; flex-direction: row;
} }
.about-txt { max-width: 70% } .about-txt {
.about-break { display: unset } max-width: 70%;
.about-buttons { flex-direction: column } }
.about-break {
display: unset;
}
.about-buttons {
flex-direction: column;
}
} }