Mercurial > personal > weather-server

comparison 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
comparison
equal deleted inserted replaced
25:a4147ecb18b3 26:7def5611895b
3 padding: 0; 3 padding: 0;
4 height: 100%; 4 height: 100%;
5 width: 100%; 5 width: 100%;
6 6
7 font-family: Roboto, sans-serif; 7 font-family: Roboto, sans-serif;
8 background: var(--root-background);
9 color: var(--root-color);
10
11 --root-background: #263238;
12 --root-color: white;
8 13
9 --temp-background: #0d47a1; 14 --temp-background: #0d47a1;
10 --temp-text: white; 15 --temp-text: white;
11 --dewpoint-background: #5472d3; 16 --dewpoint-background: #5472d3;
12 --dewpoint-text: white; 17 --dewpoint-text: white;
13 } 18 }
14 19
15 body { 20 body {
16 margin: 0; 21 margin: 0;
17 padding: 0; 22 padding: 0;
23 }
24
25 body.location {
18 display: flex; 26 display: flex;
19 flex-flow: column nowrap; 27 flex-flow: column nowrap;
20 width: 100%; 28 width: 100%;
21 height: 100%; 29 height: 100%;
22 } 30 }
26 margin: 0; 34 margin: 0;
27 padding: 0; 35 padding: 0;
28 font: inherit; 36 font: inherit;
29 37
30 flex: none; 38 flex: none;
31 background: #263238; 39 background: var(--root-background);
32 color: white; 40 color: var(--root-color);
33 padding: 12px 24px; 41 padding: 12px 24px;
34 font-size: 24px; 42 font-size: 24px;
35 43
36 display: flex; 44 display: flex;
37 flex-direction: column; 45 flex-direction: column;
38 justify-content: center; 46 justify-content: center;
39 } 47 }
40 48
49 h1 a {
50 color: inherit;
51 }
52
41 h1 span { 53 h1 span {
42 display: block; 54 display: block;
43 } 55 }
44 56
45 p { 57 .location p {
46 margin: 0; 58 margin: 0;
47 padding: 0; 59 padding: 0;
48 font: inherit; 60 font: inherit;
49 flex: auto; 61 flex: auto;
50 line-height: 1; 62 line-height: 1;
51 } 63 }
52 64
53 .plain p { 65 .location.plain p {
54 box-sizing: border-box; 66 box-sizing: border-box;
55 flex: 1; 67 flex: 1;
56 position: relative; 68 position: relative;
57 display: flex; 69 display: flex;
58 flex-direction: column; 70 flex-direction: column;
59 align-items: baseline; 71 align-items: baseline;
60 padding: 24px; 72 padding: 24px;
61 } 73 }
62 74
63 .plain p.important .key { 75 .location.plain p.important .key {
64 display: block; 76 display: block;
65 opacity: 75%; 77 opacity: 75%;
66 font-size: 18px; 78 font-size: 18px;
67 } 79 }
68 80
69 .plain p.important .value { 81 .location.plain p.important .value {
70 margin-top: 0; 82 margin-top: 0;
71 font-size: 150px; 83 font-size: 150px;
72 display: flex; 84 display: flex;
73 flex-flow: row nowrap; 85 flex-flow: row nowrap;
74 } 86 }
75 87
76 .plain p.important .value .unit { 88 .location.plain p.important .value .unit {
77 font-size: 33%; 89 font-size: 33%;
78 font-weight: bold; 90 font-weight: bold;
79 opacity: 66%; 91 opacity: 66%;
80 padding-top: 0.25em; 92 padding-top: 0.25em;
81 } 93 }
82 94
83 .fancy p.important { 95 .location.fancy p.important {
84 position: relative; 96 position: relative;
85 flex: 1; 97 flex: 1;
86 height: 200px; 98 height: 200px;
87 } 99 }
88 100
89 .fancy p.important canvas { 101 .location.fancy p.important canvas {
90 display: block; 102 display: block;
91 position: absolute; 103 position: absolute;
92 top: 0; 104 top: 0;
93 right: 0; 105 right: 0;
94 bottom: 0; 106 bottom: 0;
95 left: 0; 107 left: 0;
96 width: 100%; 108 width: 100%;
97 height: 100%; 109 height: 100%;
98 } 110 }
99 111
100 .fancy p.important .key { 112 .location.fancy p.important .key {
101 display: block; 113 display: block;
102 position: absolute; 114 position: absolute;
103 top: 24px; 115 top: 24px;
104 left: 24px; 116 left: 24px;
105 margin: -4px; 117 margin: -4px;
108 120
109 font-size: 18px; 121 font-size: 18px;
110 opacity: 75%; 122 opacity: 75%;
111 } 123 }
112 124
113 .fancy p.important .value { 125 .location.fancy p.important .value {
114 display: none; 126 display: none;
115 } 127 }
116 128
117 #temp { 129 .location #temp {
118 background: var(--temp-background); 130 background: var(--temp-background);
119 color: var(--temp-text); 131 color: var(--temp-text);
120 } 132 }
121 133
122 #dewpoint { 134 .location #dewpoint {
123 background: var(--dewpoint-background); 135 background: var(--dewpoint-background);
124 color: var(--dewpoint-text); 136 color: var(--dewpoint-text);
125 } 137 }
126 138
127 #timestamp { 139 .location #timestamp {
128 flex: none; 140 flex: none;
129 background: #263238; 141 background: #263238;
130 color: white; 142 color: white;
131 height: 48px; 143 height: 48px;
132 padding: 0 24px; 144 padding: 0 24px;
134 display: flex; 146 display: flex;
135 flex-direction: column; 147 flex-direction: column;
136 justify-content: center; 148 justify-content: center;
137 } 149 }
138 150
139 #timestamp > span { 151 .location #timestamp > span {
140 display: block; 152 display: block;
141 } 153 }
154
155 .home a {
156 color: inherit;
157 }
158
159 .home ul, .home li {
160 list-style: none;
161 margin: 0;
162 padding: 0;
163 }
164
165 .home li:nth-child(odd) {
166 background: var(--temp-background);
167 color: var(--temp-text);
168 }
169
170 .home li:nth-child(even) {
171 background: var(--dewpoint-background);
172 color: var(--dewpoint-text);
173 }
174
175 .home li a {
176 display: block;
177 justify-content: space-between;
178 padding: 15px 24px;
179 font-size: 18px;
180 display: flex;
181 flex-flow: row wrap;
182 }
183
184 .home li a b {
185 display: block;
186 }
187
188 .home li a span {
189 display: block;
190 }