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

- Made whole tile icons clickable.

Browse Source 
- Full tiles: name underlined and also clickable.
This commit is contained in:
Roy 2016-02-23 20:42:34 +01:00
parent da270cc567
commit 6fded3e581
4 changed files with 534 additions and 471 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

489
404.html
View File

File diff suppressed because one or more lines are too long

489
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";
var fs = require('fs');
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

25
src/header.html
View File

@ -149,10 +149,12 @@
.tiles svg {
float: left;
height: 2rem;
margin: -0.5rem 0.75rem 0 0;
padding: 0.5rem 0.5rem 0;
width: 2rem;
}
.tiles--full svg {
margin: -0.5rem 0.75rem 0 0;
}
.tiles path, .tiles ellipse, .tiles circle {
fill: #FFF;
}
@ -171,13 +173,29 @@
.tiles--icons {
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 {
height: 4rem;
width: 4rem !important;
}
.tiles--icons svg {
position: absolute;
top: 50%;
left: 50%;
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;
width: 1.5rem;
}
@ -187,6 +205,9 @@
.tiles--icons .hex {
visibility: hidden;
}
.icon--link:hover .tile-name, .icon--link:active .tile-name, .icon--link:focus .tile-name {
text-decoration: underline;
}
.footer {
margin: 3rem;
}