From 681046f22945b13f0e22e6a39c121661412022fb Mon Sep 17 00:00:00 2001
From: "Zed A. Shaw" <zed.shaw@gmail.com>
Date: Sun, 18 Sep 2022 21:57:20 -0400
Subject: [PATCH] Add an all and sidebar demo.

---
 .../all.html                                  | 111 ++++++++++++++++++
 .../sidebar.html                              |  99 ++++++++++++++++
 2 files changed, 210 insertions(+)
 create mode 100644 17-equal-height-holy-grail-layout-in-modern-css/all.html
 create mode 100644 17-equal-height-holy-grail-layout-in-modern-css/sidebar.html
diff --git a/17-equal-height-holy-grail-layout-in-modern-css/all.html b/17-equal-height-holy-grail-layout-in-modern-css/all.html
new file mode 100644
index 0000000..958dc7b
--- /dev/null
+++ b/17-equal-height-holy-grail-layout-in-modern-css/all.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset='utf-8'>
+  <meta name="description" content="Learn JavaScript the Hard Way">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
+
+  <title>Holy Grail Starter</title>
+
+  <style>
+    :root {
+      --height-header: 80px;
+      --height-footer: 200px;
+    }
+
+    body {
+      margin: 0px;
+      padding: 0px;
+    }
+
+    footer {
+      display: flex;
+      background-color: hsl(0, 0%, 80%);
+      min-height: var(--height-footer);
+    }
+
+    header {
+      display: flex;
+      background-color: hsl(0, 0%, 80%);
+      height: var(--height-header);
+    }
+
+    main {
+      display: flex;
+      flex-direction: column;
+      min-height: calc(100vh - var(--height-header) - var(--height-footer));
+    }
+
+    main > columns {
+      display: flex;
+      flex-direction: row;
+      flex: 1 1 auto;
+    }
+
+    main > columns left {
+      display: block;
+      flex: 0 1 300px;
+      background-color: hsl(0, 70%, 80%);
+    }
+
+    main > columns right {
+      display: block;
+      flex: 3 1 100%;
+      background-color: hsl(200, 70%, 80%);
+    }
+
+    @media only screen and (max-width: 700px) {
+      main > columns {
+        flex-direction: column-reverse;
+      }
+
+      main > columns left,
+      main > columns right {
+        display: block;
+        flex: 1 1 auto;
+      }
+    }
+  </style>
+</head>
+<body>
+
+  <header>
+    <h1>Header</h1>
+  </header>
+
+  <main>
+    <columns>
+      <left>
+        <h1>Left</h1>
+        <h1>Left</h1>
+        <h1>Left</h1>
+        <h1>Left</h1>
+        <h1>Left</h1>
+        <h1>Left</h1>
+        <h1>Left</h1>
+        <h1>Left</h1>
+        <h1>Left</h1>
+        <h1>Left</h1>
+        <h1>Left</h1>
+        <h1>Left</h1>
+        <h1>Left</h1>
+        <h1>Left</h1>
+        <h1>Left</h1>
+        <h1>Left</h1>
+      </left>
+
+      <right>
+        <h1>Right</h1>
+        <h1>Right</h1>
+        <h1>Right</h1>
+        <h1>Right</h1>
+      </right>
+    </columns>
+  </main>
+
+  <footer>
+    <h1>Footer</h1>
+  </footer>
+</body>
+</html>
diff --git a/17-equal-height-holy-grail-layout-in-modern-css/sidebar.html b/17-equal-height-holy-grail-layout-in-modern-css/sidebar.html
new file mode 100644
index 0000000..977879e
--- /dev/null
+++ b/17-equal-height-holy-grail-layout-in-modern-css/sidebar.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset='utf-8'>
+  <meta name="description" content="Learn JavaScript the Hard Way">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
+
+  <title>Holy Grail Starter</title>
+
+  <style>
+    :root {
+      --height-header: 80px;
+      --height-footer: 200px;
+    }
+
+    body {
+      margin: 0px;
+      padding: 0px;
+    }
+
+    footer {
+      display: flex;
+      background-color: hsl(0, 0%, 80%);
+      min-height: var(--height-footer);
+    }
+
+    header {
+      display: flex;
+      background-color: hsl(0, 0%, 80%);
+      height: var(--height-header);
+    }
+
+    main {
+      display: flex;
+      flex-direction: column;
+      min-height: calc(100vh - var(--height-header) - var(--height-footer));
+    }
+
+    main > columns {
+      display: flex;
+      flex-direction: row;
+      flex: 1 1 auto;
+    }
+
+    main > columns left {
+      display: block;
+      flex: 0 1 300px;
+      background-color: hsl(0, 70%, 80%);
+    }
+
+    main > columns right {
+      display: block;
+      flex: 3 1 100%;
+      background-color: hsl(200, 70%, 80%);
+    }
+  </style>
+</head>
+<body>
+
+  <header>
+    <h1>Header</h1>
+  </header>
+
+  <main>
+    <columns>
+      <left>
+        <h1>Left</h1>
+        <h1>Left</h1>
+        <h1>Left</h1>
+        <h1>Left</h1>
+        <h1>Left</h1>
+        <h1>Left</h1>
+        <h1>Left</h1>
+        <h1>Left</h1>
+        <h1>Left</h1>
+        <h1>Left</h1>
+        <h1>Left</h1>
+        <h1>Left</h1>
+        <h1>Left</h1>
+        <h1>Left</h1>
+        <h1>Left</h1>
+        <h1>Left</h1>
+      </left>
+
+      <right>
+        <h1>Right</h1>
+        <h1>Right</h1>
+        <h1>Right</h1>
+        <h1>Right</h1>
+      </right>
+    </columns>
+  </main>
+
+  <footer>
+    <h1>Footer</h1>
+  </footer>
+</body>
+</html>
