More colorful/responsive JSON display.

src/lib/Todo.svelte

@@ -1,6 +1,5 @@
 <script>
-  import { browser } from '$app/environment'
-  const isDev = browser
+  const isDev = true
 </script>
 
 {#if isDev}

src/routes/+page.svelte

@@ -73,10 +73,10 @@
             Push 'What is Kafka Dance?' down further, but come up with a visual indicator that there's
             more to read. Something like this, but better:
         </Todo>
-        <h3>Continue reading, below</h3>
     </div>
 
     <div>
+        <h3 style="text-align: center; margin-top: 10em;">Continue reading, below</h3>
         <h2>What is Kafka Dance?</h2>
         <h3>Kafka Dance is a simple, elegant way to interact with your Kafka servers.</h3>
         <a href="/example_query.png">
@@ -87,21 +87,17 @@
     <div>
         <h2>Query data your way</h2>
         <Todo>Combine these into one display with a switch?</Todo>
-        <div class="columns">
-            <div>
+        <div class="data-display">
+            <div class="data-display-section">
                 <h3>Search your message history</h3>
                 <pre style={`color: ${oneShotColor}`};>{oneShotText}</pre>
             </div>
 
             <div style="margin: 12px"></div>
 
-            <div>
+            <div class="data-display-section real-time-display">
                 <h3>Or monitor for new messages in real time</h3>
-                {#if realTimeIndex % 2 === 0}
-                    <pre>{fakeJson[realTimeIndex]}</pre>
-                {:else}
-                    <pre>{fakeJson[realTimeIndex]}</pre>
-                {/if}
+                <pre>{fakeJson[realTimeIndex]}</pre>
             </div>
         </div>
     </div>
@@ -112,6 +108,26 @@
         padding-top: 1em;
     }
 
+    .data-display-section h3 {
+        text-decoration: underline;
+    }
+    .data-display-section {
+        padding: 1em 1em 0;
+        border-radius: 4px;
+        border-style: solid;
+        border-width: 2px;
+        border-color: var(--accent-color);
+    }
+
+    .real-time-display {
+        background-color: var(--accent-color);
+        color: white;
+    }
+    .real-time-display pre {
+        background-color: var(--accent-color);
+        color: white;
+    }
+
     h2 {
         margin-top: 2em;
         font-size: 4rem;
@@ -161,6 +177,7 @@
     pre {
         color: var(--accent-color);
         font-weight: bold;
+        box-shadow: none;
     }
 
     button {
@@ -180,8 +197,13 @@
         justify-content: center;
     }
 
-    .columns {
+    .data-display {
         display: flex;
-        flex-direction: row;
+        flex-direction: column;
+    }
+    @media (min-width: 720px) {
+        .data-display {
+            flex-direction: row;
+        }
     }
 </style>