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/App.svelte

55 lines
1.0 KiB

<script>
import Router from 'svelte-spa-router';
import routes from './routes';
import { link } from 'svelte-spa-router';
import Icon from './components/Icon.svelte';
import Darkmode from './components/Darkmode.svelte';
</script>
<style>
header {
}
main {
}
footer {
display: flex;
flex: flex-grow;
flex-direction: row;
}
footer nav {
flex: 1;
}
</style>
<header>
<nav>
<a href="/" use:link>
<Icon name="trash-2" size="64" />
</a>
<ul>
<li><a href="/demos" use:link>Demos</a></li>
<li><a href="/faq" use:link>FAQ</a></li>
</ul>
</nav>
</header>
<main>
<Router {routes } restoreScrollState={true} />
</main>
<hr>
<footer>
<nav>
<a href="/" use:link>
<p>Copyright (C) Zed A. Shaw. All rights reserved.</p>
</a>
<ul>
<li><a href="https://twitter.com/lzsthw"><Icon name="twitter" size="32" /></a></li>
<li><a href="https://instagram.com/zedshaw"><Icon name="instagram" size="32" /></li>
<li><Darkmode /></li>
</ul>
</nav>
</footer>