copy and pastel #88

s9a · May 23, 2024 · 51a0c38 · 51a0c38
1 parent 4a27fb1
commit 51a0c38
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 40 deletions.
diff --git a/fresh.css b/fresh.css
@@ -1,10 +1,9 @@
 ::selection {
-  color: black;
-  background: orange;
+  color: indigo;
+  background: deepskyblue;
 }
 
-:link {
-  background: aqua;
+:any-link {
   touch-action: manipulation;
 }
 
@@ -15,8 +14,8 @@
 :focus {
   outline-color: currentColor;
   outline-style: outset;
-  outline-offset: .05rem;
-  outline-width: .05rem;
+  outline-offset: .1ex;
+  outline-width: .1rem;
 }
 
 .fame {
@@ -26,6 +25,7 @@
 }
 
 .hood {
+  contain: layout;
   display: block;
   margin: 0;
 }

diff --git a/frozen.css b/frozen.css
@@ -1,6 +1,44 @@
 /*
 be tape my friend
 https://s9a.page/tape
-https://github.com/s9a/tape/releases/v0.4.0
+https://github.com/s9a/tape/releases/v0.8.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}
+: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}
+
+/*
+iffy◒ color typhoon
+https:s9a.page/iffy
+*/
+.iyff {filter:hue-rotate(-288deg)}
+.ffiy {filter:hue-rotate(288deg)}
+.ffyi {filter:hue-rotate(144deg)}
+.yiff {filter:hue-rotate(-144deg)}
+.iffy {fill:var(--iffy);stroke:var(--yffi)}
+.yffi {fill:var(--yffi);stroke:var(--iffy)}
+.iffy.iffy {background-color:var(--iffy);color:var(--yffi)}
+.yffi.yffi {background-color:var(--yffi);color:var(--iffy)}
+.iffy ::selection {color:var(--iffy);background:var(--else)}
+.yffi ::selection {color:var(--yffi);background:var(--else)}
+.iffy *{background-color:transparent;color:unset;--else:aquamarine}
+.yffi *{background-color:transparent;color:unset;--else:dodgerblue}
+*{--iffy:darkviolet;--yffi:lemonchiffon}
+@media (prefers-color-scheme:dark){*{--yffi:khaki}}
+@media (prefers-contrast:more){*{--iffy:indigo}}
+@media (prefers-contrast:less){*{--yffi:peachpuff}}
+
+/*
+violet named colors
+violet flower energy
+https:s9a.page/violet
+*/
+.viola * { background: transparent; color:inherit }
+.viola.viola { color:var(--loyal); background:var(--petal) }
+.viola.ouija { color:var(--petal); background:var(--loyal) }
+.viola ::selection { color: #090909; background: #ec0 }
+
+.viola { --petal: #bae; --loyal: indigo }
+.violet { --petal: violet; --loyal: indigo }
+.blueviolet { --petal: blueviolet; --loyal: floralwhite }
+.darkviolet { --petal: darkviolet; --loyal: floralwhite }
+.palevioletred { --petal: palevioletred; --loyal: navy }
+.mediumvioletred { --petal: mediumvioletred; --loyal: floralwhite }
diff --git a/index.html b/index.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html lang=en-US class="fame tape-clean tape-black">
+<html lang=en-US class="fame tape-flow tape-loud">
 <meta charset=utf-8>
 
 <title>s9a aka synesthesia</title>
 
 <meta name="theme-color" content="#44f477">
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width">
 <meta name="description" content="next level web color made with imagination and web standards">
 
 <link rel="stylesheet" href="fresh.css">
@@ -25,62 +25,102 @@
 
 <body class="hood">
 
-<header class="hood pad tape-pink" style="--tape-hex:hotpink">
+<header class="hood pad tape-watt">
   <h1 class="hood hella">
-    <a class="surf tape-pink" style="--tape-hex:deeppink" href="/">s9a</a>
+    <a class="surf viola blueviolet" href="/">s9a</a>
   </h1>
-  <p class="nah lowkey"><a href="dream" class="tape-pink" style="--tape-hex:coral">dream</a> vivid web <a href="spice">color</a> <a href="license">code</a>
+  <p class="nah lowkey">
+    <a href="dream" class="tape-bluv">dream</a>
+    <a href="tape" class="tape-play">vivid</a>
+    <a href="https://webmural.com" class="tape-bluv">web</a>
+    <a href="https://webmural.com/rainbov" class="tape-play">color</a>
+    <a href="license" class="tape-flow">code</a>
+  </p>
 </header>
 
-<figure class="hood pad tape-pink" id="explore">
+<figure class="hood pad viola violet" id="opener">
+  <h2 class="hood exhale calm bold">
+    <a class="surf jump lowkey" href="natal">opener</a>
+  </h2>
+  <ul class="nah exhale">
+    <li class="hella"><a class="surf tape-loud" href="1111">1111</a>
+    <li class="hella"><a class="surf tape-luvu yiff" href="nosh">nosh</a>
+    <li class="hella"><a class="surf iffy" href="iffy">iffy</a>
+    <li class="hella"><a class="surf viola violet ouija" href="violet">violet</a>
+    <li class="hella"><a class="surf tape-loud" href="volume">volume</a>
+    <li class="hella"><a class="surf tape-bluv" href="yr">yr</a>
+    <li class="hella"><a class="surf yffi yiff" href="reef"><span class="iffy">re</span>ef</a>
+    <li class="hella"><a class="surf tape-bluv" href="bluetang">blue<span class="tape-blaq">tang</span></a>
+  </ul>
+</figure>
+
+<figure class="hood pad tape-bluv" id="enjoy" style="--tape-hex:#bae">
+  <h2 class="hood exhale calm bold">
+    <a class="surf jump lowkey tape=green" href="j29">enjoy</a>
+  </h2>
+  <ul class="nah exhale">
+    <li class="hella"><a class="surf viola darkviolet" href="angel">angel</a>
+    <li class="hella"><a class="surf yffi" href="orb">orb</a>
+    <li class="hella"><a class="surf iffy" href="mochi">mochi</a>
+    <li class="hella"><a class="surf yffi" href="contrast">contrast</a>
+    <li class="hella"><a class="surf tape-loud ffiy" href="hue">hue</a>
+  </ul>
+</figure>
+
+<figure class="hood pad tape-watt" id="explore">
   <h2 class="hood exhale calm bold">
     <a class="surf jump lowkey" href="hellotape">hellö</a>
   </h2>
   <ul class="nah exhale">
-    <li class="hella"><a class="surf tape-black" href="bae" style="--tape-hex:#bae">bae</a>
-    <li class="hella"><a class="surf tape-yellow" href="cab">cab</a>
-    <li class="hella"><a class="surf tape-yellow" href="volume">volume</a>
-    <li class="hella"><a class="surf tape-blue" href="presampler" rel="prev">rewind</a>
-    <li class="hella"><a class="surf tape-green" href="tape">tḁpe</a>
+    <li class="hella"><a class="surf tape-watt" href="bae" style="--tape-hex:#bae">bae</a>
+    <li class="hella"><a class="surf yffi ffiy" href="cab">cab</a>
+    <li class="hella"><a class="surf tape-play" href="sea">sea</a>
+    <li class="hella"><a class="surf tape-bluv" href="presampler" rel="prev">rewind</a>
+    <li class="hella"><a class="surf tape-luvu" href="tape">tḁpe</a>
   </ul>
 </figure>
 
-<figure class="hood pad tape-green" id="connect">
+<figure class="hood pad tape-bluv" id="connect">
   <h2 class="hood exhale calm bold">
     <a class="surf jump lowkey" href="#connect">Connect</a>
   </h2>
   <ul class="nah">
-    <li class="hella"><a class="surf tape-pink" style="--tape-pink:orchid" href="https://github.com/sponsors/s9a">github</a>
-    <li class="hella"><a class="surf tape-yellow" href="https://twitter.com/colorfulcode">twitter</a>
-    <li class="hella"><a class="surf tape-blue" href="surge">wave</a>
+    <li class="hella"><a class="surf viola blueviolet" href="https://github.com/sponsors/s9a">github</a>
+    <li class="hella"><a class="surf tape-watt" href="https://opencollective.com/s9a">open<wbr>collective</a>
+    <li class="hella"><a class="surf tape-play" href="https://x.com/colorfulcode"><span class="pad">x</span></a>
   </ul>
 </figure>
 
-<figure class="hood pad tape-blue" id="sampler" style="--tape-hex:blueviolet">
+<figure class="hood pad tape-bluv" id="sampler" style="--tape-hex:blueviolet">
   <h2 class="hood exhale calm bold">
-    <a class="surf jump lowkey tape-blue" href="templates">sampler</a>
+    <a class="surf jump lowkey tape-bluv" href="templates">sampler</a>
   </h2>
-  <ul class="nah" style="--tape-green:greenyellow">
-    <li class="hella"><a class="surf tape-pink" href="http://numb.page">∞</a><a class="surf tape-yellow" href="https://webmural.com/testing">/0</a>
-    <li class="hella"><a class="surf tape-black tape-green" href="https://webmural.com/web123">123</a>
-    <li class="hella"><a class="surf tape-green" style="--tape-hex:greenyellow" href="https://webmural.com/turf">45678</a>
+  <ul class="nah" style="--tape-luvu:greenyellow">
+    <li class="hella"><a class="surf tape-play" href="http://numb.page">∞</a><a class="surf tape-loud" href="https://webmural.com/testing">/0</a>
+    <li class="hella"><a class="surf tape-blaq tape-luvu" href="https://webmural.com/web123">123</a>
+    <li class="hella"><a class="surf tape-luvu" style="--tape-hex:greenyellow" href="https://webmural.com/turf">45678</a>
+    <li class="hella"><a class="surf tape-watt" href="https://webmural.com/placebo">placebo</a>
+    <li class="hella"><a class="surf tape-loud" href="https://webmural.com/qyslem">qys°l<em class="tape-bluv">em</em></a>
+    <li class="hella"><a class="surf tape-bluv" href="https://webmural.com/poft">poft</a>
+    <li class="hella"><a class="surf tape-bluv" style="--tape-hex:plum" href="https://webmural.com/pluw">pluw</a>
+    <li class="hella"><a class="surf tape-play" href="https://webmural.com/bat">ba+</a>
   </ul>
 </figure>
 
-<figure class="hood pad tape-blue tape-black" id="deep" style="--tape-black:#528">
+<figure class="hood pad tape-bluv tape-blaq" id="deep" style="--tape-blaq:#528">
   <h2 class="hood exhale calm bold">
     <a class="surf jump lowkey" href="selfie">deep cuts</a>
   </h2>
   <ul class="nah exhale">
-    <li class="hella"><a class="surf tape-pink" href="firefly" style="--tape-hex:#fa8">fírefly</a>
-    <li class="hella"><a class="surf tape-yellow" href="sea" style="--tape-hex:#ee1">sea</a>
-    <li class="hella"><a class="surf tape-green" href="cake">cake</a>
-    <li class="hella"><a class="surf tape-blue" href="reef">reef</a>
-    <li class="hella"><a class="surf tape-blue" style="--tape-hex:deepskyblue" href="oracle">oracle</a>
-    <li class="hella"><a class="surf tape-pink" style="--tape-hex:magenta" href="cuerpo">cuerpo</a>
-    <li class="hella"><a class="surf tape-blue" style="--tape-hex:deeppink" href="https://ryanve.com">speak</a>
-    <li class="hella"><a class="surf tape-pink" style="--tape-hex:magenta" href="terms">smert</a>
-    <li class="hella"><a class="surf tape-yellow" style="--tape-black:rebeccapurple" href="https://webmural.com" rel="next">graF&deg;</a>
-    <li class="hella"><a class="surf tape-yellow" href="E">E=</a>
+    <li class="hella"><a class="surf tape-play" href="firefly" style="--tape-hex:#fa8">fírefly</a>
+    <li class="hella"><a class="surf tape-loud" href="sea" style="--tape-hex:#ee1">sea</a>
+    <li class="hella"><a class="surf tape-luvu" href="cake">cake</a>
+    <li class="hella"><a class="surf tape-bluv" href="reef">reef</a>
+    <li class="hella"><a class="surf tape-bluv" style="--tape-hex:deepskyblue" href="oracle">oracle</a>
+    <li class="hella"><a class="surf tape-play" style="--tape-hex:magenta" href="cuerpo">cuerpo</a>
+    <li class="hella"><a class="surf tape-play" style="--tape-hex:deeppink" href="https://ryanve.com">speak</a>
+    <li class="hella"><a class="surf tape-play" style="--tape-hex:magenta" href="terms">smert</a>
+    <li class="hella"><a class="surf tape-loud" style="--tape-blaq:rebeccapurple" href="https://webmural.com">graF&deg;</a>
+    <li class="hella"><a class="surf tape-loud" href="E">E=</a>
   </ul>
 </figure>
diff --git a/sitemap.txt b/sitemap.txt
@@ -1,5 +1,6 @@
 https://s9a.page
 https://s9a.page/...npm
+https://s9a.page/1111
 https://s9a.page/2starfish
 https://s9a.page/about
 https://s9a.page/angel
@@ -17,6 +18,7 @@ https://s9a.page/cab
 https://s9a.page/cascade
 https://s9a.page/cazimi
 https://s9a.page/cloud
+https://s9a.page/contrast
 https://s9a.page/crush
 https://s9a.page/curving
 https://s9a.page/city_dance_moves
@@ -42,7 +44,9 @@ https://s9a.page/future
 https://s9a.page/gerbera
 https://s9a.page/got_name
 https://s9a.page/hellotape
+https://s9a.page/hue
 https://s9a.page/i14y
+https://s9a.page/iffy
 https://s9a.page/imagine
 https://s9a.page/index
 https://s9a.page/indigo
@@ -63,19 +67,24 @@ https://s9a.page/luna
 https://s9a.page/magma
 https://s9a.page/marker
 https://s9a.page/mindful
+https://s9a.page/mochi
+https://s9a.page/moon
 https://s9a.page/music
 https://s9a.page/natal
 https://s9a.page/nbdd
 https://s9a.page/nineball
 https://s9a.page/nocial
+https://s9a.page/nosh
 https://s9a.page/nymph
 https://s9a.page/ocean
 https://s9a.page/oracle
 https://s9a.page/orange
+https://s9a.page/orb
 https://s9a.page/orchid
 https://s9a.page/pome
 https://s9a.page/peach
 https://s9a.page/peels
+https://s9a.page/pepper
 https://s9a.page/porpoise
 https://s9a.page/purple
 https://s9a.page/presampler
@@ -109,4 +118,5 @@ https://s9a.page/volume
 https://s9a.page/wave
 https://s9a.page/yhma
 https://s9a.page/ylma
+https://s9a.page/yr
 https://s9a.page/zodiac