Skip to content

F
feather
Commit 7f955e9b authored by Cole Bemis's avatar Cole Bemis
Browse files
Options

Redesign with tachyons

parent d802ec14
Hide whitespace changes
Inline Side-by-side
Showing with 138 additions and 421 deletions
_includes/footer.html
View file @ 7f955e9b
<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>
\ No newline at end of file
_includes/header.html
View file @ 7f955e9b
<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>
_includes/icons.html
View file @ 7f955e9b
<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>
\ No newline at end of file
<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>
\ No newline at end of file
_includes/request.html
View file @ 7f955e9b
<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>
\ No newline at end of file
<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>
\ No newline at end of file
assets/tooltip-arrow.svg
View file @ 7f955e9b
<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>
\ No newline at end of file
<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>
index.html
View file @ 7f955e9b
---
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&currency_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>
style.css 0 → 100644
View file @ 7f955e9b
.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;
}
\ No newline at end of file
style.scss deleted 100644 → 0
View file @ d802ec14
---
---
/* 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;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Technounit-GROUP 2023