From 216fd15479204dd0b46f226daeac3647e48f2734 Mon Sep 17 00:00:00 2001
From: "Zed A. Shaw" <zed.shaw@gmail.com>
Date: Wed, 22 Jun 2022 22:19:30 -0400
Subject: [PATCH] Add placeholders for all demos.

---
 public/blockstart/demos/breadcrumbs.html | 29 ++++++++++++++++++++++++
 public/blockstart/demos/earlybird.html   | 29 ++++++++++++++++++++++++
 public/blockstart/demos/index.html       | 22 +++++++++++++++---
 public/blockstart/demos/pandadoc.html    | 29 ++++++++++++++++++++++++
 public/blockstart/demos/patreon.html     | 29 ++++++++++++++++++++++++
 public/blockstart/demos/shopify.html     | 29 ++++++++++++++++++++++++
 public/blockstart/demos/slack.html       | 29 ++++++++++++++++++++++++
 public/blockstart/demos/snapchat.html    | 29 ++++++++++++++++++++++++
 public/blockstart/demos/square.html      | 29 ++++++++++++++++++++++++
 public/blockstart/demos/vidyard.html     | 29 ++++++++++++++++++++++++
 public/blockstart/demos/vimeo.html       | 29 ++++++++++++++++++++++++
 public/blockstart/demos/wordstream.html  | 29 ++++++++++++++++++++++++
 public/blockstart/demos/zoom.html        | 29 ++++++++++++++++++++++++
 public/blockstart/index.html             |  2 +-
 14 files changed, 368 insertions(+), 4 deletions(-)
 create mode 100644 public/blockstart/demos/breadcrumbs.html
 create mode 100644 public/blockstart/demos/earlybird.html
 create mode 100644 public/blockstart/demos/pandadoc.html
 create mode 100644 public/blockstart/demos/patreon.html
 create mode 100644 public/blockstart/demos/shopify.html
 create mode 100644 public/blockstart/demos/slack.html
 create mode 100644 public/blockstart/demos/snapchat.html
 create mode 100644 public/blockstart/demos/square.html
 create mode 100644 public/blockstart/demos/vidyard.html
 create mode 100644 public/blockstart/demos/vimeo.html
 create mode 100644 public/blockstart/demos/wordstream.html
 create mode 100644 public/blockstart/demos/zoom.html
diff --git a/public/blockstart/demos/breadcrumbs.html b/public/blockstart/demos/breadcrumbs.html
new file mode 100644
index 0000000..2db28ac
--- /dev/null
+++ b/public/blockstart/demos/breadcrumbs.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>Blockstart Template</title>
+
+  <link rel="stylesheet" href="/blockstart/blockstart.css">
+
+<style>
+</style>
+
+</head>
+
+<body>
+  <block class="horizontal pad" style="border-bottom: 1px solid var(--value6); --spacing: space-around; width: unset;">
+    <a href="/blockstart/">blockstart.css</a>
+    <div class="horizontal" style="--spacing: end;">
+      <a href="/blockstart/#about">About</a>  &nbsp;|&nbsp;
+      <a href="/blockstart/#docs">Docs</a>  &nbsp;|&nbsp;
+      <a href="/blockstart/demos/">Demos</a> &nbsp;|&nbsp;
+      <a href="/blockstart/blockstart.css">Download</a>
+    </div>
+  </block>
+
+<h1>Coming soon...</h1>
+</body>
+</html>
diff --git a/public/blockstart/demos/earlybird.html b/public/blockstart/demos/earlybird.html
new file mode 100644
index 0000000..2db28ac
--- /dev/null
+++ b/public/blockstart/demos/earlybird.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>Blockstart Template</title>
+
+  <link rel="stylesheet" href="/blockstart/blockstart.css">
+
+<style>
+</style>
+
+</head>
+
+<body>
+  <block class="horizontal pad" style="border-bottom: 1px solid var(--value6); --spacing: space-around; width: unset;">
+    <a href="/blockstart/">blockstart.css</a>
+    <div class="horizontal" style="--spacing: end;">
+      <a href="/blockstart/#about">About</a>  &nbsp;|&nbsp;
+      <a href="/blockstart/#docs">Docs</a>  &nbsp;|&nbsp;
+      <a href="/blockstart/demos/">Demos</a> &nbsp;|&nbsp;
+      <a href="/blockstart/blockstart.css">Download</a>
+    </div>
+  </block>
+
+<h1>Coming soon...</h1>
+</body>
+</html>
diff --git a/public/blockstart/demos/index.html b/public/blockstart/demos/index.html
index d3ab6aa..a602ecf 100644
--- a/public/blockstart/demos/index.html
+++ b/public/blockstart/demos/index.html
@@ -6,6 +6,10 @@
   <title>blockstart.css Demos</title>
   <link rel="stylesheet" href="/blockstart/blockstart.css">
 <style>
