Merge pull request #2 from colebemis/tachyons

Redesign Project Page

_includes/footer.html

-<footer class="section footer">
-  <div class="container footer-container">
-    <div class="footer-main">
-    <ul class="footer-links">
-      <li class="footer-link"><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=G6CPFZ6PQRZW8&lc=US&item_name=Feather&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted" target="_blank">Donate</a></li>
-      <li class="footer-link"><a href="https://github.com/colebemis/feather" target="_blank">GitHub</a></li>
-      <li class="footer-link"><a href="https://github.com/colebemis/feather/blob/gh-pages/CHANGELOG.md" target="_blank">Change Log</a></li>
-      <li class="footer-link"><a href="https://github.com/colebemis/feather/blob/gh-pages/LICENSE" target="_blank">License</a></li>
-      <li class="footer-link"><a href="mailto:cole@colebemis.com" target="_blank">Contact</a></li>
+<footer class="flex flex-column items-center pv5 bt b--black-10">
+  <ul class="flex flex-column flex-row-l justify-center w-80 mv0 pl0 list">
+    {% for link in include.links %}
+    <li class="mh3-l pv3 pv0-l f6 ttu tracked bb b--black-10 bn-l">
+      <a class="lh-copy color-inherit no-underline dim" href="{{ link.url }}" target="_blank">{{ link.title }}</a>
+    </li>
+    {% endfor %}
   </ul>
-    <p class="made-with-love"><a href="http://colebemis.com" target="_blank">Made with &lt;3 by Cole Bemis</a></p>
-    </div>
-    <p class="version">v{{ site.data.package.version }} - {{ site.data['icons-manifest'] | size }} icons</p>
-  </div>
+
+  <p class="mt5 mb2 lh-copy black-90 dim">
+    <a class="no-underline color-inherit" href="http://colebemis.com" target="_blank">Made with &lt;3 by Cole Bemis</a>
+   </p>
+  <p class="mv0 f6 lh-copy">v{{ site.data.package.version }}</p>
 </footer>
\ No newline at end of file

_includes/header.html

-<header class="section header">
-  <div class="container header-container">
-    <div>
-      <h1 class="title">Feather</h1>
-      <p class="description">Simply beautiful open source icons</p>
-    </div>
-    <div class="header-button-group">
+<header class="flex flex-column items-center w-80 mw8 pv5 pv6-ns center">
+    <h1 class="mt0 mb2 f2 fw3 tc lh-title black-90">Feather</h1>
+    <p class="mt0 mb5 mb4-ns f5 tc lh-copy">Simply beautiful open source icons</p>
+
+    <div class="flex flex-column flex-row-ns items-stretch justify-center w-100">
       <a
-        class="button button-primary"
+        class="btn mb3 mb0-ns mr3-ns white bg-black-90 br3 dim"
         href="feather-{{ site.data.package.version }}.zip"
         download
         onclick="ga('send', 'event', 'download', 'click', 'all');">
         Download
       </a>
       <a
-        class="button button-secondary"
+        class="btn btn-outline black-90 br3 dim"
         href="https://twitter.com/intent/tweet?text=Feather%20-%20Simply%20beautiful%20open%20source%20icons%20by%20%40colebemis%20colebemis.github.io/feather"
         target="_blank"
         onclick="ga('send', 'event', 'share', 'click', 'twitter');">
         Tweet
       </a>
     </div>
-  </div>
 </header>

_includes/icons.html

-<section class="section icons">
-  <div class="container icons-container">
+<ul class="flex flex-wrap justify-center w-80 w-80-ns center mw8 mv0 pl0 list">
   {% for icon in site.data['icons-manifest'] %}
   {% capture icon_path %}icons/{{ icon }}.svg{% endcapture %}
-      <div class="feather-icon" tabindex="0">
+  <li class="icon relative pa3 ma2 black-90 bg-animate br3 outline-0 pointer">
     {% include_relative {{ icon_path }} %}
