Redesign with tachyons

This commit is contained in:
Cole Bemis
2017-05-12 16:32:49 -07:00
parent d802ec14ee
commit 7f955e9b5a
8 changed files with 138 additions and 421 deletions

View File

@ -1,15 +1,14 @@
<footer class="section footer">
<div class="container footer-container">
<div class="footer-main">
<ul class="footer-links">
<li class="footer-link"><a 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="footer-link"><a href="https://github.com/colebemis/feather" target="_blank">GitHub</a></li>
<li class="footer-link"><a href="https://github.com/colebemis/feather/blob/gh-pages/CHANGELOG.md" target="_blank">Change Log</a></li>
<li class="footer-link"><a href="https://github.com/colebemis/feather/blob/gh-pages/LICENSE" target="_blank">License</a></li>
<li class="footer-link"><a href="mailto:cole@colebemis.com" target="_blank">Contact</a></li>
</ul>
<p class="made-with-love"><a href="http://colebemis.com" target="_blank">Made with &lt;3 by Cole Bemis</a></p>
</div>
<p class="version">v{{ site.data.package.version }} - {{ site.data['icons-manifest'] | size }} icons</p>
</div>
<footer class="flex flex-column items-center pv5 bt b--black-10">
<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">
<a class="lh-copy color-inherit no-underline dim" href="{{ link.url }}" target="_blank">{{ link.title }}</a>
</li>
{% endfor %}
</ul>
<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">v{{ site.data.package.version }}</p>
</footer>

View File

@ -1,24 +1,21 @@
<header class="section header">
<div class="container header-container">
<div>
<h1 class="title">Feather</h1>
<p class="description">Simply beautiful open source icons</p>
</div>
<div class="header-button-group">
<header class="flex flex-column items-center w-80 mw8 pv5 pv6-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>
<div class="flex flex-column flex-row-ns items-stretch justify-center w-100">
<a
class="button button-primary"
class="btn mb3 mb0-ns mr3-ns white bg-black-90 br3 dim"
href="feather-{{ site.data.package.version }}.zip"
download
onclick="ga('send', 'event', 'download', 'click', 'all');">
Download
</a>
<a
class="button button-secondary"
class="btn btn-outline black-90 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>
</div>
</header>

View File

@ -1,21 +1,19 @@
<section class="section icons">
<div class="container icons-container">
{% for icon in site.data['icons-manifest'] %}
{% capture icon_path %}icons/{{ icon }}.svg{% endcapture %}
<div class="feather-icon" tabindex="0">
{% include_relative {{ icon_path }} %}
<div class="tooltip">
<p class="tooltip-icon-name">{{ icon }}</p>
<a
class="tooltip-download"
href="{{ icon_path }}"
download
tabindex="-1"
onclick="ga('send', 'event', 'download', 'click', '{{ icon }}');">
Download
</a>
</div>
</div>
{% endfor %}
</div>
</section>
<ul class="flex flex-wrap justify-center w-80 w-80-ns center mw8 mv0 pl0 list">
{% for icon in site.data['icons-manifest'] %}
{% capture icon_path %}icons/{{ icon }}.svg{% endcapture %}
<li class="icon relative pa3 ma2 black-90 bg-animate br3 outline-0 pointer">
{% include_relative {{ icon_path }} %}
<div class="tooltip flex flex-column tc white bg-dark-gray br3">
<p class="dib mh4 mv3 lh-copy nowrap">{{ icon }}</p>
<a
class="btn white bg-black-90 dim br3 br--bottom outline-0"
href="{{ icon_path }}"
download
tabindex="-1"
onclick="ga('send', 'event', 'download', 'click', '{{ icon }}');">
Download
</a>
</div>
</li>
{% endfor %}
</ul>

View File

@ -1,6 +1,4 @@
<section class="section request">
<div class="container request-container">
<h2 class="request-heading">Don't see the icon you need?</h2>
<a class="button button-secondary" href="https://github.com/colebemis/feather/issues/new" target="_blank">Request an icon</a>
</div>
</section>
<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 black-90 br3 dim" href="https://github.com/colebemis/feather/issues/new" target="_blank">Request an icon</a>
</div>