fillnine

shape fillability enhanced

Re: #79 #78 #77

<style media=(color) data-tape=https://s9a.org/tape/releases/tag/v0.9.0>
:root{--tape-filter:none;--tape-bluv:#11dff1;--tape-play:#fbbfff;--tape-loud:#eee833;--tape-luvu:#44f477;--tape-blaq:#0e0e0e;--tape-watt:#e0e0e0;--tape-hex:#e0e0e0;--tape-mix:transparent}.tape-watt{--tape-hex:var(--tape-watt)}.tape-luvu{--tape-hex:var(--tape-luvu)}.tape-loud{--tape-hex:var(--tape-loud)}.tape-play{--tape-hex:var(--tape-play)}.tape-bluv{--tape-hex:var(--tape-bluv)}.tape-flat{border-color:transparent}.tape-flap{border-color:currentColor}.tape-flow{--tape-remix:none}.tape-flow :not(.tape-skip){background-color:transparent;color:inherit}.tape-blaq,.tape-bluv,.tape-loud,.tape-luvu,.tape-play,.tape-watt{--tape-mix:var(--tape-hex);--tape-remix:none;color:var(--tape-blaq)!important;background-color:var(--tape-mix)!important;background-image:var(--tape-remix);fill:var(--tape-mix);filter:var(--tape-filter)}.tape-blaq{--tape-mix:var(--tape-blaq);color:var(--tape-hex)!important}.tape-erase,.tape-erase *{color:transparent!important}
</style>

v0.9.0#fill

mutate

hue eye am

<style media=(color) data-hues=https://s9a.org/tape/releases/tag/v0.8.0>
:root{--tape-filter:none;--tape-bluv:#11dff1;--tape-play:#fbbfff;--tape-loud:#eee833;--tape-luvu:#44f477;--tape-blaq:#0e0e0e;--tape-watt:#e0e0e0;--tape-hex:#e0e0e0;--tape-mix:transparent}.tape-watt{--tape-hex:var(--tape-watt)}.tape-luvu{--tape-hex:var(--tape-luvu)}.tape-loud{--tape-hex:var(--tape-loud)}.tape-play{--tape-hex:var(--tape-play)}.tape-bluv{--tape-hex:var(--tape-bluv)}.tape-flat{border-color:transparent}.tape-flap{border-color:currentColor}.tape-flow{--tape-remix:none}.tape-flow :not(.tape-skip){background-color:transparent;color:inherit}.tape-blaq,.tape-bluv,.tape-loud,.tape-luvu,.tape-play,.tape-watt{--tape-mix:var(--tape-hex);--tape-remix:none;color:var(--tape-blaq)!important;background-color:var(--tape-mix)!important;background-image:var(--tape-remix);filter:var(--tape-filter)}.tape-blaq{--tape-mix:var(--tape-blaq);color:var(--tape-hex)!important}.tape-erase,.tape-erase *{color:transparent!important}
</style>

v0.8.0#readme

summeravasel¡on

plug play

hyperstyle

<style media=(color) data-vase=https://s9a.org/tape/releases/tag/v0.7.0>
:root{--tape-filter:none;--tape-blue:#11dff1;--tape-pink:#fbbfff;--tape-yellow:#eee833;--tape-green:#44f477;--tape-black:#0e0e0e;--tape-white:#e0e0e0;--tape-hex:#e0e0e0;--tape-mix:transparent}.tape-white{--tape-hex:var(--tape-white)}.tape-green{--tape-hex:var(--tape-green)}.tape-yellow{--tape-hex:var(--tape-yellow)}.tape-pink{--tape-hex:var(--tape-pink)}.tape-blue{--tape-hex:var(--tape-blue)}.tape-flat{border-color:transparent}.tape-flap{border-color:currentColor}.tape-flow{--tape-remix:none}.tape-flow :not(.tape-skip){background-color:transparent;color:inherit}.tape-black,.tape-blue,.tape-green,.tape-pink,.tape-white,.tape-yellow{--tape-mix:var(--tape-hex);--tape-remix:none;color:var(--tape-black)!important;background-color:var(--tape-mix)!important;background-image:var(--tape-remix);filter:var(--tape-filter)}.tape-black{--tape-mix:var(--tape-black);color:var(--tape-hex)!important}.tape-erase,.tape-erase *{color:transparent!important}
</style>

#69 #68 overcame #67 #66 #65

#0e0e0e : #e0e0e0 ...

desire: healedbuss

#66 healed 2 color bugs about depth and freestyle
how could a rooftop view in london look just the same as one in brooklyn

hyperstyle
trident ur selfless

<style media=(color) data-desire=https://s9a.org/tape/releases/tag/v0.6.0>
:root{--tape-black:#090909;--tape-white:#e9e9e9;--tape-pink:#fbbfff;--tape-yellow:#eee833;--tape-blue:#11dff1;--tape-green:#44f477;--tape-filter:none;--tape-mix:transparent;--tape-hex:var(--tape-white)}@media (prefers-contrast:less){:root{--tape-white:#dcdcdc;--tape-black:#181818}}.tape-blue{--tape-hex:var(--tape-blue)}.tape-pink{--tape-hex:var(--tape-pink)}.tape-green{--tape-hex:var(--tape-green)}.tape-yellow{--tape-hex:var(--tape-yellow)}.tape-flat{border-color:transparent}.tape-flap{border-color:currentColor}.tape-flow{--tape-remix:none}.tape-flow :not(.tape-skip){background-color:transparent;color:inherit}.tape-black,.tape-blue,.tape-green,.tape-pink,.tape-white,.tape-yellow{--tape-mix:var(--tape-hex);--tape-remix:none;color:var(--tape-black)!important;background-color:var(--tape-mix)!important;background-image:var(--tape-remix);filter:var(--tape-filter)}.tape-black{--tape-mix:var(--tape-black);color:var(--tape-hex)!important}.tape-erase,.tape-erase *{color:transparent!important}
</style>

imagine mix

gradient composition

Rules were remixed to accommodate gradient composition via var while being compatible with retro releases

hyperstyle

<style media=(color) data-imagine=https://s9a.org/tape/releases/tag/v0.5.0>
:root{--tape-black:#090909;--tape-white:#e9e9e9;--tape-pink:#fbbfff;--tape-yellow:#eee833;--tape-blue:#11dff1;--tape-green:#44f477;--tape-filter:none;--tape-mix:transparent}@media (prefers-contrast:less){:root{--tape-white:#dcdcdc;--tape-black:#181818}}.tape-black,.tape-white{--tape-hex:var(--tape-white)}.tape-blue{--tape-hex:var(--tape-blue)}.tape-pink{--tape-hex:var(--tape-pink)}.tape-green{--tape-hex:var(--tape-green)}.tape-yellow{--tape-hex:var(--tape-yellow)}.tape-flat{border-color:transparent}.tape-flap{border-color:currentColor}.tape-flow{--tape-remix:none}.tape-flow :not(.tape-skip){background-color:transparent;color:inherit}.tape-black,.tape-blue,.tape-pink,.tape-green,.tape-yellow,.tape-white{--tape-mix:var(--tape-hex);--tape-remix:none;color:var(--tape-black)!important;background-color:var(--tape-mix)!important;background-image:var(--tape-remix);filter:var(--tape-filter)}.tape-black{--tape-mix:var(--tape-black);color:var(--tape-hex)!important}.tape-erase,.tape-erase *{color:transparent!important}
</style>

migration

.tape-clean ≈ .tape-flow
.tape-clash ≈ .tape-skip

produced with aloe help from your friends
unicorn, crane, wind rose

Winter Warmup Web

🌤️ new and improved

• #40 new erase class
• #41 balance contrast
• #42 filter hook
• #43 yellow demo

🧿 style tag is fast and free from FOUC

<style media=(color) data-via="https://github.com/s9a/tape/releases/v0.4.0">
:root{--tape-white:#e9e9e9;--tape-black:#090909;--tape-pink:#fbbfff;--tape-yellow:#eee833;--tape-blue:#11dff1;--tape-green:#44f477;--tape-filter:none}@media (prefers-contrast:less){:root{--tape-white:#dcdcdc;--tape-black:#272727}}.tape-white{--tape-hex:var(--tape-white)}.tape-blue{--tape-hex:var(--tape-blue)}.tape-pink{--tape-hex:var(--tape-pink)}.tape-green{--tape-hex:var(--tape-green)}.tape-yellow{--tape-hex:var(--tape-yellow)}.tape-clean:not(.tape-clash),.tape-clean :not(.tape-clash){background:transparent;color:inherit}.tape-flat{border-color:transparent}.tape-flap{border-color:currentColor}.tape-blue,.tape-pink,.tape-green,.tape-yellow,.tape-white{filter:var(--tape-filter);background:var(--tape-hex)!important;color:var(--tape-black)!important}.tape-black{background:var(--tape-black)!important;color:var(--tape-hex,var(--tape-white))!important}.tape-erase,.tape-erase *{color:transparent!important}
</style>

🔁 stylesheet affords cache on repeat

/*
be tape my friend
https://s9a.page/tape
https://github.com/s9a/tape/releases/v0.4.0
*/
:root{--tape-white:#e9e9e9;--tape-black:#090909;--tape-pink:#fbbfff;--tape-yellow:#eee833;--tape-blue:#11dff1;--tape-green:#44f477;--tape-filter:none}@media (prefers-contrast:less){:root{--tape-white:#dcdcdc;--tape-black:#272727}}.tape-white{--tape-hex:var(--tape-white)}.tape-blue{--tape-hex:var(--tape-blue)}.tape-pink{--tape-hex:var(--tape-pink)}.tape-green{--tape-hex:var(--tape-green)}.tape-yellow{--tape-hex:var(--tape-yellow)}.tape-clean:not(.tape-clash),.tape-clean :not(.tape-clash){background:transparent;color:inherit}.tape-flat{border-color:transparent}.tape-flap{border-color:currentColor}.tape-blue,.tape-pink,.tape-green,.tape-yellow,.tape-white{filter:var(--tape-filter);background:var(--tape-hex)!important;color:var(--tape-black)!important}.tape-black{background:var(--tape-black)!important;color:var(--tape-hex,var(--tape-white))!important}.tape-erase,.tape-erase *{color:transparent!important}

Pink Flap House

#readme

• Pinker demo design
• New mods include flap and clash
• Fresher demo code aces Lighthouse
• ISC 0BSD

hyperlocal

<style media=(color) data-via="https://github.com/s9a/tape/releases/tag/v0.3.0">
:root{--tape-white:#f5f5f5;--tape-black:#090909;--tape-pink:#fbbfff;--tape-yellow:#eee833;--tape-blue:#11dff1;--tape-green:#44f477}.tape-white{--tape-hex:var(--tape-white)}.tape-blue{--tape-hex:var(--tape-blue)}.tape-pink{--tape-hex:var(--tape-pink)}.tape-green{--tape-hex:var(--tape-green)}.tape-yellow{--tape-hex:var(--tape-yellow)}.tape-clean :not(.tape-clash),.tape-clean:not(.tape-clash){background:0 0;color:inherit}.tape-flat{border-color:transparent}.tape-flap{border-color:currentColor}.tape-blue,.tape-green,.tape-pink,.tape-white,.tape-yellow{background:var(--tape-hex)!important;color:var(--tape-black)!important}.tape-black{background:var(--tape-black)!important;color:var(--tape-hex,var(--tape-white))!important}
</style>

Start posters. Max black. Vibing. Compose.

#readme

• .tape-black is now composes with colors
• https://s9a.github.io/tape/#like-tape
• https://s9a.github.io/tape/#compose
• https://s9a.github.io/tape/#vibing rave thrill chill woke
• https://unpkg.com/@s9a/tape@0.2.0/

<style> snippet

<style data-via="https://unpkg.com/@s9a/tape@0.2.0/tape.css">
:root {
  --tape-white: #f5f5f5;
  --tape-black: #090909;
  --tape-pink: #fbbfff;
  --tape-yellow: #eee833;
  --tape-blue: #11dff1;
  --tape-green: #44f477;}
.tape-white { --tape-hex: var(--tape-white) }
.tape-blue { --tape-hex: var(--tape-blue) }
.tape-pink { --tape-hex: var(--tape-pink) }
.tape-green { --tape-hex: var(--tape-green) }
.tape-yellow { --tape-hex: var(--tape-yellow) }
.tape-clean:not(.tape-unclean),
.tape-clean :not(.tape-unclean) {
  background: transparent;
  color: inherit;}
.tape-flat:not(.tape-unflat),
.tape-flat :not(.tape-unflat) {
  border-color: transparent;}
.tape-blue,.tape-pink,.tape-green,.tape-yellow,.tape-white {
  background: var(--tape-hex) !important;
  color: var(--tape-black) !important;}
.tape-black {
  background: var(--tape-black) !important;
  color: var(--tape-hex, var(--tape-white)) !important;}
</style>

.css snippet

/*
Be formless.
Shapeless.
Like tape.
https://s9a.github.io/tape
https://unpkg.com/@s9a/tape@0.2.0/tape.css
*/
:root {
  --tape-white: #f5f5f5;
  --tape-black: #090909;
  --tape-pink: #fbbfff;
  --tape-yellow: #eee833;
  --tape-blue: #11dff1;
  --tape-green: #44f477;}
.tape-white { --tape-hex: var(--tape-white) }
.tape-blue { --tape-hex: var(--tape-blue) }
.tape-pink { --tape-hex: var(--tape-pink) }
.tape-green { --tape-hex: var(--tape-green) }
.tape-yellow { --tape-hex: var(--tape-yellow) }
.tape-clean:not(.tape-unclean),
.tape-clean :not(.tape-unclean) {
  background: transparent;
  color: inherit;}
.tape-flat:not(.tape-unflat),
.tape-flat :not(.tape-unflat) {
  border-color: transparent;}
.tape-blue,.tape-pink,.tape-green,.tape-yellow,.tape-white {
  background: var(--tape-hex) !important;
  color: var(--tape-black) !important;}
.tape-black {
  background: var(--tape-black) !important;
  color: var(--tape-hex, var(--tape-white)) !important;}

Like tape.

#readme

<blockquote class="tape-blue">
  I said empty your mind.
  Be formless.
  Shapeless.
  Like tape.
  Now you put tape onto walls, it becomes the walls.
  You put tape onto floors, it becomes the floors.
  You put it in you, it becomes yours.
  Now tape can flow or it can shred.
  Be tape my friend.
</blockquote>

• s9a.github.io/tape
• @s9a/tape
• @s9a/tape@0.1.0/tape.css
• <link rel="stylesheet" href="https://unpkg.com/@s9a/tape@0.1.0/tape.css">