producing when im (#64)

s9a · Oct 1, 2022 · 066265c · 066265c
1 parent cde9337
commit 066265c
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -1,10 +1,11 @@
-# [<tt>tape</tt>](https://s9a.page/tape)
-
-#### [<tt>seek releases</tt>](../../releases) or <code><a href="https://docs.npmjs.com/cli">npm install</a> <a href="https://npm.im/@s9a/tape">@s9a/tape</a></code>
+# [<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.css`](tape.css)
 
-## [palette](https://s9a.page/tape)
+plug and play [CSS](https://s9a.page/cascade) classes
+
+## [palette](https://s9a.page/tape#palette)
 
 - `.tape-white` black on white
 - `.tape-yellow` black on yellow
@@ -196,6 +197,6 @@ having `tape-flow` on your root or body to flow color thru the whole page
 }
 ```
 
-## [testing](https://webmural.com/testing)
+## [producing](https://s9a.page/tapes)
 
-[<tt>tape online</tt>](https://s9a.page/tape) [**sans shame**](https://webmural.com/shame)
+### [hello tape](https://s9a.page/hellotape) <br> [bye shame](https://webmural.com/shame) <br> [lettuce remixit](https://s9a.page)
diff --git a/demo.css b/demo.css
@@ -1,4 +1,4 @@
-/* demo samples */
+/* enjoy demo samples */
 
 .imagine {
   --tape-remix: radial-gradient(
@@ -35,6 +35,7 @@
 body { margin: auto; padding: 0 4rem }
 input { font: inherit; max-width: 100% }
 button { font: inherit }
+figure { contain: content }
 .mold { font: inherit }
 .bold { font-weight: bold }
 .m-auto { margin: auto }
@@ -46,12 +47,10 @@ button { font: inherit }
 .pad-3 { padding: 3rem }
 .pad-4 { padding: 4rem }
 .pad-5 { padding: 5rem }
-.list-none { list-style: none }
-.inline-root { display: inline-block }
-.party { display: block }
+.party { display: block; contain: content }
 .fiesta { display: flex; flex-wrap: wrap }
-.basis-3rd { flex-basis: 33.33333333% }
-.basis-2nd { flex-basis: 50% }
+.trio { list-style: none; flex-basis: 33.33333333% }
+.duet { list-style: none; flex-basis: 50% }
 .dot-after::after { content: "." }
 
 .text-end {

diff --git a/index.html b/index.html
@@ -12,9 +12,10 @@
 
 <link rel="icon" href="https://user-images.githubusercontent.com/949985/45119529-95770b00-b110-11e8-9679-8e97026c83d4.png">
 <link rel="canonical" href="https://s9a.page/tape">
+<link rel="next" href="https://s9a.page/tapes">
 <link rel href="https://s9a.github.io/tape">
 
-<meta name="description" content="opensource tape color system for vivid web design with plug and play ">
+<meta name="description" content="opensource remixable tape color palette fun vivid web design plug and play CSS classes">
 <meta property="og:description" content="LoFi color code">
 
 <meta property="og:image" content="https://user-images.githubusercontent.com/949985/44696984-a481fd00-aa2e-11e8-8bd8-6e5381195617.png">
@@ -36,13 +37,13 @@ <h1 class="volume-8 pad-0">
 <a id="palette"></a>
 
 <figure class="m-auto tape-flow">
-  <ul class="list-none m-auto m-down pad-0 fiesta">
-    <li class="volume-6 basis-3rd"><span class="party pad-1 tape-white">white</span>
-    <li class="volume-6 basis-3rd"><span class="party pad-1 tape-yellow">yellow</span>
-    <li class="volume-6 basis-3rd"><span class="party pad-1 tape-pink">pink</span>
-    <li class="volume-6 basis-3rd"><span class="party pad-1 tape-blue">blue</span>
-    <li class="volume-6 basis-3rd"><span class="party pad-1 tape-green">green</span>
-    <li class="volume-6 basis-3rd"><span class="party pad-1 tape-black">black</span>
+  <ul class="m-auto m-down pad-0 fiesta">
+    <li class="volume-6 trio"><span class="party pad-1 tape-white">white</span>
+    <li class="volume-6 trio"><span class="party pad-1 tape-yellow">yellow</span>
+    <li class="volume-6 trio"><span class="party pad-1 tape-pink">pink</span>
+    <li class="volume-6 trio"><span class="party pad-1 tape-blue">blue</span>
+    <li class="volume-6 trio"><span class="party pad-1 tape-green">green</span>
+    <li class="volume-6 trio"><span class="party pad-1 tape-black">black</span>
   </ul>
 </figure>
 
@@ -136,7 +137,7 @@ <h1 class="volume-8 pad-0">
     <b class="volume-8 tape-green dot-after"><i class="volume-0">green</i></b>
   </figure>
   <figcaption class="pad-1 volume-3">
-    <a class="tape-pink bold">vibing</a><b class="tape-black volume-6">.</b>
+    <a class="tape-pink bold" href="https://s9a.page/hellotape">vibing</a><b class="tape-black volume-6">.</b>
   </figcaption>
 </figure>