#69 eaT CSS classes Fo breakFasT

s9a · Jun 17, 2023 · f25ec05 · f25ec05
1 parent cd64718
commit f25ec05
Show file tree

Hide file tree

Showing 7 changed files with 208 additions and 190 deletions.
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -1 +1,3 @@
+open_collective: s9a
 github: ryanve
+ko_fi: ryanve
diff --git a/README.md b/README.md
@@ -1,47 +1,56 @@
-# [<tt>tape</tt>](https://s9a.page/tape) <sub>neon color</sub>
-### seek [releases](../../releases) or <a href="https://npm.im/@s9a/tape">distros</a>
+## [`tape` neon color](https://s9a.page/tape)</sub>
 
-## [`tape.css`](tape.css)
+```html
+<html lang class="tape-black tape-flow">
+<meta charset="utf-8">
+<meta name="color-scheme" content="dark light">
+<meta name="theme-color" content="#0e0e0e">
+<title>play</title>
+```
+
+### [seek release~s~](../../releases) <br> [aura wurmbath](https://npm.im/@s9a/tape)
+
+## [tape.css](tape.css)
 
-plug and play [CSS](https://s9a.page/cascade) classes
+[plug <em>play</em> CSS classes](https://s9a.page/cascade)
 
 ## [palette](https://s9a.page/tape#palette)
 
-- `.tape-white` black on white
-- `.tape-yellow` black on yellow
-- `.tape-pink` black on pink
-- `.tape-blue` black on blue
-- `.tape-green` black on green
-- `.tape-black` parent on black
+* `.tape-white` black on white
+* `.tape-yellow` black on yellow
+* `.tape-pink` black on pink
+* `.tape-blue` black on blue
+* `.tape-green` black on green
+* `.tape-black` parent on black
 
 ## [compose](https://s9a.page/tape#compose)
 
-- `.tape-black.tape-white` white on black
-- `.tape-black.tape-yellow` yellow on black
-- `.tape-black.tape-pink` pink on black
-- `.tape-black.tape-blue` blue on black
-- `.tape-black.tape-green` green on black
+* `.tape-black.tape-white` white on black
+* `.tape-black.tape-yellow` yellow on black
+* `.tape-black.tape-pink` pink on black
+* `.tape-black.tape-blue` blue on black
+* `.tape-black.tape-green` green on black
 
 ## [distribute](../../releases)
 
-- `.tape-flow` flow color within scope
-- `.tape-skip` skip color within flow
-- `.tape-flat` border `transparent`
-- `.tape-flap` border `currentColor`
-- `.tape-erase` erase text for screenshot art
+* `.tape-flow` flow color within scope
+* `.tape-skip` skip color within flow
+* `.tape-flat` border `transparent`
+* `.tape-flap` border `currentColor`
+* `.tape-erase` erase text for screenshot art
 
 ## [`var`](tape.css)
 
-- `--tape-black`
-- `--tape-white`
-- `--tape-pink` warm
-- `--tape-yellow` fresh
-- `--tape-green` lush
-- `--tape-blue` cool
-- `--tape-hex` is current neon
-- `--tape-mix` is current background color
-- [`--tape-remix`](#imagine) imagine
-- [`--tape-filter`](#filter) hue
+* `--tape-black`
+* `--tape-white`
+* `--tape-pink` warm
+* `--tape-yellow` fresh
+* `--tape-green` lush
+* `--tape-blue` cool
+* `--tape-hex` is current neon
+* `--tape-mix` is current background color
+* [`--tape-remix`](#imagine) imagine
+* [`--tape-filter`](#filter) hue
 
 ## [samples](https://s9a.page)
 
@@ -198,5 +207,6 @@ having `tape-flow` on your root or body to flow color thru the whole page
 ```
 
 ## [producing](https://s9a.page/tapes)
+### [hello tape](https://s9a.page/hellotape) <br> [bye shame](https://webmural.com/shame) <br> [lettuce remixit](https://s9a.page) <br> [lifeforce](https://webmural.com/milf) <br> [lavatory](https://webmural.com/tlfr)
 
-### [hello tape](https://s9a.page/hellotape) <br> [bye shame](https://webmural.com/shame) <br> [lettuce remixit](https://s9a.page)
+### [octopus](https://octopus.boo) [moonchild](https://github.com/s9a/tape/commit/5072a403673a6f93a156527acc7fdeef01404ba4)
diff --git a/demo.css b/demo.css
@@ -1,4 +1,9 @@
-/* enjoy demo samples */
+/* 
+  enjoy remixing these samples
+  aurora remixyz inline styles
+  samples webmural.com s9a.page
+  yo energy flows deep ))))))))
+*/
 
 .imagine {
   --tape-remix: radial-gradient(
@@ -26,76 +31,78 @@
   --tape-filter: hue-rotate(240deg);
 }
 
+.shell {
+  --tape-white: seashell;
+}
+
+#hi:target {
+  --tape-blue: mediumslateblue;
+  --tape-pink: violet;
+  --tape-yellow: gold;
+  --tape-green: turquoise;
+}
+
 ::selection {
   color: black;
   background: blueviolet;
 }
 
 :focus {
   text-decoration-style: dotted;
-  outline: thick groove;
+  outline: 2rem outset;
 }
 
 :hover {
   text-decoration-style: double;
 }
 
-/* throwbacks */
-
-body { margin: auto; padding: 0 4rem }
-input { font: inherit; max-width: 100% }
-button { font: inherit }
-figure { contain: content }
-.mold { font: inherit }
+/* N.E.R.D. ÷ MCR */
+.mold { font: unset }
 .bold { font-weight: bold }
-.m-auto { margin: auto }
-.m-duck { margin-bottom: 2rem }
-.m-down { margin-bottom: 4rem }
-.pad-0 { padding: 0 }
-.pad-1 { padding: 1rem }
-.pad-2 { padding: 2rem }
-.pad-3 { padding: 3rem }
-.pad-4 { padding: 4rem }
-.pad-5 { padding: 5rem }
-.party { display: block; contain: content }
-.fiesta { display: flex; flex-wrap: wrap }
+.moan { margin: auto }
+.moby { margin-bottom: 2rem }
+.nemo { margin-bottom: 4rem }
+.paz { padding: 0 }
+.pad { padding: 1rem }
+.party { display: block; contain: layout }
+.fiesta { display: flex; flex-wrap: wrap; contain: layout }
 .trio { list-style: none; flex-basis: 33.33333333% }
 .duet { list-style: none; flex-basis: 50% }
-.dot-after::after { content: "." }
-
-.text-end {
-  text-align: right;
-  text-align: end;
-}
+.dot::after { content: "." }
+.mime { margin-inline: var(--vol1) }
+.rime { text-align: end }
+html { border-bottom: 4rem double var(--tape-pink) }
+html { font-family: sans-serif }
+body { margin: auto; padding: 0 4rem }
+input { font: unset; max-width: 100% }
+button { font: unset }
+figure { contain: content; margin: auto }
 
-.marvin {
-  margin-inline-start: var(--volume-1);
-  margin-inline-end: var(--volume-1);
-}
+/*
+RE: volume
+s9a.page/volume
+*/
 
 html {
-  font-family: monospace;
-  --pump-level: 1;
-  --volume-1: calc(.5rem + .5vw + .1vh);
-  --volume-2: calc(2 * var(--pump-level) * var(--volume-1));
-  --volume-3: calc(3 * var(--pump-level) * var(--volume-1));
-  --volume-4: calc(4 * var(--pump-level) * var(--volume-1));
-  --volume-5: calc(5 * var(--pump-level) * var(--volume-1));
-  --volume-6: calc(6 * var(--pump-level) * var(--volume-1));
-  --volume-7: calc(7 * var(--pump-level) * var(--volume-1));
-  --volume-8: calc(8 * var(--pump-level) * var(--volume-1));
-  --volume-9: calc(9 * var(--pump-level) * var(--volume-1));
-  --volume-10: calc(10 * var(--pump-level) * var(--volume-1));
+  --pump: 1;
+  --vol1: max(1rem, 1vmax);
+  --vol2: calc(2 * var(--pump) * var(--vol1));
+  --vol3: calc(3 * var(--pump) * var(--vol1));
+  --vol4: calc(4 * var(--pump) * var(--vol1));
+  --vol5: calc(5 * var(--pump) * var(--vol1));
+  --vol6: calc(6 * var(--pump) * var(--vol1));
+  --vol7: calc(7 * var(--pump) * var(--vol1));
+  --vol8: calc(8 * var(--pump) * var(--vol1));
+  --vol9: calc(9 * var(--pump) * var(--vol1));
 }
 
-.volume-0 { font-size: 0 }
-.volume-1 { font-size: var(--volume-1) }
-.volume-2 { font-size: var(--volume-2) }
-.volume-3 { font-size: var(--volume-3) }
-.volume-4 { font-size: var(--volume-4) }
-.volume-5 { font-size: var(--volume-5) }
-.volume-6 { font-size: var(--volume-6) }
-.volume-7 { font-size: var(--volume-7) }
-.volume-8 { font-size: var(--volume-8) }
-.volume-9 { font-size: var(--volume-9) }
-.volume-10 { font-size: var(--volume-10) }
+.vol0 { font-size: 0 }
+.vol1 { font-size: var(--vol1) }
+.vol2 { font-size: var(--vol2) }
+.vol3 { font-size: var(--vol3) }
+.vol4 { font-size: var(--vol4) }
+.vol5 { font-size: var(--vol5) }
+.vol6 { font-size: var(--vol6) }
+.vol7 { font-size: var(--vol7) }
+.vol8 { font-size: var(--vol8) }
+.vol9 { font-size: var(--vol9) }