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 } |
