From ba26ed7c356e7b121b8cb3e54acec5393207d486 Mon Sep 17 00:00:00 2001
From: William Moore <caranmegil@gmail.com>
Date: Thu, 19 Jan 2023 11:00:58 -0600
Subject: [PATCH] Updates

---
 src/App.css | 28 ++++++++++------------------
 src/App.tsx |  4 +++-
 2 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/src/App.css b/src/App.css
index 73a9a26..9447b51 100644
--- a/src/App.css
+++ b/src/App.css
@@ -5,17 +5,11 @@
 .rainfall-gauge {
   border: .01em solid black;
   padding: .6em;
-  width: 15em;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
+@media (max-width: 400px) {
+  .sesnors {
+    display: block;
   }
 }
 
@@ -27,15 +21,13 @@
   padding: .5em;
 }
 
-.App-link {
-  color: #61dafb;
+.sensors {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-content: space-between;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.sensor-col {
+  flex: 1;
 }
diff --git a/src/App.tsx b/src/App.tsx
index 699cf24..0507e5f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,7 +8,9 @@ function App() {
     <div className="App">
       <h1 className={'header'}>MooreForge Weather Station</h1>
       <p>Welcome to the MooreForge Weather Station. While a work in progress, there are some functional sensors shown below.</p>
-      <div className={'rainfall-gauge'}><Rainfall /></div>
+      <div className={'sensors'}>
+        <div className={'rainfall-gauge sensor-col'}><Rainfall /></div>
+      </div>
     </div>
   );
 }