Get the graphics on a grid thing working.

master
Zed A. Shaw 3 years ago
parent 611a3b92f4
commit 3abcc20886
  1. BIN
      images/ice_cream_graphic.afdesign
  2. 4
      public/build/bundle.css
  3. 1262
      public/build/bundle.js
  4. 2
      public/build/bundle.js.map
  5. 25
      public/ice_cream_graphic.svg
  6. 99
      src/demos/GridOverGraphic.svelte
  7. 5
      src/demos/index.svelte
  8. 2
      src/routes.js

Binary file not shown.

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 14 KiB

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

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

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

Loading…
Cancel
Save