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

105 lines
1.7 KiB

<script>
import { link } from 'svelte-spa-router';
import Icon from '../components/Icon.svelte';
import CodeView from '../components/CodeView.svelte';
</script>
<style>
content {
border: 1px solid #ddd;
display: flex;
flex-direction: column;
flex: flex-grow;
flex-basis: 100%;
grid-column: 1/3;
padding: 1rem;
}
header {
display: flex;
flex: flex-grow;
width: 100%;
flex-direction: row;
padding: unset;
}
nav {
flex: 1;
}
figure {
display: flex;
justify-content: center;
margin-top: 4rem;
}
search {
display: flex;
justify-content: center;
flex-direction: column;
margin-top: 2rem;
}
search input {
align-self: center;
width: 50ch;
}
search buttons {
display: flex;
justify-content: space-evenly;
}
button {
padding: 0.5rem;
background-color: #ddd;
border: unset;
color: #000;
font-weight: unset;
}
nav {
font-weight: normal;
}
a {
color: unset;
font-weight: normal;
}
</style>
<content>
<header>
<nav>
<nav-left>
<a>About</a>
<a>Store</a>
</nav-left>
<ul>
<li>Gmail</li>
<li>Image</li>
<li><Icon name="grid" color="#000" /></li>
<li><button>Sign In</button></li>
</ul>
</nav>
</header>
<figure>
<a href="/demos/google" use:link>
<img src="https://via.placeholder.com/500x200?text=Google+Doodle">
</a>
</figure>
<search>
<input type="text">
<buttons>
<button>Google Search</button>
<button>I'm Feeling Lucky</button>
</buttons>
</search>
</content>
<CodeView source="/code/Google.svelte" />