Update site design

README.md

@@ -1,9 +1,9 @@
-[Feather](https://colebemis.github.io/feather)
+[Feather](https://feather.netlify.com)
 ===
 
 ### Simply beautiful open source icons
 
-Each icon is designed on a 24x24 grid with an emphasis on consistency and simplicity.
+Designed on a 24x24 grid with an emphasis on functionality, consistency and simplicity
 
 Change Log
 ---

_includes/footer.html

@@ -1,7 +1,7 @@
-<footer class="flex flex-column items-center pb5 pt5-l">
+<footer class="flex flex-column items-center pv5">
   <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">
+    <li class="mh3-l pv3 pv0-l f5 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 %}
@@ -10,9 +10,4 @@
   <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">
-    <span class="mh1">v{{ site.data.package.version }}</span>
-    -
-    <span class="mh1">{{ site.static_files | where_exp:"file", "file.path contains 'icons'" | size}} icons</span>
-  </p>
 </footer>

_includes/header.html

@@ -1,21 +1,23 @@
-<header class="flex flex-column items-center w-80 mw8 pt5 pt6-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>
+<header class="bb b--black-10 pv3">
+  <div class="w-80 mw8 center flex justify-between items-center">
+    <h1 class="mv0 normal f3 lh-copy black-90">Feather <span class="f5 black-60">v{{ site.data.package.version }}</span></h1>
 
-    <div class="flex flex-column flex-row-ns items-stretch justify-center w-100">
-      <a
-        class="btn mb3 mb0-ns mr3-ns white bg-accent br3 dim"
-        href="feather-{{ site.data.package.version }}.zip"
-        download
-        onclick="ga('send', 'event', 'download', 'click', 'all');">
-        Download
-      </a>
-      <a
-        class="btn btn-outline accent 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>
+    <ul class="list mv0 pl0 flex dn">
+      <li class="dn dib-ns"><a class="no-underline color-inherit dim" href="https://twitter.com/intent/tweet?text=Feather%20-%20Simply%20beautiful%20open%20source%20icons%20by%20%40colebemis%20feather.netlify.com" target="_blank">Tweet</a></li>
+      <li class="dn dib-ns ml4"><a class="no-underline color-inherit dim" 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="ml4"><a class="no-underline color-inherit dim" href="https://github.com/colebemis/feather" target="_blank">GitHub</a></li>
+    </ul>
+  </div>
 </header>
+
+<div class="flex flex-column items-center w-80 mw8 pt5 pt6-ns center">
+  <h2 class="mt0 mb4 f2 fw3 tc lh-title black-90">Simply beautiful open source icons</h2>
+
+  <a
+    class="btn white bg-accent br3 dim"
+    href="feather-{{ site.data.package.version }}.zip"
+    download
+    onclick="ga('send', 'event', 'download', 'click', 'all');">
+    Download
+  </a>
+</div>

_includes/request.html

@@ -1,4 +0,0 @@
-<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 accent br3 dim" href="https://github.com/colebemis/feather/issues/new" target="_blank">Request an icon</a>
-</div>

index.html

@@ -38,7 +38,6 @@ links:
     {% include icons.html %}
   </div>
 
-  {% include request.html %}
   {% include footer.html links=page.links %}
 
   </script>

style.css

@@ -22,11 +22,9 @@
 .btn {
   display: inline-block;
   padding: 1rem 2rem;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  text-transform: uppercase;
+  font-size: 1rem;
+  line-height: 1.25;
   text-align: center;
-  letter-spacing: 1px;
   text-decoration: none;
 }