-        <div class="tooltip">
-          <p class="tooltip-icon-name">{{ icon }}</p>
+    <div class="tooltip flex flex-column tc white bg-dark-gray br3">
+      <p class="dib mh4 mv3 lh-copy nowrap">{{ icon }}</p>
       <a
-            class="tooltip-download"
+        class="btn white bg-black-90 dim br3 br--bottom outline-0"
         href="{{ icon_path }}"
         download
         tabindex="-1"
@@ -15,7 +14,6 @@
         Download
       </a>
     </div>
-      </div>
+  </li>
   {% endfor %}
-  </div>
-</section>
\ No newline at end of file
+</ul>
\ No newline at end of file

_includes/request.html

-<section class="section request">
-  <div class="container request-container">
-    <h2 class="request-heading">Don't see the icon you need?</h2>
-    <a class="button button-secondary" href="https://github.com/colebemis/feather/issues/new" target="_blank">Request an icon</a>
-  </div>
-</section>
\ No newline at end of file
+<div class="flex flex-column items-center pv5">
+  <h2 class="mt0 mb4 f4 lh-copy normal tc black-90">Don't see the icon you need?</h2>
+  <a class="btn btn-outline black-90 br3 dim" href="https://github.com/colebemis/feather/issues/new" target="_blank">Request an icon</a>
+</div>
\ No newline at end of file

assets/tooltip-arrow.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="36" height="20" viewBox="0 0 36 20">
-  <title>tooltip-arrow</title>
-  <path d="M20.12,2.12,31.24,13.24A6,6,0,0,0,35.49,15H36v5H0V15H.51a6,6,0,0,0,4.24-1.76L15.88,2.12A3,3,0,0,1,20.12,2.12Z" fill="#424242"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="24" viewBox="0 0 40 24" fill="#333333">
+	<path d="M0,15.9l0.6,0c2.2,0,4.3-0.8,5.8-2.3L17.2,2.8c1.6-1.6,4.1-1.6,5.7,0l10.8,10.8c1.5,1.5,3.5,2.3,5.7,2.3H40v8H0 V15.9z"/>
 </svg>

index.html

 ---
 title: Feather
 description: Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on consistency and simplicity.
+links:
+- title: Donate
+  url: ttps://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=G6CPFZ6PQRZW8&lc=US&item_name=Feather&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted
+- title: GitHub
+  url: https://github.com/colebemis/feather
+- title: Change Log
+  url: https://github.com/colebemis/feather/blob/gh-pages/CHANGELOG.md
+- title: License
+  url: https://github.com/colebemis/feather/blob/gh-pages/LICENSE
+- title: Contact
+  url: mailto:cole@colebemis.com
 ---
 <!DOCTYPE html>
 <html lang="en">
@@ -17,16 +28,23 @@ description: Feather is a collection of simply beautiful open source icons. Each
   <link rel="shortcut icon" type="image/png" href="assets/favicon.png">
 
   <link href="https://fonts.googleapis.com/css?family=Rubik:300,400" rel="stylesheet">
-  <link rel="stylesheet" href="style.css">
+  <link href="https://unpkg.com/tachyons/css/tachyons.min.css" rel="stylesheet">
+  <link href="style.css" rel="stylesheet">
 
   {% if site.google_analytics and jekyll.environment == 'production' %}
   {% include analytics.html %}
   {% endif %}
 </head>
-<body>
+<body class="ma0 rubik font-smoothing black-60 bg-near-white">
+
+  <div class="pb5 pb6-ns bg-white">
     {% include header.html %}
     {% include icons.html %}
+  </div>
+
   {% include request.html %}
-  {% include footer.html %}
+  {% include footer.html links=page.links %}
+
+  </script>
 </body>
 </html>

style.css

