Panels, Modal, and NavBar done.

public/code/Cards.html

@@ -1,4 +1,3 @@
-<content>
 <card>
   <top>
     <img src={ holder(16 * 30, 9 * 30) }/>
@@ -23,4 +22,3 @@
     </button>
   </bottom>
 </card>
-</content>

public/code/Google.html

@@ -1,4 +1,3 @@
-<content>
 <header>
   <nav>
     <nav-left>
@@ -27,4 +26,3 @@
     <button>I'm Feeling Lucky</button>
   </buttons>
 </search>
-</content>

public/code/Instagram.html

@@ -1,4 +1,3 @@
-<content>
 <header>
   <nav>
     <b><Icon name="instagram" color="var(--color-text)" /> Instagram</b>
@@ -57,5 +56,4 @@
   </figure> 
   {/each}
 </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,4 +1,3 @@
-<content>
 <header>
   <nav>
     <left>
@@ -43,4 +42,3 @@
   {/each}
   </pins>
 {/if}
-</content>

public/code/Tiles.html

@@ -1,4 +1,3 @@
-<content>
 <tile>
   <left>
     <img src={ holder(48, 48) }/>
@@ -21,5 +20,4 @@
     </button>
   </right>
 </tile>
-</content>
 

public/code/Twitter.html

@@ -1,4 +1,3 @@
-<content>
 <left>
 <Icon name="twitter" color="var(--color)" />
 <h4># Explore</h4>
@@ -130,4 +129,3 @@
     </aside>
   </section>
 </right>
-</content>

public/code/XorAcademy.html

@@ -1,4 +1,3 @@
-<content>
 <header>
   <nav>
     <b><a id="logo-link" href="/demos/xoracademy" use:link><Icon name="edit-3" color="var(--color-text)" /> Xor.Academy</a></b>
@@ -48,4 +47,3 @@
   </figure> 
 {/each}
 </posts>
-</content>

public/code/XorAcademyWatch.html

@@ -1,4 +1,3 @@
-<content>
 <header>
   <nav>
     <b><a href="/demos/xoracademy" use:link><Icon name="edit-3" color="var(--color-text)" /> Xor.Academy</a></b>
@@ -77,4 +76,3 @@
     </comments>
   </lower>
 </main>
-</content>

public/code/Youtube.html

@@ -1,4 +1,3 @@
-<content>
 <header>
   <nav>
     <nav-left>
@@ -118,4 +117,3 @@
     {/each}
   </right>
 </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>
+