+grid > shape {
+  --w: 150px;
+  --h: 150px;
+}
 </style>
 </head>
 
@@ -26,9 +30,21 @@
     <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">
-      <shape style="--w: 150px; --h: 150px;"><a href="asana.html">Asana</a></shape>
-      <shape style="--w: 150px; --h: 150px;"><a href="canva.html">Canva</a></shape>
-      <shape style="--w: 150px; --h: 150px;"><a href="todoist.html">Todoist</a></shape>
+      <shape><a href="asana.html">Asana</a></shape>
+      <shape><a href="canva.html">Canva</a></shape>
+      <shape><a href="todoist.html">Todoist</a></shape>
+      <shape><a href="square.html">Square</a></shape>
+      <shape><a href="earlybird.html">Earlybird</a></shape>
+      <shape><a href="pandadoc.html">Pandadoc</a></shape>
+      <shape><a href="vimeo.html">Vimeo</a></shape>
+      <shape><a href="wordstream.html">Wordstream</a></shape>
+      <shape><a href="breadcrumbs.html">Breadcrumbs</a></shape>
+      <shape><a href="vidyard.html">Vidyard</a></shape>
+      <shape><a href="snapchat.html">Snapchat</a></shape>
+      <shape><a href="patreon.html">Patreon</a></shape>
+      <shape><a href="shopify.html">Shopify</a></shape>
+      <shape><a href="slack.html">Slack</a></shape>
+      <shape><a href="zoom.html">Zoom</a></shape>
     </grid>
   </content>
 </body>
