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,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,15 +45,15 @@
|
|||
.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;
|
||||
|
||||
&>* {
|
||||
& > * {
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
|
|
@ -96,7 +98,7 @@
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
&>div {
|
||||
& > div {
|
||||
width: 2.5rem;
|
||||
aspect-ratio: 1 / 1;
|
||||
display: flex;
|
||||
|
|
@ -110,7 +112,7 @@
|
|||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
&>div {
|
||||
& > div {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
|
@ -144,7 +146,7 @@
|
|||
.marquee-scroll-arrow {
|
||||
height: unset;
|
||||
|
||||
&>div {
|
||||
& > div {
|
||||
background-color: #55555580;
|
||||
border-radius: var(--radius-xs);
|
||||
}
|
||||
|
|
@ -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