added a bunch of styles for the data section

eduardomcv · Jul 21, 2020 · f7c6a46 · f7c6a46
1 parent 1503bbf
commit f7c6a46
Showing 1 changed file with 26 additions and 3 deletions.
diff --git a/src/components/DataSection/DataSection.css b/src/components/DataSection/DataSection.css
@@ -6,12 +6,20 @@
   width: 100%;
   color: white;
   text-align: center;
-  font-size: 8rem;
-  font-weight: bold;
 }
 
 .data-section.placeholder {
   font-size: 3rem;
+  font-weight: bold;
+}
+
+.temperature-display {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 8rem;
+  font-weight: bold;
+  width: 100%;;
 }
 
 .weather-icon {
@@ -20,8 +28,16 @@
   width: auto;
 }
 
+.day-cycle {
+  display: flex;
+  justify-content: space-evenly;
+  width: 100%;
+  margin-top: 2rem;
+  font-size: 1.5rem;
+}
+
 @media only screen and (max-width: 600px) {
-  .data-section {
+  .temperature-display {
     font-size: 6rem;
   }
 
@@ -30,4 +46,11 @@
     height: 6rem;
     width: auto;
   }
+
+  .day-cycle {
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    height: 5rem;
+  }
 }