Mibew/simple-icons
1
0
Fork 0
mirror of https://github.com/Mibew/simple-icons.git synced 2025-05-03 09:33:08 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #299 from donroyco/usability-fixes

Browse Source 
Usability fixes
This commit is contained in:
Dan Leech 2016-02-24 11:05:07 +00:00
commit 8d55d1f42f
4 changed files with 549 additions and 471 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

494
404.html
View File

File diff suppressed because one or more lines are too long

494
index.html
View File

File diff suppressed because one or more lines are too long

2
src/build.js
View File

@ -93,7 +93,7 @@ for (var i = 0; i < source.icons.length; i++) {
filePath = "../icons/" + fileName + ".svg"; filePath = "../icons/" + fileName + ".svg";
var fs = require('fs'); var fs = require('fs');
var svg = fs.readFileSync(filePath, 'utf8'); var svg = fs.readFileSync(filePath, 'utf8');
main += "\n <li class=\"tiles__item\" data-search=\"" + source.icons[i].title.toLowerCase() + " " + fileName.toLowerCase() + " " + source.icons[i].hex.toLowerCase() + "\" style=\"background-color:#" + source.icons[i].hex + "\"><a href=\"https://simpleicons.org/icons/" + fileName + ".svg\" title=\"" + source.icons[i].title + "\">" + svg + "</a><span class=\"tile-name\">" + source.icons[i].title + "</span>" + "<br><span class=\"hex\">#" + source.icons[i].hex + "</span></li>"; main += "\n <li class=\"tiles__item\" data-search=\"" + source.icons[i].title.toLowerCase() + " " + fileName.toLowerCase() + " " + source.icons[i].hex.toLowerCase() + "\" style=\"background-color:#" + source.icons[i].hex + "\"><a href=\"https://simpleicons.org/icons/" + fileName + ".svg\" class=\"icon--link\" title=\"" + source.icons[i].title + "\">" + svg + "<span class=\"tile-name\">" + source.icons[i].title + "</span></a>" + "<span class=\"hex\">#" + source.icons[i].hex + "</span></li>";
} }
// Put all content together and export to index.html // Put all content together and export to index.html

30
src/header.html
View File

@ -149,10 +149,13 @@
.tiles svg { .tiles svg {
float: left; float: left;
height: 2rem; height: 2rem;
margin: -0.5rem 0.75rem 0 0;
padding: 0.5rem 0.5rem 0; padding: 0.5rem 0.5rem 0;
width: 2rem; width: 2rem;
} }
.tiles--full svg {
margin: -0.5rem 0 0 0;
padding-right: 1.25rem;
}
.tiles path, .tiles ellipse, .tiles circle { .tiles path, .tiles ellipse, .tiles circle {
fill: #FFF; fill: #FFF;
} }
@ -160,6 +163,10 @@
font-size: 0.75rem; font-size: 0.75rem;
opacity: 0.5; opacity: 0.5;
text-transform: uppercase; text-transform: uppercase;
transition: opacity .3s ease-in-out;
}
.tiles--full .tiles__item:hover .hex, .tiles--full .tiles__item:active .hex, .tiles--full .tiles__item:focus .hex {
opacity: 1;
} }
@media (min-width: 800px) { .tiles li { width: 50%; } } @media (min-width: 800px) { .tiles li { width: 50%; } }
@media (min-width: 1000px) { .tiles li { width: 33.333%; } } @media (min-width: 1000px) { .tiles li { width: 33.333%; } }
@ -171,13 +178,29 @@
.tiles--icons { .tiles--icons {
justify-content: center; justify-content: center;
} }
.tiles--icons .tiles__item {
position: relative;
}
.tiles--icons .icon--link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.tiles--icons li { .tiles--icons li {
height: 4rem; height: 4rem;
width: 4rem !important; width: 4rem !important;
} }
.tiles--icons svg { .tiles--icons svg {
position: absolute;
top: 50%;
left: 50%;
height: 1.5rem; height: 1.5rem;
margin: -0.25rem 0 0 0.25rem; margin: 0;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
padding: 0; padding: 0;
width: 1.5rem; width: 1.5rem;
} }
@ -187,6 +210,9 @@
.tiles--icons .hex { .tiles--icons .hex {
visibility: hidden; visibility: hidden;
} }
.icon--link:hover .tile-name, .icon--link:active .tile-name, .icon--link:focus .tile-name {
text-decoration: underline;
}
.footer { .footer {
margin: 3rem; margin: 3rem;
} }