Skip to content

Releases: s9a/tape

mutate

27 Jun 13:03
@ryanve ryanve
v0.8.0
9787c54
Compare
Choose a tag to compare
mutate Latest
Latest

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

Assets 2

summeravasel¡on

17 Jun 23:20
@ryanve ryanve
v0.7.0
2fbfa01
Compare
Choose a tag to compare
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 ...

tape parade octopus summer

Assets 2

desire: healedbuss

15 Jun 23:49
@ryanve ryanve
v0.6.0
85f23a9
Compare
Choose a tag to compare
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

tape sample

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>
Assets 2

imagine mix

01 Oct 17:41
@ryanve ryanve
v0.5.0
c57e1a0
Compare
Choose a tag to compare
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

Assets 2

Winter Warmup Web

22 Nov 18:42
@ryanve ryanve
v0.4.0
eb20254
Compare
Choose a tag to compare
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}
Assets 2

Pink Flap House

09 Aug 23:07
@ryanve ryanve
v0.3.0
737304f
Compare
Choose a tag to compare
Pink Flap House

#readme

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>
Assets 2

Start posters. Max black. Vibing. Compose.

20 Aug 07:13
@ryanve ryanve
v0.2.0
8a1497f
Compare
Choose a tag to compare
Start posters. Max black. Vibing. Compose.

#readme

<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;}
Assets 2

Like tape.

16 Aug 03:57
@ryanve ryanve
v0.1.0
c2a7d69
Compare
Choose a tag to compare
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>
Assets 2