Fix the page display on mobile and also warn people they don't work on mobile.

public/blockstart/demos/index.html

@@ -6,10 +6,26 @@
   <title>blockstart.css Demos</title>
   <link rel="stylesheet" href="/blockstart/blockstart.css">
 <style>
-grid > shape {
-  --w: 150px;
-  --h: 150px;
-}
+  grid > shape {
+    --w: 150px;
+    --h: 150px;
+  }
+
+  grid > shape > a {
+   color: var(--value9);
+  }
+
+  #demo-grid {
+   grid-template-rows: auto;
+   grid-template-columns: 1fr 1fr 1fr;
+   grid-gap: 1rem;
+  }
+
+  @media only screen and (max-width: 600px) {
+    #demo-grid {
+     grid-template-columns: 1fr 1fr;
+    }
+  }
 </style>
 </head>
 
@@ -29,7 +45,13 @@ grid > shape {
 
     <p>Here are a few simple demos of using <a href="/blockstart/blockstart.css">blockstart.css</a> to create copies of landing pages.  Copying other websites is a great way to learn web development.  The text in the demos is either taken from the "inspiration" site, or is from <a href="https://hipsum.co/">hipster ipsum</a>.</p>
 
-    <grid class="center" style="--gap: 1rem; --cols: 1fr 1fr 1fr; --text: 9">
+    <block class="solid pad border" style="--value: 0; --text: 9; --pad: 2rem;">
+    <p class="no-flex"><b>WARNING</b> The entire point of this project is to remove irrelevant details in the beginning of a project.  Making a web page work on every imaginable aspect ratio just so Google and Apple don't have to make their browsers work correctly is exactly the kind of detail people should ignore when the start. What that means is <b>NONE</b> of these demos work on mobile. Maybe they do, maybe they don't, but they are on desktop because I use a desktop to make them and that's the easiest start.  Nothing prevents you from starting with moblile using <a href="/blockstart/blockstart.css">blockstart.css</a> if you like "mobile first", so don't take me avoiding it <b>in the start</b> as some indication of a flaw.  It's a choice, and I am aware of it.</p>
+    </block>
+
+    <hr>
+
+    <grid id="demo-grid">
       <shape><a href="asana.html">Asana</a></shape>
       <shape><a href="canva.html">Canva</a></shape>
       <shape><a href="todoist.html">Todoist</a></shape>