#3 dear daisy letter peace goofy

webmural · Sep 10, 2024 · 7ee7575 · 7ee7575
1 parent 8cc9bab
commit 7ee7575
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,3 @@
-# [graf](../../generate) a [wall](https://webmural.com/wall)
+### [dear daisy letter](https://webmural.com/daisy)
 
-1. [validate](https://validator.w3.org/#validate_by_input) [HTML](index.html)
-1. [cascade](wall.css) [CSS](https://webmural.com/css)
-1. enable [Pages](../../settings/pages)
+[daisy color hexes](daisy.css)
diff --git a/_config.yml b/_config.yml
diff --git a/daisy.css b/daisy.css
@@ -1,6 +1,6 @@
 ::selection {
-  background: darkorchid;
-  color: #bee;
+  background: mediumorchid;
+  color: #030103;
 }
 
 :any-link {
@@ -18,16 +18,16 @@
 }
 
 .grass {
-  background: chartreuse;
+  background: #be9;
   color: #213;
 }
 
 .swoon {
-  background: pink;
+  background: #faabee;
   color: #235;
 }
 
 .suave {
   background: #bae;
-  color: #315;
+  color: #312;
 }
diff --git a/dance.css b/dance.css
@@ -1,19 +1,24 @@
-html { font-size: max(1em, 5vmax) }
-body { margin: auto }
-p { margin: 0; line-height: 1.333 }
+* { 
+  box-sizing: border-box;
+}
 
-article {
+html { 
+  font-size: max(3ex, 3vmax + 2vmin);
   font-family: sans-serif;
-  box-sizing: border-box;
-  contain: content;
+  line-height: calc(55 / 34);
+}
+
+body { 
   margin: auto;
-  min-height: 100vh;
-  padding: 1em;
+  overflow-wrap: anywhere;
 }
 
-hr {
-  border: 0;
-  border-top: thick dotted;
+article {
+  font-family: sans-serif;
+  contain: layout;
+  margin: auto;
+  min-height: 100vh;
+  padding: 1em 1em 2em;
 }
 
 header {
@@ -22,12 +27,29 @@ header {
   font-weight: bold;
 }
 
+footer,
+h1 {
+  font-size: 1.618em;
+  font-weight: 500;
+  margin-block: 1.618rem;
+}
+
+p {
+  margin: 1.618rem 0;
+}
+
+footer {
+  font-size: 1.618em;
+  font-weight: 500;
+  margin-block: 1.618rem;
+}
+
 :focus {
   border-radius: 10%;
   outline: thick dotted;
 }
 
-:active {
+:any-link:active {
   border-radius: 20%;
   outline-offset: 1ex;
 }
diff --git a/index.html b/index.html
@@ -1,52 +1,70 @@
 <!DOCTYPE html>
-<html lang="en" style="background:#bae">
+<html lang="en-US" style="background-color:#bae">
 <meta charset="utf-8">
-<meta name="theme-color" content="#bae">
-<meta name="color-scheme" content="light">
 
 <title>daisy mural</title>
 
+<meta name="color-scheme" content="light">
+<meta name="theme-color" content="#bae">
 <meta name="viewport" content="width=device-width">
-<meta name="description" content="this daisy izza fertile flower flowing">
-
-<link rel="stylesheet" href="daisy.css" media=(color)>
+<meta name="description" content="this daisy flower represents creative fertile flow">
+<link rel="stylesheet" href="daisy.css" media="(color)">
 <link rel="me" href="https://webmural.dev/daisy">
 <link rel="stylesheet" href="dance.css" media="all">
 
 <link rel="next" href="/daffy">
 <link rel="next" href="/goofy">
-<link rel="index" href="/love">
+<link rel="index" href="/nature">
 <link rel="prev" href="/dm">
+<link rel="next" href="/dandelion">
 
 <base href="https://webmural.com">
-<body class="free daisy">
+<body class="daisy">
 
-<article class="art" aria-label="daisy">
+<article>
+  <h1 class="swoon" contenteditable><span>dear</span> daisy...</h1>
+  <p>
+    <a class="suave" href="/">webmural</a> is an
+    <a class="suave" href="/about">open movement</a>
+    mixing graffiti with the web...and
+    hope to change worlds for the better...
+  </p>
+  <p>
+    Every mural is <a class="disco" href="/code">opensource</a>
+    created by humans and <a class="disco" href="/html">hypertext</a>
+    plus <a class="disco" href="/css">digital paint</a>
+  </p>
+  <p>
+    <a class="swoon" href="/swirl">Remixes</a> welcome<br>
+    <a class="swoon" href="/a11y">Tell all </a>
+    <a class="suave" href="/fwd">your friends</a>
+    <br>
+    <a class="disco" href="https://webmural.com"><kbd>com</kbd></a> or
+    <a class="grass" href="https://webmural.dev"><kbd>dev</kbd></a>
+  </p>
   <p>
-  <a class="swoon" href="/dream">ever</a>
-  <a class="swoon" href="/wall">wonder</a>
-  <a class="suave" href="/about">about</a>
-  <b>daisy</b>
-  <a class="suave" href="/code">ethos?</a>
-  this daisy is lucky.
-  <i lang="es">muy</i>
-  <a class="suave" href="/fwdkiss">fertile.</a>
-  so <a class="swoon" href="/">kiss me hard.</a>
-  this
-  <a class="disco" href="/maybee">maybee</a>
-  the most
-  <a class="disco" href="/fwd">fertile</a>
-  <a class="disco" href="/html">hypertext</a>
-  <a class="swoon" href="https://webmural.com/orchid">online.</a>
-  <a class="disco" href="/honeyspider">enjoy</a>
-  our <a class="disco" href="/css">style.</a>
-  <cite>tell all your <a class="suave" href="/porpoise">friends.</a></cite>
-  <a class="disco" href="https://github.com/webmural"><i>stargaze</i>.</a>
-  <a class="disco" href="/uranus">surprise</a> our
-  <a class="suave" href="https://www.paypal.com/paypalme/webmural">paypal.</a>
-  <a class="disco" href="https://twitter.com/webmural">tweet</a>
-  <a class="disco" href="/airwaves">airwaves.</a>
-  <a class="disco" href="/butterfly">taste</a>
-  <a class="disco" href="/dot">pollen.</a>
-  <em>thank you!</em>
+    Sponsors welcome thru
+    <br role="presentation">
+    <a class="disco" href="https://donate.stripe.com/cN2dU68d6dW4aKQcMM">stripe</a>
+    <a class="grass" href="https://github.com/sponsors/webmural">github</a>
+    <a class="suave" href="https://www.paypal.com/paypalme/webmural">paypal</a>
+    <a class="swoon" href="/dot">polkadot</a>
+  </p>
+  <p hidden>
+    <a class="disco" href="/fwd">fertile</a> as 
+    <a class="disco" href="/qyslem">daisies</a>
+    <a class="disco" href="/maybee">empathic</a> as you.  
+    <a class="disco" href="/fwdkiss">romantic</a> as
+    <a class="disco" href="/honeyspider">whispers</a>
+  </p>
+  <p hidden>
+    <a class="disco" href="https://twitter.com/webmural">tweet</a>
+    <a class="disco" href="/airwaves">airwaves.</a>
+    <a class="disco" href="/butterfly">taste</a>
+    <a class="disco" href="/dot">pollen.</a>
+    <em>thank you!</em>
+  </p>
+  <footer>
+    <a class="suave" href="/goofy">☮️ goofy</a>
+  </footer>
 </article>