Mercurial > personal > weather-server

diff weather_server/static/style.css @ 26:7def5611895b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add support for an index page displaying all locations. This seems as good a time as any to declare 0.1.0.
author Paul Fisher <paul@pfish.zone>
date Sun, 10 Nov 2019 23:46:51 -0500
parents 47987502bf4c
children
line wrap: on
line diff
--- a/weather_server/static/style.css	Sun Nov 10 23:43:37 2019 -0500
+++ b/weather_server/static/style.css	Sun Nov 10 23:46:51 2019 -0500
@@ -5,6 +5,11 @@
     width: 100%;
 
     font-family: Roboto, sans-serif;
+    background: var(--root-background);
+    color: var(--root-color);
+
+    --root-background: #263238;
+    --root-color: white;
 
     --temp-background: #0d47a1;
     --temp-text: white;
@@ -15,6 +20,9 @@
 body {
     margin: 0;
     padding: 0;
+}
+
+body.location {
     display: flex;
     flex-flow: column nowrap;
     width: 100%;
@@ -28,8 +36,8 @@
     font: inherit;
 
     flex: none;
-    background: #263238;
-    color: white;
+    background: var(--root-background);
+    color: var(--root-color);
     padding: 12px 24px;
     font-size: 24px;
 
@@ -38,11 +46,15 @@
     justify-content: center;
 }
 
+h1 a {
+    color: inherit;
+}
+
 h1 span {
     display: block;
 }
 
-p {
+.location p {
     margin: 0;
     padding: 0;
     font: inherit;
@@ -50,7 +62,7 @@
     line-height: 1;
 }
 
-.plain p {
+.location.plain p {
     box-sizing: border-box;
     flex: 1;
     position: relative;
@@ -60,33 +72,33 @@
     padding: 24px;
 }
 
-.plain p.important .key {
+.location.plain p.important .key {
     display: block;
     opacity: 75%;
     font-size: 18px;
 }
 
-.plain p.important .value {
+.location.plain p.important .value {
     margin-top: 0;
     font-size: 150px;
     display: flex;
     flex-flow: row nowrap;
 }
 
-.plain p.important .value .unit {
+.location.plain p.important .value .unit {
     font-size: 33%;
     font-weight: bold;
     opacity: 66%;
     padding-top: 0.25em;
 }
 
-.fancy p.important {
+.location.fancy p.important {
     position: relative;
     flex: 1;
     height: 200px;
 }
 
-.fancy p.important canvas {
+.location.fancy p.important canvas {
     display: block;
     position: absolute;
     top: 0;
@@ -97,7 +109,7 @@
     height: 100%;
 }
 
-.fancy p.important .key {
+.location.fancy p.important .key {
     display: block;
     position: absolute;
     top: 24px;
@@ -110,21 +122,21 @@
     opacity: 75%;
 }
 
-.fancy p.important .value {
+.location.fancy p.important .value {
     display: none;
 }
 
-#temp {
+.location #temp {
     background: var(--temp-background);
     color: var(--temp-text);
 }
 
-#dewpoint {
+.location #dewpoint {
     background: var(--dewpoint-background);
     color: var(--dewpoint-text);
 }
 
-#timestamp {
+.location #timestamp {
     flex: none;
     background: #263238;
     color: white;
@@ -136,6 +148,43 @@
     justify-content: center;
 }
 
-#timestamp > span {
+.location #timestamp > span {
     display: block;
 }
+
+.home a {
+    color: inherit;
+}
+
+.home ul, .home li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.home li:nth-child(odd) {
+    background: var(--temp-background);
+    color: var(--temp-text);
+}
+
+.home li:nth-child(even) {
+    background: var(--dewpoint-background);
+    color: var(--dewpoint-text);
+}
+
+.home li a {
+    display: block;
+    justify-content: space-between;
+    padding: 15px 24px;
+    font-size: 18px;
+    display: flex;
+    flex-flow: row wrap;
+}
+
+.home li a b {
+    display: block;
+}
+
+.home li a span {
+    display: block;
+}