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

master
Zed A. Shaw 2 years ago
parent 3abcc20886
commit c31e280bb8
  1. 4
      public/build/bundle.css
  2. 353
      public/build/bundle.js
  3. 2
      public/build/bundle.js.map
  4. 56
      public/code/GridOverGraphic.css
  5. 23
      public/code/GridOverGraphic.html
  6. 3
      src/demos/GridOverGraphic.svelte
  7. 2
      src/demos/index.svelte
  8. 93
      src/thumbs/GridOverGraphic.svelte

File diff suppressed because one or more lines are too long

@ -7282,8 +7282,9 @@ var app = (function () {
}
}
/* src/demos/GridOverGraphic.svelte generated by Svelte v3.30.0 */
const file$e = "src/demos/GridOverGraphic.svelte";
/* src/thumbs/GridOverGraphic.svelte generated by Svelte v3.30.0 */
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");
add_location(img, file$e, 75, 4, 1285);
attr_dev(background, "class", "svelte-15ytpc8");
add_location(background, file$e, 74, 4, 1268);
add_location(h11, file$e, 80, 8, 1375);
add_location(p0, file$e, 81, 8, 1414);
attr_dev(one, "class", "svelte-15ytpc8");
add_location(one, file$e, 79, 6, 1361);
add_location(h12, file$e, 86, 6, 1527);
add_location(p1, file$e, 87, 6, 1557);
attr_dev(two, "class", "svelte-15ytpc8");
add_location(two, file$e, 85, 6, 1515);
add_location(h13, file$e, 91, 6, 1720);
add_location(p2, file$e, 92, 6, 1748);
attr_dev(three, "class", "svelte-15ytpc8");
add_location(three, file$e, 90, 6, 1706);
attr_dev(overlay, "class", "svelte-15ytpc8");
add_location(overlay, file$e, 78, 4, 1345);
attr_dev(icecream, "class", "svelte-15ytpc8");
add_location(icecream, file$e, 73, 2, 1253);
attr_dev(content, "class", "svelte-15ytpc8");
add_location(content, file$e, 70, 0, 1211);
attr_dev(img, "class", "svelte-1n9y415");
add_location(img, file$e, 69, 4, 1146);
attr_dev(background, "class", "svelte-1n9y415");
add_location(background, file$e, 68, 4, 1129);
add_location(h11, file$e, 74, 8, 1236);
add_location(p0, file$e, 75, 8, 1275);
attr_dev(one, "class", "svelte-1n9y415");
add_location(one, file$e, 73, 6, 1222);
add_location(h12, file$e, 80, 6, 1388);
add_location(p1, file$e, 81, 6, 1418);
attr_dev(two, "class", "svelte-1n9y415");
add_location(two, file$e, 79, 6, 1376);
add_location(h13, file$e, 85, 6, 1581);
add_location(p2, file$e, 86, 6, 1609);
attr_dev(three, "class", "svelte-1n9y415");
add_location(three, file$e, 84, 6, 1567);
attr_dev(overlay, "class", "svelte-1n9y415");
add_location(overlay, file$e, 72, 4, 1206);
attr_dev(icecream, "class", "svelte-1n9y415");
add_location(icecream, file$e, 67, 2, 1114);
attr_dev(content, "class", "svelte-1n9y415");
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(hr, file$f, 84, 0, 1973);
add_location(h11, file$f, 85, 0, 1978);
add_location(images0, file$f, 56, 0, 1386);
add_location(hr, file$f, 84, 0, 1974);
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(li0, file$x, 32, 6, 509);
add_location(a1, file$y, 32, 10, 513);
add_location(li0, file$y, 32, 6, 509);
attr_dev(a2, "href", "/about");
add_location(a2, file$x, 33, 10, 564);
add_location(li1, file$x, 33, 6, 560);
add_location(ul0, file$x, 31, 4, 498);
add_location(nav0, file$x, 27, 2, 413);
add_location(a2, file$y, 33, 10, 564);
add_location(li1, file$y, 33, 6, 560);
add_location(ul0, file$y, 31, 4, 498);
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(hr, file$x, 42, 0, 702);
add_location(p, file$x, 46, 6, 756);
add_location(main, file$y, 38, 0, 635);
add_location(hr, file$y, 42, 0, 702);
add_location(p, file$y, 46, 6, 756);
attr_dev(a3, "href", "/");
add_location(a3, file$x, 45, 4, 728);
add_location(li2, file$x, 49, 6, 811);
add_location(li3, file$x, 50, 6, 860);
add_location(li4, file$x, 51, 6, 911);
add_location(ul1, file$x, 48, 4, 800);
add_location(a3, file$y, 45, 4, 728);
add_location(li2, file$y, 49, 6, 811);
add_location(li3, file$y, 50, 6, 860);
add_location(li4, file$y, 51, 6, 911);
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
});
}
}

File diff suppressed because one or more lines are too long

@ -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%;
}

@ -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>

@ -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" />

@ -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';

@ -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>
Loading…
Cancel
Save