🐠🐠🐠🐠🐠 shadowband (#1)

vocals · Sep 7, 2024 · 7612889 · 7612889
1 parent ee65410
commit 7612889
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 85 deletions.
diff --git a/hue.css b/hue.css
@@ -1,32 +1,51 @@
 ::selection {
-  background: #ee1;
-  color: darkviolet;
+  background: darkviolet;
+  color: #ee1;
 }
 
 :root {
-  background-color: coral;
-  background-image: radial-gradient(plum, hotpink, violet, orchid, hotpink);
-  color: indigo;
+  background-color: #ee1;
+  background-image: linear-gradient(skyblue, skyblue, deepskyblue, deepskyblue, #e1f, #fab);
+  color: #111;
 }
 
-:any-link {
-  color: indigo;
-  background-color: transparent;
-  text-shadow:
-    2vw -3vh 1pc,
-    3vw 3vh 1pc,
-    5vw -3vh 1pc,
-    -2vw 3vh 3pc;
+mark {
+  background-color: #e7f;
+  color: #111;
 }
 
-:focus {
-  background-color: blueviolet;
-  color: plum;
-  outline: 1rem groove indigo;
+.why {
+  background-image: linear-gradient(#ee7, #bed, #ee7);
 }
 
-a:hover {
+.shy {
+  background-image: linear-gradient(lightblue, #bed, lightblue);
+}
+
+.fly {
+  background-image: linear-gradient(#de1, #7ed, #de1);
+}
+
+:active {
+  filter: saturate(109%);
+}
+
+:target {
+  filter: saturate(161%);
+}
+
+.echo {
+  color: darkviolet;
+  text-shadow:
+    -1vw 1vh 0 #ee1,
+    1vw -1vh 0 deepskyblue;
+}
+
+:any-link {
   color: indigo;
-  background-color: skyblue;
+  background-color: transparent;
 }
 
+a:hover {
+  background-color: mediumspringgreen;
+}
diff --git a/hum.css b/hum.css
@@ -9,31 +9,55 @@ 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; 
+}
+
+em {
+  font: unset;
+}
+
+@media (orientation: portrait) {
+  h1 {
+    writing-mode: vertical-rl;
+  }
+}
+
+p {
+  box-sizing: border-box;
+  margin-block: 0;
+  margin-inline-end: auto;
+  padding: 1ch;
+}
+
+hr {
+  all: unset;
+  display: block;  
+  margin-block: 1em;
+}
+
+footer {
+  margin-block: 5em 1em;
+}
+
+:focus {
+  outline: thick dotted;
+}
+
+:hover { 
+  text-decoration-style: double;  
+}
diff --git a/index.html b/index.html
@@ -1,55 +1,49 @@
 <!DOCTYPE html>
-<html lang="en" id="wave">
+<html lang="en" id="hifi">
 <meta charset="utf-8">
-<title>free bees</title>
+
+<title>shadowband</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="shadowband 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>
+<link rel="prev" href="https://vocals.page/decibella">
+<link rel="index" href="https://vocals.page/starfish">
+<link rel="alternate" href="#hifi">
 
-  <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>
+<article>
+  <h1 class="echo">shadowband</h1>
+  <p class="why">maybe eye never told you
+  <p class="why"><em class="shy">hella</em> reason why
+  <p class="why">maybe eye never told them
+  <p class="why"><em class="shy">hello</em> shadow banned
+  <hr>
+  <p class="shy">well this spring
+  <p class="shy">we'll have to change
+  <p class="shy">wash our wrists
+  <p class="shy">watch the rain
+  <p class="shy">will you know
+  <p class="shy">what i did
+  <hr>
+  <p class="why">maybe i never hold you
+  <p class="why"><em class="shy">heaven</em> reason why
+  <p class="why">maybe i never hold them
+  <p class="why"><a href="#hifi"><em class="shy">hi<wbr>fi</em> shadow<wbr>band</a>
+  <hr>
+  <p class="fly">elastic lover
+  <p class="fly">your heartbeats fine
+  <p class="fly">breathe in
+  <p class="fly">breathe out
+  <p class="fly">why we fly
+  <p class="fly">w/o doubt
+  <p class="fly"><em class="fly">shadow alive</em>
 
-  <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>
+  <footer>
+    <a href="https://youtu.be/d2EZMAJX_HY?si=ipTpVXiF60O-7Ye5">chords available on YouTube demo</a>
+  </footer>
+</article>