<script>
  import Google from '../thumbs/Google.svelte';
  import Twitter from '../thumbs/Twitter.svelte';
  import Youtube from '../thumbs/Youtube.svelte';
  import Instagram from '../thumbs/Instagram.svelte';
  import Pinterest from '../thumbs/Pinterest.svelte';
  import Login from '../thumbs/Login.svelte';
  import Tiles from '../thumbs/Tiles.svelte';
  import Cards from '../thumbs/Cards.svelte';
  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';
</script>


<style>
  images {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  :global(figure:hover content) {
    filter: grayscale(1) blur(6px);
    background-color: var(--color-bg-secondary);
    cursor: pointer;
  }

  figure {
    padding: 0.5em;
    position: sticky;
  }

  figure figcaption {
    display: none;
    color: var(--color-text);
    font-size: 6em;
    filter: drop-shadow(10px 5px 5px var(--color-shadow-secondary));
    font-weight: bold;
  }

  figure:hover figcaption {
    display: flex;
    padding-top: 2em;
    width: 100%;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
  }
</style>
<h1>Full Websites</h1>

<images>

<figure on:click={ () => push('/demos/google') }>
    <Google />
  <figcaption>Google</figcaption>
</figure>

<figure on:click={ () => push('/demos/twitter') }>
  <Twitter />
  <figcaption>Twitter</figcaption>
</figure>

<figure on:click={ () => push('/demos/youtube') }>
  <Youtube />
  <figcaption>Youtube</figcaption>
</figure>

<figure on:click={ () => push('/demos/instagram') }>
  <Instagram />
  <figcaption>Instagram</figcaption>
</figure> 

<figure on:click={ () => push('/demos/pinterest') }>
  <Pinterest />
  <figcaption>Pinterest</figcaption>
</figure> 
</images>

<hr>
<h1>Common UI Patterns</h1>

<images>

<figure on:click={ () => push('/demos/login') }>
  <Login />
  <figcaption>Basic Login</figcaption>
</figure>


<figure on:click={ () => push('/demos/tiles') }>
  <Tiles />
  <figcaption>Tiles</figcaption>
</figure>

<figure on:click={ () => push('/demos/cards') }>
  <Cards />
  <figcaption>Cards</figcaption>
</figure>

<figure on:click={ () => push('/demos/panels') }>
  <Panels />
  <figcaption>Panels</figcaption>
</figure>

<figure on:click={ () => push('/demos/tabs') }>
  <Tabs />
  <figcaption>Tabs</figcaption>
</figure>

<figure on:click={ () => push('/demos/gridovergraphic') }>
  <GridOverGraphic />
  <figcaption>Grid Over Graphic</figcaption>
</figure>
</images>


