You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
135 lines
3.0 KiB
135 lines
3.0 KiB
<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 '../thumbs/GridOverGraphic.svelte';
|
|
import Calendar from '../thumbs/Calendar.svelte';
|
|
import Carousel from '../thumbs/Carousel.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>
|
|
|
|
<figure on:click={ () => push('/demos/calendar') }>
|
|
<Calendar />
|
|
<figcaption>Calendar</figcaption>
|
|
</figure>
|
|
|
|
<figure on:click={ () => push('/demos/carousel') }>
|
|
<Carousel />
|
|
<figcaption>Carousel</figcaption>
|
|
</figure>
|
|
|
|
</images>
|
|
|
|
|
|
|