Last demo is overlaying a grid on top of a graphic for that fancy landing page look.

public/build/bundle.js

@@ -7282,8 +7282,9 @@ var app = (function () {
     	}
     }
 
-    /* src/demos/GridOverGraphic.svelte generated by Svelte v3.30.0 */
+    /* src/thumbs/GridOverGraphic.svelte generated by Svelte v3.30.0 */
-    const file$e = "src/demos/GridOverGraphic.svelte";
+
+    const file$e = "src/thumbs/GridOverGraphic.svelte";
 
     function create_fragment$f(ctx) {
     	let content;
@@ -7341,30 +7342,30 @@ var app = (function () {
     			t12 = space();
     			p2 = element("p");
     			p2.textContent = "I don't know why I put that sphere there.";
-    			add_location(h10, file$e, 71, 2, 1223);
+    			add_location(h10, file$e, 65, 2, 1084);
     			if (img.src !== (img_src_value = "/ice_cream_graphic.svg")) attr_dev(img, "src", img_src_value);
-    			attr_dev(img, "class", "svelte-15ytpc8");
+    			attr_dev(img, "class", "svelte-1n9y415");
-    			add_location(img, file$e, 75, 4, 1285);
+    			add_location(img, file$e, 69, 4, 1146);
-    			attr_dev(background, "class", "svelte-15ytpc8");
+    			attr_dev(background, "class", "svelte-1n9y415");
-    			add_location(background, file$e, 74, 4, 1268);
+    			add_location(background, file$e, 68, 4, 1129);
-    			add_location(h11, file$e, 80, 8, 1375);
+    			add_location(h11, file$e, 74, 8, 1236);
-    			add_location(p0, file$e, 81, 8, 1414);
+    			add_location(p0, file$e, 75, 8, 1275);
-    			attr_dev(one, "class", "svelte-15ytpc8");
+    			attr_dev(one, "class", "svelte-1n9y415");
-    			add_location(one, file$e, 79, 6, 1361);
+    			add_location(one, file$e, 73, 6, 1222);
-    			add_location(h12, file$e, 86, 6, 1527);
+    			add_location(h12, file$e, 80, 6, 1388);
-    			add_location(p1, file$e, 87, 6, 1557);
+    			add_location(p1, file$e, 81, 6, 1418);
-    			attr_dev(two, "class", "svelte-15ytpc8");
+    			attr_dev(two, "class", "svelte-1n9y415");
-    			add_location(two, file$e, 85, 6, 1515);
+    			add_location(two, file$e, 79, 6, 1376);
-    			add_location(h13, file$e, 91, 6, 1720);
+    			add_location(h13, file$e, 85, 6, 1581);
-    			add_location(p2, file$e, 92, 6, 1748);
+    			add_location(p2, file$e, 86, 6, 1609);
-    			attr_dev(three, "class", "svelte-15ytpc8");
+    			attr_dev(three, "class", "svelte-1n9y415");
-    			add_location(three, file$e, 90, 6, 1706);
+    			add_location(three, file$e, 84, 6, 1567);
-    			attr_dev(overlay, "class", "svelte-15ytpc8");
+    			attr_dev(overlay, "class", "svelte-1n9y415");
-    			add_location(overlay, file$e, 78, 4, 1345);
+    			add_location(overlay, file$e, 72, 4, 1206);
-    			attr_dev(icecream, "class", "svelte-15ytpc8");
+    			attr_dev(icecream, "class", "svelte-1n9y415");
-    			add_location(icecream, file$e, 73, 2, 1253);
+    			add_location(icecream, file$e, 67, 2, 1114);
-    			attr_dev(content, "class", "svelte-15ytpc8");
+    			attr_dev(content, "class", "svelte-1n9y415");
-    			add_location(content, file$e, 70, 0, 1211);
+    			add_location(content, file$e, 64, 0, 1072);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -7412,7 +7413,7 @@ var app = (function () {
     	return block;
     }
 
-    function instance$f($$self, $$props, $$invalidate) {
+    function instance$f($$self, $$props) {
     	let { $$slots: slots = {}, $$scope } = $$props;
     	validate_slots("GridOverGraphic", slots, []);
     	const writable_props = [];
@@ -7421,7 +7422,6 @@ var app = (function () {
     		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<GridOverGraphic> was created with unknown prop '${key}'`);
     	});
 
-    	$$self.$capture_state = () => ({ CodeView, Icon });
     	return [];
     }
 
@@ -7597,57 +7597,57 @@ var app = (function () {
     			t35 = space();
     			figcaption10 = element("figcaption");
     			figcaption10.textContent = "Grid Over Graphic";
-    			add_location(h10, file$f, 54, 0, 1361);
+    			add_location(h10, file$f, 54, 0, 1362);
     			attr_dev(figcaption0, "class", "svelte-1bny7ze");
-    			add_location(figcaption0, file$f, 60, 2, 1462);
+    			add_location(figcaption0, file$f, 60, 2, 1463);
     			attr_dev(figure0, "class", "svelte-1bny7ze");
-    			add_location(figure0, file$f, 58, 0, 1395);
+    			add_location(figure0, file$f, 58, 0, 1396);
     			attr_dev(figcaption1, "class", "svelte-1bny7ze");
-    			add_location(figcaption1, file$f, 65, 2, 1572);
+    			add_location(figcaption1, file$f, 65, 2, 1573);
     			attr_dev(figure1, "class", "svelte-1bny7ze");
-    			add_location(figure1, file$f, 63, 0, 1505);
+    			add_location(figure1, file$f, 63, 0, 1506);
     			attr_dev(figcaption2, "class", "svelte-1bny7ze");
-    			add_location(figcaption2, file$f, 70, 2, 1683);
+    			add_location(figcaption2, file$f, 70, 2, 1684);
     			attr_dev(figure2, "class", "svelte-1bny7ze");
-    			add_location(figure2, file$f, 68, 0, 1616);
+    			add_location(figure2, file$f, 68, 0, 1617);
     			attr_dev(figcaption3, "class", "svelte-1bny7ze");
-    			add_location(figcaption3, file$f, 75, 2, 1798);
+    			add_location(figcaption3, file$f, 75, 2, 1799);
     			attr_dev(figure3, "class", "svelte-1bny7ze");
-    			add_location(figure3, file$f, 73, 0, 1727);
+    			add_location(figure3, file$f, 73, 0, 1728);
     			attr_dev(figcaption4, "class", "svelte-1bny7ze");
-    			add_location(figcaption4, file$f, 80, 2, 1916);
+    			add_location(figcaption4, file$f, 80, 2, 1917);
     			attr_dev(figure4, "class", "svelte-1bny7ze");
-    			add_location(figure4, file$f, 78, 0, 1845);
+    			add_location(figure4, file$f, 78, 0, 1846);
     			attr_dev(images0, "class", "svelte-1bny7ze");
-    			add_location(images0, file$f, 56, 0, 1385);
+    			add_location(images0, file$f, 56, 0, 1386);
-    			add_location(hr, file$f, 84, 0, 1973);
+    			add_location(hr, file$f, 84, 0, 1974);
-    			add_location(h11, file$f, 85, 0, 1978);
+    			add_location(h11, file$f, 85, 0, 1979);
     			attr_dev(figcaption5, "class", "svelte-1bny7ze");
-    			add_location(figcaption5, file$f, 91, 2, 2080);
+    			add_location(figcaption5, file$f, 91, 2, 2081);
     			attr_dev(figure5, "class", "svelte-1bny7ze");
-    			add_location(figure5, file$f, 89, 0, 2017);
+    			add_location(figure5, file$f, 89, 0, 2018);
     			attr_dev(figcaption6, "class", "svelte-1bny7ze");
-    			add_location(figcaption6, file$f, 97, 2, 2192);
+    			add_location(figcaption6, file$f, 97, 2, 2193);
     			attr_dev(figure6, "class", "svelte-1bny7ze");
-    			add_location(figure6, file$f, 95, 0, 2129);
+    			add_location(figure6, file$f, 95, 0, 2130);
     			attr_dev(figcaption7, "class", "svelte-1bny7ze");
-    			add_location(figcaption7, file$f, 102, 2, 2297);
+    			add_location(figcaption7, file$f, 102, 2, 2298);
     			attr_dev(figure7, "class", "svelte-1bny7ze");
-    			add_location(figure7, file$f, 100, 0, 2234);
+    			add_location(figure7, file$f, 100, 0, 2235);
     			attr_dev(figcaption8, "class", "svelte-1bny7ze");
-    			add_location(figcaption8, file$f, 107, 2, 2404);
+    			add_location(figcaption8, file$f, 107, 2, 2405);
     			attr_dev(figure8, "class", "svelte-1bny7ze");
-    			add_location(figure8, file$f, 105, 0, 2339);
+    			add_location(figure8, file$f, 105, 0, 2340);
     			attr_dev(figcaption9, "class", "svelte-1bny7ze");
-    			add_location(figcaption9, file$f, 112, 2, 2508);
+    			add_location(figcaption9, file$f, 112, 2, 2509);
     			attr_dev(figure9, "class", "svelte-1bny7ze");
-    			add_location(figure9, file$f, 110, 0, 2447);
+    			add_location(figure9, file$f, 110, 0, 2448);
     			attr_dev(figcaption10, "class", "svelte-1bny7ze");
-    			add_location(figcaption10, file$f, 117, 2, 2632);
+    			add_location(figcaption10, file$f, 117, 2, 2633);
     			attr_dev(figure10, "class", "svelte-1bny7ze");
-    			add_location(figure10, file$f, 115, 0, 2549);
+    			add_location(figure10, file$f, 115, 0, 2550);
     			attr_dev(images1, "class", "svelte-1bny7ze");
-    			add_location(images1, file$f, 87, 0, 2007);
+    			add_location(images1, file$f, 87, 0, 2008);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -13905,6 +13905,185 @@ var app = (function () {
     	}
     }
 
+    /* src/demos/GridOverGraphic.svelte generated by Svelte v3.30.0 */
+    const file$w = "src/demos/GridOverGraphic.svelte";
+
+    function create_fragment$x(ctx) {
+    	let content;
+    	let h10;
+    	let t1;
+    	let icecream;
+    	let background;
+    	let img;
+    	let img_src_value;
+    	let t2;
+    	let overlay;
+    	let one;
+    	let h11;
+    	let t4;
+    	let p0;
+    	let t6;
+    	let two;
+    	let h12;
+    	let t8;
+    	let p1;
+    	let t10;
+    	let three;
+    	let h13;
+    	let t12;
+    	let p2;
+    	let t14;
+    	let codeview;
+    	let current;
+
+    	codeview = new CodeView({
+    			props: { source: "/code/GridOverGraphic" },
+    			$$inline: true
+    		});
+
+    	const block = {
+    		c: function create() {
+    			content = element("content");
+    			h10 = element("h1");
+    			h10.textContent = "Grid Over Graphic";
+    			t1 = space();
+    			icecream = element("icecream");
+    			background = element("background");
+    			img = element("img");
+    			t2 = space();
+    			overlay = element("overlay");
+    			one = element("one");
+    			h11 = element("h1");
+    			h11.textContent = "Do You Like Icecream?";
+    			t4 = space();
+    			p0 = element("p");
+    			p0.textContent = "This square is placed over this image using a\n          CSS Grid.";
+    			t6 = space();
+    			two = element("two");
+    			h12 = element("h1");
+    			h12.textContent = "Icecream Rules";
+    			t8 = space();
+    			p1 = element("p");
+    			p1.textContent = "Sometimes you want to put a graphic behind some creatively\n        organize text and panels.  You can dot that with CSS grids.";
+    			t10 = space();
+    			three = element("three");
+    			h13 = element("h1");
+    			h13.textContent = "Bottom Right";
+    			t12 = space();
+    			p2 = element("p");
+    			p2.textContent = "I don't know why I put that sphere there.";
+    			t14 = space();
+    			create_component(codeview.$$.fragment);
+    			add_location(h10, file$w, 70, 2, 1175);
+    			if (img.src !== (img_src_value = "/ice_cream_graphic.svg")) attr_dev(img, "src", img_src_value);
+    			attr_dev(img, "class", "svelte-15ytpc8");
+    			add_location(img, file$w, 74, 4, 1237);
+    			attr_dev(background, "class", "svelte-15ytpc8");
+    			add_location(background, file$w, 73, 4, 1220);
+    			add_location(h11, file$w, 79, 8, 1327);
+    			add_location(p0, file$w, 80, 8, 1366);
+    			attr_dev(one, "class", "svelte-15ytpc8");
+    			add_location(one, file$w, 78, 6, 1313);
+    			add_location(h12, file$w, 85, 6, 1479);
+    			add_location(p1, file$w, 86, 6, 1509);
+    			attr_dev(two, "class", "svelte-15ytpc8");
+    			add_location(two, file$w, 84, 6, 1467);
+    			add_location(h13, file$w, 90, 6, 1672);
+    			add_location(p2, file$w, 91, 6, 1700);
+    			attr_dev(three, "class", "svelte-15ytpc8");
+    			add_location(three, file$w, 89, 6, 1658);
+    			attr_dev(overlay, "class", "svelte-15ytpc8");
+    			add_location(overlay, file$w, 77, 4, 1297);
+    			attr_dev(icecream, "class", "svelte-15ytpc8");
+    			add_location(icecream, file$w, 72, 2, 1205);
+    			attr_dev(content, "class", "svelte-15ytpc8");
+    			add_location(content, file$w, 69, 0, 1163);
+    		},
+    		l: function claim(nodes) {
+    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
+    		},
+    		m: function mount(target, anchor) {
+    			insert_dev(target, content, anchor);
+    			append_dev(content, h10);
+    			append_dev(content, t1);
+    			append_dev(content, icecream);
+    			append_dev(icecream, background);
+    			append_dev(background, img);
+    			append_dev(icecream, t2);
+    			append_dev(icecream, overlay);
+    			append_dev(overlay, one);
+    			append_dev(one, h11);
+    			append_dev(one, t4);
+    			append_dev(one, p0);
+    			append_dev(overlay, t6);
+    			append_dev(overlay, two);
+    			append_dev(two, h12);
+    			append_dev(two, t8);
+    			append_dev(two, p1);
+    			append_dev(overlay, t10);
+    			append_dev(overlay, three);
+    			append_dev(three, h13);
+    			append_dev(three, t12);
+    			append_dev(three, p2);
+    			insert_dev(target, t14, anchor);
+    			mount_component(codeview, target, anchor);
+    			current = true;
+    		},
+    		p: noop,
+    		i: function intro(local) {
+    			if (current) return;
+    			transition_in(codeview.$$.fragment, local);
+    			current = true;
+    		},
+    		o: function outro(local) {
+    			transition_out(codeview.$$.fragment, local);
+    			current = false;
+    		},
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(content);
+    			if (detaching) detach_dev(t14);
+    			destroy_component(codeview, detaching);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_fragment$x.name,
+    		type: "component",
+    		source: "",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    function instance$x($$self, $$props, $$invalidate) {
+    	let { $$slots: slots = {}, $$scope } = $$props;
+    	validate_slots("GridOverGraphic", slots, []);
+    	const writable_props = [];
+
+    	Object.keys($$props).forEach(key => {
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<GridOverGraphic> was created with unknown prop '${key}'`);
+    	});
+
+    	$$self.$capture_state = () => ({ CodeView });
+    	return [];
+    }
+
+    class GridOverGraphic$1 extends SvelteComponentDev {
+    	constructor(options) {
+    		super(options);
+    		init(this, options, instance$x, create_fragment$x, safe_not_equal, {});
+
+    		dispatch_dev("SvelteRegisterComponent", {
+    			component: this,
+    			tagName: "GridOverGraphic",
+    			options,
+    			id: create_fragment$x.name
+    		});
+    	}
+    }
+
     var routes = {
       "/": Home,
       "/about": About,
@@ -13921,14 +14100,14 @@ var app = (function () {
       "/demos/pinterest": Pinterest$1,
       "/demos/navbar": NavBar$1,
       "/demos/tabs": Tabs$1,
-      "/demos/gridovergraphic": GridOverGraphic,
+      "/demos/gridovergraphic": GridOverGraphic$1,
       "/demos/xoracademy": XorAcademy,
       "/demos/xoracademy/watch": XorAcademyWatch,
       "*": NotFound,
     };
 
     /* src/components/Darkmode.svelte generated by Svelte v3.30.0 */
-    const file$w = "src/components/Darkmode.svelte";
+    const file$x = "src/components/Darkmode.svelte";
 
     // (26:0) {:else}
     function create_else_block$1(ctx) {
@@ -13947,7 +14126,7 @@ var app = (function () {
     		c: function create() {
     			span = element("span");
     			create_component(icon.$$.fragment);
-    			add_location(span, file$w, 26, 2, 578);
+    			add_location(span, file$x, 26, 2, 578);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, span, anchor);
@@ -14005,7 +14184,7 @@ var app = (function () {
     		c: function create() {
     			span = element("span");
     			create_component(icon.$$.fragment);
-    			add_location(span, file$w, 22, 2, 485);
+    			add_location(span, file$x, 22, 2, 485);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, span, anchor);
@@ -14046,7 +14225,7 @@ var app = (function () {
     	return block;
     }
 
-    function create_fragment$x(ctx) {
+    function create_fragment$y(ctx) {
     	let current_block_type_index;
     	let if_block;
     	let if_block_anchor;
@@ -14119,7 +14298,7 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_fragment$x.name,
+    		id: create_fragment$y.name,
     		type: "component",
     		source: "",
     		ctx
@@ -14128,7 +14307,7 @@ var app = (function () {
     	return block;
     }
 
-    function instance$x($$self, $$props, $$invalidate) {
+    function instance$y($$self, $$props, $$invalidate) {
     	let { $$slots: slots = {}, $$scope } = $$props;
     	validate_slots("Darkmode", slots, []);
 
@@ -14179,13 +14358,13 @@ var app = (function () {
     class Darkmode extends SvelteComponentDev {
     	constructor(options) {
     		super(options);
-    		init(this, options, instance$x, create_fragment$x, safe_not_equal, { theme: 0 });
+    		init(this, options, instance$y, create_fragment$y, safe_not_equal, { theme: 0 });
 
     		dispatch_dev("SvelteRegisterComponent", {
     			component: this,
     			tagName: "Darkmode",
     			options,
-    			id: create_fragment$x.name
+    			id: create_fragment$y.name
     		});
     	}
 
@@ -14199,9 +14378,9 @@ var app = (function () {
     }
 
     /* src/App.svelte generated by Svelte v3.30.0 */
-    const file$x = "src/App.svelte";
+    const file$y = "src/App.svelte";
 
-    function create_fragment$y(ctx) {
+    function create_fragment$z(ctx) {
     	let header;
     	let nav0;
     	let a0;
@@ -14300,31 +14479,31 @@ var app = (function () {
     			li4 = element("li");
     			create_component(darkmode.$$.fragment);
     			attr_dev(a0, "href", "/");
-    			add_location(a0, file$x, 28, 4, 423);
+    			add_location(a0, file$y, 28, 4, 423);
     			attr_dev(a1, "href", "/demos");
-    			add_location(a1, file$x, 32, 10, 513);
+    			add_location(a1, file$y, 32, 10, 513);
-    			add_location(li0, file$x, 32, 6, 509);
+    			add_location(li0, file$y, 32, 6, 509);
     			attr_dev(a2, "href", "/about");
-    			add_location(a2, file$x, 33, 10, 564);
+    			add_location(a2, file$y, 33, 10, 564);
-    			add_location(li1, file$x, 33, 6, 560);
+    			add_location(li1, file$y, 33, 6, 560);
-    			add_location(ul0, file$x, 31, 4, 498);
+    			add_location(ul0, file$y, 31, 4, 498);
-    			add_location(nav0, file$x, 27, 2, 413);
+    			add_location(nav0, file$y, 27, 2, 413);
     			attr_dev(header, "class", "svelte-khlxmc");
-    			add_location(header, file$x, 26, 0, 402);
+    			add_location(header, file$y, 26, 0, 402);
     			attr_dev(main, "class", "svelte-khlxmc");
-    			add_location(main, file$x, 38, 0, 635);
+    			add_location(main, file$y, 38, 0, 635);
-    			add_location(hr, file$x, 42, 0, 702);
+    			add_location(hr, file$y, 42, 0, 702);
-    			add_location(p, file$x, 46, 6, 756);
+    			add_location(p, file$y, 46, 6, 756);
     			attr_dev(a3, "href", "/");
-    			add_location(a3, file$x, 45, 4, 728);
+    			add_location(a3, file$y, 45, 4, 728);
-    			add_location(li2, file$x, 49, 6, 811);
+    			add_location(li2, file$y, 49, 6, 811);
-    			add_location(li3, file$x, 50, 6, 860);
+    			add_location(li3, file$y, 50, 6, 860);
-    			add_location(li4, file$x, 51, 6, 911);
+    			add_location(li4, file$y, 51, 6, 911);
-    			add_location(ul1, file$x, 48, 4, 800);
+    			add_location(ul1, file$y, 48, 4, 800);
     			attr_dev(nav1, "class", "svelte-khlxmc");
-    			add_location(nav1, file$x, 44, 2, 718);
+    			add_location(nav1, file$y, 44, 2, 718);
     			attr_dev(footer, "class", "svelte-khlxmc");
-    			add_location(footer, file$x, 43, 0, 707);
+    			add_location(footer, file$y, 43, 0, 707);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -14412,7 +14591,7 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_fragment$y.name,
+    		id: create_fragment$z.name,
     		type: "component",
     		source: "",
     		ctx
@@ -14421,7 +14600,7 @@ var app = (function () {
     	return block;
     }
 
-    function instance$y($$self, $$props, $$invalidate) {
+    function instance$z($$self, $$props, $$invalidate) {
     	let { $$slots: slots = {}, $$scope } = $$props;
     	validate_slots("App", slots, []);
     	const writable_props = [];
@@ -14437,13 +14616,13 @@ var app = (function () {
     class App extends SvelteComponentDev {
     	constructor(options) {
     		super(options);
-    		init(this, options, instance$y, create_fragment$y, safe_not_equal, {});
+    		init(this, options, instance$z, create_fragment$z, safe_not_equal, {});
 
     		dispatch_dev("SvelteRegisterComponent", {
     			component: this,
     			tagName: "App",
     			options,
-    			id: create_fragment$y.name
+    			id: create_fragment$z.name
     		});
     	}
     }

public/code/GridOverGraphic.css

@@ -0,0 +1,56 @@
+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%;
+}

public/code/GridOverGraphic.html

@@ -0,0 +1,23 @@
+<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>

src/demos/GridOverGraphic.svelte

@@ -1,6 +1,5 @@
 <script>
   import CodeView from '../components/CodeView.svelte';
-  import Icon from '../components/Icon.svelte';
 </script>
 
 <style>
@@ -96,4 +95,4 @@
   </icecream>
 </content>
 
-
+<CodeView source="/code/GridOverGraphic" />

src/demos/index.svelte

@@ -10,7 +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 GridOverGraphic from '../thumbs/GridOverGraphic.svelte';
 
   import {push} from 'svelte-spa-router';
   import { holder } from '../../lib/imgholder.js';

src/thumbs/GridOverGraphic.svelte

@@ -0,0 +1,93 @@
+<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";
+  }
+
+  one {
+    grid-area: topright;
+    background-color: var(--color-accent);
+    border-radius: 50% 0 0;
+    font-size: 0.8em;
+    color: #fff;
+    text-align: right;
+  }
+
+  two {
+    grid-area: middle;
+    background-color: var(--color-accent);
+    opacity: 80%;
+    font-size: 0.8em;
+    color: #fff;
+    text-align: center;
+    border-radius: 20% 0 20% 0;
+  }
+
+  three {
+    grid-area: bottomleft;
+    background-color: var(--color-accent);
+    opacity: 90%;
+    font-size: 0.8em;
+    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>
+
+