1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113body {
font-family: 'Roboto', sans-serif;
background-color: #002b36;
color: #586e75;
}
h1, h2, h3, h4, h5, h6, strong {
color: #6e8992;
}
a {
color: #268bd2;
text-decoration: none;
}
a:visited {
color: #268bd2;
}
a:active {
color: #4ca2df;
}
a:hover {
color: #4ca2df;
}
.header {
display: flex;
flex-direction: row;
gap: 8px;
align-items: center;
}
.header>a {
display: block;
}
a.github {
width: 1.9em;
height: 1.9em;
}
a.github svg {
fill: #268bd2;
}
a.github:active svg {
fill: #4ca2df;
}
a.github:hover svg {
fill: #4ca2df;
}
.temps {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.temp {
width: 30px;
flex-grow: 1;
}
.temp-label {
width: 20px;
}
.location-name {
position: relative;
margin-top: 1rem;
margin-bottom: 0.5rem;
}
.days {
display: flex;
flex-direction: row;
gap: 8px;
}
/* hack: make sure body's right padding shows when content scrolls */
.days::after {
content: "";
flex: 0 0 0.01px;
}
.day {
background-color: hsl(192 96% 9%);
border-radius: 5px;
padding: 5px;
min-width: 100px;
width: 140px;
}
.day hr {
border-top: 1px solid white;
border-width: 1px 0 0 0;
border-color: hsla(0, 0%, 100%, 0.1);
margin: 4px 0 4px 0;
}
.time {
text-wrap: nowrap;
display: flex;
justify-content: space-between;
}
.cold {
color: white;
}
.cool {
color: cyan;
}
.good {
color: #99ff00;
}
.warm {
color: orange;
}
.hot {
color: red;
}
.wet {
color: cyan;
}
.weekend {
color: #6e8992;
font-weight: bold;
}
#freshening {
display: none;
}