diff options
| author | siddharth <s@ricketyspace.net> | 2022-05-23 00:00:13 -0400 |
|---|---|---|
| committer | siddharth <s@ricketyspace.net> | 2022-05-23 00:00:13 -0400 |
| commit | 6ac218b060b376d9c6174737cc881f8bd0d968c9 (patch) | |
| tree | 7f83e6711c09e155252f4ec9ec630b4b694233e0 | |
| parent | f94d80072507f2aaf99f872c348e34918d96ca87 (diff) | |
template: update weather template
update structure and styling.
| -rw-r--r-- | main.go | 2 | ||||
| -rw-r--r-- | static/peach.css | 98 | ||||
| -rw-r--r-- | templates/weather.tmpl | 86 |
3 files changed, 143 insertions, 43 deletions
@@ -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 @@ <style>@import url("/static/peach.css");</style> </head> <body> - <div class="root-container"> - <div class="header-container"> - <header class="header"> - <hgroup> - <h1>{{.Location}}</h1> - </hgroup> - </header> - </div> + <div class="peach"> + <div class="root-container"> + <div class="header-container"> + <header class="header"> + <hgroup> + <h1>{{.Location}}</h1> + </hgroup> + </header> + </div> + + <div class="main-container"> + <div class="period-container"> + <div class="now-container"> + <div class="temperature-forecast-container"> + <div class="temperature"> + {{.Now.Temperature}}{{.Now.TemperatureUnit}} + </div> + <div class="forecast"> + {{.Now.Forecast}} + </div> + </div> <!-- temperature-forecast-container --> - <div class="main-container"> - <div class="period-container"> + <div class="wind-container"> + <div class="prop"> + Wind + </div> + <div class="value"> + {{.Now.WindSpeed}} {{.Now.WindDirection}} + </div> + </div> <!-- wind-container end --> + </div> <!-- now-container end --> + + <div class="current-period-container"> + <div class="forecast">{{.Period.Forecast}}</div> + </div> + </div> <!-- period-container end --> + </div> <!-- main-container end --> - <div class="now-container"> - <div class="temperature-forecast-container"> + {{ if .Timeline }} + <div class="timeline-container"> + <div class="periods-container"> + {{ range .Timeline.Periods }} + <div class="period"> <div class="temperature"> - {{.Now.Temperature}}{{.Now.TemperatureUnit}} + {{.Temperature}}{{.TemperatureUnit}} </div> - <div class="forecast"> - {{.Now.Forecast}} + <div class="hour"> + {{printf "%d" .Hour}}hrs </div> - </div> <!-- temperature-forecast-container --> - - <div class="wind"> - {{.Now.WindSpeed}} {{.Now.WindDirection}} </div> - </div> <!-- now-container end --> - - <div class="current-period"> - <p class="forecast">{{.Period.Forecast}}</p> - </div> - </div> <!-- period-container end --> - </div> <!-- main-container end --> - - {{ if .Timeline }} - <div class="timeline"> - <div class="container"> - {{ range .Timeline.Periods }} - <div class="period"> - <p class="temperature">{{.Temperature}}{{.TemperatureUnit}}</p> - <p class="hour">{{printf "%d" .Hour}}hrs</p> + {{ end }} </div> - {{ end }} </div> - </div> - {{ end }} + {{ end }} - </div> <!-- root-container end --> + </div> <!-- root-container end --> + </div> <!-- peach end --> </body> </html> |