mirror of
https://github.com/feathericons/feather.git
synced 2023-08-10 21:13:24 +03:00
Redesign project site
This commit is contained in:
Cole Bemis
parent
6bb80940e8
commit
706e0ebd45
@ -1,6 +1,6 @@
|
||||
<div class="pv4">
|
||||
<h2 class="mt0 mb3 tc f6 ttu tracked normal">{{ include.category | replace: '-', ' '}}</h2>
|
||||
<ul class="flex flex-wrap justify-center mv0 pl0 list">
|
||||
<h2 class="mt0 mb4 f6 ttu tracked normal">{{ include.category | replace: '-', ' '}}</h2>
|
||||
<ul class="icon-grid mv0 pl0 list">
|
||||
{% capture category_path %}icons/{{ include.category }}{% endcapture %}
|
||||
{% for icon in site.static_files %}
|
||||
{% if icon.path contains category_path %}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<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">
|
||||
{% for link in include.links %}
|
||||
<li class="mh3-l pv3 pv0-l f5 bb b--black-10 bn-l">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<header class="bb b--black-10 pv3">
|
||||
<div class="w-80 mw8 center flex justify-between items-center">
|
||||
<header class="pv3 bb b--black-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">
|
||||
@ -14,7 +14,7 @@
|
||||
<h2 class="mt0 mb4 f2 fw3 tc lh-title black-90">Simply beautiful open source icons</h2>
|
||||
|
||||
<a
|
||||
class="btn white bg-accent br3 dim"
|
||||
class="button white bg-accent br2"
|
||||
href="feather-{{ site.data.package.version }}.zip"
|
||||
download
|
||||
onclick="ga('send', 'event', 'download', 'click', 'all');">
|
||||
|
||||
@ -1,14 +1,10 @@
|
||||
<li class="icon relative pa3 ma2 black-90 bg-animate br3 outline-0 pointer">
|
||||
{% 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
|
||||
class="btn white bg-black-90 dim br3 br--bottom outline-0"
|
||||
href="{{ include.icon.path }}"
|
||||
download
|
||||
tabindex="-1"
|
||||
onclick="ga('send', 'event', 'download', 'click', '{{ include.icon.basename }}');">
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
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
|
||||
onclick="ga('send', 'event', 'download', 'click', '{{ include.icon.basename }}');">
|
||||
<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>
|
||||
</li>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="w-80 center mw8 pv5">
|
||||
<div class="w-80 center pv5">
|
||||
{% include category.html category="core" %}
|
||||
{% include category.html category="media-controls" %}
|
||||
{% include category.html category="communication" %}
|
||||
@ -6,4 +6,5 @@
|
||||
{% include category.html category="location" %}
|
||||
{% include category.html category="weather" %}
|
||||
{% include category.html category="arrows" %}
|
||||
{% include category.html category="logos" %}
|
||||
</div>
|
||||
|
||||
@ -31,13 +31,10 @@ links:
|
||||
<link href="https://unpkg.com/tachyons/css/tachyons.min.css" rel="stylesheet">
|
||||
<link href="style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="ma0 rubik font-smoothing black-60 bg-near-white">
|
||||
|
||||
<div class="bg-white">
|
||||
{% include header.html %}
|
||||
{% include icons.html %}
|
||||
</div>
|
||||
<body class="ma0 rubik font-smoothing black-60 bg-white">
|
||||
|
||||
{% include header.html %}
|
||||
{% include icons.html %}
|
||||
{% include footer.html links=page.links %}
|
||||
|
||||
</script>
|
||||
|
||||
62
style.css
62
style.css
@ -19,7 +19,7 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.btn {
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 1rem 2rem;
|
||||
font-size: 1rem;
|
||||
@ -28,56 +28,30 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
.button-outline {
|
||||
box-shadow: inset 0 0 0 1px currentColor;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
box-sizing: content-box;
|
||||
.lh-none {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.icon [stroke] {
|
||||
.ellipse {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.icon-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
|
||||
.svg [stroke] {
|
||||
stroke: currentColor;
|
||||
}
|
||||
|
||||
.icon [fill]:not([fill=none]) {
|
||||
.svg [fill]:not([fill=none]) {
|
||||
fill: 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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user