Skip to content

Instantly share code, notes, and snippets.

@djsnipa1

djsnipa1/index.html

Created December 24, 2024 05:30
Show Gist options
  • Save djsnipa1/23e9b6c2c6238a5f2a7cf6b9e1282b7c to your computer and use it in GitHub Desktop.
Save djsnipa1/23e9b6c2c6238a5f2a7cf6b9e1282b7c to your computer and use it in GitHub Desktop.
Download ZIP
moon toggle 🌛
Raw
index.html
<main>
<!-- <img src="./dark.png" alt="" /> -->
<button aria-pressed="false" class="toggle">
<div class="socket">
<div class="socket-shadow"></div>
</div>
<div class="face">
<div class="face-shadow"></div>
<div class="face-glowdrop"></div>
<div class="face-plate"></div>
<div class="face-shine">
<div class="face-shine-shadow"></div>
</div>
<div class="face-glows"><div></div></div>
<svg
class="glow"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
class="glow-path"
d="M9.8815 1.36438L9.88141 1.36429C9.70639 1.18942 9.48342 1.07041 9.24073 1.02235C8.99803 0.974286 8.74653 0.999323 8.51808 1.09429L8.51753 1.09452C4.54484 2.75146 1.75 6.6732 1.75 11.25C1.75 17.3262 6.67489 22.25 12.75 22.25C14.9217 22.2501 17.0448 21.6075 18.852 20.4032C20.6591 19.1989 22.0695 17.4868 22.9055 15.4825L22.9058 15.4818C23.0007 15.2532 23.0256 15.0015 22.9774 14.7587C22.9291 14.5159 22.8099 14.2929 22.6348 14.118C22.4597 13.9431 22.2366 13.8241 21.9937 13.7761C21.7509 13.7281 21.4993 13.7533 21.2708 13.8484L21.2707 13.8485C20.2346 14.2801 19.1231 14.5016 18.0007 14.5H18C15.7457 14.5 13.5837 13.6045 11.9896 12.0104C10.3955 10.4163 9.5 8.25433 9.5 5.99999L9.5 5.99927C9.49838 4.8769 9.71983 3.76541 10.1515 2.72938C10.2468 2.50072 10.2721 2.24888 10.224 2.00584C10.1759 1.76281 10.0567 1.53954 9.8815 1.36438Z"
stroke-width="0"
/>
</svg>
<svg
class="trail-holder"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
class="trail"
d="M9.8815 1.36438L9.88141 1.36429C9.70639 1.18942 9.48342 1.07041 9.24073 1.02235C8.99803 0.974286 8.74653 0.999323 8.51808 1.09429L8.51753 1.09452C4.54484 2.75146 1.75 6.6732 1.75 11.25C1.75 17.3262 6.67489 22.25 12.75 22.25C14.9217 22.2501 17.0448 21.6075 18.852 20.4032C20.6591 19.1989 22.0695 17.4868 22.9055 15.4825L22.9058 15.4818C23.0007 15.2532 23.0256 15.0015 22.9774 14.7587C22.9291 14.5159 22.8099 14.2929 22.6348 14.118C22.4597 13.9431 22.2366 13.8241 21.9937 13.7761C21.7509 13.7281 21.4993 13.7533 21.2708 13.8484L21.2707 13.8485C20.2346 14.2801 19.1231 14.5016 18.0007 14.5H18C15.7457 14.5 13.5837 13.6045 11.9896 12.0104C10.3955 10.4163 9.5 8.25433 9.5 5.99999L9.5 5.99927C9.49838 4.8769 9.71983 3.76541 10.1515 2.72938C10.2468 2.50072 10.2721 2.24888 10.224 2.00584C10.1759 1.76281 10.0567 1.53954 9.8815 1.36438Z"
stroke="#2CC6FE"
stroke-linecap="round"
stroke-dasharray="7 80"
stroke-dashoffset="40"
/>
</svg>
<svg
class="main"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
class="outline"
class="stroke"
d="M9.8815 1.36438L9.88141 1.36429C9.70639 1.18942 9.48342 1.07041 9.24073 1.02235C8.99803 0.974286 8.74653 0.999323 8.51808 1.09429L8.51753 1.09452C4.54484 2.75146 1.75 6.6732 1.75 11.25C1.75 17.3262 6.67489 22.25 12.75 22.25C14.9217 22.2501 17.0448 21.6075 18.852 20.4032C20.6591 19.1989 22.0695 17.4868 22.9055 15.4825L22.9058 15.4818C23.0007 15.2532 23.0256 15.0015 22.9774 14.7587C22.9291 14.5159 22.8099 14.2929 22.6348 14.118C22.4597 13.9431 22.2366 13.8241 21.9937 13.7761C21.7509 13.7281 21.4993 13.7533 21.2708 13.8484L21.2707 13.8485C20.2346 14.2801 19.1231 14.5016 18.0007 14.5H18C15.7457 14.5 13.5837 13.6045 11.9896 12.0104C10.3955 10.4163 9.5 8.25433 9.5 5.99999L9.5 5.99927C9.49838 4.8769 9.71983 3.76541 10.1515 2.72938C10.2468 2.50072 10.2721 2.24888 10.224 2.00584C10.1759 1.76281 10.0567 1.53954 9.8815 1.36438Z"
fill="black"
stroke="black"
stroke-width="2"
/>
<path
mask="url(#fade)"
class="outline-shadow"
class="stroke"
filter="url(#outer-shadow)"
d="M9.8815 1.36438L9.88141 1.36429C9.70639 1.18942 9.48342 1.07041 9.24073 1.02235C8.99803 0.974286 8.74653 0.999323 8.51808 1.09429L8.51753 1.09452C4.54484 2.75146 1.75 6.6732 1.75 11.25C1.75 17.3262 6.67489 22.25 12.75 22.25C14.9217 22.2501 17.0448 21.6075 18.852 20.4032C20.6591 19.1989 22.0695 17.4868 22.9055 15.4825L22.9058 15.4818C23.0007 15.2532 23.0256 15.0015 22.9774 14.7587C22.9291 14.5159 22.8099 14.2929 22.6348 14.118C22.4597 13.9431 22.2366 13.8241 21.9937 13.7761C21.7509 13.7281 21.4993 13.7533 21.2708 13.8484L21.2707 13.8485C20.2346 14.2801 19.1231 14.5016 18.0007 14.5H18C15.7457 14.5 13.5837 13.6045 11.9896 12.0104C10.3955 10.4163 9.5 8.25433 9.5 5.99999L9.5 5.99927C9.49838 4.8769 9.71983 3.76541 10.1515 2.72938C10.2468 2.50072 10.2721 2.24888 10.224 2.00584C10.1759 1.76281 10.0567 1.53954 9.8815 1.36438Z"
fill="black"
stroke="black"
stroke-width="2"
/>
</g>
<path
class="trail"
d="M9.8815 1.36438L9.88141 1.36429C9.70639 1.18942 9.48342 1.07041 9.24073 1.02235C8.99803 0.974286 8.74653 0.999323 8.51808 1.09429L8.51753 1.09452C4.54484 2.75146 1.75 6.6732 1.75 11.25C1.75 17.3262 6.67489 22.25 12.75 22.25C14.9217 22.2501 17.0448 21.6075 18.852 20.4032C20.6591 19.1989 22.0695 17.4868 22.9055 15.4825L22.9058 15.4818C23.0007 15.2532 23.0256 15.0015 22.9774 14.7587C22.9291 14.5159 22.8099 14.2929 22.6348 14.118C22.4597 13.9431 22.2366 13.8241 21.9937 13.7761C21.7509 13.7281 21.4993 13.7533 21.2708 13.8484L21.2707 13.8485C20.2346 14.2801 19.1231 14.5016 18.0007 14.5H18C15.7457 14.5 13.5837 13.6045 11.9896 12.0104C10.3955 10.4163 9.5 8.25433 9.5 5.99999L9.5 5.99927C9.49838 4.8769 9.71983 3.76541 10.1515 2.72938C10.2468 2.50072 10.2721 2.24888 10.224 2.00584C10.1759 1.76281 10.0567 1.53954 9.8815 1.36438Z"
stroke="#2CC6FE"
stroke-linecap="round"
/>
<!-- Inner piece -->
<g class="inner">
<path
class="inner-face"
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.528 1.71799C9.63312 1.82308 9.70465 1.95704 9.73349 2.10286C9.76234 2.24868 9.7472 2.39979 9.69 2.53699C9.23282 3.6342 8.99828 4.81134 9 5.99999C9 8.38694 9.94821 10.6761 11.636 12.3639C13.3239 14.0518 15.6131 15 18 15C19.1886 15.0017 20.3658 14.7672 21.463 14.31C21.6001 14.2529 21.7511 14.2378 21.8968 14.2666C22.0425 14.2954 22.1763 14.3668 22.2814 14.4717C22.3865 14.5767 22.458 14.7105 22.487 14.8562C22.5159 15.0018 22.501 15.1528 22.444 15.29C21.646 17.2032 20.2997 18.8376 18.5747 19.9871C16.8496 21.1367 14.823 21.7501 12.75 21.75C6.951 21.75 2.25 17.05 2.25 11.25C2.25 6.88199 4.917 3.13799 8.71 1.55599C8.84707 1.49901 8.99797 1.48399 9.14359 1.51282C9.28921 1.54166 9.42299 1.61307 9.528 1.71799Z"
/>
<path
mask="url(#inner-fade)"
class="inner-bg"
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.528 1.71799C9.63312 1.82308 9.70465 1.95704 9.73349 2.10286C9.76234 2.24868 9.7472 2.39979 9.69 2.53699C9.23282 3.6342 8.99828 4.81134 9 5.99999C9 8.38694 9.94821 10.6761 11.636 12.3639C13.3239 14.0518 15.6131 15 18 15C19.1886 15.0017 20.3658 14.7672 21.463 14.31C21.6001 14.2529 21.7511 14.2378 21.8968 14.2666C22.0425 14.2954 22.1763 14.3668 22.2814 14.4717C22.3865 14.5767 22.458 14.7105 22.487 14.8562C22.5159 15.0018 22.501 15.1528 22.444 15.29C21.646 17.2032 20.2997 18.8376 18.5747 19.9871C16.8496 21.1367 14.823 21.7501 12.75 21.75C6.951 21.75 2.25 17.05 2.25 11.25C2.25 6.88199 4.917 3.13799 8.71 1.55599C8.84707 1.49901 8.99797 1.48399 9.14359 1.51282C9.28921 1.54166 9.42299 1.61307 9.528 1.71799Z"
/>
<g
class="inner-shadow"
filter="url(#inner-shadow)"
mask="url(#fade)"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.528 1.71799C9.63312 1.82308 9.70465 1.95704 9.73349 2.10286C9.76234 2.24868 9.7472 2.39979 9.69 2.53699C9.23282 3.6342 8.99828 4.81134 9 5.99999C9 8.38694 9.94821 10.6761 11.636 12.3639C13.3239 14.0518 15.6131 15 18 15C19.1886 15.0017 20.3658 14.7672 21.463 14.31C21.6001 14.2529 21.7511 14.2378 21.8968 14.2666C22.0425 14.2954 22.1763 14.3668 22.2814 14.4717C22.3865 14.5767 22.458 14.7105 22.487 14.8562C22.5159 15.0018 22.501 15.1528 22.444 15.29C21.646 17.2032 20.2997 18.8376 18.5747 19.9871C16.8496 21.1367 14.823 21.7501 12.75 21.75C6.951 21.75 2.25 17.05 2.25 11.25C2.25 6.88199 4.917 3.13799 8.71 1.55599C8.84707 1.49901 8.99797 1.48399 9.14359 1.51282C9.28921 1.54166 9.42299 1.61307 9.528 1.71799Z"
fill="hsl(0 0% 10% / .01)"
/>
</g>
</g>
<!-- Shine -->
<!-- <path
class="shiner"
d="M9.70475 1.54119L9.7047 1.54114C9.56469 1.40124 9.38631 1.30604 9.19216 1.26759C8.998 1.22914 8.7968 1.24917 8.61404 1.32514L8.61376 1.32525C4.73092 2.94473 2 6.77759 2 11.25C2 17.1881 6.81294 22 12.75 22C14.8723 22.0001 16.9472 21.3721 18.7133 20.1952C20.4794 19.0182 21.8578 17.345 22.6747 15.3862L22.6749 15.3859C22.7508 15.203 22.7708 15.0017 22.7322 14.8074C22.6936 14.6132 22.5982 14.4348 22.4581 14.2949C22.318 14.1549 22.1395 14.0597 21.9452 14.0213C21.751 13.9829 21.5497 14.0031 21.3669 14.0792L21.3668 14.0792C20.3002 14.5237 19.1559 14.7517 18.0004 14.75H18C15.6794 14.75 13.4538 13.8281 11.8128 12.1872C10.1719 10.5462 9.25 8.32063 9.25 5.99999L9.25 5.99963C9.24833 4.84411 9.47633 3.69978 9.92077 2.63314C9.99702 2.45022 10.0172 2.24877 9.97874 2.05435C9.94028 1.85993 9.84492 1.68131 9.70475 1.54119Z"
fill="#1DFE2C"
stroke="#FE0505"
stroke-width="0.5"
/> -->
<defs>
<filter
id="inner-shadow"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset dx="0.4" dy="0.5" />
<feGaussianBlur stdDeviation="0.1" />
<feComposite
in2="hardAlpha"
operator="arithmetic"
k2="-1"
k3="1"
/>
<feColorMatrix
type="matrix"
values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_731_4"
/>
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset dx="0.3" dy="-0.5" />
<feGaussianBlur stdDeviation="0.1" />
<feComposite
in2="hardAlpha"
operator="arithmetic"
k2="-1"
k3="1"
/>
<!-- <feColorMatrix
type="matrix"
values="0 0 0 0 1 0 0 0 0 0.08125 0 0 0 0 0.08125 0 0 0 1 0"
/> -->
<feColorMatrix
type="matrix"
values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect1_innerShadow_731_4"
result="effect2_innerShadow_731_4"
/>
</filter>
<linearGradient
id="fade-gradient"
x1="0%"
y1="0%"
x2="100%"
y2="0%"
gradientTransform="rotate(45)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0.45" stop-color="white" stop-opacity="0" />
<stop offset="0.75" stop-color="white" stop-opacity="0.75" />
<stop offset="0.95" stop-color="white" stop-opacity="0.5" />
<stop offset="1" stop-color="white" stop-opacity="0.35" />
</linearGradient>
<linearGradient
id="inner-fade-gradient"
x1="0%"
y1="0%"
x2="100%"
y2="0%"
gradientTransform="rotate(45)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="transparent" stop-opacity="0" />
<stop offset="0.75" stop-color="white" stop-opacity="1" />
</linearGradient>
<mask id="fade">
<rect width="100%" height="100%" fill="url(#fade-gradient)" />
</mask>
<mask id="inner-fade">
<rect
width="100%"
height="100%"
fill="url(#inner-fade-gradient)"
/>
</mask>
<filter
id="outer-shadow"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset dy="0.5" dx="-0.05" />
<feGaussianBlur stdDeviation="0.25" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_731_4"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_731_4"
result="shape"
/>
</filter>
</defs>
</svg>
</div>
<span class="sr-only">Toggle Theme</span>
</button>
</main>
<a
class="bear-link"
href="https://twitter.com/intent/follow?screen_name=jh3yy"
target="_blank"
rel="noreferrer noopener"
>
<svg
class="w-9"
viewBox="0 0 969 955"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="161.191"
cy="320.191"
r="133.191"
stroke="currentColor"
stroke-width="20"
></circle>
<circle
cx="806.809"
cy="320.191"
r="133.191"
stroke="currentColor"
stroke-width="20"
></circle>
<circle
cx="695.019"
cy="587.733"
r="31.4016"
fill="currentColor"
></circle>
<circle
cx="272.981"
cy="587.733"
r="31.4016"
fill="currentColor"
></circle>
<path
d="M564.388 712.083C564.388 743.994 526.035 779.911 483.372 779.911C440.709 779.911 402.356 743.994 402.356 712.083C402.356 680.173 440.709 664.353 483.372 664.353C526.035 664.353 564.388 680.173 564.388 712.083Z"
fill="currentColor"
></path>
<rect
x="310.42"
y="448.31"
width="343.468"
height="51.4986"
fill="#FF1E1E"
></rect>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M745.643 288.24C815.368 344.185 854.539 432.623 854.539 511.741H614.938V454.652C614.938 433.113 597.477 415.652 575.938 415.652H388.37C366.831 415.652 349.37 433.113 349.37 454.652V511.741L110.949 511.741C110.949 432.623 150.12 344.185 219.845 288.24C289.57 232.295 384.138 200.865 482.744 200.865C581.35 200.865 675.918 232.295 745.643 288.24Z"
fill="currentColor"
></path>
</svg>
</a>
Raw
script.babel
import { Pane } from 'https://cdn.skypack.dev/[email protected]'
const config = {
theme: 'dark',
}
const ctrl = new Pane({
title: 'Config',
expanded: true,
})
const update = () => {
document.documentElement.dataset.theme = config.theme
}
const sync = (event) => {
update()
}
const toggle = document.querySelector('.toggle')
ctrl
.addBinding(config, 'theme', {
label: 'Theme',
options: {
System: 'system',
Light: 'light',
Dark: 'dark',
},
})
.on('change', () => {
toggle.setAttribute('aria-pressed', config.theme === 'light')
})
ctrl.on('change', sync)
update()
const handleToggle = () => {
const light = !!toggle.matches('[aria-pressed="false"]')
toggle.setAttribute('aria-pressed', light)
config.theme = light ? 'light' : 'dark'
ctrl.refresh()
}
toggle.addEventListener('click', handleToggle)
Raw
style.css
@import url('https://unpkg.com/normalize.css') layer(normalize);
@layer normalize, base, demo, glows, transitions, trail;
:root {
--font-size: 48px;
}
@layer trail {
/* Glow trail is 7 80, 96 array and offset */
:root {
--offset: calc(var(--step) * 0.5);
}
.trail {
stroke-dasharray: 10 80;
stroke-dashoffset: 10;
opacity: 0;
transition-property: stroke-dashoffset, opacity;
transition-duration: calc(var(--step) * 3), calc(var(--step) * 0.5);
transition-delay: var(--offset), calc(var(--offset) + (var(--step) * 2.5));
transition-timing-function: var(--ease),
linear(
0 0%,
0.0039 6.25%,
0.0156 12.5%,
0.0352 18.75%,
0.0625 25%,
0.0977 31.25%,
0.1407 37.5%,
0.1914 43.74%,
0.2499 49.99%,
0.3164 56.25%,
0.3906 62.5%,
0.5625 75%,
0.7656 87.5%,
1 100%
);
}
.toggle[aria-pressed='true'] .trail {
transition: stroke-dashoffset 0s;
opacity: 1;
stroke-dashoffset: -70;
}
.glow {
opacity: 1;
transition-property: opacity;
transition-duration: 1.25s;
transition-delay: var(--offset);
transition-timing-function: linear(
0 0%,
0.0039 6.25%,
0.0156 12.5%,
0.0352 18.75%,
0.0625 25%,
0.0977 31.25%,
0.1407 37.5%,
0.1914 43.74%,
0.2499 49.99%,
0.3164 56.25%,
0.3906 62.5%,
0.5625 75%,
0.7656 87.5%,
1 100%
);
}
.toggle[aria-pressed='true'] .glow {
opacity: 0;
transition-property: opacity;
transition-duration: var(--step);
transition-delay: 0s;
transition-timing-function: var(--ease);
}
}
@layer glows {
.face-plate {
position: absolute;
inset: 0;
border-radius: inherit;
}
.face-glowdrop {
position: absolute;
inset: 0;
border-radius: inherit;
}
.face-glowdrop::after,
.face-glowdrop::before {
content: '';
height: 50%;
aspect-ratio: 1;
background: #fff;
filter: blur(6px);
position: absolute;
z-index: -1;
border-radius: 50%;
}
.face-glowdrop::before {
left: 4%;
width: 56%;
translate: 0 -25%;
}
.face-glowdrop::after {
bottom: 0;
right: 12%;
width: 34%;
translate: 0 20%;
}
.face-glows {
position: absolute;
inset: -0.075em;
opacity: 0;
border-radius: inherit;
mix-blend-mode: plus-lighter;
filter: blur(8px);
z-index: 20;
mask: conic-gradient(from 280deg, #0000, #fff 20deg 45deg, #0000 95deg),
conic-gradient(from 110deg, #0000, #fff 20deg, #0000 95deg);
}
.face-glows div {
position: absolute;
inset: 0;
border-radius: inherit;
filter: blur(4px);
border: 0.1em solid white;
}
}
@layer transitions {
:root {
--step: 0.5s;
--ease: linear(
0 0%,
0.2342 12.49%,
0.4374 24.99%,
0.6093 37.49%,
0.6835 43.74%,
0.7499 49.99%,
0.8086 56.25%,
0.8593 62.5%,
0.9023 68.75%,
0.9375 75%,
0.9648 81.25%,
0.9844 87.5%,
0.9961 93.75%,
1 100%
);
}
body {
transition-property: background-color, color;
transition-duration: var(--step);
transition-timing-function: var(--ease);
}
.socket {
transition-property: background-color, box-shadow;
transition-duration: var(--step);
transition-timing-function: var(--ease);
}
.face {
transition-property: scale;
transition-duration: var(--step);
transition-timing-function: var(--ease);
}
.outline {
transition-property: stroke;
transition-duration: var(--step);
transition-timing-function: var(--ease);
}
.inner-bg {
fill: black;
transition-property: fill;
transition-duration: var(--step);
transition-timing-function: var(--ease);
}
.toggle::before {
transition-property: scale, opacity;
transition-duration: var(--step);
transition-timing-function: var(--ease);
}
.face-shadow::after,
.face-shadow::before {
transition-property: opacity, translate, filter, scale;
transition-duration: var(--step);
transition-timing-function: var(--ease);
}
.face-shadow::after {
scale: 0.5;
}
.face-plate {
transition-property: background-color;
transition-duration: var(--step);
transition-timing-function: var(--ease);
}
.face-glowdrop {
scale: 0;
transition-property: scale;
transition-duration: var(--step);
transition-timing-function: var(--ease);
}
.socket-shadow,
.face-glows,
.face-shine {
transition-property: opacity;
transition-duration: var(--step);
transition-timing-function: var(--ease);
}
button:active {
.socket {
box-shadow: -0.045em 0.1em 0.2em -0.15em white;
}
.face {
scale: 0.99;
}
}
.glow {
opacity: 0;
transition-property: opacity;
transition-duration: var(--step);
transition-timing-function: var(--ease);
}
.toggle[aria-pressed='true'] {
.face {
scale: 1.12;
}
.outline {
stroke: hsl(0 0% 30%);
}
.inner-bg {
fill: hsl(0 0% 20%);
}
.socket {
box-shadow: -0.025em 0.08em 0.2em -0.1em white;
}
.glow {
opacity: 0;
}
.face-glowdrop {
scale: 1;
}
&::before {
scale: 2;
opacity: 0;
}
.face-shadow::before {
translate: -15% 55%;
filter: blur(1em);
opacity: 0.35;
}
.face-shadow::after {
filter: blur(0.5em);
scale: 1;
}
.socket-shadow,
.face-glows,
.face-shine {
opacity: 1;
}
}
.face {
scale: 1;
}
}
@layer demo {
main {
font-size: var(--font-size);
scale: 1;
}
:root {
--font-size: 64px;
--bg-light: hsl(235 5% 85%);
--bg-dark: hsl(220 27% 6%);
--button-light: hsl(223 4% 73%);
--button-dark: hsl(220 27% 6%);
}
body {
background: light-dark(var(--bg-light), var(--bg-dark));
overflow: hidden;
}
button {
background: #0000;
font-size: var(--font-size);
height: 3em;
padding: 0;
border-radius: 3em;
border: 0;
aspect-ratio: 1.8 / 1;
position: relative;
cursor: pointer;
}
button::after {
content: '';
}
button :is(.socket, .face) {
position: absolute;
border-radius: 3em;
}
.toggle::before {
pointer-events: none;
}
/* light mode */
.socket {
/* box-shadow: 0 0 0.25rem 0 hsl(0 0% 100% / 0.25); */
box-shadow: -0.05em 0.1em 0.2em -0.2em white;
background: light-dark(hsl(0 0% 90%), hsl(0 0% 0%));
position: relative;
inset: 0;
}
.socket-shadow {
position: absolute;
inset: 0 0em;
opacity: 0;
border-radius: inherit;
box-shadow: 0em 0.075em 0.1em 0em white;
}
.face {
inset: 0.15em;
}
.toggle::before {
content: '';
width: 150vmax;
height: 200vmax;
aspect-ratio: 1;
border-radius: 0%;
background: radial-gradient(hsl(0 0% 100% / 0.25), hsl(0 0% 0% / 1) 35%);
position: absolute;
translate: -50% -65%;
left: 50%;
top: 50%;
z-index: -1;
opacity: 0.35;
}
.face-shadow,
.face-shadow::after,
.face-shadow::before {
position: absolute;
inset: 0;
border-radius: inherit;
}
.face-shadow::after,
.face-shadow::before {
content: '';
}
.face-shadow::before {
background: black;
}
.face-shadow::after {
background: white;
}
.face-plate {
box-shadow: -0.05em 0.1em 0.2em -0.2em white inset;
background: conic-gradient(from 45deg, #0000, hsl(0 0% 100% / 0.05)),
light-dark(var(--button-light), var(--button-dark));
}
.face-shine {
position: absolute;
inset: 0;
opacity: 0;
border-radius: 3em;
}
.face-shine-shadow {
position: absolute;
inset: 0;
border-radius: inherit;
mask: conic-gradient(
from 0deg,
#fff 90deg,
#0000 110deg 200deg,
#fff 215deg 280deg,
#0000 315deg
);
box-shadow: 0.075em 0 0.025em -0.025em hsl(0 0% 0% / 0.5) inset,
-0.075em -0.05em 0.025em -0.025em hsl(0 0% 0% / 0.5) inset;
}
.face-shine::before {
content: '';
position: absolute;
inset: 0.05em;
border-radius: 3em;
box-shadow: 0 -0.05em 0.025em -0.025em hsl(0 0% 50% / 0.5) inset,
-0.025em 0.05em 0.025em -0.025em hsl(0 0% 100% / 0.5) inset;
}
.face-shine::after {
content: '';
position: absolute;
inset: 0;
background: conic-gradient(from 45deg, #0000, hsl(0 0% 100% / 0.25));
border-radius: 3em;
}
.face svg {
--glow: hsl(182 90% 92%);
width: 25%;
position: absolute;
top: 50%;
left: 50%;
translate: -52% -48%;
overflow: visible !important;
/* filter: drop-shadow(0 0 0.15em color-mix(in hsl, var(--glow), #0000)); */
}
.face svg path {
transform-box: fill-box;
transform-origin: center center;
}
.glow {
z-index: 3;
filter: drop-shadow(0 0 0.2em var(--glow));
will-change: opacity;
}
.trail-holder {
z-index: 2;
filter: blur(10px);
.trail {
stroke-width: 4;
}
}
.trail {
stroke-dashoffset: 0;
}
.inner-face {
fill: hsl(230 5% 80%);
}
.glow-path {
fill: var(--glow);
stroke: var(--glow);
opacity: 1;
stroke-width: 0px;
}
}
@layer base {
:root {
--font-size-min: 16;
--font-size-max: 20;
--font-ratio-min: 1.2;
--font-ratio-max: 1.33;
--font-width-min: 375;
--font-width-max: 1500;
}
html {
--line: light-dark(hsl(0 0% 10% / 0.3), hsl(0 0% 100% / 0.3));
color-scheme: light dark;
}
[data-theme='light'] {
--line: hsl(0 0% 10% / 0.3);
color-scheme: light only;
}
[data-theme='dark'] {
--line: hsl(0 0% 100% / 0.3);
color-scheme: dark only;
}
:where(.fluid) {
--fluid-min: calc(
var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0))
);
--fluid-max: calc(
var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level, 0))
);
--fluid-preferred: calc(
(var(--fluid-max) - var(--fluid-min)) /
(var(--font-width-max) - var(--font-width-min))
);
--fluid-type: clamp(
(var(--fluid-min) / 16) * 1rem,
((var(--fluid-min) / 16) * 1rem) -
(((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +
(var(--fluid-preferred) * var(--variable-unit, 100vi)),
(var(--fluid-max) / 16) * 1rem
);
font-size: var(--fluid-type);
}
*,
*:after,
*:before {
box-sizing: border-box;
}
body {
display: grid;
place-items: center;
min-height: 100vh;
font-family: 'SF Pro Text', 'SF Pro Icons', 'AOS Icons', 'Helvetica Neue',
Helvetica, Arial, sans-serif, system-ui;
}
body::before {
--size: 45px;
/* --line: color-mix(in oklch, canvasText, transparent 70%); */
content: '';
height: 100vh;
width: 100vw;
position: fixed;
background: linear-gradient(
90deg,
var(--line) 1px,
transparent 1px var(--size)
)
50% 50% / var(--size) var(--size),
linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% /
var(--size) var(--size);
mask: linear-gradient(-20deg, transparent 64%, white);
top: 0;
transform-style: flat;
pointer-events: none;
z-index: -1;
}
.bear-link {
color: canvasText;
position: fixed;
top: 1rem;
left: 1rem;
width: 48px;
aspect-ratio: 1;
display: grid;
place-items: center;
opacity: 0.8;
}
:where(.x-link, .bear-link):is(:hover, :focus-visible) {
opacity: 1;
}
.bear-link svg {
width: 75%;
}
/* Utilities */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment