<link rel="stylesheet" type="text/css" href="https://unpkg.com/css-media-vars/css-media-vars.css">
<section class="codepen">
<h3>Fibonacci Carousel</h3>
<div style="--fib-enabled: var(--fibenabled)">
<button class="fib-left fib-disabled" aria-hidden="true" tabindex="-1"><</button>
<button class="fib-right" aria-hidden="true" tabindex="-1">></button>
<ul id="fibonacci" style="--fib-unitsize: 1.6rem;">
<li data-augmented-ui style="--fib-bg: url(http://propjockey.io/assets/codepens/portal.png);">
<a href="https://codepen.io/propjockey/pen/vYxraBz?editors=1100">
<h4 class="fib-title">A simple animated CSS portal</h4>
<p class="fib-desc">
Built from a single static PNG, features: masking, transformations, keyframe animations, and user-specified color customization.
</p>
</a>
</li>
<li data-augmented-ui style="--fib-bg: url(http://propjockey.io/assets/codepens/inset-radius.gif);">
<a href="https://codepen.io/propjockey/pen/mdWvJPY?editors=1100">
<h4 class="fib-title">border-radius: inset 7vh;</h4>
<p class="fib-desc">
An augmented-ui demo, transitioning between scoop and round augs to simulate border-radius if it had an inset option.
</p>
</a>
</li>
<li data-augmented-ui style="--fib-bg: url(http://propjockey.io/assets/codepens/tooltip.gif);">
<a href="https://codepen.io/propjockey/pen/ExWMQRo?editors=1100">
<h4 class="fib-title">Fancy curvy tooltip</h4>
<p class="fib-desc">
A demo showing how you might use augmented-ui to create a simple any-size-tooltip with a pinched inset curve at the tip.
</p>
</a>
</li>
<li data-augmented-ui style="--fib-bg: url(http://propjockey.io/assets/codepens/trig.png);">
<a href="https://codepen.io/propjockey/pen/zYZXdOb?editors=1100">
<h4 class="fib-title">Trig calculations in CSS</h4>
<p class="fib-desc">
A demo of an idea to do a scaled progressive summation across a curve-distributed array of partial trig cache values to estimate the value of trig functions in CSS.
</p>
</a>
</li>
<li data-augmented-ui style="--fib-bg: url(http://propjockey.io/assets/codepens/int.png);">
<a href="https://codepen.io/propjockey/pen/MWpNgVM?editors=1100">
<h4 class="fib-title">Cast to INT in CSS without Houdini</h4>
<p class="fib-desc">
A demo of an impractical (but working) method to round floats to int in CSS. The compiled calc() resembles the Billion Laughs Attack.
</p>
</a>
</li>
<li data-augmented-ui style="--fib-bg: url(http://propjockey.io/assets/codepens/conditionals.png);">
<a href="https://codepen.io/propjockey/pen/YzZMNaz?editors=1100">
<h4 class="fib-title">CSS <, <=, =, >=, >, != operators demo</h4>
<p class="fib-desc">
Simple CSS calc()s that show you how to compare two numbers. These conditionals are fundamental to many of my other CSS demos and tricks.
</p>
</a>
</li>
<li data-augmented-ui style="--fib-bg: url(http://propjockey.io/assets/codepens/retrowave.png);">
<a href="https://codepen.io/propjockey/pen/VwKQENg?editors=1100">
<h4 class="fib-title">To the future!</h4>
<p class="fib-desc">
A bit of animated CSS art with a couple png mountains and a retrowave vibe 💜
</p>
</a>
</li>
<li data-augmented-ui style="--fib-bg: url(http://propjockey.io/assets/codepens/almaz.gif);">
<a href="https://codepen.io/propjockey/pen/bGwdZmN?editors=1100">
<h4 class="fib-title">Animation from Daniel Deluxe's Almaz</h4>
<p class="fib-desc">
A augmented-ui powered recreation of a corporate logo animation from a 2018 music video, Almaz by Daniel Deluxe.
</p>
</a>
</li>
<li data-augmented-ui style="--fib-bg: url(http://propjockey.io/assets/codepens/2advanced.png);">
<a href="https://codepen.io/propjockey/pen/QWEYqJP?editors=1100">
<h4 class="fib-title">2advanced // augmented-ui</h4>
<p class="fib-desc">
Throwback to the Sci-Fi shapes of the flash-based "2advanced" UI easily recreated in today's world with augmented-ui
</p>
</a>
</li>
<li data-augmented-ui style="--fib-bg: url(http://propjockey.io/assets/codepens/bladerunner.png);">
<a href="https://codepen.io/propjockey/pen/YzWPEKN?editors=1100">
<h4 class="fib-title">The Famous BLADE RUNNER Tile</h4>
<p class="fib-desc">
Demonstration of masks in CSS to turn two static PNG images into a convincing 3D object. Fun to interact with, take a look!
</p>
</a>
</li>
<li aria-hidden="true" class="fib-empty"></li>
<li aria-hidden="true" class="fib-empty"></li>
<li aria-hidden="true" class="fib-empty"></li>
<li aria-hidden="true" class="fib-empty"></li>
<li aria-hidden="true" class="fib-empty"></li>
<li aria-hidden="true" class="fib-empty"></li>
<li aria-hidden="true" class="fib-empty"></li>
<li aria-hidden="true" class="fib-empty"></li>
</ul>
</div>
</section>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: sans-serif;
}
:root {
--theme_0: 0 0% 100%;
--theme_1: 270 100% 47%;
--theme_2: 314 99% 50%;
--theme_3: 270 100% 5%;
}
@supports (backdrop-filter: sepia(1)) {
:root { --supports-backdrop-filter: ; }
}
html {
--flags-glow: ;
--flags-retropx: ;
/* --flags__useretropx: var(--flags-glow) var(--flags-retropx); */
--flags__useretropx: var(--flags-retropx);
--retropx-opacity: 0.42;
--retropx-brighten: var(--flags__useretropx) brightness(1.5);
--flags-monochromatic: initial;
--mono-hue: 275;
--flags__usemonochromatic: var(--supports-backdrop-filter) var(--flags-monochromatic);
/* end flags and states */
filter: var(--retropx-brighten, none);
font-size: 1rem;
font-family: sans-serif;
--bgmonochromatic: var(--flags__usemonochromatic) calc(var(--mono-hue) - 37) 100% 8%;
--theme_mainBgColor: var(--bgmonochromatic, var(--theme_3));
background: linear-gradient(
hsl(var(--theme_mainBgColor) / 0.9), hsl(var(--theme_mainBgColor) / 0.9)
),
url(/assets/propjockey.png) center center / min(min(75vh, 50vw), 750px) auto no-repeat fixed,
hsl(var(--theme_mainBgColor));
color: hsl(var(--theme_0));
--sm-main-width: var(--media-lte-sm) 100%;
--main-width: var(--sm-main-width, min(90%, 75em));
}
body::before {
--monochromatic: var(--flags__usemonochromatic) "";
content: var(--monochromatic, none);
backdrop-filter: sepia(1) saturate(8) hue-rotate(calc((var(--mono-hue) - 37) * 1deg));
pointer-events: none;
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
z-index: 400;
}
body::after {
--pxmasksize: 8px;
--pxmaskimg: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAABi0lEQVRIx+3UTW9SQRSA4WcucAENDbWKrRuSGhcmLvr/f4UbY+KCqIlG8IO2WL4uzHXB5UIjlLhywyxmMZk5c85535wgyoz09bz13hd3ml547cpL51pSAeTI5SAIrM4TBBWpphOnzjx15okTTalK+TgXLcxNTUzNZKIoJ4iWpm709Xw0MNHwTNelc6caKoJYPJ+Zi4JUXaomEYIolxm7MdB3ba6mraOj7VFRwFJmYmRkLFPVdKK1yjGI5YXfbo0tVDW11hcoPrg2MDA0k2rreL76IIh/pZiobVKkKPGbnk/6Juo6ui5daGuuApCLouWqMSoSlaLBuYU73332zgdfjTVceOWNro7HCQWYREWqrq6hpiopYJEXJd4a+umHX4ZGJjJL+TqAkvV6373WQcuVbHFeykxNzcwt1pwPebKrifc4l03c48k2xp2cS4x7PNmItIfzlkg7PdmovIfzDpXveRLEhzmrPexJcojzIU+SQ5wPefIv82CnJ8d5cJwHx3nwH+ZBVaquoVE2OPAH4PLAAI/m8L8AAAAASUVORK5CYII=);
--useretropx: var(--flags__useretropx) "";
content: var(--useretropx, none);
pointer-events: none;
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: var(--pxmaskimg) 0 0 / var(--pxmasksize) var(--pxmasksize);
opacity: var(--retropx-opacity);
backdrop-filter: contrast(1.5) brightness(1.5);
z-index: 200;
}
body {
min-height: 100vh;
}
a {
text-decoration: none;
}
ul > li:nth-child(1) { --nth-li: 1; } ul > li:nth-last-child(1) { --nth-li-total: (var(--nth-li) - 1 + 1); }
ul > li:nth-child(2) { --nth-li: 2; } ul > li:nth-last-child(2) { --nth-li-total: (var(--nth-li) - 1 + 2); }
ul > li:nth-child(3) { --nth-li: 3; } ul > li:nth-last-child(3) { --nth-li-total: (var(--nth-li) - 1 + 3); }
ul > li:nth-child(4) { --nth-li: 4; } ul > li:nth-last-child(4) { --nth-li-total: (var(--nth-li) - 1 + 4); }
ul > li:nth-child(5) { --nth-li: 5; } ul > li:nth-last-child(5) { --nth-li-total: (var(--nth-li) - 1 + 5); }
ul > li:nth-child(6) { --nth-li: 6; } ul > li:nth-last-child(6) { --nth-li-total: (var(--nth-li) - 1 + 6); }
ul > li:nth-child(7) { --nth-li: 7; } ul > li:nth-last-child(7) { --nth-li-total: (var(--nth-li) - 1 + 7); }
ul > li:nth-child(8) { --nth-li: 8; } ul > li:nth-last-child(8) { --nth-li-total: (var(--nth-li) - 1 + 8); }
ul > li:nth-child(9) { --nth-li: 9; } ul > li:nth-last-child(9) { --nth-li-total: (var(--nth-li) - 1 + 9); }
ul > li:nth-child(10) { --nth-li: 10; } ul > li:nth-last-child(10) { --nth-li-total: (var(--nth-li) - 1 + 10); }
ul > li:nth-child(11) { --nth-li: 11; } ul > li:nth-last-child(11) { --nth-li-total: (var(--nth-li) - 1 + 11); }
ul > li:nth-child(12) { --nth-li: 12; } ul > li:nth-last-child(12) { --nth-li-total: (var(--nth-li) - 1 + 12); }
ul > li:nth-child(13) { --nth-li: 13; } ul > li:nth-last-child(13) { --nth-li-total: (var(--nth-li) - 1 + 13); }
ul > li:nth-child(14) { --nth-li: 14; } ul > li:nth-last-child(14) { --nth-li-total: (var(--nth-li) - 1 + 14); }
ul > li:nth-child(15) { --nth-li: 15; } ul > li:nth-last-child(15) { --nth-li-total: (var(--nth-li) - 1 + 15); }
ul > li:nth-child(16) { --nth-li: 16; } ul > li:nth-last-child(16) { --nth-li-total: (var(--nth-li) - 1 + 16); }
ul > li:nth-child(17) { --nth-li: 17; } ul > li:nth-last-child(17) { --nth-li-total: (var(--nth-li) - 1 + 17); }
ul > li:nth-child(18) { --nth-li: 18; } ul > li:nth-last-child(18) { --nth-li-total: (var(--nth-li) - 1 + 18); }
ul > li:nth-child(19) { --nth-li: 19; } ul > li:nth-last-child(19) { --nth-li-total: (var(--nth-li) - 1 + 19); }
ul > li:nth-child(20) { --nth-li: 20; } ul > li:nth-last-child(20) { --nth-li-total: (var(--nth-li) - 1 + 20); }
ul > li:nth-child(21) { --nth-li: 21; } ul > li:nth-last-child(21) { --nth-li-total: (var(--nth-li) - 1 + 21); }
ul > li:nth-child(22) { --nth-li: 22; } ul > li:nth-last-child(22) { --nth-li-total: (var(--nth-li) - 1 + 22); }
ul > li:nth-child(23) { --nth-li: 23; } ul > li:nth-last-child(23) { --nth-li-total: (var(--nth-li) - 1 + 23); }
ul > li:nth-child(24) { --nth-li: 24; } ul > li:nth-last-child(24) { --nth-li-total: (var(--nth-li) - 1 + 24); }
ul > li:nth-child(25) { --nth-li: 25; } ul > li:nth-last-child(25) { --nth-li-total: (var(--nth-li) - 1 + 25); }
ul > li:nth-child(26) { --nth-li: 26; } ul > li:nth-last-child(26) { --nth-li-total: (var(--nth-li) - 1 + 26); }
ul > li:nth-child(27) { --nth-li: 27; } ul > li:nth-last-child(27) { --nth-li-total: (var(--nth-li) - 1 + 27); }
ul > li:nth-child(28) { --nth-li: 28; } ul > li:nth-last-child(28) { --nth-li-total: (var(--nth-li) - 1 + 28); }
ul > li:nth-child(29) { --nth-li: 29; } ul > li:nth-last-child(29) { --nth-li-total: (var(--nth-li) - 1 + 29); }
ul > li:nth-child(30) { --nth-li: 30; } ul > li:nth-last-child(30) { --nth-li-total: (var(--nth-li) - 1 + 30); }
ul > li:nth-child(31) { --nth-li: 31; } ul > li:nth-last-child(31) { --nth-li-total: (var(--nth-li) - 1 + 31); }
ul > li:nth-child(32) { --nth-li: 32; } ul > li:nth-last-child(32) { --nth-li-total: (var(--nth-li) - 1 + 32); }
ul {
list-style: var(--fib-enabled) none;
display: var(--fib-enabled) block;
margin: 1rem auto;
--fib-unitsize: 2rem;
--fib-offset: 0;
height: var(--fib-enabled) calc(21 * (var(--fib-unitsize)));
width: var(--fib-enabled) calc(34 * (var(--fib-unitsize)));
position: relative;
overflow: hidden;
}
ul > li, ul > [data-augmented-ui] {
overflow: hidden;
--fib-maxoffset: var(--nth-li-total) - 9;
--fib-spot: (var(--nth-li) - min(var(--fib-offset), var(--fib-maxoffset)));
--fib-size: (-1 * max(-1, min(0, 100000 * (var(--fib-spot) - 1)))) * (34) +
(1 + max(-1, 10000 * min(var(--fib-spot) - 1, 1 - var(--fib-spot)))) * (21) +
(1 + max(-1, 10000 * min(var(--fib-spot) - 2, 2 - var(--fib-spot)))) * (13) +
(1 + max(-1, 10000 * min(var(--fib-spot) - 3, 3 - var(--fib-spot)))) * (8) +
(1 + max(-1, 10000 * min(var(--fib-spot) - 4, 4 - var(--fib-spot)))) * (5) +
(1 + max(-1, 10000 * min(var(--fib-spot) - 5, 5 - var(--fib-spot)))) * (3) +
(1 + max(-1, 10000 * min(var(--fib-spot) - 6, 6 - var(--fib-spot)))) * (2) +
(1 + max(-1, 10000 * min(var(--fib-spot) - 7, 7 - var(--fib-spot)))) * (1) +
(1 + max(-1, min(0, 100000 * (var(--fib-spot) - 8)))) * (1);
height: var(--fib-enabled) calc(var(--fib-unitsize) * (var(--fib-size)));
width: var(--fib-enabled) calc(var(--fib-unitsize) * (var(--fib-size)));
/* --fib-opacity: (1 + max(-1, min(0, 100000 * (var(--fib-spot) - 1)))) * (1 + max(-1, min(0, -100000 * (var(--fib-spot) - 8)))); */
--fib-opacity: (-1 * max(-1, min(0, 100000 * (var(--fib-spot) - 1)))) * (0) +
(1 + max(-1, 10000 * min(var(--fib-spot) - 1, 1 - var(--fib-spot)))) * (1) +
(1 + max(-1, 10000 * min(var(--fib-spot) - 2, 2 - var(--fib-spot)))) * (0.8) +
(1 + max(-1, 10000 * min(var(--fib-spot) - 3, 3 - var(--fib-spot)))) * (0.6) +
(1 + max(-1, 10000 * min(var(--fib-spot) - 4, 4 - var(--fib-spot)))) * (0.5) +
(1 + max(-1, 10000 * min(var(--fib-spot) - 5, 5 - var(--fib-spot)))) * (0.4) +
(1 + max(-1, 10000 * min(var(--fib-spot) - 6, 6 - var(--fib-spot)))) * (0.3) +
(1 + max(-1, 10000 * min(var(--fib-spot) - 7, 7 - var(--fib-spot)))) * (0.2) +
(1 + max(-1, 10000 * min(var(--fib-spot) - 8, 8 - var(--fib-spot)))) * (0.1) +
(1 + max(-1, min(0, 100000 * (var(--fib-spot) - 9)))) * (0);
opacity: var(--fib-enabled) calc(var(--fib-opacity));
--fib-col-start: (-1 * max(-1, min(0, 100000 * (var(--fib-spot) - 1)))) * (0) +
(1 + max(-1, 10000 * min(var(--fib-spot) - 1, 1 - var(--fib-spot)))) * (0) +
(1 + max(-1, 10000 * min(var(--fib-spot) - 2, 2 - var(--fib-spot)))) * (21) +
(1 + max(-1, 10000 * min(var(--fib-spot) - 3, 3 - var(--fib-spot)))) * (26) +
(1 + max(-1, 10000 * min(var(--fib-spot) - 4, 4 - var(--fib-spot)))) * (21) +
(1 + max(-1, 10000 * min(var(--fib-spot) - 5, 5 - var(--fib-spot)))) * (21) +
(1 + max(-1, 10000 * min(var(--fib-spot) - 6, 6 - var(--fib-spot)))) * (24) +
(1 + max(-1, 10000 * min(var(--fib-spot) - 7, 7 - var(--fib-spot)))) * (25) +
(1 + max(-1, min(0, 100000 * (var(--fib-spot) - 8)))) * (24);
--fib-row-start: (-1 * max(-1, min(0, 100000 * (var(--fib-spot) - 1)))) * (21) +
(1 + max(-1, 10000 * min(var(--fib-spot) - 1, 1 - var(--fib-spot)))) * (0) +
(1 + max(-1, 10000 * min(var(--fib-spot) - 2, 2 - var(--fib-spot)))) * (0) +
(1 + max(-1, 10000 * min(var(--fib-spot) - 3, 3 - var(--fib-spot)))) * (13) +
(1 + max(-1, 10000 * min(var(--fib-spot) - 4, 4 - var(--fib-spot)))) * (16) +
(1 + max(-1, 10000 * min(var(--fib-spot) - 5, 5 - var(--fib-spot)))) * (13) +
(1 + max(-1, 10000 * min(var(--fib-spot) - 6, 6 - var(--fib-spot)))) * (13) +
(1 + max(-1, 10000 * min(var(--fib-spot) - 7, 7 - var(--fib-spot)))) * (15) +
(1 + max(-1, min(0, 100000 * (var(--fib-spot) - 8)))) * (15);
--fib-__posenabled: var(--fib-enabled) absolute;
position: var(--fib-__posenabled, relative);
left: var(--fib-enabled) calc((var(--fib-unitsize)) * (var(--fib-col-start)));
top: var(--fib-enabled) calc((var(--fib-unitsize)) * (var(--fib-row-start)));
background: var(--fib-enabled) var(--fib-bg) center center / 80% 80% no-repeat;
}
li.fib-empty {
--fib-__display: var(--fib-enabled) block;
display: var(--fib-__display, none);
visibility: hidden;
}
ul a {
--fib-__scaleIfEnabled: var(--fib-enabled)
calc((1 + max(-1, min(0, 100000 * (var(--fib-spot) - 1)))) * (1 + max(-1, min(0, -100000 * (var(--fib-spot) - 2)))));
opacity: var(--fib-__scaleIfEnabled, 1);
/* if this is before the first index shown, shift the a tag back up to where it was previously so shift tabbing doesn't jump */
transform: var(--fib-enabled) translateY(
calc(
(-1 * max(-1, min(0, 100000 * (var(--fib-spot) - 1)))) * var(--fib-unitsize) * -34
)
);
}
ul .fib-title {
font-size: calc(var(--fib-font-size-basis) * var(--fib-__scaleIfEnabled, 1));
}
ul .fib-desc {
--fib-__scaleIfEnabled: var(--fib-enabled) calc(1 + max(-1, 10000 * min(var(--fib-spot) - 1, 1 - var(--fib-spot))));
font-size: calc(var(--fib-font-size-basis) / 5 * 4 * var(--fib-__scaleIfEnabled, 1));
opacity: var(--fib-__scaleIfEnabled, 1);
}
div {
position: relative;
}
button {
position: absolute;
top: 50%;
transform: translateY(-50%);
--fib-__showifenabled: var(--fib-enabled) block;
display: var(--fib-__showifenabled, none);
z-index: 22;
}
.fib-left {
left: 0;
}
.fib-right {
right: 0;
}
ul::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: calc(var(--fib-unitsize) * 13);
pointer-events: all;
--fib-__showifenabled: var(--fib-enabled) block;
display: var(--fib-__showifenabled, none);
z-index: 20;
}
section {
padding: 0.25rem;
--fibenabled: var(--media-gte-md);
--lgsize: var(--media-gte-lg) 2rem;
--mdsize: var(--media-lte-md) 1.5rem;
--fibunitsize: var(--lgsize, var(--mdsize, 1rem));
}
section > a {
display: grid;
--gtcsm: var(--media-lte-sm) 1fr;
grid-template-columns: var(--gtcsm, 13fr 21fr);
gap: 1rem;
align-items: center;
text-align: center;
}
h3 {
max-width: 25rem;
color: hsl(var(--theme_0));
--fs: var(--media-gte-md) 1.75rem;
font-size: var(--fs, 0);
text-align: center;
filter: var(--flags-glow) drop-shadow(0 0 1rem hsl(var(--theme_0) / 0.33));
}
h3::after {
content: "make the screen wider to see the Fibonacci Carousel!";
--fs: var(--media-gte-md) 0;
font-size: var(--fs, 1.75rem);
}
h3 + p {
color: hsl(var(--theme_2));
font-size: 1.5rem;
text-shadow: var(--flags-glow) 0 0 1rem hsl(var(--theme_2) / 0.33);
}
section ul {
background: linear-gradient(
to bottom right,
hsl(var(--theme_2) / 0.33) -75%,
hsl(var(--theme_1) / 0.33),
hsl(var(--theme_2) / 0.33) 175%
);
outline: var(--fibenabled) 0.25rem solid hsl(var(--theme_2) / 0.33);
}
li[data-augmented-ui] {
--aug-border: initial;
--aug-border-all: 0.25rem;
--aug-border-bg: var(--fibenabled) linear-gradient(
to bottom right,
hsl(var(--theme_1)),
hsl(var(--theme_2)),
hsl(var(--theme_1))
) fixed;
transition: all calc(var(--fib-spot) * 0.25s) linear;
padding: var(--aug-border-all);
--fib-font-size-basis: 1.25rem;
}
li > a {
position: var(--fibenabled) absolute;
bottom: 10%;
left: 0px;
right: 0px;
padding: var(--fibenabled) 1.5rem;
background: hsl(var(--theme_3) / 0.9);
box-shadow: 0 -3rem 6rem 1rem hsl(var(--theme_3) / 0.25);
border-top: 0.125rem solid hsl(var(--theme_2) / 0.33);
border-bottom: 0.125rem solid hsl(var(--theme_2) / 0.33);
}
.fib-title {
display: block;
color: hsl(var(--theme_0));
text-shadow: var(--flags-glow) 0 0 1rem hsl(var(--theme_0) / 0.6);
line-height: 2;
}
.fib-desc {
color: hsl(var(--theme_2));
text-shadow: var(--flags-glow) 0 0 1rem hsl(var(--theme_2) / 0.6);
}
section button {
height: 3rem;
width: 3rem;
background: hsl(var(--theme_1));
font-size: 1.75rem;
color: hsl(var(--theme_0));
text-shadow: var(--flags-glow) 0 0 1rem hsl(var(--theme_0) / 0.6);
border: none;
border-radius: 50%;
cursor: pointer;
filter: var(--flags-glow) drop-shadow(0 0 1rem hsl(var(--theme_1) / 0.5));
}
section .fib-disabled {
opacity: 0.25;
pointer-events: none;
}
const fib = document.querySelector("#fibonacci")
const left = document.querySelector(".fib-left")
const right = document.querySelector(".fib-right")
const updateDisabledStates = function (x) {
if (x <= 0) {
left.classList.add("fib-disabled")
} else {
left.classList.remove("fib-disabled")
}
if (x >= (fib.children.length - 9)) {
right.classList.add("fib-disabled")
} else {
right.classList.remove("fib-disabled")
}
}
fib.addEventListener("focus", ev => {
const li = ev.target.closest("li")
const ul = li && li.parentNode
if (ul) {
const x = Array.prototype.indexOf.call(ul.children, li)
ul.style.setProperty("--fib-offset", x)
updateDisabledStates(x)
}
}, true)
left.addEventListener("click", () => {
const x = parseInt(getComputedStyle(fib).getPropertyValue("--fib-offset")) || 0
if (x > 0) {
fib.style.setProperty("--fib-offset", x - 1)
updateDisabledStates(x - 1)
}
})
right.addEventListener("click", () => {
const x = parseInt(getComputedStyle(fib).getPropertyValue("--fib-offset")) || 0
if (x < (fib.children.length - 9)) {
fib.style.setProperty("--fib-offset", x + 1)
updateDisabledStates(x + 1)
}
})
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.