diff --git a/public/blockstart/demos/pandadoc.html b/public/blockstart/demos/pandadoc.html
new file mode 100644
index 0000000..2db28ac
--- /dev/null
+++ b/public/blockstart/demos/pandadoc.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>Blockstart Template</title>
+
+  <link rel="stylesheet" href="/blockstart/blockstart.css">
+
+<style>
+</style>
+
+</head>
+
+<body>
+  <block class="horizontal pad" style="border-bottom: 1px solid var(--value6); --spacing: space-around; width: unset;">
+    <a href="/blockstart/">blockstart.css</a>
+    <div class="horizontal" style="--spacing: end;">
+      <a href="/blockstart/#about">About</a>  &nbsp;|&nbsp;
+      <a href="/blockstart/#docs">Docs</a>  &nbsp;|&nbsp;
+      <a href="/blockstart/demos/">Demos</a> &nbsp;|&nbsp;
+      <a href="/blockstart/blockstart.css">Download</a>
+    </div>
+  </block>
+
+<h1>Coming soon...</h1>
+</body>
+</html>
diff --git a/public/blockstart/demos/patreon.html b/public/blockstart/demos/patreon.html
new file mode 100644
index 0000000..2db28ac
--- /dev/null
+++ b/public/blockstart/demos/patreon.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>Blockstart Template</title>
+
+  <link rel="stylesheet" href="/blockstart/blockstart.css">
+
+<style>
+</style>
+
+</head>
+
+<body>
+  <block class="horizontal pad" style="border-bottom: 1px solid var(--value6); --spacing: space-around; width: unset;">
+    <a href="/blockstart/">blockstart.css</a>
+    <div class="horizontal" style="--spacing: end;">
+      <a href="/blockstart/#about">About</a>  &nbsp;|&nbsp;
+      <a href="/blockstart/#docs">Docs</a>  &nbsp;|&nbsp;
+      <a href="/blockstart/demos/">Demos</a> &nbsp;|&nbsp;
+      <a href="/blockstart/blockstart.css">Download</a>
+    </div>
+  </block>
+
+<h1>Coming soon...</h1>
+</body>
+</html>
diff --git a/public/blockstart/demos/shopify.html b/public/blockstart/demos/shopify.html
new file mode 100644
index 0000000..2db28ac
--- /dev/null
+++ b/public/blockstart/demos/shopify.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>Blockstart Template</title>
+
+  <link rel="stylesheet" href="/blockstart/blockstart.css">
+
+<style>
+</style>
+
+</head>
+
+<body>
+  <block class="horizontal pad" style="border-bottom: 1px solid var(--value6); --spacing: space-around; width: unset;">
+    <a href="/blockstart/">blockstart.css</a>
+    <div class="horizontal" style="--spacing: end;">
+      <a href="/blockstart/#about">About</a>  &nbsp;|&nbsp;
+      <a href="/blockstart/#docs">Docs</a>  &nbsp;|&nbsp;
+      <a href="/blockstart/demos/">Demos</a> &nbsp;|&nbsp;
+      <a href="/blockstart/blockstart.css">Download</a>
+    </div>
+  </block>
+
+<h1>Coming soon...</h1>
+</body>
+</html>
diff --git a/public/blockstart/demos/slack.html b/public/blockstart/demos/slack.html
new file mode 100644
index 0000000..2db28ac
--- /dev/null
+++ b/public/blockstart/demos/slack.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>Blockstart Template</title>
+
+  <link rel="stylesheet" href="/blockstart/blockstart.css">
+
+<style>
+</style>
+
+</head>
+
+<body>
+  <block class="horizontal pad" style="border-bottom: 1px solid var(--value6); --spacing: space-around; width: unset;">
+    <a href="/blockstart/">blockstart.css</a>
+    <div class="horizontal" style="--spacing: end;">
+      <a href="/blockstart/#about">About</a>  &nbsp;|&nbsp;
+      <a href="/blockstart/#docs">Docs</a>  &nbsp;|&nbsp;
+      <a href="/blockstart/demos/">Demos</a> &nbsp;|&nbsp;
+      <a href="/blockstart/blockstart.css">Download</a>
+    </div>
+  </block>
+
+<h1>Coming soon...</h1>
+</body>
+</html>
diff --git a/public/blockstart/demos/snapchat.html b/public/blockstart/demos/snapchat.html
new file mode 100644
index 0000000..2db28ac
--- /dev/null
+++ b/public/blockstart/demos/snapchat.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>Blockstart Template</title>
+
+  <link rel="stylesheet" href="/blockstart/blockstart.css">
+
+<style>
+</style>
+
+</head>
+
+<body>
+  <block class="horizontal pad" style="border-bottom: 1px solid var(--value6); --spacing: space-around; width: unset;">
+    <a href="/blockstart/">blockstart.css</a>
+    <div class="horizontal" style="--spacing: end;">
+      <a href="/blockstart/#about">About</a>  &nbsp;|&nbsp;
+      <a href="/blockstart/#docs">Docs</a>  &nbsp;|&nbsp;
+      <a href="/blockstart/demos/">Demos</a> &nbsp;|&nbsp;
+      <a href="/blockstart/blockstart.css">Download</a>
+    </div>
+  </block>
+
+<h1>Coming soon...</h1>
+</body>
+</html>
diff --git a/public/blockstart/demos/square.html b/public/blockstart/demos/square.html
new file mode 100644
index 0000000..2db28ac
--- /dev/null
+++ b/public/blockstart/demos/square.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>Blockstart Template</title>
+
+  <link rel="stylesheet" href="/blockstart/blockstart.css">
+
+<style>
+</style>
+
+</head>
+
+<body>
+  <block class="horizontal pad" style="border-bottom: 1px solid var(--value6); --spacing: space-around; width: unset;">
+    <a href="/blockstart/">blockstart.css</a>
+    <div class="horizontal" style="--spacing: end;">
+      <a href="/blockstart/#about">About</a>  &nbsp;|&nbsp;
+      <a href="/blockstart/#docs">Docs</a>  &nbsp;|&nbsp;
+      <a href="/blockstart/demos/">Demos</a> &nbsp;|&nbsp;
+      <a href="/blockstart/blockstart.css">Download</a>
+    </div>
+  </block>
+
+<h1>Coming soon...</h1>
+</body>
+</html>
diff --git a/public/blockstart/demos/vidyard.html b/public/blockstart/demos/vidyard.html
new file mode 100644
index 0000000..2db28ac
--- /dev/null
+++ b/public/blockstart/demos/vidyard.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>Blockstart Template</title>
+
+  <link rel="stylesheet" href="/blockstart/blockstart.css">
+
+<style>
+</style>
+
+</head>
+
+<body>
+  <block class="horizontal pad" style="border-bottom: 1px solid var(--value6); --spacing: space-around; width: unset;">
+    <a href="/blockstart/">blockstart.css</a>
+    <div class="horizontal" style="--spacing: end;">
+      <a href="/blockstart/#about">About</a>  &nbsp;|&nbsp;
+      <a href="/blockstart/#docs">Docs</a>  &nbsp;|&nbsp;
+      <a href="/blockstart/demos/">Demos</a> &nbsp;|&nbsp;
+      <a href="/blockstart/blockstart.css">Download</a>
+    </div>
+  </block>
+
+<h1>Coming soon...</h1>
+</body>
+</html>
diff --git a/public/blockstart/demos/vimeo.html b/public/blockstart/demos/vimeo.html
new file mode 100644
index 0000000..2db28ac
--- /dev/null
+++ b/public/blockstart/demos/vimeo.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>Blockstart Template</title>
+
+  <link rel="stylesheet" href="/blockstart/blockstart.css">
+
+<style>
+</style>
+
+</head>
+
+<body>
+  <block class="horizontal pad" style="border-bottom: 1px solid var(--value6); --spacing: space-around; width: unset;">
+    <a href="/blockstart/">blockstart.css</a>
+    <div class="horizontal" style="--spacing: end;">
+      <a href="/blockstart/#about">About</a>  &nbsp;|&nbsp;
+      <a href="/blockstart/#docs">Docs</a>  &nbsp;|&nbsp;
+      <a href="/blockstart/demos/">Demos</a> &nbsp;|&nbsp;
+      <a href="/blockstart/blockstart.css">Download</a>
+    </div>
+  </block>
+
+<h1>Coming soon...</h1>
+</body>
+</html>
diff --git a/public/blockstart/demos/wordstream.html b/public/blockstart/demos/wordstream.html
new file mode 100644
index 0000000..2db28ac
--- /dev/null
+++ b/public/blockstart/demos/wordstream.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>Blockstart Template</title>
+
+  <link rel="stylesheet" href="/blockstart/blockstart.css">
+
+<style>
+</style>
+
+</head>
+
+<body>
+  <block class="horizontal pad" style="border-bottom: 1px solid var(--value6); --spacing: space-around; width: unset;">
+    <a href="/blockstart/">blockstart.css</a>
+    <div class="horizontal" style="--spacing: end;">
+      <a href="/blockstart/#about">About</a>  &nbsp;|&nbsp;
+      <a href="/blockstart/#docs">Docs</a>  &nbsp;|&nbsp;
+      <a href="/blockstart/demos/">Demos</a> &nbsp;|&nbsp;
+      <a href="/blockstart/blockstart.css">Download</a>
+    </div>
+  </block>
+
+<h1>Coming soon...</h1>
+</body>
+</html>
diff --git a/public/blockstart/demos/zoom.html b/public/blockstart/demos/zoom.html
new file mode 100644
index 0000000..2db28ac
--- /dev/null
+++ b/public/blockstart/demos/zoom.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>Blockstart Template</title>
+
+  <link rel="stylesheet" href="/blockstart/blockstart.css">
+
+<style>
+</style>
+
+</head>
+
+<body>
+  <block class="horizontal pad" style="border-bottom: 1px solid var(--value6); --spacing: space-around; width: unset;">
+    <a href="/blockstart/">blockstart.css</a>
+    <div class="horizontal" style="--spacing: end;">
+      <a href="/blockstart/#about">About</a>  &nbsp;|&nbsp;
+      <a href="/blockstart/#docs">Docs</a>  &nbsp;|&nbsp;
+      <a href="/blockstart/demos/">Demos</a> &nbsp;|&nbsp;
+      <a href="/blockstart/blockstart.css">Download</a>
+    </div>
+  </block>
+
+<h1>Coming soon...</h1>
+</body>
+</html>
diff --git a/public/blockstart/index.html b/public/blockstart/index.html
index 62ab2bd..3d64a2b 100644
--- a/public/blockstart/index.html
+++ b/public/blockstart/index.html
@@ -341,7 +341,7 @@ npx http-server -d -c-1 public
 </code>
 </pre>
 
-<p>Once you do that you can place the <a href="/blockstart/blockstart.css">blockstart.css</a> in the <code>public/</code> directory and start putting your <code>.html</code> files in the same place.  Here's a decen starter template:</p>
+<p>Once you do that you can place the <a href="/blockstart/blockstart.css">blockstart.css</a> in the <code>public/</code> directory and start putting your <code>.html</code> files in the same place.  Here's a reasonable starter template:</p>
 
 <pre>
 <code>
