From 527f8cf0f321a55661dc31259c7141914cc2508a Mon Sep 17 00:00:00 2001
From: "Zed A. Shaw" <zed.shaw@gmail.com>
Date: Fri, 24 Jun 2022 21:56:54 -0400
Subject: [PATCH] Fix the page display on mobile and also warn people they
 don't work on mobile.

---
 public/blockstart/demos/index.html | 32 +++++++++++++++++++++++++-----
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/public/blockstart/demos/index.html b/public/blockstart/demos/index.html
index a602ecf..9b7e2fa 100644
--- a/public/blockstart/demos/index.html
+++ b/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>