Seperate header and hero

This commit is contained in:
Cole Bemis 2017-05-29 17:26:25 -07:00
parent 706e0ebd45
commit b0522cf7fe
4 changed files with 17 additions and 21 deletions

View File

@ -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>

10
_includes/hero.html Normal file
View File

@ -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>

View File

@ -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 %}

View File

@ -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;
}