summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--static/peach.css48
-rw-r--r--templates/weather.tmpl21
2 files changed, 63 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;
diff --git a/templates/weather.tmpl b/templates/weather.tmpl
index 60257fa..d23bc99 100644
--- a/templates/weather.tmpl
+++ b/templates/weather.tmpl
@@ -61,6 +61,27 @@
</div>
{{ end }}
+
+ {{ if .BiDailyTimeline }}
+ <div class="bd-timeline-container">
+ <div class="periods-container">
+ {{ range .BiDailyTimeline.Periods }}
+ <div class="period">
+ <div class="name">
+ {{ .Name }}
+ </div>
+ <div class="temperature">
+ {{.Temperature}}{{.TemperatureUnit}}
+ </div>
+ <div class="forecast">
+ {{ .Forecast }}
+ </div>
+ </div>
+ {{ end }}
+ </div>
+ </div>
+ {{ end }}
+
<div class="search-link-container">
<a href="/search">