Seperate header and hero

colebemis · colebemis · commit b0522cf7fe37 · 2017-05-29T17:26:25.000-07:00
diff --git 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>
diff --git a/_includes/hero.html b/_includes/hero.html
@@ -0,0 +1,10 @@
+<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>
diff --git a/index.html b/index.html
@@ -34,6 +34,7 @@
 <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 %}
 
diff --git a/style.css b/style.css
@@ -1,15 +1,16 @@
 :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;
 }

Original file line number	Diff line number	Diff line change
`@@ -1,15 +1,16 @@`
`1`	`1`	`:root {`
`2`	`2`	`--accent: #4353FF;`
`3`		`-}`
`4`		`-`
`5`		`-.accent {`
`6`		`- color: var(--accent);`
	`3`	`+ --accent-darker: #3E4DED;`
`7`	`4`	`}`
`8`	`5`
`9`	`6`	`.bg-accent {`
`10`	`7`	`background-color: var(--accent);`
`11`	`8`	`}`
`12`	`9`
	`10`	`+.hover-bg-accent-darker:hover {`
	`11`	`+ background-color: var(--accent-darker);`
	`12`	`+}`
	`13`	`+`
`13`	`14`	`.rubik {`
`14`	`15`	`font-family: "Rubik", sans-serif;`
`15`	`16`	`}`
`@@ -28,10 +29,6 @@`
`28`	`29`	`text-decoration: none;`
`29`	`30`	`}`
`30`	`31`
`31`		`-.button-outline {`
`32`		`- box-shadow: inset 0 0 0 1px currentColor;`
`33`		`-}`
`34`		`-`
`35`	`32`	`.lh-none {`
`36`	`33`	`line-height: 0;`
`37`	`34`	`}`