Panels, Modal, and NavBar done.

public/code/Cards.html

@@ -1,5 +1,4 @@
-<content>
+<card>
-  <card>
   <top>
     <img src={ holder(16 * 30, 9 * 30) }/>
   </top>
@@ -22,5 +21,4 @@
       <Icon name="x-circle" color="var(--color-bg)"  size="24"/>
     </button>
   </bottom>
-  </card>
+</card>
-</content>

public/code/Google.html

@@ -1,5 +1,4 @@
-<content>
+<header>
-  <header>
   <nav>
     <nav-left>
       <a>About</a>
@@ -12,19 +11,18 @@
       <li><button>Sign In</button></li>
     </ul>
   </nav>
-  </header>
+</header>
 
-  <figure>
+<figure>
   <a href="/demos/google" use:link>
     <img src="https://via.placeholder.com/500x200?text=Google+Doodle">
   </a>
-  </figure>
+</figure>
 
-  <search>
+<search>
   <input type="text">
   <buttons>
     <button>Google Search</button>
     <button>I'm Feeling Lucky</button>
   </buttons>
-  </search>
+</search>
-</content>

public/code/Instagram.html

@@ -1,5 +1,4 @@
-<content>
+<header>
-  <header>
   <nav>
     <b><Icon name="instagram" color="var(--color-text)" /> Instagram</b>
     <input placeholder="Search">
@@ -8,14 +7,14 @@
       <li><a>Sign Up</a></li>
     </ul>
   </nav>
-  </header>
+</header>
 
-  <profile>
+<profile>
-  <figure>
+<figure>
   <img alt="Zed's Face" src="https://via.placeholder.com/256x256?text=Zed's Face">
-  </figure>
+</figure>
 
-  <info>
+<info>
   <p>
     <b>zedshaw</b> <button>follow</button>
   </p>
@@ -28,18 +27,18 @@
   <p>Painter in oil, watercolor, and pastel. I’m doing live streams of little paintings on Twitch:<br>
     <a href="www.twitch.tv/zedashaw">www.twitch.tv/zedashaw</a>
   </p>
-  </info>
+</info>
-  </profile>
+</profile>
 
