summaryrefslogtreecommitdiffstats
path: root/static
diff options
context:
space:
mode:
authorsiddharth ravikumar <s@ricketyspace.net>2022-06-03 20:33:13 -0400
committersiddharth ravikumar <s@ricketyspace.net>2022-06-03 20:33:13 -0400
commit6f0d4028cb9944e6c28e7659528847aee551f2bb (patch)
treea7c706ee48f1bfafc646c357c639d2a94aa13a63 /static
parentcc9452bac132d58ca73fe4317f37f6fd7afe6153 (diff)
templates/weather.tmpl: add bidaily forecast
Diffstat (limited to 'static')
-rw-r--r--static/peach.css48
1 files changed, 42 insertions, 6 deletions
diff --git a/static/peach.css b/static/peach.css
index cb5b889..404400e 100644
--- a/static/peach.css
+++ b/static/peach.css
@@ -80,7 +80,7 @@ body {
.temperature-forecast-container .forecast {
font-size: 1.8em;
font-weight: 500;
- color: rgb(90,90,90);
+ color: rgb(10,10,10);
text-align: center;
}
@@ -89,30 +89,66 @@ body {
flex-direction: row;
justify-content: center;
column-gap: 10px;
- color: rgb(90,90,90);
+ color: rgb(10,10,10);
}
+/** Q2H Timeline **/
.timeline-container {
display: flex;
justify-content: center;
}
-.periods-container {
+.timeline-container .periods-container {
width: 440px;
display: flex;
justify-content: space-around;
align-content: space-around;
}
-.periods-container .period .temperature {
+.timeline-container .periods-container .period .temperature {
font-size: 1.2em;
}
-.periods-container .period .hour {
+.timeline-container .periods-container .period .hour {
font-size: 0.8em;
- color: rgb(150,150,150)
+ color: rgb(0,0,0);
+}
+
+/** BiDaily Timeline **/
+.bd-timeline-container {
+ display: flex;
+ justify-content: center;
+}
+
+.bd-timeline-container .periods-container {
+ width: 440px;
+ display: flex;
+ flex-direction: column;
+ row-gap: 10px;
+}
+
+.bd-timeline-container .periods-container .period {
+ display: flex;
+ flex-direction: column;
+ row-gap: 1px;
+ border-radius: 3px;
+ border: 2px solid rgb(0,0,0);
+ padding: 10px 10px;
+}
+
+.bd-timeline-container .periods-container .period .name {
+ font-size: 1.5em;
+}
+
+.bd-timeline-container .periods-container .period .temperature {
+ font-size: 1.2em;
+}
+
+.bd-timeline-container .periods-container .period .forecast {
+ font-size: 0.9em;
}
+/** Search **/
.search-link-container {
position: absolute;
right: 10px;