WIP better marquee animation; optimizing and refactoring style code
This commit is contained in:
parent
c5578f3dfe
commit
f2ca734ae1
GPG key ID:
821EEC32761AC17C
10 changed files with 1337 additions and 618 deletions
30
package.json
30
package.json
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "quickshell-docs",
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"version": "0.1.1",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
|
|
@ -10,42 +10,42 @@
|
|||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/check": "0.9.5",
|
||||
"@astrojs/markdown-remark": "6.3.9",
|
||||
"@astrojs/mdx": "4.3.12",
|
||||
"@astrojs/check": "0.9.6",
|
||||
"@astrojs/markdown-remark": "6.3.10",
|
||||
"@astrojs/mdx": "4.3.13",
|
||||
"@astrojs/sitemap": "3.6.0",
|
||||
"@astrojs/solid-js": "^5.1.3",
|
||||
"@fontsource-variable/rubik": "^5.2.8",
|
||||
"@hbsnow/rehype-sectionize": "^1.0.7",
|
||||
"@pagefind/default-ui": "^1.4.0",
|
||||
"@shikijs/rehype": "^3.15.0",
|
||||
"astro": "5.16.0",
|
||||
"astro-breadcrumbs": "^3.3.1",
|
||||
"@shikijs/rehype": "^3.20.0",
|
||||
"astro": "5.16.6",
|
||||
"astro-breadcrumbs": "^3.3.3",
|
||||
"astro-icon": "^1.1.5",
|
||||
"hast-util-from-html": "^2.0.3",
|
||||
"hastscript": "^9.0.1",
|
||||
"rehype": "^13.0.2",
|
||||
"remark-github-blockquote-alert": "^2.0.0",
|
||||
"remark-github-blockquote-alert": "^2.0.1",
|
||||
"solid-js": "^1.9.10",
|
||||
"unified": "^11.0.5",
|
||||
"unist-util-visit": "^5.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/ts-plugin": "1.10.5",
|
||||
"@astrojs/ts-plugin": "1.10.6",
|
||||
"@babel/core": "^7.28.5",
|
||||
"@babel/plugin-syntax-typescript": "^7.27.1",
|
||||
"@biomejs/biome": "^2.3.7",
|
||||
"@biomejs/biome": "^2.3.10",
|
||||
"@types/babel__core": "^7.20.5",
|
||||
"@types/hast": "^3.0.4",
|
||||
"@types/mdast": "^4.0.4",
|
||||
"@types/node": "^24.10.1",
|
||||
"@types/node": "^25.0.3",
|
||||
"@types/unist": "^3.0.3",
|
||||
"jsonc-parser": "^3.3.1",
|
||||
"pagefind": "^1.4.0",
|
||||
"shiki": "^3.15.0",
|
||||
"tsx": "^4.20.6",
|
||||
"shiki": "^3.20.0",
|
||||
"tsx": "^4.21.0",
|
||||
"typescript": "^5.9.3",
|
||||
"vite": "^7.2.4"
|
||||
"vite": "^7.3.0"
|
||||
},
|
||||
"packageManager": "yarn@4.11.0"
|
||||
"packageManager": "yarn@4.12.0"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,40 +1,6 @@
|
|||
---
|
||||
import { Icon } from "astro-icon/components";
|
||||
|
||||
const videos = [
|
||||
{
|
||||
author: '<a href="https://github.com/soramanew">soramane</a>',
|
||||
source: "https://github.com/caelestia-dots/shell",
|
||||
path: "/assets/showcase/soramane.mp4",
|
||||
installable: true,
|
||||
},
|
||||
{
|
||||
author: '<a href="https://github.com/end-4">end_4</a>',
|
||||
source: "https://github.com/end-4/dots-hyprland",
|
||||
path: "/assets/showcase/end4.mp4",
|
||||
installable: true,
|
||||
},
|
||||
{
|
||||
author: '<a href="https://outfoxxed.me">outfoxxed</a>',
|
||||
source:
|
||||
"https://git.outfoxxed.me/outfoxxed/nixnew/src/branch/master/modules/user/modules/quickshell",
|
||||
path: "/assets/showcase/outfoxxed.mp4",
|
||||
},
|
||||
{
|
||||
author:
|
||||
'<a href="https://github.com/pfaj/">pfaj</a> and <a href="https://github.com/bdebiase">bdebiase</a>',
|
||||
path: "/assets/showcase/pfaj-bdeblase.mp4",
|
||||
},
|
||||
{
|
||||
author: '<a href="https://github.com/flickowoa">flicko</a>',
|
||||
source: "https://github.com/flickowoa/zephyr",
|
||||
path: "/assets/showcase/flicko.mp4",
|
||||
},
|
||||
{
|
||||
author: '<a href="https://vaxry.net">vaxry</a>',
|
||||
path: "/assets/showcase/vaxry.mp4",
|
||||
},
|
||||
];
|
||||
import MarqueeContent from "./MarqueeContent.astro";
|
||||
---
|
||||
<div class="marquee">
|
||||
<div class="marquee-scroll">
|
||||
|
|
@ -45,52 +11,38 @@ const videos = [
|
|||
<div><Icon name="caret-right"/></div>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<video
|
||||
data-media-index={index}
|
||||
data-media-author={author}
|
||||
id="showcase-video"
|
||||
class="marquee-item-spacing marquee-item-content"
|
||||
muted
|
||||
controls
|
||||
playsinline
|
||||
preload="metadata"
|
||||
>
|
||||
<source src={path} type="video/mp4"/>
|
||||
</video>
|
||||
<p>
|
||||
Configuration by <Fragment set:html={author}/>
|
||||
{source && !installable && <>(<a href={source}>source code</a>)</>}
|
||||
{source && installable && <>(<a href={source}>install</a>)</>}
|
||||
</p>
|
||||
</div>)}
|
||||
</div>
|
||||
<MarqueeContent/>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const marquee = document.getElementById("marquee-content")!;
|
||||
marquee.style.setProperty("--scroll", "0")
|
||||
marquee.style.setProperty("--mult", "1")
|
||||
|
||||
window.addEventListener("load", autoplayInit, false);
|
||||
const videos = document.getElementsByClassName("marquee-item-content") as HTMLCollectionOf<HTMLVideoElement>;
|
||||
const videoCount = videos.length;
|
||||
const lastVideoIndex = videos[videos.length - 1]
|
||||
let currentVideoIndex = 0;
|
||||
let currentVideo: HTMLVideoElement | null = null;
|
||||
|
||||
function autoplayInit() {
|
||||
setActiveVideo(0);
|
||||
currentVideo!.play();
|
||||
currentVideo.play();
|
||||
currentVideo.style.animationPlayState = "running";
|
||||
}
|
||||
|
||||
function setActiveVideo(index: number) {
|
||||
currentVideo?.pause();
|
||||
if (currentVideo) {
|
||||
currentVideo.pause();
|
||||
}
|
||||
|
||||
currentVideoIndex = index;
|
||||
currentVideo = videos[currentVideoIndex];
|
||||
|
||||
currentVideo.currentTime = 0;
|
||||
marquee.style.setProperty("--scroll", `-${currentVideoIndex*100}%`)
|
||||
marquee.style.setProperty("--mult", `${currentVideoIndex + 1}`)
|
||||
}
|
||||
|
||||
function offsetCarousel(offset: number) {
|
||||
|
|
@ -103,19 +55,59 @@ const videos = [
|
|||
const intersectionOptions = {
|
||||
root: marquee,
|
||||
rootMargin: "0px",
|
||||
threshold: 0.0,
|
||||
threshold: 0.1,
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
const video = entry.target as HTMLVideoElement;
|
||||
|
||||
if (!entry.isIntersecting) {
|
||||
video.pause();
|
||||
|
||||
video.style.animationName = "none";
|
||||
void video.offsetWidth;
|
||||
|
||||
video.style.animationName = "fade";
|
||||
video.style.animationDuration = "0.3s";
|
||||
video.style.animationTimingFunction = "ease-in-out";
|
||||
video.style.animationFillMode = "forwards";
|
||||
video.style.animationDirection = "reverse";
|
||||
} else if (video === currentVideo) {
|
||||
video.play();
|
||||
|
||||
video.style.animationName = "none";
|
||||
void video.offsetWidth;
|
||||
|
||||
video.style.animationName = "fade";
|
||||
video.style.animationDuration = "0.3s";
|
||||
video.style.animationTimingFunction = "ease-in-out";
|
||||
video.style.animationFillMode = "forwards";
|
||||
video.style.animationPlayState = "running";
|
||||
video.style.animationDirection = "normal";
|
||||
}
|
||||
if (entry.isIntersecting && video === lastVideoIndex) {
|
||||
addNextVideo();
|
||||
}
|
||||
});
|
||||
}, intersectionOptions);
|
||||
function addNextVideo() {
|
||||
const firstVideo = videos[0];
|
||||
if (!firstVideo) return;
|
||||
|
||||
const newVideo = firstVideo.cloneNode(true) as HTMLVideoElement;
|
||||
|
||||
// IMPORTANT: Reset the state of the new video
|
||||
newVideo.pause();
|
||||
newVideo.currentTime = 0;
|
||||
newVideo.style.animationName = "none"; // Reset any lingering animation styles
|
||||
|
||||
// append to the marquee
|
||||
marquee.appendChild(newVideo);
|
||||
|
||||
// observe the new video
|
||||
observer.observe(newVideo);
|
||||
}
|
||||
|
||||
for (const video of videos) {
|
||||
observer.observe(video);
|
||||
|
|
|
|||
58
src/components/marquee/MarqueeContent.astro
Normal file
58
src/components/marquee/MarqueeContent.astro
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
---
|
||||
const videos = [
|
||||
{
|
||||
author: '<a href="https://github.com/soramanew">soramane</a>',
|
||||
source: "https://github.com/caelestia-dots/shell",
|
||||
path: "/assets/showcase/soramane.mp4",
|
||||
installable: true,
|
||||
},
|
||||
{
|
||||
author: '<a href="https://github.com/end-4">end_4</a>',
|
||||
source: "https://github.com/end-4/dots-hyprland",
|
||||
path: "/assets/showcase/end4.mp4",
|
||||
installable: true,
|
||||
},
|
||||
{
|
||||
author: '<a href="https://outfoxxed.me">outfoxxed</a>',
|
||||
source:
|
||||
"https://git.outfoxxed.me/outfoxxed/nixnew/src/branch/master/modules/user/modules/quickshell",
|
||||
path: "/assets/showcase/outfoxxed.mp4",
|
||||
},
|
||||
{
|
||||
author:
|
||||
'<a href="https://github.com/pfaj/">pfaj</a> and <a href="https://github.com/bdebiase">bdebiase</a>',
|
||||
path: "/assets/showcase/pfaj-bdeblase.mp4",
|
||||
},
|
||||
{
|
||||
author: '<a href="https://github.com/flickowoa">flicko</a>',
|
||||
source: "https://github.com/flickowoa/zephyr",
|
||||
path: "/assets/showcase/flicko.mp4",
|
||||
},
|
||||
{
|
||||
author: '<a href="https://vaxry.net">vaxry</a>',
|
||||
path: "/assets/showcase/vaxry.mp4",
|
||||
},
|
||||
];
|
||||
---
|
||||
<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">
|
||||
<video
|
||||
data-media-index={index}
|
||||
data-media-author={author}
|
||||
id="showcase-video"
|
||||
class="marquee-item-spacing marquee-item-content"
|
||||
muted
|
||||
controls
|
||||
playsinline
|
||||
preload="metadata"
|
||||
>
|
||||
<source src={path} type="video/mp4"/>
|
||||
</video>
|
||||
<p>
|
||||
Configuration by <Fragment set:html={author}/>
|
||||
{source && !installable && <>(<a href={source}>source code</a>)</>}
|
||||
{source && installable && <>(<a href={source}>install</a>)</>}
|
||||
</p>
|
||||
</div>)}
|
||||
</div>
|
||||
|
|
@ -30,7 +30,9 @@
|
|||
display: flex;
|
||||
width: 100%;
|
||||
margin-block: var(--lg);
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
scroll-snap-type: x mandatory;
|
||||
}
|
||||
|
||||
.marquee-content {
|
||||
|
|
@ -43,11 +45,11 @@
|
|||
.marquee-item {
|
||||
position: relative;
|
||||
flex: 1 0 100%;
|
||||
transition: transform 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
|
||||
transform: translateX(var(--scroll));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
transition: left 0.3s var(--ease-in-out);
|
||||
left: var(--scroll);
|
||||
gap: var(--md);
|
||||
padding-inline: 0.5rem;
|
||||
|
||||
|
|
@ -81,7 +83,7 @@
|
|||
transition:
|
||||
background-color 0.3s,
|
||||
opacity 0.3s;
|
||||
z-index: 10;
|
||||
z-index: 20;
|
||||
user-select: none;
|
||||
align-items: stretch;
|
||||
pointer-events: none;
|
||||
|
|
@ -152,6 +154,6 @@
|
|||
|
||||
.marquee-scroll {
|
||||
width: 92%;
|
||||
align-items: center;
|
||||
left: 4%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -124,7 +124,6 @@
|
|||
}
|
||||
|
||||
@keyframes ping {
|
||||
|
||||
75%,
|
||||
100% {
|
||||
transform: scale(2);
|
||||
|
|
@ -139,7 +138,6 @@
|
|||
}
|
||||
|
||||
@keyframes bounce {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(-25%);
|
||||
|
|
@ -152,6 +150,18 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
0% {
|
||||
transform: scale(0.75);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--animate-spin: spin 1s linear infinite;
|
||||
--animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
|
||||
|
|
|
|||
|
|
@ -12,118 +12,6 @@ html {
|
|||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
color-scheme: light dark;
|
||||
/* accent */
|
||||
--green: 141deg;
|
||||
--accent-400: var(--green) 90% 57%;
|
||||
--accent-500: var(--green) 90% 47%;
|
||||
--accent-600: var(--green) 88% 40%;
|
||||
--accent-700: var(--green) 70% 40%;
|
||||
|
||||
/* secondary */
|
||||
--blue: 224deg;
|
||||
--secondary-400: var(--blue) 100% 68%;
|
||||
--secondary-500: var(--blue) 100% 58%;
|
||||
--secondary-600: var(--blue) 53% 41%;
|
||||
--secondary-700: var(--blue) 43% 31%;
|
||||
--secondary-800: var(--blue) 23% 21%;
|
||||
--secondary-900: var(--blue) 44% 7%;
|
||||
|
||||
/* primary */
|
||||
--white: 194deg;
|
||||
--bg-400: var(--white) 10% 95%;
|
||||
--bg-500: var(--white) 5% 90%;
|
||||
--bg-600: var(--white) 5% 76%;
|
||||
--bg-700: var(--white) 5% 56%;
|
||||
--bg-800: var(--white) 5% 36%;
|
||||
--bg-900: var(--white) 5% 16%;
|
||||
|
||||
/* docs */
|
||||
--background: var(--bg-500);
|
||||
--text: var(--white) 0% 0%;
|
||||
--text-dark: var(--white) 0% 18%;
|
||||
--text-darker: var(--white) 0% 30%;
|
||||
--link: var(--green) 48% 40%;
|
||||
--toc-link: var(--green) 74% 30%;
|
||||
--toc-link-active: var(--green) 80% 38%;
|
||||
--prop-color: 350deg 78% 70%;
|
||||
--prop-link-color: 350deg 78% 60%;
|
||||
--func-color: 50deg 68% 50%;
|
||||
--func-link-color: 50deg 58% 55%;
|
||||
--signal-color: 270deg 78% 70%;
|
||||
--signal-link-color: 270deg 85% 60%;
|
||||
--var-color: 190deg 78% 70%;
|
||||
--var-link-color: 190deg 85% 60%;
|
||||
--inner-param-color: 215deg 80% 27%;
|
||||
--inner-param-border-color: 215deg 50% 50%;
|
||||
--nav-hovered-bkg: var(--blue) 100% 87%;
|
||||
--nav-hovered-weak-bkg: var(--blue) 100% 91%;
|
||||
--nav-selected-bkg: var(--blue) 100% 90%;
|
||||
--nav-selected-hovered-bkg: var(--blue) 100% 85%;
|
||||
--nav-selected-text: var(--blue) 60% 60%;
|
||||
--nav-indicator-bkg: var(--blue) 45% 80%;
|
||||
--toc-hovered-bkg: 0deg 0% 0% / 0.1;
|
||||
--overlay-bkg: var(--blue) 25% 93%;
|
||||
--overlay-bkg-border: var(--blue) 10% 75%;
|
||||
--footer-bkg: var(--blue) 8% 87%;
|
||||
--footer-bkg-border: var(--blue) 32% 84%;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
/* accent */
|
||||
--green: 141deg;
|
||||
--accent-400: var(--green) 100% 67%;
|
||||
--accent-500: var(--green) 95% 55%;
|
||||
--accent-600: var(--green) 90% 40%;
|
||||
--accent-700: var(--green) 80% 30%;
|
||||
|
||||
/* secondary */
|
||||
--white: 194deg;
|
||||
--secondary-400: var(--white) 33% 100%;
|
||||
--secondary-500: var(--white) 33% 96%;
|
||||
--secondary-600: var(--white) 33% 76%;
|
||||
--secondary-700: var(--white) 33% 56%;
|
||||
--secondary-800: var(--white) 35% 36%;
|
||||
--secondary-900: var(--white) 44% 7%;
|
||||
|
||||
/* primary */
|
||||
--blue: 224deg;
|
||||
--bg-400: var(--blue) 90% 65%;
|
||||
--bg-500: var(--blue) 83% 45%;
|
||||
--bg-700: var(--blue) 82% 25%;
|
||||
--bg-800: var(--blue) 82% 15%;
|
||||
--bg-900: var(--blue) 82% 3%;
|
||||
|
||||
/* docs */
|
||||
--background: var(--bg-900);
|
||||
--text: var(--white) 0% 100%;
|
||||
--text-dark: var(--white) 0% 70%;
|
||||
--text-darker: var(--white) 0% 40%;
|
||||
--link: var(--green) 60% 44%;
|
||||
--toc-link: var(--green) 74% 40%;
|
||||
--toc-link-active: var(--green) 80% 60%;
|
||||
--prop-color: 350deg 78% 70%;
|
||||
--prop-link-color: 350deg 78% 60%;
|
||||
--func-color: 50deg 78% 70%;
|
||||
--func-link-color: 50deg 78% 60%;
|
||||
--signal-color: 270deg 78% 70%;
|
||||
--signal-link-color: 270deg 85% 60%;
|
||||
--var-color: 190deg 78% 70%;
|
||||
--var-link-color: 190deg 85% 60%;
|
||||
--inner-param-color: 215deg 60% 70%;
|
||||
--inner-param-border-color: 215deg 26% 46%;
|
||||
--nav-hovered-bkg: var(--blue) 40% 10%;
|
||||
--nav-hovered-weak-bkg: var(--blue) 35% 8%;
|
||||
--nav-selected-bkg: var(--blue) 40% 13%;
|
||||
--nav-selected-hovered-bkg: var(--blue) 40% 17%;
|
||||
--nav-selected-text: var(--blue) 100% 70%;
|
||||
--nav-indicator-bkg: var(--blue) 30% 30%;
|
||||
--toc-hovered-bkg: 0deg 0% 100% / 0.07;
|
||||
--overlay-bkg: var(--blue) 75% 5%;
|
||||
--overlay-bkg-border: var(--blue) 45% 15%;
|
||||
--footer-bkg: var(--blue) 66% 5%;
|
||||
--footer-bkg-border: var(--blue) 75% 21%;
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,117 @@
|
|||
:root {
|
||||
color-scheme: light dark;
|
||||
/* accent */
|
||||
--green: 141deg;
|
||||
--accent-400: var(--green) 90% 57%;
|
||||
--accent-500: var(--green) 90% 47%;
|
||||
--accent-600: var(--green) 88% 40%;
|
||||
--accent-700: var(--green) 70% 40%;
|
||||
|
||||
/* secondary */
|
||||
--blue: 224deg;
|
||||
--secondary-400: var(--blue) 100% 68%;
|
||||
--secondary-500: var(--blue) 100% 58%;
|
||||
--secondary-600: var(--blue) 53% 41%;
|
||||
--secondary-700: var(--blue) 43% 31%;
|
||||
--secondary-800: var(--blue) 23% 21%;
|
||||
--secondary-900: var(--blue) 44% 7%;
|
||||
|
||||
/* primary */
|
||||
--white: 194deg;
|
||||
--bg-400: var(--white) 10% 95%;
|
||||
--bg-500: var(--white) 5% 90%;
|
||||
--bg-600: var(--white) 5% 76%;
|
||||
--bg-700: var(--white) 5% 56%;
|
||||
--bg-800: var(--white) 5% 36%;
|
||||
--bg-900: var(--white) 5% 16%;
|
||||
|
||||
/* docs */
|
||||
--background: var(--bg-500);
|
||||
--text: var(--white) 0% 0%;
|
||||
--text-dark: var(--white) 0% 18%;
|
||||
--text-darker: var(--white) 0% 30%;
|
||||
--link: var(--green) 48% 40%;
|
||||
--toc-link: var(--green) 74% 30%;
|
||||
--toc-link-active: var(--green) 80% 38%;
|
||||
--prop-color: 350deg 78% 70%;
|
||||
--prop-link-color: 350deg 78% 60%;
|
||||
--func-color: 50deg 68% 50%;
|
||||
--func-link-color: 50deg 58% 55%;
|
||||
--signal-color: 270deg 78% 70%;
|
||||
--signal-link-color: 270deg 85% 60%;
|
||||
--var-color: 190deg 78% 70%;
|
||||
--var-link-color: 190deg 85% 60%;
|
||||
--inner-param-color: 215deg 80% 27%;
|
||||
--inner-param-border-color: 215deg 50% 50%;
|
||||
--nav-hovered-bkg: var(--blue) 100% 87%;
|
||||
--nav-hovered-weak-bkg: var(--blue) 100% 91%;
|
||||
--nav-selected-bkg: var(--blue) 100% 90%;
|
||||
--nav-selected-hovered-bkg: var(--blue) 100% 85%;
|
||||
--nav-selected-text: var(--blue) 60% 60%;
|
||||
--nav-indicator-bkg: var(--blue) 45% 80%;
|
||||
--toc-hovered-bkg: 0deg 0% 0% / 0.1;
|
||||
--overlay-bkg: var(--blue) 25% 93%;
|
||||
--overlay-bkg-border: var(--blue) 10% 75%;
|
||||
--footer-bkg: var(--blue) 8% 87%;
|
||||
--footer-bkg-border: var(--blue) 32% 84%;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
/* accent */
|
||||
--green: 141deg;
|
||||
--accent-400: var(--green) 100% 67%;
|
||||
--accent-500: var(--green) 95% 55%;
|
||||
--accent-600: var(--green) 90% 40%;
|
||||
--accent-700: var(--green) 80% 30%;
|
||||
|
||||
/* secondary */
|
||||
--white: 194deg;
|
||||
--secondary-400: var(--white) 33% 100%;
|
||||
--secondary-500: var(--white) 33% 96%;
|
||||
--secondary-600: var(--white) 33% 76%;
|
||||
--secondary-700: var(--white) 33% 56%;
|
||||
--secondary-800: var(--white) 35% 36%;
|
||||
--secondary-900: var(--white) 44% 7%;
|
||||
|
||||
/* primary */
|
||||
--blue: 224deg;
|
||||
--bg-400: var(--blue) 90% 65%;
|
||||
--bg-500: var(--blue) 83% 45%;
|
||||
--bg-700: var(--blue) 82% 25%;
|
||||
--bg-800: var(--blue) 82% 15%;
|
||||
--bg-900: var(--blue) 82% 3%;
|
||||
|
||||
/* docs */
|
||||
--background: var(--bg-900);
|
||||
--text: var(--white) 0% 100%;
|
||||
--text-dark: var(--white) 0% 70%;
|
||||
--text-darker: var(--white) 0% 40%;
|
||||
--link: var(--green) 60% 44%;
|
||||
--toc-link: var(--green) 74% 40%;
|
||||
--toc-link-active: var(--green) 80% 60%;
|
||||
--prop-color: 350deg 78% 70%;
|
||||
--prop-link-color: 350deg 78% 60%;
|
||||
--func-color: 50deg 78% 70%;
|
||||
--func-link-color: 50deg 78% 60%;
|
||||
--signal-color: 270deg 78% 70%;
|
||||
--signal-link-color: 270deg 85% 60%;
|
||||
--var-color: 190deg 78% 70%;
|
||||
--var-link-color: 190deg 85% 60%;
|
||||
--inner-param-color: 215deg 60% 70%;
|
||||
--inner-param-border-color: 215deg 26% 46%;
|
||||
--nav-hovered-bkg: var(--blue) 40% 10%;
|
||||
--nav-hovered-weak-bkg: var(--blue) 35% 8%;
|
||||
--nav-selected-bkg: var(--blue) 40% 13%;
|
||||
--nav-selected-hovered-bkg: var(--blue) 40% 17%;
|
||||
--nav-selected-text: var(--blue) 100% 70%;
|
||||
--nav-indicator-bkg: var(--blue) 30% 30%;
|
||||
--toc-hovered-bkg: 0deg 0% 100% / 0.07;
|
||||
--overlay-bkg: var(--blue) 75% 5%;
|
||||
--overlay-bkg-border: var(--blue) 45% 15%;
|
||||
--footer-bkg: var(--blue) 66% 5%;
|
||||
--footer-bkg-border: var(--blue) 75% 21%;
|
||||
}
|
||||
|
||||
.typeprop-link {
|
||||
color: hsl(var(--prop-link-color));
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
:root {
|
||||
html {
|
||||
--scaleFactor: 1.618;
|
||||
--wholestep: 1.618;
|
||||
--halfstep: 1.272;
|
||||
|
|
@ -21,8 +21,13 @@
|
|||
--3xl: calc(var(--2xl) * var(--scaleFactor));
|
||||
--4xl: calc(var(--3xl) * var(--scaleFactor));
|
||||
|
||||
/* Unitless sizes; required for adhoc calculations (division and multiplication in calc() require unitless numbers */
|
||||
/* NOTE: in calc() with multiplication or division the right side must be a unitless number */
|
||||
/* INFO: Unitless sizes;
|
||||
required for adhoc calculations
|
||||
(division and multiplication in calc() require unitless numbers)
|
||||
*/
|
||||
/* NOTE:
|
||||
in calc() with (x*y) or (x/y) the "y" must be a unitless number
|
||||
*/
|
||||
|
||||
--sm-unitless: calc(1 / var(--scaleFactor));
|
||||
--xs-unitless: calc(var(--sm-unitless) / var(--scaleFactor));
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue