An experiment in cleaning up CSS by just avoiding dis-features and focusing on flexbox and CSS grids.
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.
 
 
 
fsckcss/src/demos/index.svelte

129 lines
2.8 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 {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>
</images>