hella decibella #1 |||

vocals · May 28, 2024 · b1146d2 · b1146d2
1 parent 9419f80
commit b1146d2
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 116 deletions.
diff --git a/README.md b/README.md
@@ -1,36 +1,3 @@
-## [mural](https://webmural.com/0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000)
+## [decibella lyrics](https://vocals.page/decibella)
 
-```
-⓪
-⓿
-⓪⓿
-⓿⓪⓪
-⓪⓪⓿⓿⓿
-𑱐𑱐𑱐꧰꧰꧰𑓐𑓐
-𑱐𑱐𑱐⓿꧰⓿𑓐𑓐
-⓿⓿꧰꧰꧰
-𑱐𑱐〇
-〇⓪
-⓿
-⓪
-〇
-𑓐
-𑓐〇
-〇𑓐𑓐
-〇〇〇𑓐𑓐
-𑱐𑱐𑱐𑓐𑓐ººº
-𑱐𑱐𑱐〇〇〇〇〇
-〇〇〇𑱐𑱐
-𑱐〇〇
-〇𑱐
-〇
-𑱐
-〇
-꧰
-꧰꧐
-꧐〇꧰
-꧰꧰〇꧐꧐
-〇〇꧐꧐𑱐ººº
-```
-
-### [monsoon](https://webmural.com/0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000#wave)
+[HTML](index.html)
diff --git a/hue.css b/hue.css
@@ -1,32 +1,48 @@
 ::selection {
-  background: #ee1;
-  color: darkviolet;
+  background: darkviolet;
+  color: #ee1;
 }
 
 :root {
   background-color: coral;
-  background-image: radial-gradient(plum, hotpink, violet, orchid, hotpink);
+  background-image: linear-gradient(#ee1, violet, #bae);
   color: indigo;
 }
 
-:any-link {
-  color: indigo;
-  background-color: transparent;
+.plum:active {
+  background-image: linear-gradient(violet, plum, yellow);
+}
+
+.pink:active {
+  background-image: linear-gradient(violet, hotpink, yellow);
+}
+
+:target {
+  background-image: linear-gradient(deeppink, mediumpurple);
+}
+
+p {
+  background-image: linear-gradient(#ee1, peachpuff);
+}
+
+[value=violet] { background: violet }
+[value=pink] { background: pink }
+[value=plum] { background: plum }
+[value=yellow] { background: yellow }
+
+.echo {
+  color: darkviolet;
   text-shadow:
-    2vw -3vh 1pc,
-    3vw 3vh 1pc,
-    5vw -3vh 1pc,
-    -2vw 3vh 3pc;
+    -1vw 1vh 0 pink,
+    1vw -1vh 0 plum;
 }
 
-:focus {
-  background-color: blueviolet;
-  color: plum;
-  outline: 1rem groove indigo;
+:any-link {
+  color: indigo;
+  background-color: transparent;
 }
 
 a:hover {
-  color: indigo;
-  background-color: skyblue;
+  background-color: mediumspringgreen;
 }
 
diff --git a/hum.css b/hum.css
@@ -9,31 +9,43 @@ body {
   overflow-wrap: anywhere;
 }
 
-a {
-  border-radius: 100%;
-  font-size: max(2rem, var(--vol) * 1.618rem);
-  display: inline-flex;
-  text-decoration-line: line-through;
-}
-
-nav {
-  align-items: center;
+article {
+  align-items: flex-start;
   box-sizing: border-box;
   contain: layout;
   display: flex;
-  flex-flow: row wrap;
-  justify-content: flex-end;
+  flex-flow: column;
+  justify-content: flex-start;
   margin: auto;
-  margin-right: 10vw;
   min-height: 100vh;  
   padding: 20vh 10vw;
 }
 
-:nth-child(1n) { --vol: 1 }
-:nth-child(2n) { --vol: 1.618 }
-:nth-child(3n) { --vol: 2.618 }
-:nth-child(odd) { text-decoration-style: double }
-:nth-child(even) { text-decoration-style: dotted }
-:focus { text-decoration-style: solid }
-:hover { text-decoration-style: wavy }
-:target a { transform: rotate(99deg) }
+h1 {
+  font-size: 2.618rem;
+  margin: auto;
+  padding: 1ch; 
+}
+
+@media (orientation: portrait) {
+  h1 {
+    writing-mode: vertical-rl;
+  }
+}
+
+p {
+  box-sizing: border-box;
+  margin-block: 0;
+  margin-inline-end: auto;
+  padding: 1ch;
+}
+
+
+:focus {
+  outline: thick dotted;
+  text-decoration-style: dotted;
+}
+
+:hover { 
+  text-decoration-style: double;  
+}
diff --git a/index.html b/index.html
@@ -1,55 +1,62 @@
 <!DOCTYPE html>
 <html lang="en" id="wave">
 <meta charset="utf-8">
-<title>free bees</title>
+
+<title>decibella</title>
+
 <meta name="viewport" content="width=device-width">
 <meta name="color-scheme" content="dark light">
-<meta name="description" content="zero knuckles sequins">
-<meta name="theme-color" content="hotpink">
-<meta name="creator" content="💦">
+<meta name="description" content="decibella song lyrics">
+<meta name="theme-color" content="#ee1">
+<meta name="creator" content="🧿𑓐𑓐𑱐𑱐𑱐">
 
 <link rel="stylesheet" href="hum.css" media="all">
 <link rel="stylesheet" href="hue.css" media=(color)>
 <link rel="alternate" href="#wave">
-<link rel="prev" href="https://webmural.com/phantombra">
-<link rel="help" href="https://webmural.com/code">
-<link rel="help" href="https://webmural.com/dialon">
-<link rel="help" href="https://en.wikipedia.org/wiki/Symbols_for_zero">
-<!-- <base href="https://webmural.com"> -->
-
-<nav class="ombra" aria-label="free bees">
-  <a href="../shame">⓪</a>
-  <a href="../bee">⓿</a>
-  <a href="../rosie">⓪⓿</a>
-  <a href="../o3">⓿⓪⓪</a>
-  <a href="../vowel">⓪⓪⓿⓿⓿</a>
-  <a href="../clim8">𑱐𑱐𑱐꧰꧰꧰𑓐𑓐</a>
-
-  <a href="../bat">𑱐𑱐𑱐⓿꧰⓿𑓐𑓐</a>
-  <a href="../sinset">⓿⓿꧰꧰꧰</a>
-  <a href="../composure">𑱐𑱐〇</a>
-  <a href="../dandelion">〇⓪</a>
-  <a href="../wormhue">⓿</a>
-  <a href="../dreamcatcher">⓪</a>
-
-  <a href="../bpm">〇</a>
-  <a href="../bet"><b>𑓐</b></a>
-  <a href="../life">𑓐〇</a>
-  <a href="../6oo">〇𑓐𑓐</a>
-  <a href="../queston">〇〇〇𑓐𑓐</a>
-  <a href="../octopus">𑱐𑱐𑱐𑓐𑓐ººº</a>
 
-  <a href="../opacity">𑱐𑱐𑱐〇〇〇〇〇</a>
-  <a href="../dreambig">〇〇〇𑱐𑱐</a>
-  <a href="../les">𑱐〇〇</a>
-  <a href="../youch">〇𑱐</a>
-  <a href="../auva">〇</a>
-  <a href="../avua"><b>𑱐</b></a>
-
-  <a href="../pastel">〇</a>
-  <a href="../pudding">꧰</a>
-  <a href="../butt">꧰꧐</a>
-  <a href="../spellbound">꧐〇꧰</a>
-  <a href="../pluw">꧰꧰〇꧐꧐</a>
-  <a href="../duende">〇〇꧐꧐𑱐ººº</a>
-</nav>
+<article>
+  <h1 class="echo">decibella</h1>
+  <p>welcome too low front row
+  <p>hope you enjoy yo" show
+  <p>slip rite thru a <a href="https://webmural.com/moshpit">moshpit</a>
+  <p>hope you enjoy yo" lips
+  <p>la la la la la la la la 
+  <p><small>la la la la la la la la</small>
+  <p>lol o decibella 
+  <p>hope you're feelin" hella
+  <p class="pink">
+    <data value="violet">violet</data>
+    <data value="pink">pink</data> and
+    <data value="yellow">yellow</data>
+  </p>
+  <p>hope you're singin" hello  
+  <p class="plum">
+    <data value="violet">violet</data>
+    <data value="plum">plum</data> and
+    <data value="yellow">yellow</data>
+  </p>
+  <p>hope you're swoon an" gel o
+  <p>hello ello decibella
+  <p>hope you're feelin" hella
+  <p>fly like an umbrella
+  <p>inside an a cappella
+  <p><em>hiii</em>
+  <p class="pink">
+    <data value="violet">violet</data>
+    <data value="pink">pink</data> and
+    <data value="yellow">yellow</data>
+  </p>
+  <p>hope you're singin" hello
+  <p class="plum">
+    <data value="violet">violet</data>
+    <data value="plum">plum</data> and
+    <data value="yellow">yellow</data>
+  </p>
+  <p>hope you're swoon an" gel o
+  <p>la la la la la la la la
+  <p><small>la la la la la la la la</small>
+  <p>lol o decibella
+  <p>hope you're free as hella
+  <p>la la la la la la la la 
+  <p>la la la la
+</article>