Mercurial > personal > weather-server

comparison weather_server/static/style.css @ 13:4eaa9d69c4e2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Extremely basic version of the graph drawer.
author Paul Fisher <paul@pfish.zone>
date Sun, 06 Oct 2019 17:09:23 -0400
parents 6d59f038a58b
children fdb874e0b270
comparison
equal deleted inserted replaced
12:9e6289598d8c 13:4eaa9d69c4e2
1 html, body { 1 html {
2 margin: 0;
3 padding: 0;
4 height: 100%;
5 width: 100%;
6
7 font-family: Roboto, sans-serif;
8
9 --temp-background: #0d47a1;
10 --temp-text: white;
11 --dewpoint-background: #5472d3;
12 --dewpoint-text: white;
13 }
14
15 body {
2 margin: 0; 16 margin: 0;
3 padding: 0; 17 padding: 0;
4 display: flex; 18 display: flex;
5 flex-flow: column nowrap; 19 flex-flow: column nowrap;
6 width: 100%; 20 width: 100%;
7 height: 100%; 21 height: 100%;
8
9 font-family: Roboto, sans-serif;
10 } 22 }
11 23
12 h1 { 24 h1 {
13 /* Reset. */ 25 /* Reset. */
14 margin: 0; 26 margin: 0;
33 p { 45 p {
34 margin: 0; 46 margin: 0;
35 padding: 0; 47 padding: 0;
36 font: inherit; 48 font: inherit;
37 flex: auto; 49 flex: auto;
50 }
51
52 p.plain {
38 position: relative; 53 position: relative;
39 display: flex; 54 display: flex;
40 flex-direction: column; 55 flex-direction: column;
41 align-items: baseline; 56 align-items: baseline;
42 padding: 24px; 57 padding: 24px;
43 line-height: 1; 58 line-height: 1;
44 } 59 }
45 60
46 p.important .key { 61 p.plain.important .key {
47 display: block; 62 display: block;
48 opacity: 75%; 63 opacity: 75%;
49 font-size: 18px; 64 font-size: 18px;
50 } 65 }
51 66
52 p.important .value { 67 p.plain.important .value {
53 margin-top: 0; 68 margin-top: 0;
54 font-size: 150px; 69 font-size: 150px;
55 display: flex; 70 display: flex;
56 flex-flow: row nowrap; 71 flex-flow: row nowrap;
57 } 72 }
58 73
59 p.important .value .unit { 74 p.plain.important .value .unit {
60 font-size: 33%; 75 font-size: 33%;
61 font-weight: bold; 76 font-weight: bold;
62 opacity: 66%; 77 opacity: 66%;
63 padding-top: 0.25em; 78 padding-top: 0.25em;
64 } 79 }
65 80
81 p.fancy {
82 position: relative;
83 }
84
85 p.fancy canvas {
86 display: block;
87 position: absolute;
88 top: 0;
89 right: 0;
90 bottom: 0;
91 left: 0;
92 width: 100%;
93 height: 100%;
94 }
95
66 #temp { 96 #temp {
67 background: #0d47a1; 97 background: var(--temp-background);
68 color: white; 98 color: var(--temp-text);
69 } 99 }
70 100
71 #dewpoint { 101 #dewpoint {
72 background: #5472d3; 102 background: var(--dewpoint-background);
73 color: white; 103 color: var(--dewpoint-text);
74 } 104 }
75 105
76 #timestamp { 106 #timestamp {
77 flex: none; 107 flex: none;
78 background: #263238; 108 background: #263238;