<script>
  import {link} from 'svelte-spa-router';
  import Icon from './components/Icon.svelte';
</script>

<style>
  hero {
    display: block;
    padding: 3rem;
    background-color: var(--color-bg-secondary);
  }

  hero h1 {
    font-size: 3rem;
  }

  aside a {
    --text-decoration: underline;
  }

  rationale {
    display: flex;
    flex-direction: column;
    font-size: 1.5em;
    padding-left: 4rem;
    padding-right: 4rem;
  }

  #demo-link {
    margin-top: 1.5rem;
    padding: 2rem;
    font-size: 2em;
  }
</style>

<hero>
<h1>fsck CSS</h1>
<p>An experiment in cleaning up CSS and HTML with modern tools like <b>flexbox</b> and <b>grids</b>.</p>
</hero>

<hr>

<section>
  <aside>
    <h3>Remove Classes</h3>
    <Icon name="code" size="64" />
    <p>Using a classless style like <a href="https://andybrewer.github.io/mvp/">MVP.css</a>, you
      bring back CSS specificity to its original intent.</p>
  </aside>

  <aside>
    <h3>Add Flexbox + Grids</h3>
    <Icon name="box" size="64" />
    <p>Using <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">flexbox</a> and <a href="https://css-tricks.com/snippets/css/complete-guide-grid/">CSS grids</a> you can layout anything you want without structure divs.</p>
  </aside>

  <aside>
    <h3>Modify with Variables</h3>
    <Icon name="sliders" size="64" />
    <p>Using CSS variables you can replace many uses of classes and ids, avoiding most specificity
      issues. Try the dark mode button below.
    </p>
  </aside>
</section>


<rationale>
<section>
  <h1>Cleaner CSS</h1>
</section>

<p>This website is nothing more than a set of small demos for the idea of
  using flexbox and grids to clean up and simplify CSS. Most everything else
  about CSS stays.  Filters, transforms, attributes, and everything that
  applies to the visual display of the components of a design.  What gets
  removed is <b>div</b> heavy, class heavy, not-semantic-at-all layout
  systems cluttering the real information available through simple HTML
  tags.</p>

<p>In short, if you're writing this:</p>

<section>
  <aside>
    <pre>
&lt;div class="grid col-1"&gt;
  &lt;div class="card"&gt;
  ...
  &lt;/div&gt;
&lt;/div&gt;
    </pre>
  </aside>
</section>

<p>You could write this if you use flexbox, grids, and variables:</p>

<section>
  <aside>
    <pre>
&lt;card&gt;
  ...
&lt;/card&gt;
    </pre>
  </aside>
</section>

<hr>
<section>
  <p>I demonstrate the idea with a series of copies of existing websites and other layout problems 
    people frequently encounter.  If you have a suggested layout challenge for me, then tell me on Twitter <a href="https://twitter.com/lzsthw">@lzsthw</a> and I'll give it a shot.
  </p>
  <a href="/demos" use:link><button id="demo-link">View The Demos</button></a>
</section>

</rationale>
