index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Twipster</title>
  <meta name="author" content="Jxnblk">
  <meta name="description" content="Safari & Chrome extension for a simpler, more readable Twitter experience.">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="site/icon128.png" />
  <link rel="apple-touch-icon-precomposed" href="site/icon128.png" />
  <link rel="stylesheet" href="site/style.css" />
</head>
<body class="responsive dark-blue bg-light-gray">

  <header class="table p2 bg-blue">
    <div class="table-cell">
      <img src="site/twipster.svg" class="h2 square2 mr1" alt="Twipster" />
    </div>
    <div class="table-cell full-width">
      <h1 class="h1 white">Twipster</h1>
      <p class="h2 bold">Simpler, Readabler Twitter</p>
    </div>
  </header>

  <main class="p2">

    <section id="screenshot" class="clearfix bg-white rounded">
      <div class="bg-dark-gray py1"></div>
      <div class="georgia p2 dark-gray" style="max-width:640px;margin-right:auto;margin-left:auto;">

        <div class="clearfix mb2">
          <img src="site/twipster.svg" class="left mr1 bg-blue rounded" style="width: 40px; height: 40px; padding: 4px;" />
          <div class="clearfix">
            <div class="helvetica small mid-gray" style="line-height:1"><span class="bold">Horse Twipster</span> @horse_twipster</div>
            <p class="" style="font-size: 20px">Ah yes. I can actually read the tweets now.</p>
          </div>
        </div>

        <div class="clearfix mb2">
          <img src="site/twipster.svg" class="left mr1 bg-blue rounded" style="width: 40px; height: 40px; padding: 4px;" />
          <div class="clearfix">
            <div class="helvetica small mid-gray" style="line-height:1"><span class="bold">Horse Twipster</span> @horse_twipster</div>
            <p class="" style="font-size: 20px">This is quite nice actually.</p>
          </div>
        </div>

        <div class="clearfix">
          <img src="site/twipster.svg" class="left mr1 bg-blue rounded" style="width: 40px; height: 40px; padding: 4px;" />
          <div class="clearfix">
            <div class="helvetica small mid-gray" style="line-height:1"><span class="bold">Horse Twipster</span> @horse_twipster</div>
            <p class="" style="font-size: 20px">No ads. No images. Just glorious text.</p>
          </div>
        </div>

      </div>
    </section>

    <section id="features" class="py2">
      <h1 class="h1 mb2">Less is more, more or less</h1>
      <div class="tiles">
        <div class="tile">
          <h2 class="h2">Less Chrome</h2>
          <p class="mb2">This isn't your geriatric dad's muscle car</p>
          <h2 class="h2">Less Business</h2>
          <p class="mb2">Ha ha! Business!</p>
          <h2 class="h2">Less Squinting</h2>
          <p class="mb2">No more ⌘ + lolwut?</p>
        </div>
        <div class="tile">
          <h2 class="h2">More Flexible</h2>
          <p class="mb2">Resizing browser windows is fun! Whee!</p>
          <h2 class="h2">More Readable</h2>
          <p class="mb2">Consume all the things!</p>
          <h2 class="h2">More Minimal</h2>
          <p class="mb2">I'm Jackson. Minimal minimal minimal!</p>
        </div>
      </div>
    </section>

    <section id="download" class="py2">
      <h1 class="h1">Install now</h1>
      <p class="p mb1">Twipster is a browser extenstion that alters the styles on twitter.com.</p>
      <a href="#" onclick="chrome.webstore.install()" id="chrome-install-button" class="p btn btn-blue mr1 mb1">Add to Chrome</a>
      <a href="http://jxnblk.com/twipster/Twipster.safariextz" onclick="_gaq.push(['_trackEvent', 'Installs', 'Install', 'Twipster Safari']);" class="p btn btn-blue mb1">Download for Safari</a>
    </section>

  </main>

  <footer class="table p2 white bg-dark-blue">
    <div class="table-cell">
      <img src="http://jxnblk.com/images/Jxnblk-white.svg" width="64px" height="64px" class="left mr2" alt="Jxnblk" />
    </div>
    <div class="table-cell full-width">
      <p class="h2 bold">Made with love by <a href="http://jxnblk.com">Jxnblk</a></p>
      <p class="bold">
        <a href="http://github.com/jxnblk/Twipster">Github Repository</a>
        &middot;
        <a href="https://twitter.com/intent/tweet?text=Simpler%20Readabler%20Twitter.%20%40horse_twipster&amp;url=http%3A%2F%2Fjxnblk.github.io%2FTwipster" class="" target="_blank">Tweet about it
        </a>
      </p>
      
    </div>
  </footer>

</body>
</html>