Skip to content

F
feather
Commit 706e0ebd authored by Cole Bemis's avatar Cole Bemis
Browse files
Options

Redesign project site

parent 6bb80940
Show whitespace changes
Inline Side-by-side
Showing with 37 additions and 69 deletions
_includes/category.html
View file @ 706e0ebd
<div class="pv4"> <div class="pv4">
<h2 class="mt0 mb3 tc f6 ttu tracked normal">{{ include.category | replace: '-', ' '}}</h2> <h2 class="mt0 mb4 f6 ttu tracked normal">{{ include.category | replace: '-', ' '}}</h2>
<ul class="flex flex-wrap justify-center mv0 pl0 list"> <ul class="icon-grid mv0 pl0 list">
{% capture category_path %}icons/{{ include.category }}{% endcapture %} {% capture category_path %}icons/{{ include.category }}{% endcapture %}
{% for icon in site.static_files %} {% for icon in site.static_files %}
{% if icon.path contains category_path %} {% if icon.path contains category_path %}
......
_includes/footer.html
View file @ 706e0ebd
<footer class="flex flex-column items-center pv5"> <footer class="flex flex-column items-center pt5-ns pb5">
<ul class="flex flex-column flex-row-l justify-center w-80 mv0 pl0 list"> <ul class="flex flex-column flex-row-l justify-center w-80 mv0 pl0 list">
{% for link in include.links %} {% for link in include.links %}
<li class="mh3-l pv3 pv0-l f5 bb b--black-10 bn-l"> <li class="mh3-l pv3 pv0-l f5 bb b--black-10 bn-l">
......
_includes/header.html
View file @ 706e0ebd
<header class="bb b--black-10 pv3"> <header class="pv3 bb b--black-10">
<div class="w-80 mw8 center flex justify-between items-center"> <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> <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 dn">
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<h2 class="mt0 mb4 f2 fw3 tc lh-title black-90">Simply beautiful open source icons</h2> <h2 class="mt0 mb4 f2 fw3 tc lh-title black-90">Simply beautiful open source icons</h2>
<a <a
class="btn white bg-accent br3 dim" class="button white bg-accent br2"
href="feather-{{ site.data.package.version }}.zip" href="feather-{{ site.data.package.version }}.zip"
download download
onclick="ga('send', 'event', 'download', 'click', 'all');"> onclick="ga('send', 'event', 'download', 'click', 'all');">
......
_includes/icon.html
View file @ 706e0ebd
<li class="icon relative pa3 ma2 black-90 bg-animate br3 outline-0 pointer"> <li>
{% include_relative {{ include.icon.path }} %}
<div class="tooltip flex flex-column tc white bg-dark-gray br3">
<p class="dib mh4 mv3 lh-copy nowrap">{{ include.icon.basename }}</p>
<a <a
class="btn white bg-black-90 dim br3 br--bottom outline-0"
href="{{ include.icon.path }}" href="{{ include.icon.path }}"
class="flex flex-row items-center dib pa3 br2 no-underline dark-gray bg-near-white bg-animate hover-bg-light-gray"
download download
tabindex="-1"
onclick="ga('send', 'event', 'download', 'click', '{{ include.icon.basename }}');"> onclick="ga('send', 'event', 'download', 'click', '{{ include.icon.basename }}');">
Download <span class="svg flex-none lh-none">{% include_relative {{ include.icon.path }} %}</span>
<span class="ml3 lh-copy f6 tc black-60 ellipse">{{ include.icon.basename }}</span>
</a> </a>
</div> </li>
</li>
_includes/icons.html
View file @ 706e0ebd
<div class="w-80 center mw8 pv5"> <div class="w-80 center pv5">
{% include category.html category="core" %} {% include category.html category="core" %}
{% include category.html category="media-controls" %} {% include category.html category="media-controls" %}
{% include category.html category="communication" %} {% include category.html category="communication" %}
...@@ -6,4 +6,5 @@ ...@@ -6,4 +6,5 @@
{% include category.html category="location" %} {% include category.html category="location" %}
{% include category.html category="weather" %} {% include category.html category="weather" %}
{% include category.html category="arrows" %} {% include category.html category="arrows" %}
{% include category.html category="logos" %}
</div> </div>
index.html
View file @ 706e0ebd
...@@ -31,13 +31,10 @@ links: ...@@ -31,13 +31,10 @@ links:
<link href="https://unpkg.com/tachyons/css/tachyons.min.css" rel="stylesheet"> <link href="https://unpkg.com/tachyons/css/tachyons.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet"> <link href="style.css" rel="stylesheet">
</head> </head>
<body class="ma0 rubik font-smoothing black-60 bg-near-white"> <body class="ma0 rubik font-smoothing black-60 bg-white">
<div class="bg-white">
{% include header.html %} {% include header.html %}
{% include icons.html %} {% include icons.html %}
</div>
{% include footer.html links=page.links %} {% include footer.html links=page.links %}
</script> </script>
......
style.css
View file @ 706e0ebd
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.btn { .button {
display: inline-block; display: inline-block;
padding: 1rem 2rem; padding: 1rem 2rem;
font-size: 1rem; font-size: 1rem;
...@@ -28,56 +28,30 @@ ...@@ -28,56 +28,30 @@
text-decoration: none; text-decoration: none;
} }
.btn-outline { .button-outline {
box-shadow: inset 0 0 0 1px currentColor; box-shadow: inset 0 0 0 1px currentColor;
} }
.icon { .lh-none {
width: 1.5rem; line-height: 0;
height: 1.5rem;
box-sizing: content-box;
} }
.icon [stroke] { .ellipse {
stroke: currentColor; white-space: nowrap;
} overflow: hidden;
text-overflow: ellipsis;
.icon [fill]:not([fill=none]) {
fill: currentColor;
} }
.tooltip { .icon-grid {
position: absolute; display: grid;
top: calc(100% + 1rem); grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
left: 50%; grid-gap: 1rem;
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 */ .svg [stroke] {
.tooltip::before { stroke: currentColor;
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 { .svg [fill]:not([fill=none]) {
opacity: 1; fill: currentColor;
visibility: visible;
transform: translateX(-50%) scale(1);
transition-delay: 0.15s;
} }
\ No newline at end of file
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