Get the graphics on a grid thing working.

src/demos/GridOverGraphic.svelte

@@ -0,0 +1,99 @@
+<script>
+  import CodeView from '../components/CodeView.svelte';
+  import Icon from '../components/Icon.svelte';
+</script>
+
+<style>
+  content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  icecream {
+    position: relative;
+  }
+
+  icecream background {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: -1;
+  }
+
+  icecream background img {
+    width: 100vh;
+  }
+
+  overlay {
+    display: grid;
+    grid-template-columns: repeat(2,1fr);
+    grid-template-rows: auto;
+    grid-template-areas:
+      "topleft topright"
+      "middle middle"
+      "bottomleft bottomright";
+      height: 100vh;
+  }
+
+  one {
+    grid-area: topright;
+    background-color: var(--color-accent);
+    border-radius: 50% 0 0;
+    font-size: 2em;
+    color: #fff;
+    text-align: right;
+  }
+
+  two {
+    grid-area: middle;
+    background-color: var(--color-accent);
+    opacity: 80%;
+    font-size: 2em;
+    color: #fff;
+    text-align: center;
+    border-radius: 20% 0 20% 0;
+  }
+
+  three {
+    grid-area: bottomleft;
+    background-color: var(--color-accent);
+    opacity: 90%;
+    font-size: 2em;
+    color: #fff;
+    text-align: center;
+    border-radius: 0 0 10% 40%;
+  }
+
+</style>
+
+<content>
+  <h1>Grid Over Graphic</h1>
+
+  <icecream>
+    <background>
+    <img src="/ice_cream_graphic.svg" />
+    </background>
+
+    <overlay>
+      <one>
+        <h1>Do You Like Icecream?</h1>
+        <p>This square is placed over this image using a
+          CSS Grid.
+        </p>
+      </one>
+      <two>
+      <h1>Icecream Rules</h1>
+      <p>Sometimes you want to put a graphic behind some creatively
+        organize text and panels.  You can dot that with CSS grids.
+      </two>
+      <three>
+      <h1>Bottom Right</h1>
+      <p>I don't know why I put that sphere there.</p>
+      </three>
+    </overlay>
+  </icecream>
+</content>
+
+

src/demos/index.svelte

@@ -10,6 +10,7 @@
   import Panels from '../thumbs/Panels.svelte';
   import NavBar from '../thumbs/NavBar.svelte';
   import Tabs from '../thumbs/Tabs.svelte';
+  import GridOverGraphic from '../demos/GridOverGraphic.svelte';
 
   import {push} from 'svelte-spa-router';
   import { holder } from '../../lib/imgholder.js';
@@ -112,6 +113,10 @@
   <figcaption>Tabs</figcaption>
 </figure>
 
+<figure on:click={ () => push('/demos/gridovergraphic') }>
+  <GridOverGraphic />
+  <figcaption>Grid Over Graphic</figcaption>
+</figure>
 </images>
 
 

src/routes.js

@@ -16,6 +16,7 @@ import Panels from "./demos/Panels.svelte";
 import Modal from "./demos/Modal.svelte";
 import NavBar from "./demos/NavBar.svelte";
 import Tabs from "./demos/Tabs.svelte";
+import GridOverGraphic from "./demos/GridOverGraphic.svelte";
 
 export default {
   "/": Home,
@@ -33,6 +34,7 @@ export default {
   "/demos/pinterest": Pinterest,
   "/demos/navbar": NavBar,
   "/demos/tabs": Tabs,
+  "/demos/gridovergraphic": GridOverGraphic,
   "/demos/xoracademy": XorAcademy,
   "/demos/xoracademy/watch": XorAcademyWatch,
   "*": NotFound,