Seperate header and hero

b0522cf7 · Cole Bemis · 706e0ebd · b0522cf7 · b0522cf7 · b0522cf7
Commit b0522cf7 authored May 29, 2017 by Cole Bemis
Show whitespace changes
Inline Side-by-side

Showing with 17 additions and 21 deletions

header.html _includes/header.html +1 -13

hero.html _includes/hero.html +10 -0

index.html index.html +1 -0

style.css style.css +5 -8

No files found.
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -2,22 +2,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">
+    <ul class="list mv0 pl0 flex">
      <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="button white bg-accent br2"
-    href="feather-{{ site.data.package.version }}.zip"
-    download
-    onclick="ga('send', 'event', 'download', 'click', 'all');">
-    Download
-  </a>
-</div>
--- a/_includes/hero.html
+++ b/_includes/hero.html
+<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="button white bg-accent bg-animate hover-bg-accent-darker br2"
+    href="feather-{{ site.data.package.version }}.zip"
+    download
+    onclick="ga('send', 'event', 'download', 'click', 'all');">
+    Download
+  </a>
+</div>
\ No newline at end of file
--- a/index.html
+++ b/index.html
@@ -34,6 +34,7 @@ links:
 <body class="ma0 rubik font-smoothing black-60 bg-white">

  {% include header.html %}
+  {% include hero.html %}
  {% include icons.html %}
  {% include footer.html links=page.links %}


--- a/style.css
+++ b/style.css
 :root {
  --accent: #4353FF;
-}
-
-.accent {
-  color: var(--accent);
+  --accent-darker: #3E4DED;
 }

 .bg-accent {
  background-color: var(--accent);
 }

+.hover-bg-accent-darker:hover {
+  background-color: var(--accent-darker);
+}
+
 .rubik {
  font-family: "Rubik", sans-serif;
 }
@@ -28,10 +29,6 @@
  text-decoration: none;
 }

-.button-outline {
-  box-shadow: inset 0 0 0 1px currentColor;
-}
-
 .lh-none {
  line-height: 0;
 }