#1 sup sup sup sup sup

webmural · Jan 8, 2025 · e56bace · e56bace
1 parent 5253ab1
commit e56bace
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 73 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,3 @@
-# [reddy mural](index.html)
+# [`sup` laboratory](https://webmural.com/sup)
 
-music index
+`sup` tag experiments
diff --git a/dns.svg b/dns.svg
diff --git a/reddy.css → hue.css b/reddy.css → hue.css
@@ -78,3 +78,7 @@ https://s9a.org/ooze
     var(--pour)
   );
 }
+
+:focus-within {
+  filter: hue-rotate(-3deg);
+}
diff --git a/icon.svg b/icon.svg
diff --git a/index.css b/index.css
diff --git a/index.html b/index.html
@@ -1,33 +1,53 @@
 <!DOCTYPE html>
-<html lang="en-US" class="ooze heat">
+<html lang="en-US" class="ooze" id="!">
 <meta charset="utf-8">
-<title>reddy mural</title>
+
+<title>sup mural</title>
+
 <meta name=viewport content="width=device-width">
 <meta name=color-scheme content="dark light">
-<meta name=theme-color content="tomato">
-<meta name=description content="music or monkey on the moon">
+<meta name=theme-color content="violet">
+<meta name=description content="html sup tag laboratory ooze">
 
-<link rel="stylesheet" href="reddy.css" media="all">
-<link rel="stylesheet" href="index.css">
+<link rel="stylesheet" href="sup.css" media="all">
+<link rel="stylesheet" href="hue.css" media=(color)>
+<link rel="index" href="https://webmural.com/html">
+<link rel="prev" href="https://webmural.com/reddy">
+<link rel="home" href="https://webmural.com">
+<link rel="help" href="https://s9a.page/ooze">
+<link rel="help" href="https://webmural.com/bee">
+<link rel="next" href="https://webmural.com/8ee">
 
 <link rel="license" href="UNLICENSE.txt">
-<link rel="icon" href="icon.svg">
+<link rel="icon" href="dns.svg">
 
-<main aria-label="setlist">
+<main aria-label="sup tag lab">
   <header>
-    <a href="https://webmural.com/cosmicdust" class="ooze heat">reddy loves music</a>
+    <a href="https://webmural.com" class="ooze jupe"><code>&lt;sup&gt;@&lt;/sup&gt;</code></a>
   </header>
-  <menu>
-    <li><a href="https://webmural.com/music" class="ooze jupe">music loves reddy</a>
-    <li><a href="https://webmural.com/deserve" class="ooze volt">mutt skiba was here</a>
-    <li><a href="https://webmural.com/beabadoobee" class="ooze moss">new hair new face</a>
-    <li><a href="https://webmural.com/dialon" class="ooze rain">lost my twin</a>
-    <li><a href="https://webmural.com/toucan" class="ooze lawn">chlorophyll lips</a>
-    <li><a href="https://webmural.com/violetttear" class="ooze pulp">purple hat</a>
-    <li><a href="https://webmural.com/puvm" class="ooze heat">always <b>reddy</b></a>
-  </menu>
+  <p>
+    <a href="https://webmural.com/reddy" class="ooze heat">
+      <sup>sup<sup>sup<sup>sup<sup>sup</sup><sup>sup</sup><sup>sup</sup></sup></sup></sup>
+    </a>
+  </p>
+  <p>
+    <a href="https://webmural.com/web123" class="plus ooze punk">
+      <sup>@<sup>@<sup>@<sup>@</sup><sup>@</sup><sup>@</sup></sup></sup></sup>
+    </a>
+  </p>
+  <p class="ooze">
+    <a href="https://webmural.com/dbqp">
+      <sup class="ooze rain">deetranada<sup class="ooze volt">nada<sup class="ooze pulp spectra">nada</sup></sup></sup>
+    </a>
+  </p>
+  <p class="ooze">
+    <a href="https://webmural.com/cosmicdust">
+      <sup class="ooze lawn">bea<sup>ba<sup class="ooze wind">doo<sup class="ooze volt">bee</sup></sup></sup></sup>
+    </a>
+  </p>
   <footer>
-    <a rel="home" href="https://webmural.com/web123">web123</a>
-    <a rel="help" href="https://webmural.com/333">3:33</a>
+    <a class="ooze punk" href="https://webmural.com/html">HTML</a>
+    <a class="ooze jupe" href="#!">÷</a>
+    <a class="ooze pynk" href="https://webmural.com/css">CSS</a>
   </footer>
 </main>
diff --git a/sup.css b/sup.css
@@ -0,0 +1,50 @@
+html {
+  font-family: sans-serif;
+  font-size: max(3ch, 2em + 2vmin + 2vmax);
+  line-height: 1.618;
+}
+
+body {
+  align-items: center;
+  display: flex;
+  flex-flow: column;
+  margin: auto;
+  padding: 2rem;
+}
+
+[href^="#"] {
+  font-weight: bold;
+  padding-inline: 1ch;
+}
+
+.plus { 
+  font-size: 1.618em;
+}
+
+:target {
+  font-size: max(3ch, 3ch + 1vmin + 1vmax);
+}
+
+:target body {
+  align-items: stretch;
+}
+
+:target sup {
+  font-size: 1.618em;
+}
+
+@media (orientation: portrait) {
+  :target header,
+  :target footer,
+  :target p {
+    writing-mode: vertical-lr;
+  }
+}
+
+:focus {
+  outline: thick dotted;
+}
+
+:focus:active {
+  outline: medium groove;
+}