Browse Source

Get the graphics on a grid thing working.

master
Zed A. Shaw 2 years ago
parent
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

BIN
images/ice_cream_graphic.afdesign

Binary file not shown.

4
public/build/bundle.css

File diff suppressed because one or more lines are too long

1262
public/build/bundle.js

File diff suppressed because it is too large

2
public/build/bundle.js.map

File diff suppressed because one or more lines are too long

25
public/ice_cream_graphic.svg

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 14 KiB

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

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

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

Loading…
Cancel
Save