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. --- static/peach.css | 98 +++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 94 insertions(+), 4 deletions(-) (limited to 'static') 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; -- cgit v1.2.3