static: update peach.css

1 files changed, 16 insertions, 15 deletions

diff --git a/static/peach.css b/static/peach.css
index 9fc48f7..6d1589d 100644
--- a/static/peach.css
+++ b/static/peach.css
@@ -23,7 +23,7 @@ body {
 .root-container {
     display: flex;
     flex-direction: column;
-    gap: 15px;
+    row-gap: 10px;
 }
 
 @media (min-width: 440px)  {
@@ -44,14 +44,14 @@ body {
 
 .header {
     margin-top: 10px;
-    margin-bottom: 15px;
+    margin-bottom: 0px;
     font-size: 1.5em;
 }
 
 .period-container {
     display: flex;
     flex-direction: column;
-    row-gap: 25px;
+    row-gap: 10px;
 }
 
 .now-container {
@@ -60,27 +60,20 @@ body {
 }
 
 .temperature-forecast-container {
-    display: grid;
-    grid-template-columns: 10% 70px auto 10%;
-    grid-template-rows: auto;
-    justify-content: center;
-    justify-items: center;
+    display: flex;
+    flex-direction: column;
     align-items: center;
-    column-gap: 5px;
 }
 
 .temperature-forecast-container .temperature {
-    font-size: 2.2em;
-    grid-column-start: 2;
-    grid-column-end: 3;
+    font-size: 2.8em;
 }
 
 .temperature-forecast-container .forecast {
     font-size: 1.8em;
     font-weight: 500;
     color: rgb(90,90,90);
-    grid-column-start: 3;
-    grid-column-end: 4;
+    text-align: center;
 }
 
 .wind-container {
@@ -99,7 +92,6 @@ body {
 .timeline-container {
     display: flex;
     justify-content: center;
-    color: rgb(230,230,230);
 }
 
 .periods-container {
@@ -108,3 +100,12 @@ body {
     justify-content: space-around;
     align-content: space-around;
 }
+
+.periods-container .period  .temperature {
+    font-size: 1.2em;
+}
+
+.periods-container .period  .hour {
+    font-size: 0.8em;
+    color: rgb(150,150,150)
+}