1
0
mirror of https://github.com/simple-icons/simple-icons.git synced 2024-12-26 01:13:41 +02:00

Revert "Split files to test HTTP/2 performance"

This reverts commit 64eb85cd67.
This commit is contained in:
Dan Leech 2017-02-06 16:32:31 +00:00
parent 64eb85cd67
commit 388ac6de39
5 changed files with 1055 additions and 4077 deletions

2398
404.html

File diff suppressed because one or more lines are too long

2398
index.html

File diff suppressed because one or more lines are too long

View File

@ -86,19 +86,20 @@ var header = fs.readFileSync('./header.html', 'utf8');
var footer = fs.readFileSync('./footer.html', 'utf8');
// Build content
var main = " <ul class=\"tiles\">";
var main = " <ul class=\"tiles\">";
for (var i = 0; i < source.icons.length; i++) {
var fileName = source.icons[i].title.toLowerCase();
fileName = fileName.replace(/[!|’|.| |-]/g, ''); // Replace bang, apostrophe, period and space with nothing.
fileName = fileName.replace(/[+]/, 'plus'); // Replace the plus symbol with “plus”.
filePath = "/icons/" + fileName + ".svg";
main += "\n <li class=\"tiles__item\" style=\"background-color:#" + source.icons[i].hex + "\">\n <a href=\"" + filePath + "\" class=\"icon--link\">\n <img src=\"" + filePath + "\" height=\"32\" width=\"32\" alt=\"" + source.icons[i].title + " icon\">\n <span class=\"tile-name\">" + source.icons[i].title + "</span>\n </a>" + "\n <span class=\"hex\">#" + source.icons[i].hex + "</span>\n </li>";
filePath = "../icons/" + fileName + ".svg";
var fs = require('fs');
var svg = fs.readFileSync(filePath, 'utf8');
main += "\n <li class=\"tiles__item\" style=\"background-color:#" + source.icons[i].hex + "\"><a href=\"https://simpleicons.org/icons/" + fileName + ".svg\" class=\"icon--link\">" + 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
var htmlOutput = header + main + footer;
var fs = require('fs');
fs.writeFile("../index.html", htmlOutput, function(err) {
if(err) {
return console.log(err);
@ -168,4 +169,4 @@ fs.writeFile("../colour-variables.less", less, function(err) {
return console.log(err);
}
console.log(" - brand-colours.less built successfully.");
});
});

View File

@ -28,7 +28,169 @@
<link rel="icon" type="image/png" href="https://simpleicons.org/images/favicon.png">
<link rel="apple-touch-icon" href="https://simpleicons.org/images/apple-touch-icon.png">
<link rel="mask-icon" href="https://simpleicons.org/images/logo.svg" color="#111111">
<link rel="stylesheet" href="/styles.css">
<style>
html {
font-size: 100%;
}
body {
background-color: #FFF;
color: #424242;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-kerning: normal;
-webkit-font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures;
font-weight: 400;
line-height: 1.5rem;
margin: 0;
}
a {
color: #0091EA;
}
a:focus, a:hover {
color: #00B0FF;
}
p {
margin: 1.5rem 0 0;
}
.navbar {
font-size: 0.75rem;
line-height: 1.125rem;
padding: 1.5rem;
}
.title {
font-size: 1rem;
font-weight: 700;
margin: 0;
padding: 0;
}
.btn {
background-color: #00C853;
border-radius: 0.125rem;
color: #FFF;
display: inline-block;
font-weight: 700;
padding: 0.75rem 1.5rem;
text-align: center;
text-decoration: none;
}
.btn:focus, .btn:hover {
background-color: #00E676;
color: #FFF;
}
.site-main {
width: 100%;
}
.tiles {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 1.25rem 1.25rem;
padding: 0;
}
.tiles li {
box-sizing: border-box;
background: #424242;
border: 0.25rem solid #FFF;
color: #FFF;
font-size: 0.8125rem;
line-height: 1rem;
padding: 1rem 0.75rem;
width: 100%;
}
.tiles ::selection {
background: #FFF;
color: #424242;
}
.tiles ::-moz-selection {
background: #FFF;
color: #424242;
}
.tile-name {
color: #FFF;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: calc(100% - 4rem);
}
.tiles svg {
float: left;
height: 2rem;
margin: -0.5rem 0 0 0;
padding: 0.5rem 1.25rem 0 0.5rem;
width: 2rem;
}
.tiles path, .tiles ellipse, .tiles circle {
fill: #FFF;
}
.hex {
font-size: 0.75rem;
opacity: 0.5;
text-transform: uppercase;
}
.tiles__item:active .hex, .tiles__item:focus .hex, .tiles__item:hover .hex {
opacity: 1;
}
@media (min-width: 800px) { .tiles li { width: 50%; } }
@media (min-width: 1000px) { .tiles li { width: 33.333%; } }
@media (min-width: 1100px) { .tiles li { width: 25% } }
@media (min-width: 1400px) { .tiles li { width: 20% } }
@media (min-width: 1600px) { .tiles li { width: 16.666% } }
@media (min-width: 1900px) { .tiles li { width: 12.5% } }
@media (min-width: 2300px) { .tiles li { width: 10% } }
.icon--link:hover .tile-name, .icon--link:active .tile-name, .icon--link:focus .tile-name {
text-decoration: underline;
}
.footer {
margin: 3rem;
}
.footer p {
font-size: 0.8125rem;
margin: 1.5rem auto 0;
max-width: 25.5rem;
text-align: center;
}
.ad {
background-color: #F0F0F0;
margin: 1.5rem 0 0;
padding: 0.75rem;
}
.ad a {
color: #424242;
}
.carbon-wrap:after {
clear: both;
content: " ";
display: table;
}
.carbon-img {
float: left;
line-height: 0;
}
.carbon-text {
float: right;
width: calc(100% - 130px - 0.75rem);
}
.carbon-poweredby {
color: #BDBDBD;
display: block;
margin: 0.75rem 0 0;
text-align: center;
text-decoration: none;
}
@media (min-width: 600px) {
body {
display: flex;
}
.navbar {
padding: 1.5rem 0 1.5rem 1.5rem;
width: 18.5rem;
}
.site-main {
width: calc(100% - 20rem);
}
}
</style>
</head>
<body>

View File

@ -1,161 +0,0 @@
html {
font-size: 100%;
}
body {
background-color: #FFF;
color: #424242;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-kerning: normal;
-webkit-font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures;
font-weight: 400;
line-height: 1.5rem;
margin: 0;
}
a {
color: #0091EA;
}
a:focus, a:hover {
color: #00B0FF;
}
p {
margin: 1.5rem 0 0;
}
.navbar {
font-size: 0.75rem;
line-height: 1.125rem;
padding: 1.5rem;
}
.title {
font-size: 1rem;
font-weight: 700;
margin: 0;
padding: 0;
}
.btn {
background-color: #00C853;
border-radius: 0.125rem;
color: #FFF;
display: inline-block;
font-weight: 700;
padding: 0.75rem 1.5rem;
text-align: center;
text-decoration: none;
}
.btn:focus, .btn:hover {
background-color: #00E676;
color: #FFF;
}
.site-main {
width: 100%;
}
.tiles {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 1.25rem 1.25rem;
padding: 0;
}
.tiles li {
box-sizing: border-box;
background: #424242;
border: 0.25rem solid #FFF;
color: #FFF;
font-size: 0.8125rem;
line-height: 1rem;
padding: 1rem 0.75rem;
width: 100%;
}
.tiles ::selection {
background: #FFF;
color: #424242;
}
.tiles ::-moz-selection {
background: #FFF;
color: #424242;
}
.tile-name {
color: #FFF;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: calc(100% - 4rem);
}
.tiles svg {
float: left;
height: 2rem;
margin: -0.5rem 0 0 0;
padding: 0.5rem 1.25rem 0 0.5rem;
width: 2rem;
}
.tiles path, .tiles ellipse, .tiles circle {
fill: #FFF;
}
.hex {
font-size: 0.75rem;
opacity: 0.5;
text-transform: uppercase;
}
.tiles__item:active .hex, .tiles__item:focus .hex, .tiles__item:hover .hex {
opacity: 1;
}
@media (min-width: 800px) { .tiles li { width: 50%; } }
@media (min-width: 1000px) { .tiles li { width: 33.333%; } }
@media (min-width: 1100px) { .tiles li { width: 25% } }
@media (min-width: 1400px) { .tiles li { width: 20% } }
@media (min-width: 1600px) { .tiles li { width: 16.666% } }
@media (min-width: 1900px) { .tiles li { width: 12.5% } }
@media (min-width: 2300px) { .tiles li { width: 10% } }
.icon--link:hover .tile-name, .icon--link:active .tile-name, .icon--link:focus .tile-name {
text-decoration: underline;
}
.footer {
margin: 3rem;
}
.footer p {
font-size: 0.8125rem;
margin: 1.5rem auto 0;
max-width: 25.5rem;
text-align: center;
}
.ad {
background-color: #F0F0F0;
margin: 1.5rem 0 0;
padding: 0.75rem;
}
.ad a {
color: #424242;
}
.carbon-wrap:after {
clear: both;
content: " ";
display: table;
}
.carbon-img {
float: left;
line-height: 0;
}
.carbon-text {
float: right;
width: calc(100% - 130px - 0.75rem);
}
.carbon-poweredby {
color: #BDBDBD;
display: block;
margin: 0.75rem 0 0;
text-align: center;
text-decoration: none;
}
@media (min-width: 600px) {
body {
display: flex;
}
.navbar {
padding: 1.5rem 0 1.5rem 1.5rem;
width: 18.5rem;
}
.site-main {
width: calc(100% - 20rem);
}
}