Include weather

README.md

@@ -7,7 +7,7 @@ that acts as a **Reference Client** (for browser and Node.js) and
 [`/src/lib/wavtools`](./src/lib/wavtools) which allows for simple audio
 management in the browser.
 
-<img src="/readme/realtime-console.png" width="800" />
+<img src="/readme/realtime-console-demo.png" width="800" />
 
 # Starting the console
 

src/components/button/Button.scss

@@ -14,6 +14,7 @@
   padding: 8px 24px;
   min-height: 42px;
   transition: transform 0.1s ease-in-out, background-color 0.1s ease-in-out;
+  outline: none;
 
   &.button-style-action {
     background-color: #101010;

src/pages/ConsolePage.scss

@@ -83,6 +83,8 @@
           position: absolute;
           display: flex;
           align-items: center;
+          justify-content: center;
+          line-height: 2em;
           top: 16px;
           left: 16px;
           padding: 4px 16px;
@@ -90,11 +92,12 @@
           border-radius: 1000px;
           min-height: 32px;
           z-index: 9999;
+          text-align: center;
           white-space: pre;
-          text-align: right;
           &.bottom {
             top: auto;
             bottom: 16px;
+            right: 16px;
           }
         }
       }

src/pages/ConsolePage.tsx

@@ -693,10 +693,18 @@ export function ConsolePage() {
             <div className="content-block-title">get_weather()</div>
             <div className="content-block-title bottom">
               {marker?.location || 'not yet retrieved'}
-              {!!marker?.temperature &&
-                ` 🌡️ ${marker.temperature.value} ${marker.temperature.units}`}
-              {!!marker?.wind_speed &&
-                ` 🍃 ${marker.wind_speed.value} ${marker.wind_speed.units}`}
+              {!!marker?.temperature && (
+                <>
+                  <br />
+                  🌡️ {marker.temperature.value} {marker.temperature.units}
+                </>
+              )}
+              {!!marker?.wind_speed && (
+                <>
+                  {' '}
+                  🍃 {marker.wind_speed.value} {marker.wind_speed.units}
+                </>
+              )}
             </div>
             <div className="content-block-body full">
               {coords && (