uranus wind whisper stylesheets #3

Author: ryanve

README.md

@@ -1 +1,3 @@
+### [atmosphere](https://s9a.page/atmosphere) template
 
+[**generate** atmosphere](https://github.com/new?template_name=atmosphere&template_owner=s9a)

index.html

@@ -5,34 +5,26 @@
 <title>atmosphere</title>
 
 <meta name="viewport" content="width=device-width">
-<meta name="theme-color" content="#bae4ea">
-<meta name="color-scheme" content="light">
-<meta name="description" content="...">
+<meta name="theme-color" content="skyblue">
+<meta name="color-scheme" content="dark light">
+<meta name="description" content="web atmosphere github template blue wind whisper">
 
-<style media=(color)>
-  :root {
-    background: #bae4ea;
-    color: #415;
-  }
+<link rel="stylesheet" href="wind.css" media="(color)">
+<link rel="stylesheet" href="whisper.css">
 
-  :any-link {
-    color: inherit;
-  }
+<link rel="home" href="https://s9a.page">
+<link rel="help" href="https://s9a.org/atmosphere">
 
-  ::selection {
-    background: #415;
-    color: #bae4ea;
-  }
-</style>
+<article>
+  <h1>
+    <a href="https://s9a.page">wwworld wide waves</a>
+  </h1>
 
-<h1>
-  <a href="https://s9a.page">wwworld wide waves</a>
-</h1>
-
-<strong>
-  <a href="https://s9a.page/license">open skies.</a>
-</strong>
+  <p>
+    <a href="https://s9a.page/license">opensource atmosphere</a>
+  </p>
 
-<aside>
-  <a href="https://webmural.com/air">fresh air</a>
-</aside>
+  <p>
+    <a href="https://webmural.com/poft">fres<b>h air</b></a>
+  </p>
+</article>

whisper.css

@@ -0,0 +1,19 @@
+html {
+  font-family: sans-serif;
+  font-size: max(1em, 1vmax + 1vmin + 1pt);
+}
+
+body {
+  display: flex;
+  flex-flow: column;
+  margin: 1.618rem;
+  overflow-wrap: anywhere;
+}
+
+:focus {
+  outline: thick dotted;
+}
+
+:any-link:hover {
+  text-decoration-style: double;
+}

wind.css

@@ -0,0 +1,19 @@
+::selection { background: #ec0 }
+:any-link { color: darkblue }
+:root { 
+  background: skyblue;
+  color: midnightblue;
+}
+
+@media (prefers-contrast: more) 
+  :root {
+    background: powderblue;
+    color: black;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    background: deepskyblue;
+  }
+}