#3 purple media

README.md

@@ -1 +1,3 @@
+## [purple](https://s9a.page/purple)
 
+[`purple`](purple.css) [media query](https://s9a.page/media) [experiment](https://s9a.page/purple)

hair.css

@@ -0,0 +1,48 @@
+:focus {
+  outline: thick dotted;
+}
+
+:any-link:hover { 
+  text-decoration-style: double;
+}
+
+* { box-sizing: border-box }
+a { touch-action: manipulation }
+
+html {
+  font-family: sans-serif;
+  font-size: max(20px, 2vw + 1vh + 1pt);
+  line-height: 1.618;
+}
+
+body {
+  margin: 0;
+  overflow-wrap: anywhere;
+  padding: 1.618em;
+}
+
+h1 {
+  font-size: 1.618em;
+  margin: 0;
+}
+
+h2 {
+  font-size: 1.382em;
+  margin: 0;
+}
+
+article {
+  contain: layout;
+  display: flow-root;
+}
+
+em,
+b {
+  font: unset;
+  font-size: 1.236em;
+}
+
+p {
+  contain: layout;
+  margin-block: 1em;
+}

index.html

@@ -8,13 +8,30 @@
 <meta name="theme-color" content="purple">
 <meta name="color-scheme" content="dark">
 <meta name="description" content="purple my hair">
-
-<style media=(color)>
-  html { color: mistyrose; background: purple; }
-  mark { color: purple; background: mistyrose; }
-  :any-link { color: aqua; background: indigo; }
-  ::selection { color: navy; background: aqua; }
-</style>
 
-<link rel="help" href="https://github.com/s9a/ocean">
-<link rel="license" href="UNLICENSE.txt">
+<link rel="stylesheet" href="purple.css">
+<link rel="stylesheet" href="hair.css">
+<link rel="help" href="https://s9a.page/ocean">
+<link rel="license" href="LICENSE.txt">
+
+<article>
+  <h1>purple</h1>
+  <p>
+    sith purple page 
+    respects your <a href="https://s9a.page/media">color media</a>
+    preferences while staying true
+    to their purple identity
+    purple is challenging to do because
+    <a href="https://s9a.page/memia">media queries wear wet pajamas</a>
+  </p>
+  <p>
+    <code>#800080</code> is the <code>purple</code> hex code
+  </p>
+  <p>
+    but<s>t</s> how purple is it to you?
+  </p>
+  <p>
+    <a href="https://s9a.page/bae">when you've LOST your <b>bae</b></a>
+  </p>
+</article>
+

purple.css

@@ -0,0 +1,60 @@
+html {
+  --pacify: #cbd;
+  --pajama: #bae;
+  --pastel: #edc;
+  --people: #bee;
+  --pineal: #ace;
+  --poison: #1ed;
+  --potion: #bed;
+  --poncho: #fd7;
+  --potent: seashell;
+  --public: #de7;
+  --purple: #800080;
+}
+
+:any-link {
+  background-color: transparent;
+  color: inherit;
+}
+
+html {
+  color: #edc;
+  background-color: purple;
+}
+
+::selection {
+  color: purple;
+  background: #edc;
+}
+
+@media (prefers-contrast: more) {
+  html { color: #eee }
+  ::selection { background: #eee }
+}
+
+@media (prefers-color-scheme: light) {
+  html {
+    background-color: #edc;
+    color: purple;
+  }
+
+  ::selection {
+    color: #bee;
+    background: purple;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :any-link { 
+    color: #bee;
+  }
+}
+
+@media (inverted-colors: inverted)
+  and (prefers-color-scheme: dark) {
+  html {
+    filter: invert(100%);
+  }
+}
+
+/* hi */