-  <pins>
+<pins>
   {#each pins as pin}
   <figure>
     <img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Story">
   </figure> 
   {/each}
-  </pins>
+</pins>
 
-  <tabs>
+<tabs>
   <nav>
     <ul>
       <li><Icon name="grid" color="var(--color-text)" /> POSTS</li>
@@ -48,14 +47,13 @@
       <li><Icon name="user" color="var(--color-text)" /> TAGGED</li>
     </ul>
   </nav>
-  </tabs>
+</tabs>
 
-  <posts>
+<posts>
   {#each posts as post}
   <figure>
     <img alt="Stock photo" src="https://via.placeholder.com/300x300?text=Post Image">
   </figure> 
   {/each}
-  </posts>
+</posts>
-</content>
 

public/code/Modal.css

@@ -0,0 +1,35 @@
+content {
+  display: flex;
+  justify-content: center;
+}
+
+button {
+  padding: 5em;
+}
+
+modal {
+  display: flex;
+  position: fixed;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  background: rgba(244,244,244,0.75);
+  padding: 0px;
+}
+
+modal-content {
+  flex-direction: column;
+  background: white;
+  border: 1px solid var(--color-accent);
+  border-radius: 5px;
+  max-height: 300px;
+  min-height: 300px;
+  max-width: 300px;
+  width: 100%;
+  z-index: 20;
+  padding: 0.5em;
+}

public/code/Modal.html

@@ -0,0 +1,11 @@
+<button on:click={ () => visible = true }>Click Me!</button>
+
+{#if visible}
+  <modal on:click={ () => visible = false }>
+  <modal-content>
+    <h1>This Is A Modal</h1>
+    <p>Designers love modals. Click anywhere to close this.</p>
+  </modal-content>
+  </modal>
+{/if}
+

public/code/NavBar.css

@@ -0,0 +1,34 @@
+content {
+  display: flex;
+  flex-direction: column;
+}
+
+/* mvp.css aleady has a nav so using this 
+name to demonstrate how to make your own. */
+nav-bar {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-evenly;
+
+  /* this is just for displaying here */
+  padding: 1em;
+  border: 1px solid var(--color-accent);
+  margin-bottom: 1em;
+}
+
+nav-bar middle {
+  display: flex;
+  flex: 2;
+  justify-content: center;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+nav-bar middle input {
+  width: 100%;
+}
+
+.alternate {
+  background-color: #ddd;
+}

public/code/NavBar.html

@@ -0,0 +1,30 @@
+<nav-bar>
+  <left>
+    <b><Icon name="trash" color="var(--color-text)" /> fsck CSS</b>
+  </left>
+
+  <middle>
+    <input placeholder="Search">
+  </middle>
+
+  <right>
+    <button>Log In</button>
+    <a>Sign Up</a>
+  </right>
+</nav-bar>
+
+<nav-bar class="alternate">
+  <left>
+    <b><Icon name="trash" color="var(--color-text)" /> fsck CSS</b>
+  </left>
+
+  <middle>
+  <!-- you just leave this empty and flexbox
+    will expand it for you. -->
+  </middle>
+
+  <right>
+    <button>Log In</button>
+    <button id="signup">Sign Up</button>
+  </right>
+</nav-bar>

public/code/Panels.css

@@ -0,0 +1,53 @@
+content {
+  display: flex;
+  flex: flex-shrink;
+  flex-grow: 1;
+  justify-content: center;
+}
+
+panel {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #eee;
+  width: min-content;
+}
+
+panel top {
+  width: 480px; /* sets a header for display */
+  padding: 0.5rem;
+}
+
+panel middle {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+panel middle h4 {
+}
+
+panel bottom {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+}
+
+panel bottom button {
+  display: flex;
+  margin: 0;
+  border-radius: unset;
+  width: 100%;
+  justify-content: space-evenly;
+}
+
+button:hover {
+  filter: invert(20%);
+}
+
+button#cancel {
+  background: unset;
+  color: var(--color-text);
+}

public/code/Panels.html

@@ -0,0 +1,20 @@
+<panel>
+  <top>
+  <h1>Panel is a Card</h1>
+  </top>
+
+  <middle>
+    <h4>
+      Panel Example
+    </h4>
+    <p>Not sure what the big deal is with the difference between panels and cards
+      but I'm doing all the things so here's a panel. Let's say, buttons on a panel
+      are different to demonstrate how to make a button strip. </p>
+  </middle>
+
+  <bottom>
+  <button id="cancel"><Icon name="x-circle" color="var(--color-text)"  size="24"/> CANCEL</button>
+  <button><Icon name="check-circle" color="var(--color-bg)" size="24" /> OK</button>
+  </bottom>
+</panel>
+

public/code/Pinterest.html

@@ -1,5 +1,4 @@
-<content>
+<header>
-  <header>
   <nav>
     <left>
       <logo><Icon name="pinterest" color="var(--color)" /> Pinterest</logo>
@@ -14,9 +13,9 @@
       <li><button id="signup">Sign Up</button></li>
     </ul>
   </nav>
-  </header>
+</header>
 
-  {#if !thumbnail}
+{#if !thumbnail}
   <profile>
     <info>
       <h1>Vincent van Gogh</h1>
@@ -42,5 +41,4 @@
     </lane>
   {/each}
   </pins>
-  {/if}
+{/if}
-</content>

public/code/Tiles.html

@@ -1,5 +1,4 @@
-<content>
+<tile>
-  <tile>
   <left>
     <img src={ holder(48, 48) }/>
   </left>
@@ -20,6 +19,5 @@
       <Icon name="x-circle" color="var(--color-bg)"  size="24"/>
     </button>
   </right>
-  </tile>
+</tile>
-</content>
 

public/code/Twitter.html

@@ -1,11 +1,10 @@
-<content>
+<left>
-  <left>
+<Icon name="twitter" color="var(--color)" />
-  <Icon name="twitter" color="var(--color)" />
+<h4># Explore</h4>
-  <h4># Explore</h4>
+<h4><Icon name="settings" color="var(--color-text)" /> Settings</h4>
-  <h4><Icon name="settings" color="var(--color-text)" /> Settings</h4>
+</left>
-  </left>
 
-  <middle>
+<middle>
   <header>
     <nav>
       <back><Icon name="arrow-left" /></back>
@@ -73,9 +72,9 @@
     </tweet>
   {/each}
   </tweets>
-  </middle>
+</middle>
 
-  <right>
+<right>
   <input placeholder="Search Twitter" />
 
   <section>
@@ -129,5 +128,4 @@
       </ul>
     </aside>
   </section>
-  </right>
+</right>
-</content>

public/code/XorAcademy.html

@@ -1,5 +1,4 @@
-<content>
+<header>
-  <header>
   <nav>
     <b><a id="logo-link" href="/demos/xoracademy" use:link><Icon name="edit-3" color="var(--color-text)" /> Xor.Academy</a></b>
     <input placeholder="Search">
@@ -8,9 +7,9 @@
       <li><a>Sign Up</a></li>
     </ul>
   </nav>
-  </header>
+</header>
 
-  <profile>
+<profile>
   <figure>
     <img alt="Module Thumb" src="https://via.placeholder.com/256x256?text=Module+Thumb">
   </figure>
@@ -29,23 +28,22 @@
       making drawing a habit.
     </p>
   </info>
-  </profile>
+</profile>
 
-  <related>
+<related>
-  {#each related as pin}
+{#each related as pin}
   <figure>
     <img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Related">
   </figure> 
-  {/each}
+{/each}
-  </related>
+</related>
 
-  <posts>
+<posts>
-  {#each posts as post}
+{#each posts as post}
   <figure>
     <a href="/demos/xoracademy/watch" use:link>
       <img alt="Placeholder" src="https://via.placeholder.com/300x300?text=Video Thumb">
     </a>
   </figure> 
-  {/each}
+{/each}
-  </posts>
+</posts>
-</content>

public/code/XorAcademyWatch.html

@@ -1,5 +1,4 @@
-<content>
+<header>
-  <header>
   <nav>
     <b><a href="/demos/xoracademy" use:link><Icon name="edit-3" color="var(--color-text)" /> Xor.Academy</a></b>
     <input placeholder="Search">
@@ -8,8 +7,8 @@
       <li><a>Sign Up</a></li>
     </ul>
   </nav>
-  </header>
+</header>
-  <main>
+<main>
   <figure>
     <img src="https://via.placeholder.com/1280x720?text=Video">
     <figcaption>
@@ -76,5 +75,4 @@
       {/each}
     </comments>
   </lower>
-  </main>
+</main>
-</content>

public/code/Youtube.html

@@ -1,5 +1,4 @@
-<content>
+<header>
-  <header>
   <nav>
     <nav-left>
       <a><Icon name="menu" /> <Icon name="youtube" /> <logo>Youtube</logo></a>
@@ -12,8 +11,8 @@
       <li><button><Icon name="user" /> Sign In</button></li>
     </ul>
   </nav>
-  </header>
+</header>
-  <main>
+<main>
   <left>
     <figure>
       <a href="/demos/google" use:link>
@@ -117,5 +116,4 @@
     </card>
     {/each}
   </right>
-  </main>
+</main>
-</content>

src/demos/Modal.svelte

@@ -1,12 +1,20 @@
 <script>
   import Icon from '../components/Icon.svelte';
+  import CodeView from '../components/CodeView.svelte';
   import { fade } from 'svelte/transition';
   export let visible = false;
-  import { createEventDispatcher } from 'svelte';
-  const dispatch = createEventDispatcher();
 </script>
 
 <style>
+  content {
+    display: flex;
+    justify-content: center;
+  }
+
+  button {
+    padding: 5em;
+  }
+
   modal {
     display: flex;
     position: fixed;
@@ -26,19 +34,27 @@
     background: white;
     border: 1px solid var(--color-accent);
     border-radius: 5px;
-    max-height: 75vh;
+    max-height: 300px;
-    min-height: 75vh;
+    min-height: 300px;
-    max-width: 75vh;
+    max-width: 300px;
     width: 100%;
     z-index: 20;
-    padding: 0px;
+    padding: 0.5em;
   }
 </style>
 
+<content>
+  <button on:click={ () => visible = true }>Click Me!</button>
+</content>
+
 {#if visible}
-  <modal on:click={ () => dispatch('click') }>
+  <modal on:click={ () => visible = false }>
   <modal-content>
-    <slot></slot>
+    <h1>This Is A Modal</h1>
+    <p>Designers love modals. Click anywhere to close this.</p>
   </modal-content>
   </modal>
 {/if}
+
+<CodeView source="/code/Modal" />
+

src/demos/NavBar.svelte

@@ -0,0 +1,76 @@
+<script>
+  import CodeView from '../components/CodeView.svelte';
+  import Icon from '../components/Icon.svelte';
+</script>
+<style>
+  content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* mvp.css aleady has a nav so using this 
+     name to demonstrate how to make your own. */
+  nav-bar {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    justify-content: space-evenly;
+
+    /* this is just for displaying here */
+    padding: 1em;
+    border: 1px solid var(--color-accent);
+    margin-bottom: 1em;
+  }
+
+  nav-bar middle {
+    display: flex;
+    flex: 2;
+    justify-content: center;
+    padding-left: 1em;
+    padding-right: 1em;
+  }
+
+  nav-bar middle input {
+    width: 100%;
+  }
+
+  .alternate {
+    background-color: #ddd;
+  }
+</style>
+
+<content>
+  <nav-bar>
+    <left>
+      <b><Icon name="trash" color="var(--color-text)" /> fsck CSS</b>
+    </left>
+
+    <middle>
+      <input placeholder="Search">
+    </middle>
+
+    <right>
+      <button>Log In</button>
+      <a>Sign Up</a>
+    </right>
+  </nav-bar>
+
+  <nav-bar class="alternate">
+    <left>
+      <b><Icon name="trash" color="var(--color-text)" /> fsck CSS</b>
+    </left>
+
+    <middle>
+    <!-- you just leave this empty and flexbox
+      will expand it for you. -->
+    </middle>
+
+    <right>
+      <button>Log In</button>
+      <button id="signup">Sign Up</button>
+    </right>
+  </nav-bar>
+
+</content>
+
+<CodeView source="/code/NavBar" />

src/demos/Panels.svelte

@@ -0,0 +1,83 @@
+<script>
+  import CodeView from '../components/CodeView.svelte';
+  import Icon from '../components/Icon.svelte';
+</script>
+<style>
+  content {
+    display: flex;
+    flex: flex-shrink;
+    flex-grow: 1;
+    justify-content: center;
+  }
+
+  panel {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid #eee;
+    width: min-content;
+  }
+
+  panel top {
+    width: 480px; /* sets a header for display */
+    padding: 0.5rem;
+  }
+
+  panel middle {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  panel middle h4 {
+  }
+
+  panel bottom {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+  }
+
+  panel bottom button {
+    display: flex;
+    margin: 0;
+    border-radius: unset;
+    width: 100%;
+    justify-content: space-evenly;
+  }
+
+  button:hover {
+    filter: invert(20%);
+  }
+
+  button#cancel {
+    background: unset;
+    color: var(--color-text);
+  }
+</style>
+
+<content>
+  <panel>
+    <top>
+    <h1>Panel is a Card</h1>
+    </top>
+
+    <middle>
+      <h4>
+        Panel Example
+      </h4>
+      <p>Not sure what the big deal is with the difference between panels and cards
+        but I'm doing all the things so here's a panel. Let's say, buttons on a panel
+        are different to demonstrate how to make a button strip. </p>
+    </middle>
+
+    <bottom>
+    <button id="cancel"><Icon name="x-circle" color="var(--color-text)"  size="24"/> CANCEL</button>
+    <button><Icon name="check-circle" color="var(--color-bg)" size="24" /> OK</button>
+    </bottom>
+  </panel>
+</content>
+
+<CodeView source="/code/Panels" />

src/demos/index.svelte

@@ -7,6 +7,8 @@
   import Login from '../thumbs/Login.svelte';
   import Tiles from '../thumbs/Tiles.svelte';
   import Cards from '../thumbs/Cards.svelte';
+  import Panels from '../thumbs/Panels.svelte';
+  import NavBar from '../thumbs/NavBar.svelte';
 
   import {push} from 'svelte-spa-router';
   import { holder } from '../../lib/imgholder.js';
@@ -99,6 +101,16 @@
   <figcaption>Cards</figcaption>
 </figure>
 
+<figure on:click={ () => push('/demos/panels') }>
+  <Panels />
+  <figcaption>Panels</figcaption>
+</figure>
+
+<figure on:click={ () => push('/demos/navbar') }>
+  <NavBar />
+  <figcaption>Nav Bar</figcaption>
+</figure>
+
 </images>
 
 

src/routes.js

@@ -12,6 +12,9 @@ import XorAcademyWatch from "./demos/XorAcademyWatch.svelte";
 import Login from "./demos/Login.svelte";
 import Tiles from "./demos/Tiles.svelte";
 import Cards from "./demos/Cards.svelte";
+import Panels from "./demos/Panels.svelte";
+import Modal from "./demos/Modal.svelte";
+import NavBar from "./demos/NavBar.svelte";
 
 export default {
   "/": Home,
@@ -19,12 +22,15 @@ export default {
   "/demos": Demos,
   "/demos/login": Login,
   "/demos/tiles": Tiles,
+  "/demos/modal": Modal,
   "/demos/cards": Cards,
+  "/demos/panels": Panels,
   "/demos/google": Google,
   "/demos/twitter": Twitter,
   "/demos/youtube": Youtube,
   "/demos/instagram": Instagram,
   "/demos/pinterest": Pinterest,
+  "/demos/navbar": NavBar,
   "/demos/xoracademy": XorAcademy,
   "/demos/xoracademy/watch": XorAcademyWatch,
   "*": NotFound,

src/thumbs/NavBar.svelte

@@ -0,0 +1,73 @@
+<script>
+  import CodeView from '../components/CodeView.svelte';
+  import Icon from '../components/Icon.svelte';
+</script>
+<style>
+  content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* mvp.css aleady has a nav so using this 
+     name to demonstrate how to make your own. */
+  nav-bar {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    justify-content: space-evenly;
+    padding: 1em; /* this is only for here */
+    border: 1px solid var(--color-accent);
+    margin-bottom: 1em;
+  }
+
+  nav-bar middle {
+    display: flex;
+    flex: 2;
+    justify-content: center;
+    padding-left: 1em;
+    padding-right: 1em;
+  }
+
+  nav-bar middle input {
+    width: 100%;
+  }
+
+  .alternate {
+    background-color: #ddd;
+  }
+</style>
+
+<content>
+  <nav-bar>
+    <left>
+      <b><Icon name="trash" color="var(--color-text)" /> fsck CSS</b>
+    </left>
+
+    <middle>
+      <input placeholder="Search">
+    </middle>
+
+    <right>
+      <button>Log In</button>
+      <a>Sign Up</a>
+    </right>
+  </nav-bar>
+
+  <nav-bar class="alternate">
+    <left>
+      <b><Icon name="trash" color="var(--color-text)" /> fsck CSS</b>
+    </left>
+
+    <middle>
+    <!-- you just leave this empty and flexbox
+      will expand it for you. -->
+    </middle>
+
+    <right>
+    <button>Log In</button>
+    <button id="signup">Sign Up</button>
+    </right>
+  </nav-bar>
+
+</content>
+

src/thumbs/Panels.svelte

@@ -0,0 +1,81 @@
+<script>
+  import Icon from '../components/Icon.svelte';
+</script>
+<style>
+  content {
+    display: flex;
+    flex: flex-shrink;
+    flex-grow: 1;
+    justify-content: center;
+  }
+
+  panel {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid #eee;
+    width: min-content;
+  }
+
+  panel top {
+    width: 480px; /* sets a header for display */
+    padding: 0.5rem;
+  }
+
+  panel middle {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  panel middle h4 {
+  }
+
+  panel bottom {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+  }
+
+  panel bottom button {
+    display: flex;
+    margin: 0;
+    border-radius: unset;
+    width: 100%;
+    justify-content: space-evenly;
+  }
+
+  button:hover {
+    filter: invert(20%);
+  }
+
+  button#cancel {
+    background: unset;
+    color: var(--color-text);
+  }
+</style>
+
+<content>
+  <panel>
+    <top>
+    <h1>Panel is a Card</h1>
+    </top>
+
+    <middle>
+      <h4>
+        Panel Example
+      </h4>
+      <p>Not sure what the big deal is with the difference between panels and cards
+        but I'm doing all the things so here's a panel. Let's say, buttons on a panel
+        are different to demonstrate how to make a button strip. </p>
+    </middle>
+
+    <bottom>
+    <button id="cancel"><Icon name="x-circle" color="var(--color-text)"  size="24"/> CANCEL</button>
+    <button><Icon name="check-circle" color="var(--color-bg)" size="24" /> OK</button>
+    </bottom>
+  </panel>
+</content>
+