From 6ac218b060b376d9c6174737cc881f8bd0d968c9 Mon Sep 17 00:00:00 2001 From: siddharth Date: Mon, 23 May 2022 00:00:13 -0400 Subject: template: update weather template update structure and styling. --- main.go | 2 +- static/peach.css | 98 +++++++++++++++++++++++++++++++++++++++++++++++--- templates/weather.tmpl | 86 ++++++++++++++++++++++++-------------------- 3 files changed, 143 insertions(+), 43 deletions(-) diff --git a/main.go b/main.go index a423f21..63cce0f 100644 --- a/main.go +++ b/main.go @@ -150,7 +150,7 @@ func NewWeather(point *nws.NWSPoint, f, fh *nws.NWSForecast) (*Weather, error) { // build timeline. periods := []WeatherPeriod{} - max := 12 + max := 6 for i, period := range fh.Properties.Periods { if i%2 != 0 { continue // take every other period diff --git a/static/peach.css b/static/peach.css index cdf66e9..9fc48f7 100644 --- a/static/peach.css +++ b/static/peach.css @@ -3,17 +3,107 @@ * SPDX-License-Identifier: ISC */ -p { - margin: 0; +@font-face { + font-family: Roboto; + src: url('/static/font/RobotoFlex-Regular.ttf'); + font-display: swap; +} + +body { + font-family: Roboto, sans-serif; + text-transform: lowercase; +} + +.peach { + display: flex; + flex-direction: row; + justify-content: center; } -.peach-container { +.root-container { display: flex; flex-direction: column; gap: 15px; } -.timeline .container { +@media (min-width: 440px) { + .root-container { + width: 440px; + } +} + +.header-container, +.main-container { + display: flex; + justify-content: center; +} + +.header-container h1 { + margin: 0; +} + +.header { + margin-top: 10px; + margin-bottom: 15px; + font-size: 1.5em; +} + +.period-container { + display: flex; + flex-direction: column; + row-gap: 25px; +} + +.now-container { + display: flex; + flex-direction: column; +} + +.temperature-forecast-container { + display: grid; + grid-template-columns: 10% 70px auto 10%; + grid-template-rows: auto; + justify-content: center; + justify-items: center; + align-items: center; + column-gap: 5px; +} + +.temperature-forecast-container .temperature { + font-size: 2.2em; + grid-column-start: 2; + grid-column-end: 3; +} + +.temperature-forecast-container .forecast { + font-size: 1.8em; + font-weight: 500; + color: rgb(90,90,90); + grid-column-start: 3; + grid-column-end: 4; +} + +.wind-container { + display: flex; + flex-direction: row; + justify-content: center; + column-gap: 10px; + color: rgb(90,90,90); +} + +.current-period-container { + font-size: 0.9em; + color: rgb(150,150,150); +} + +.timeline-container { + display: flex; + justify-content: center; + color: rgb(230,230,230); +} + +.periods-container { + width: 440px; display: flex; justify-content: space-around; align-content: space-around; diff --git a/templates/weather.tmpl b/templates/weather.tmpl index 904e45b..9db2689 100644 --- a/templates/weather.tmpl +++ b/templates/weather.tmpl @@ -9,52 +9,62 @@ -

- +

+ + +

+ {{.Now.Temperature}}{{.Now.TemperatureUnit}} +

+ {{.Now.Forecast}} +

+ Wind +

+ {{.Now.WindSpeed}} {{.Now.WindDirection}} +

+ +

+ {{ if .Timeline }} +

+ {{ range .Timeline.Periods }} +

- {{.Now.Temperature}}{{.Now.TemperatureUnit}} + {{.Temperature}}{{.TemperatureUnit}}

- {{.Now.Forecast}} +

+ {{printf "%d" .Hour}}hrs

- -

- {{.Now.WindSpeed}} {{.Now.WindDirection}}

- -

- - {{ if .Timeline }} -

- {{ range .Timeline.Periods }} -

{{printf "%d" .Hour}}hrs

+ {{ end }}

- {{ end }}

- {{ end }} + {{ end }} -

-- cgit v1.2.3

{{.Location}}

{{.Location}}