Mercurial > personal > weather-server

comparison weather_server/static/style.css @ 19:47987502bf4c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add graph, make it public, and bump the version. This checks in the tsc-compiled JS files because idklol.
author Paul Fisher <paul@pfish.zone>
date Sun, 13 Oct 2019 18:22:06 -0400
parents fdb874e0b270
children 7def5611895b
comparison
equal deleted inserted replaced
18:9d07dc5c3340 19:47987502bf4c
45 p { 45 p {
46 margin: 0; 46 margin: 0;
47 padding: 0; 47 padding: 0;
48 font: inherit; 48 font: inherit;
49 flex: auto; 49 flex: auto;
50 line-height: 1;
50 } 51 }
51 52
52 p.plain { 53 .plain p {
53 box-sizing: border-box; 54 box-sizing: border-box;
54 flex: 1; 55 flex: 1;
55 position: relative; 56 position: relative;
56 display: flex; 57 display: flex;
57 flex-direction: column; 58 flex-direction: column;
58 align-items: baseline; 59 align-items: baseline;
59 padding: 24px; 60 padding: 24px;
60 line-height: 1;
61 } 61 }
62 62
63 p.plain.important .key { 63 .plain p.important .key {
64 display: block; 64 display: block;
65 opacity: 75%; 65 opacity: 75%;
66 font-size: 18px; 66 font-size: 18px;
67 } 67 }
68 68
69 p.plain.important .value { 69 .plain p.important .value {
70 margin-top: 0; 70 margin-top: 0;
71 font-size: 150px; 71 font-size: 150px;
72 display: flex; 72 display: flex;
73 flex-flow: row nowrap; 73 flex-flow: row nowrap;
74 } 74 }
75 75
76 p.plain.important .value .unit { 76 .plain p.important .value .unit {
77 font-size: 33%; 77 font-size: 33%;
78 font-weight: bold; 78 font-weight: bold;
79 opacity: 66%; 79 opacity: 66%;
80 padding-top: 0.25em; 80 padding-top: 0.25em;
81 } 81 }
82 82
83 p.fancy { 83 .fancy p.important {
84 position: relative; 84 position: relative;
85 flex: 1; 85 flex: 1;
86 height: 200px;
86 } 87 }
87 88
88 p.fancy canvas { 89 .fancy p.important canvas {
89 display: block; 90 display: block;
90 position: absolute; 91 position: absolute;
91 top: 0; 92 top: 0;
92 right: 0; 93 right: 0;
93 bottom: 0; 94 bottom: 0;
94 left: 0; 95 left: 0;
95 width: 100%; 96 width: 100%;
96 height: 100%; 97 height: 100%;
98 }
99
100 .fancy p.important .key {
101 display: block;
102 position: absolute;
103 top: 24px;
104 left: 24px;
105 margin: -4px;
106 padding: 4px;
107 background-color: inherit;
108
109 font-size: 18px;
110 opacity: 75%;
111 }
112
113 .fancy p.important .value {
114 display: none;
97 } 115 }
98 116
99 #temp { 117 #temp {
100 background: var(--temp-background); 118 background: var(--temp-background);
101 color: var(--temp-text); 119 color: var(--temp-text);