+.rubik {
+  font-family: "Rubik", sans-serif;
+}
+
+.font-smoothing {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.btn {
+  display: inline-block;
+  padding: 1rem 2rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  text-transform: uppercase;
+  text-align: center;
+  letter-spacing: 1px;
+  text-decoration: none;
+}
+
+.btn-outline {
+  box-shadow: inset 0 0 0 1px currentColor;
+}
+
+.icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  box-sizing: content-box;
+}
+
+.icon svg {
+  stroke: currentColor;
+}
+
+.tooltip {
+  position: absolute;
+  top: calc(100% + 1rem);
+  left: 50%;
+  transform: translateX(-50%) scale(0.75);
+  transform-origin: 50% -1rem;
+  opacity: 0;
+  visibility: hidden;
+  cursor: default;
+  z-index: 1;
+  transition-property: opacity, visibility, transform;
+  transition-duration: 0.15s;
+  transition-timing-function: ease-in-out;
+}
+
+/* tooltip arrow */
+.tooltip::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -1rem);
+  display: block;
+  width: 2.5rem;
+  height: 1.5rem;
+  background-image: url("assets/tooltip-arrow.svg");
+  background-size: 100%;
+}
+
+.icon:hover .tooltip {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(-50%) scale(1);
+  transition-delay: 0.15s;
+}
\ No newline at end of file

style.scss

