Start supporting phones.

public/global.css

@@ -43,7 +43,6 @@
   --color-bg-inverted: #fff;
 }
 
-
 /* Layout */
 article aside {
     background: var(--color-secondary-accent);
@@ -450,3 +449,23 @@ blockquote footer {
     line-height: var(--line-height);
     padding: 1.5rem 0;
 }
+
+/* Have to place this here because svelte's global parsing doesn't work on sub-CSS inside media. */
+@media only screen and (max-width: 600px) {
+  code-view {
+    flex-direction: column !important;
+  }
+
+  code-view html-view {
+    max-width: 100% !important;
+  }
+
+  content {
+    display: none !important;
+  }
+
+  phone-warn {
+    display: flex !important;
+  }
+}
+

src/components/CodeView.svelte

@@ -43,6 +43,7 @@
     flex: 2;
     max-width: 50%;
   }
+
 </style>
 
 <code-view>

src/components/PhoneWarn.svelte

@@ -0,0 +1,14 @@
+<style>
+  phone-warn {
+    display: none;
+  }
+</style>
+
+<phone-warn>
+  <section>
+    <aside>
+      <h2>Not Ready For Phones</h2>
+      <p>If you want to view this layout use a real computer, and don't complain if your real computer has some insane 16:9 aspect ratio gaming screen owned by only 1% of the world's population.  Use a normal monitor or just suck it up weirdo.</p>
+    </aside>
+  </section>
+</phone-warn>

src/demos/Twitter.svelte

@@ -4,6 +4,7 @@
   import { onMount } from 'svelte';
   let tweets = [1,2,3,4,5];
   import CodeView from '../components/CodeView.svelte';
+  import PhoneWarn from '../components/PhoneWarn.svelte';
   import { holder } from '../../lib/imgholder.js';
 </script>
 
@@ -197,6 +198,7 @@
   }
 </style>
 
+<PhoneWarn />
 
 <content>
   <left>