Mercurial > personal > weather-server
comparison weather_server/static/style.css @ 8:d54155a199d8
Improve template; add stylesheet.
author | Paul Fisher <paul@pfish.zone> |
---|---|
date | Sun, 29 Sep 2019 20:32:48 -0400 |
parents | |
children | 6d59f038a58b |
comparison
equal
deleted
inserted
replaced
7:4c25d5bb3534 | 8:d54155a199d8 |
---|---|
1 html, body { | |
2 margin: 0; | |
3 padding: 0; | |
4 display: flex; | |
5 flex-flow: column nowrap; | |
6 width: 100%; | |
7 height: 100%; | |
8 | |
9 font-family: Roboto, sans-serif; | |
10 } | |
11 | |
12 h1 { | |
13 /* Reset. */ | |
14 margin: 0; | |
15 padding: 0; | |
16 font: inherit; | |
17 | |
18 flex: none; | |
19 background: #263238; | |
20 color: white; | |
21 height: 48px; | |
22 padding: 0 24px; | |
23 font-size: 24px; | |
24 | |
25 display: flex; | |
26 flex-direction: column; | |
27 justify-content: center; | |
28 } | |
29 | |
30 h1 span { | |
31 display: block; | |
32 } | |
33 | |
34 p { | |
35 margin: 0; | |
36 padding: 0; | |
37 font: inherit; | |
38 flex: auto; | |
39 position: relative; | |
40 display: flex; | |
41 flex-direction: column; | |
42 align-items: baseline; | |
43 padding: 24px; | |
44 } | |
45 | |
46 p.important .key { | |
47 display: block; | |
48 opacity: 75%; | |
49 font-size: 18px; | |
50 } | |
51 | |
52 p.important .value { | |
53 margin-top: 0; | |
54 font-size: 150px; | |
55 display: flex; | |
56 flex-flow: row nowrap; | |
57 } | |
58 | |
59 p.important .value .unit { | |
60 font-size: 33%; | |
61 font-weight: bold; | |
62 opacity: 66%; | |
63 padding-top: 0.4em; | |
64 } | |
65 | |
66 #temp { | |
67 background: #0d47a1; | |
68 color: white; | |
69 } | |
70 | |
71 #dewpoint { | |
72 background: #5472d3; | |
73 color: white; | |
74 } | |
75 | |
76 #timestamp { | |
77 flex: none; | |
78 background: #263238; | |
79 color: white; | |
80 height: 48px; | |
81 padding: 0 24px; | |
82 | |
83 display: flex; | |
84 flex-direction: column; | |
85 justify-content: center; | |
86 } | |
87 | |
88 #timestamp > span { | |
89 display: block; | |
90 } |