From 706e0ebd45fc4e62409cf9b1bdda7579a904e485 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@gmail.com>
Date: Mon, 29 May 2017 17:05:49 -0700
Subject: [PATCH] Redesign project site

---
 _includes/category.html |  4 +--
 _includes/footer.html   |  2 +-
 _includes/header.html   |  6 ++--
 _includes/icon.html     | 24 +++++++---------
 _includes/icons.html    |  3 +-
 index.html              |  9 ++----
 style.css               | 62 ++++++++++++-----------------------------
 7 files changed, 39 insertions(+), 71 deletions(-)

diff --git a/_includes/category.html b/_includes/category.html
index bc33b96..d76df2e 100644
--- a/_includes/category.html
+++ b/_includes/category.html
@@ -1,6 +1,6 @@
 <div class="pv4">
-    <h2 class="mt0 mb3 tc f6 ttu tracked normal">{{ include.category | replace: '-', ' '}}</h2>
-    <ul class="flex flex-wrap justify-center mv0 pl0 list">
+    <h2 class="mt0 mb4 f6 ttu tracked normal">{{ include.category | replace: '-', ' '}}</h2>
+    <ul class="icon-grid mv0 pl0 list">
       {% capture category_path %}icons/{{ include.category }}{% endcapture %}
       {% for icon in site.static_files %}
         {% if icon.path contains category_path  %}
diff --git a/_includes/footer.html b/_includes/footer.html
index baf8b96..337a0d4 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,4 +1,4 @@
-<footer class="flex flex-column items-center pv5">
+<footer class="flex flex-column items-center pt5-ns pb5">
   <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 f5 bb b--black-10 bn-l">
diff --git a/_includes/header.html b/_includes/header.html
index 2737935..d60bef5 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,5 +1,5 @@
-<header class="bb b--black-10 pv3">
-  <div class="w-80 mw8 center flex justify-between items-center">
+<header class="pv3 bb b--black-10">
+  <div class="w-80 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>
 
     <ul class="list mv0 pl0 flex dn">
@@ -14,7 +14,7 @@
   <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"
+    class="button white bg-accent br2"
     href="feather-{{ site.data.package.version }}.zip"
     download
     onclick="ga('send', 'event', 'download', 'click', 'all');">
diff --git a/_includes/icon.html b/_includes/icon.html
index cb541a2..2fc7353 100644
--- a/_includes/icon.html
+++ b/_includes/icon.html
@@ -1,14 +1,10 @@
-<li class="icon relative pa3 ma2 black-90 bg-animate br3 outline-0 pointer">
-    {% include_relative {{ include.icon.path }} %}
-    <div class="tooltip flex flex-column tc white bg-dark-gray br3">
-      <p class="dib mh4 mv3 lh-copy nowrap">{{ include.icon.basename }}</p>
-      <a
-        class="btn white bg-black-90 dim br3 br--bottom outline-0"
-        href="{{ include.icon.path }}"
-        download
-        tabindex="-1"
-        onclick="ga('send', 'event', 'download', 'click', '{{ include.icon.basename }}');">
-        Download
-      </a>
-    </div>
-  </li>
+<li>
+  <a
+    href="{{ include.icon.path }}"
+    class="flex flex-row items-center dib pa3 br2 no-underline dark-gray bg-near-white bg-animate hover-bg-light-gray"
+    download
+    onclick="ga('send', 'event', 'download', 'click', '{{ include.icon.basename }}');">
+    <span class="svg flex-none lh-none">{% include_relative {{ include.icon.path }} %}</span>
+    <span class="ml3 lh-copy f6 tc black-60 ellipse">{{ include.icon.basename }}</span>
+  </a>
+</li>
diff --git a/_includes/icons.html b/_includes/icons.html
index 1253c1b..1df1f7d 100644
--- a/_includes/icons.html
+++ b/_includes/icons.html
@@ -1,4 +1,4 @@
-<div class="w-80 center mw8 pv5">
+<div class="w-80 center pv5">
   {% include category.html category="core" %}
   {% include category.html category="media-controls" %}
   {% include category.html category="communication" %}
@@ -6,4 +6,5 @@
   {% include category.html category="location" %}
   {% include category.html category="weather" %}
   {% include category.html category="arrows" %}
+  {% include category.html category="logos" %}
 </div>
diff --git a/index.html b/index.html
index b992c59..76a4db3 100644
--- a/index.html
+++ b/index.html
@@ -31,13 +31,10 @@ links:
   <link href="https://unpkg.com/tachyons/css/tachyons.min.css" rel="stylesheet">
   <link href="style.css" rel="stylesheet">
 </head>
-<body class="ma0 rubik font-smoothing black-60 bg-near-white">
-
-  <div class="bg-white">
-    {% include header.html %}
-    {% include icons.html %}
-  </div>
+<body class="ma0 rubik font-smoothing black-60 bg-white">
 
+  {% include header.html %}
+  {% include icons.html %}
   {% include footer.html links=page.links %}
 
   </script>
diff --git a/style.css b/style.css
index 24acbf8..4302dd6 100644
--- a/style.css
+++ b/style.css
@@ -19,7 +19,7 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.btn {
+.button {
   display: inline-block;
   padding: 1rem 2rem;
   font-size: 1rem;
@@ -28,56 +28,30 @@
   text-decoration: none;
 }
 
-.btn-outline {
+.button-outline {
   box-shadow: inset 0 0 0 1px currentColor;
 }
 
-.icon {
-  width: 1.5rem;
-  height: 1.5rem;
-  box-sizing: content-box;
+.lh-none {
+  line-height: 0;
 }
 
-.icon [stroke] {
+.ellipse {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.icon-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+  grid-gap: 1rem;
+}
+
+.svg [stroke] {
   stroke: currentColor;
 }
 
-.icon [fill]:not([fill=none]) {
+.svg [fill]:not([fill=none]) {
   fill: 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