<script>
  import CodeView from '../components/CodeView.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;
    border-radius: 0 0 10% 40%;
    padding: 1rem;
  }

</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 do that with CSS grids.
      </two>
      <three>
      <h1>Bottom Left</h1>
      <p>I don't know why I put that sphere there.</p>
      </three>
    </overlay>
  </icecream>
</content>

<CodeView source="/code/GridOverGraphic" />