----
----
-
-/* Variables */
-
-$color-primary: #000;
-$color-text-primary: rgba($color-primary, 0.9);
-$color-text-secondary: rgba($color-primary, 0.5);
-$color-border: rgba($color-primary, 0.1);
-$color-accent: #0090FF;
-$color-accent-lighter: rgba($color-accent, 0.5);
-$color-accent-darker: #0086EC;
-
-$transition-duration: 200ms;
-$border-radius: 0.375rem;
-
-/* Mixins */
-
-@mixin for-tablet-portrait-up {
-  @media (min-width: 640px) {
-    @content;
-  }
-}
-
-@mixin for-tablet-landscape-up {
-  @media (min-width: 900px) {
-    @content;
-   }
-}
-
-/* General */
-
-html {
-  box-sizing: border-box;
-}
-
-*, *:before, *:after {
-  box-sizing: inherit;
-}
-
-body {
-  margin: 0;
-  font-family: "Rubik", sans-serif;
-  line-height: 1.3;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: $color-text-primary;
-}
-
-a {
-  text-decoration: none;
-  color: currentColor;
-}
-
-.section {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 4rem 0;
-}
-
-.container {
-  width: 85%;
-  max-width: 64rem;
-}
-
-.button {
-  display: inline-block;
-  padding: 1rem 1.5rem;
-  border-radius: $border-radius;
-  font-size: 0.875rem;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  transition:
-    color $transition-duration,
-    background-color $transition-duration,
-    box-shadow $transition-duration;
-}
-
-.button-primary {
-  color: white;
-  background-color: $color-accent;
-
-  &:hover {
-    background-color: $color-accent-darker;
-  }
-}
-
-.button-secondary {
-  color: $color-accent;
-  box-shadow: inset 0 0 0 1px $color-accent-lighter;
-
-  &:hover {
-    box-shadow: inset 0 0 0 1px $color-accent;
-  }
-}
-
-/* Header */
-
-.header {
-  text-align: center;
-
-  @include for-tablet-portrait-up {
-    text-align: left;
-  }
-}
-
-.header-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-
-  @include for-tablet-portrait-up {
-    flex-direction: row;
-    align-items: center;
-  }
-}
-
-.title {
-  margin: 0 0 0.5rem;
-  font-size: 2rem;
-  font-weight: 300;
-}
-
-.description {
-  margin: 0;
-  color: $color-text-secondary;
-}
-
-.header-button-group {
-  display: flex;
-  flex-direction: column;
-  margin-top: 4rem;
-
-  @include for-tablet-portrait-up {
-    flex-direction: row-reverse;
-    margin-top: 0;
-
-    .button {
-      margin-left: 1rem;
-    }
-  }
-
-  .button + .button {
-    margin-top: 1rem;
-
-    @include for-tablet-portrait-up {
-      margin-top: 0;
-    }
-  }
-}
-
-/* Icons */
-
-.icons {
-  padding: 3rem 0;
-  background: #f5f5f5;
-}
-
-.icons-container {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-.feather-icon {
-  display: inline-block;
-  position: relative;
-  box-sizing: content-box;
-  width: 1.5rem;
-  height: 1.5rem;
-  margin: 0.25rem;
-  padding: 0.75rem;
-  stroke-width: 2px;
-  border-radius: $border-radius;
-  outline: none;
-  cursor: pointer;
-  transition: background-color $transition-duration;
-
-  @include for-tablet-portrait-up {
-    margin: 0.5rem;
-  }
-
-  > svg {
-    width: 100%;
-    height: 100%;
-    stroke: currentColor;
-    stroke-width: inherit;
-  }
-
-  &:hover,
-  &:focus {
-    background: $color-border;
-  }
-}
-
-.tooltip {
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  top: calc(100% + 20px);
-  left: 50%;
-  min-width: 8rem;
-  transform: translateX(-50%) scale(0.75);
-  transform-origin: 50% 0;
-  color: #fff;
-  background-color: #424242;
-  text-align: center;
-  border-radius: 0.375rem;
-  opacity: 0;
-  visibility: hidden;
-  z-index: 10;
-  cursor: default;
-  transition-property: transform, opacity, visibility;
-  transition-duration: $transition-duration;
-
-  @include for-tablet-portrait-up {
-    min-width: 12rem;
-  }
-
-  .feather-icon:focus & {
-    transform: translateX(-50%) scale(1);
-    opacity: 1;
-    visibility: visible;
-  }
-}
-
-.tooltip::before {
-  content: "";
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translate(-50%, -15px);
-  width: 36px;
-  height: 20px;
-  background-image: url("assets/tooltip-arrow.svg");
-  background-size: 100%;
-}
-
-.tooltip-icon-name {
-  display: inline-block;
-  margin: 0;
-  padding: 1rem 1.5rem;
-}
-
-.tooltip-download {
-  display: inline-block;
-  padding: 1rem 1.5rem;
-  background-color: #212121;
-  border-radius: 0 0 0.375rem 0.375rem;
-  font-size: 0.875rem;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  transition: background-color $transition-duration;
-
-  &:hover {
-    background-color: #000;
-  }
-}
-
-/* Request */
-
-.request-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.request-heading {
-  margin: 0 0 1.5rem;
-  font-size: 1.25rem;
-  font-weight: 400;
-  text-align: center;
-}
-
-/* Footer */
-
-.footer {
-  padding: 1rem 0;
-  border-top: 1px solid $color-border;
-
-  @include for-tablet-landscape-up {
-    padding: 4rem 0;
-  }
-}
-
-.footer a {
-  transition: color $transition-duration;
-
-  &:hover {
-    color: $color-accent;
-  }
-}
-
-.footer-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.footer-main {
-  display: flex;
-  flex-direction: column;
-
-  @include for-tablet-landscape-up {
-    flex-direction: row-reverse;
-    justify-content: space-between;
-    margin-bottom: 1rem;
-  }
-}
-
-.footer-links {
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  color: $color-text-secondary;
-
-  @include for-tablet-landscape-up {
-    flex-direction: row;
-  }
-}
-
-.footer-link {
-  border-bottom: 1px solid $color-border;
-  font-size: 0.875rem;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-
-  @include for-tablet-landscape-up {
-    border-bottom: none;
-    margin-left: 2rem;
-  }
-
-  a {
-    display: inline-block;
-    width: 100%;
-    padding: 1rem 0;
-
-    @include for-tablet-landscape-up {
-      padding: 0;
-    }
-  }
-}
-
-.made-with-love {
-  margin: 2rem 0 1rem;
-  text-align: center;
-
-  @include for-tablet-landscape-up {
-    margin: 0;
-  }
-}
-
-.version {
-  margin: 0 0 1rem;
-  font-size: 0.875rem;
-  text-align: center;
-  color: $color-text-secondary;
-
-  @include for-tablet-landscape-up {
-    align-self: flex-start;
-    margin: 0;
-  }
-}