#6 colorfillablo

s9a · Oct 4, 2024 · 643ff3f · 643ff3f
1 parent 66fa2bb
commit 643ff3f
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 13 deletions.
diff --git a/freestyle.css b/freestyle.css
@@ -102,6 +102,10 @@
   outline: thick dashed var(--tape-hex);
 }
 
+dfn {
+  font: unset;
+}
+
 html {
   font-family: sans-serif;
   font-size: max(20pt, 2vmax);
@@ -130,6 +134,8 @@ form > * {
 
 h1 {
   font-size: 1.618em;
+  line-height: 1;
+  margin: 1rem 0;
 }
 
 label {
@@ -166,27 +172,36 @@ code {
 }
 
 footer {
-  flex-basis: 61.8%;
+  flex-basis: 100%;
   margin: 0 auto 1em;
   contain: layout;
   display: flex;
+  flex-flow: row-reverse wrap;
   align-content: center;
+  justify-content: center;
 }
 
-a svg {
-  min-width: 3.618rem;
-  max-width: 100%;
-  height: auto;
-}
-
-kbd {
-  filter: hue-rotate(0deg);
-  font-size: 1.618em;
-  padding-inline: 0.5ch;
+p {
+  margin: 1em auto 2em;
+  max-width: 20em;
 }
 
 a {
+  align-items: center;
+  display: inline-flex;
   padding: 1ch;
+  flex-basis: 50%;
+  justify-content: center;
+}
+
+a svg {
+  flex-basis: 100%;
+  min-width: 2.618rem;
+}
+
+a kbd {
+  font-size: 2.618em;
+  padding-inline: 1ch;
 }
 
 [href="?"] {

diff --git a/index.html b/index.html
@@ -34,7 +34,7 @@
   </div>
   <figcaption>
     <form class="tape-blaq" method="get">
-      <h1>illbang color remixer</h1>
+      <h1>illbang color<wbr>fill remixer</h1>
       <label class="tape-play">
         <code>play</code>
         <input type="color" name="tape-play" value="#fbbfff">
@@ -74,8 +74,15 @@ <h1>illbang color remixer</h1>
           <rect class="tape-bluv" x="1483" y="1800" width="300" height="300" />
         </svg>
       </button>
+      <div>
+        <p>
+          <dfn><b>ill</b>bang</dfn> is an opensource universal symbol
+          of equal exclamation balance <kbd>¡!</kbd>
+          shown in color<b>fill</b>able
+          SVG fibonacci rectangles <kbd>=)</kbd>
+        </p>
+      </div>
       <footer>
-        <a href="?" class="tape-play" aria-label="reset"><kbd>♻️</kbd></a>
         <a href="https://s9a.page/tape" class="tape-bluv" aria-label="tape">
           <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 800 500">
             <title>tape</title>
@@ -87,6 +94,7 @@ <h1>illbang color remixer</h1>
             <circle class="tape-luvu" cx="580" cy="250" r="60" />
           </svg>
         </a>
+        <a href="?" class="tape-blaq" aria-label="reset"><kbd>♻️</kbd></a>
       </footer>
     </form>
   </figcaption>