mirror of
https://github.com/feathericons/feather.git
synced 2023-08-10 21:13:24 +03:00
Redesign with tachyons
This commit is contained in:
Cole Bemis
parent
d802ec14ee
commit
7f955e9b5a
@ -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¤cy_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 <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 <3 by Cole Bemis</a>
|
||||
</p>
|
||||
<p class="mv0 f6 lh-copy">v{{ site.data.package.version }}</p>
|
||||
</footer>
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -1,4 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="20" viewBox="0 0 36 20">
|
||||
<title>tooltip-arrow</title>
|
||||
<path d="M20.12,2.12,31.24,13.24A6,6,0,0,0,35.49,15H36v5H0V15H.51a6,6,0,0,0,4.24-1.76L15.88,2.12A3,3,0,0,1,20.12,2.12Z" fill="#424242"/>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="24" viewBox="0 0 40 24" fill="#333333">
|
||||
<path d="M0,15.9l0.6,0c2.2,0,4.3-0.8,5.8-2.3L17.2,2.8c1.6-1.6,4.1-1.6,5.7,0l10.8,10.8c1.5,1.5,3.5,2.3,5.7,2.3H40v8H0 V15.9z"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 260 B After Width: | Height: | Size: 234 B |
28
index.html
28
index.html
@ -1,6 +1,17 @@
|
||||
---
|
||||
title: Feather
|
||||
description: Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on consistency and simplicity.
|
||||
links:
|
||||
- title: Donate
|
||||
url: ttps://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=G6CPFZ6PQRZW8&lc=US&item_name=Feather¤cy_code=USD&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted
|
||||
- title: GitHub
|
||||
url: https://github.com/colebemis/feather
|
||||
- title: Change Log
|
||||
url: https://github.com/colebemis/feather/blob/gh-pages/CHANGELOG.md
|
||||
- title: License
|
||||
url: https://github.com/colebemis/feather/blob/gh-pages/LICENSE
|
||||
- title: Contact
|
||||
url: mailto:cole@colebemis.com
|
||||
---
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
@ -17,16 +28,23 @@ description: Feather is a collection of simply beautiful open source icons. Each
|
||||
<link rel="shortcut icon" type="image/png" href="assets/favicon.png">
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Rubik:300,400" rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link href="https://unpkg.com/tachyons/css/tachyons.min.css" rel="stylesheet">
|
||||
<link href="style.css" rel="stylesheet">
|
||||
|
||||
{% if site.google_analytics and jekyll.environment == 'production' %}
|
||||
{% include analytics.html %}
|
||||
{% endif %}
|
||||
</head>
|
||||
<body>
|
||||
{% include header.html %}
|
||||
{% include icons.html %}
|
||||
<body class="ma0 rubik font-smoothing black-60 bg-near-white">
|
||||
|
||||
<div class="pb5 pb6-ns bg-white">
|
||||
{% include header.html %}
|
||||
{% include icons.html %}
|
||||
</div>
|
||||
|
||||
{% include request.html %}
|
||||
{% include footer.html %}
|
||||
{% include footer.html links=page.links %}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
69
style.css
Normal file
69
style.css
Normal file
@ -0,0 +1,69 @@
|
||||
.rubik {
|
||||
font-family: "Rubik", sans-serif;
|
||||
}
|
||||
|
||||
.font-smoothing {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 1rem 2rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
letter-spacing: 1px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
box-shadow: inset 0 0 0 1px currentColor;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.icon svg {
|
||||
stroke: 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;
|
||||
}
|
||||
361
style.scss
361
style.scss
@ -1,361 +0,0 @@
|
||||
---
|
||||
---
|
||||
|
||||
/* Variables */
|
||||
|
||||
$color-primary: #000;
|
||||
$color-text-primary: rgba($color-primary, 0.9);
|
||||
$color-text-secondary: rgba($color-primary, 0.5);
|
||||
$color-border: rgba($color-primary, 0.1);
|
||||
$color-accent: #0090FF;
|
||||
$color-accent-lighter: rgba($color-accent, 0.5);
|
||||
$color-accent-darker: #0086EC;
|
||||
|
||||
$transition-duration: 200ms;
|
||||
$border-radius: 0.375rem;
|
||||
|
||||
/* Mixins */
|
||||
|
||||
@mixin for-tablet-portrait-up {
|
||||
@media (min-width: 640px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin for-tablet-landscape-up {
|
||||
@media (min-width: 900px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/* General */
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Rubik", sans-serif;
|
||||
line-height: 1.3;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
color: $color-text-primary;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 85%;
|
||||
max-width: 64rem;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: $border-radius;
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
transition:
|
||||
color $transition-duration,
|
||||
background-color $transition-duration,
|
||||
box-shadow $transition-duration;
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
color: white;
|
||||
background-color: $color-accent;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-accent-darker;
|
||||
}
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
color: $color-accent;
|
||||
box-shadow: inset 0 0 0 1px $color-accent-lighter;
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 0 1px $color-accent;
|
||||
}
|
||||
}
|
||||
|
||||
/* Header */
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
|
||||
@include for-tablet-portrait-up {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
@include for-tablet-portrait-up {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 2rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 0;
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
|
||||
.header-button-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 4rem;
|
||||
|
||||
@include for-tablet-portrait-up {
|
||||
flex-direction: row-reverse;
|
||||
margin-top: 0;
|
||||
|
||||
.button {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.button + .button {
|
||||
margin-top: 1rem;
|
||||
|
||||
@include for-tablet-portrait-up {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
|
||||
.icons {
|
||||
padding: 3rem 0;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.icons-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.feather-icon {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
box-sizing: content-box;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin: 0.25rem;
|
||||
padding: 0.75rem;
|
||||
stroke-width: 2px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
@include for-tablet-portrait-up {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
> svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
stroke: currentColor;
|
||||
stroke-width: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: calc(100% + 15px);
|
||||
left: 50%;
|
||||
min-width: 8rem;
|
||||
transform: translateX(-50%) scale(0.75);
|
||||
transform-origin: 50% 0;
|
||||
color: #fff;
|
||||
background-color: #424242;
|
||||
text-align: center;
|
||||
border-radius: 0.375rem;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
z-index: 10;
|
||||
cursor: default;
|
||||
transition:
|
||||
transform $transition-duration,
|
||||
opacity $transition-duration,
|
||||
visibility $transition-duration;
|
||||
|
||||
@include for-tablet-portrait-up {
|
||||
min-width: 12rem;
|
||||
}
|
||||
|
||||
.feather-icon:focus & {
|
||||
transform: translateX(-50%) scale(1);
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -15px);
|
||||
width: 36px;
|
||||
height: 20px;
|
||||
background-image: url("assets/tooltip-arrow.svg");
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.tooltip-icon-name {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
.tooltip-download {
|
||||
display: inline-block;
|
||||
padding: 1rem 1.5rem;
|
||||
background-color: #212121;
|
||||
border-radius: 0 0 0.375rem 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
transition: background-color $transition-duration;
|
||||
|
||||
&:hover {
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
/* Request */
|
||||
|
||||
.request-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.request-heading {
|
||||
margin: 0 0 1.5rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
|
||||
.footer {
|
||||
padding: 1rem 0;
|
||||
border-top: 1px solid $color-border;
|
||||
|
||||
@include for-tablet-landscape-up {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.footer a {
|
||||
transition: color $transition-duration;
|
||||
|
||||
&:hover {
|
||||
color: $color-accent;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.footer-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@include for-tablet-landscape-up {
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
color: $color-text-secondary;
|
||||
|
||||
@include for-tablet-landscape-up {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
border-bottom: 1px solid $color-border;
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
|
||||
@include for-tablet-landscape-up {
|
||||
border-bottom: none;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 1rem 0;
|
||||
|
||||
@include for-tablet-landscape-up {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.made-with-love {
|
||||
margin: 2rem 0 1rem;
|
||||
text-align: center;
|
||||
|
||||
@include for-tablet-landscape-up {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.version {
|
||||
margin: 0 0 1rem;
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
color: $color-text-secondary;
|
||||
|
||||
@include for-tablet-landscape-up {
|
||||
align-self: flex-start;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user