web/simple-icons
1
0
Fork 0
mirror of https://github.com/simple-icons/simple-icons.git synced 2024-12-16 01:10:30 +02:00
Code Releases Activity

Finished sort algorithm

Browse Source
This commit is contained in:
Dan Leech 2015-10-15 14:30:13 +01:00
parent 463d5025ec
commit 24505e30cf
18 changed files with 167 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
build.js
View File

@ -15,6 +15,7 @@ for (var i = 0; i < source.icons.length; i++) {
var max = Math.max(red, green, blue);
var min = Math.min(red, green, blue);
var delta = max - min;
source.icons[i].luminance = 100 * (max - min) / 2;
if (delta === 0) {
var hue = 0;
} else {
@ -33,9 +34,30 @@ for (var i = 0; i < source.icons.length; i++) {
}
// Sort icons by hue
// Ensures blue icons appear first in the last, purple ones last
for (var i = 0; i < source.icons.length; i++) {
source.icons[i].hue += 90;
source.icons[i].hue = source.icons[i].hue % 360;
}
source.icons.sort(function(a, b) {
return parseFloat(b.hue) - parseFloat(a.hue);
});
var tmp = [];
for (var i = 0; i < source.icons.length; i++) {
if (source.icons[i].luminance < 10) {
tmp.push(source.icons[i]);
source.icons.splice(i,1);
i--;
}
}
tmp.sort(function(a, b) {
return parseFloat(b.luminance) - parseFloat(a.luminance);
});
for (var i = 0; i < tmp.length; i++) {
source.icons.push(tmp[i]);
}
console.log(tmp);
// Read header and footer content into variables
var fs = require('fs');
@ -51,10 +73,19 @@ var fs = require('fs');
var header = fs.readFileSync('./src/header.html', 'utf8');
var footer = fs.readFileSync('./src/footer.html', 'utf8');
// Build tiles content
var main = "";
// Build content
var main = "<p class=\"hero\">" + source.icons.length + " SVG icons for popular brands. Download them from <a href=\"https://github.com/danleech/simple-icons\">GitHub</a>.</p>\n<ul class=\"tiles\">";
for (var i = 0; i < source.icons.length; i++) {
main += "<li class=\"tiles__item\" style=\"background-color:#" + source.icons[i].hex + "\">" + source.icons[i].title + "<br>#" + source.icons[i].hex + "</li>";
var filePath = source.icons[i].title.toLowerCase();
filePath = filePath.replace(' ', '');
filePath = filePath.replace('.', '');
filePath = filePath.replace('+', 'plus');
filePath = "./icons/" + filePath + ".svg";
console.log(source.icons[i].title + ", lum = " + source.icons[i].luminance);
var fs = require('fs');
var svg = fs.readFileSync(filePath, 'utf8');
main += "\t\t\t<li style=\"background-color:#" + source.icons[i].hex + "\">" + svg + source.icons[i].title + "<br><span class=\"hex\">#" + source.icons[i].hex + "</span></li>\n";
}
// Put all content together and export to index.html

1
icons/dribbble.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 16c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm6.747-6.905c-.234-.074-2.115-.635-4.257-.292.894 2.456 1.258 4.456 1.328 4.872 1.533-1.037 2.624-2.68 2.93-4.58zM10.67 14.3c-.102-.6-.5-2.688-1.46-5.18l-.044.014C5.312 10.477 3.93 13.15 3.806 13.4c1.158.905 2.614 1.444 4.194 1.444.947 0 1.85-.194 2.67-.543zm-7.747-1.72c.155-.266 2.03-3.37 5.555-4.51.09-.03.18-.056.27-.08-.173-.39-.36-.778-.555-1.16C4.78 7.85 1.47 7.807 1.17 7.8l-.003.208c0 1.755.665 3.358 1.756 4.57zM1.31 6.61c.307.005 3.122.017 6.318-.832-1.132-2.012-2.353-3.705-2.533-3.952-1.912.902-3.34 2.664-3.784 4.785zM6.4 1.368c.188.253 1.43 1.943 2.548 4 2.43-.91 3.46-2.293 3.582-2.468C11.323 1.827 9.736 1.176 8 1.176c-.55 0-1.087.066-1.6.19zm6.89 2.322c-.145.194-1.29 1.662-3.816 2.694.16.325.31.656.453.99.05.117.1.235.147.352 2.274-.286 4.533.172 4.758.22-.015-1.613-.59-3.094-1.543-4.257z" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

1
icons/eventstore.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><g fill="#fff"><path d="M3.85 2.273c.286-.167.583-.315.893-.444.655-.273 1.33-.44 2.024-.508l.752.857-.345.88c-.678.136-1.316.382-1.914.74l-.13.08-.125-1.16L3.85 2.27z"/><path d="M3.523 2.48l1.194.46.125 1.14c-.646.475-1.15 1.082-1.51 1.82-.034.066-.064.132-.093.2l-.835-1.02-1.37.29c.34-.736.8-1.394 1.375-1.974.345-.347.715-.652 1.113-.917zm7.857 8.036c.13-.216.235-.435.32-.66l1.292 1.567 2.17-.468c-.124.342-.272.677-.442 1.005-.446.86-1.034 1.606-1.765 2.24-.742.642-1.58 1.11-2.515 1.406-.018.006-.037.01-.055.017l-1.608-1.36.42-1.85.033-.014c.92-.393 1.638-1.02 2.15-1.885z"/><path d="M14.097 3.2c.133.183.257.373.375.57.495.832.837 1.722 1.027 2.67.186.94.212 1.886.08 2.835-.067.456-.167.9-.303 1.335l-2.166.466-1.3-1.572c.157-.578.17-1.18.04-1.806-.15-.743-.473-1.377-.97-1.9l2.34-.28.876-2.318zM.885 5.72l1.4-.296.824 1.006c-.255.723-.318 1.474-.19 2.254.033.222.082.437.144.646l-1.478-.337-1.06 1.254c-.128-.555-.19-1.123-.19-1.703.002-.967.18-1.9.538-2.8l.01-.025z"/><path d="M3.18 9.677c.213.562.526 1.076.94 1.544.31.356.66.65 1.042.88l-1.467.84.08 1.91c-.484-.3-.93-.66-1.334-1.077-.68-.698-1.2-1.5-1.562-2.404-.1-.25-.184-.5-.256-.75l1.083-1.28 1.477.337z"/><path d="M5.482 12.276c.315.157.653.277 1.012.36.805.186 1.59.155 2.353-.094L8.43 14.38l1.592 1.347c-.796.208-1.61.297-2.44.267-.97-.03-1.902-.236-2.794-.616-.24-.102-.47-.215-.694-.34l-.08-1.922 1.468-.84zm8.39-9.37l-.875 2.325-2.41.286c-.07-.06-.142-.12-.218-.177C9.58 4.74 8.69 4.39 7.7 4.29c-.226-.02-.445-.028-.66-.02l.84-2.153L6.067.052C6.613.005 7.158-.01 7.7.006c.327.01.65.034.973.075.453.06.9.153 1.343.28.937.262 1.79.69 2.562 1.282.486.374.918.796 1.295 1.266z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

1
icons/evernote.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M6.348 10.075V5.58l4.323 2.255-4.322 2.24zM15.84 4.8s-.156-1.102-.636-1.587c-.608-.637-1.29-.64-1.603-.678-2.238-.162-5.596-.162-5.596-.162h-.008s-3.358 0-5.597.162c-.314.038-.996.04-1.604.678C.316 3.698.16 4.8.16 4.8S0 6.097 0 7.39v1.215c0 1.294.16 2.59.16 2.59s.156 1.1.636 1.587c.608.637 1.408.617 1.764.684 1.28.123 5.44.16 5.44.16s3.362-.004 5.6-.166c.314-.038.996-.04 1.604-.678.48-.486.636-1.588.636-1.588S16 9.9 16 8.604V7.39c0-1.294-.16-2.59-.16-2.59" fill="#fff" fill-rule="nonzero"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 659 B

1
icons/facebook.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M15.117 0H.883C.395 0 0 .395 0 .883v14.234c0 .488.395.883.883.883h7.663V9.804H6.46V7.39h2.086V5.607c0-2.066 1.262-3.19 3.106-3.19.883 0 1.642.064 1.863.094v2.16h-1.28c-1 0-1.195.476-1.195 1.176v1.54h2.39l-.31 2.416h-2.08V16h4.077c.488 0 .883-.395.883-.883V.883C16 .395 15.605 0 15.117 0" fill="#fff" fill-rule="nonzero"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 486 B

1
icons/github.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.083-.202-.358-1.015.077-2.117 0 0 .672-.215 2.2.82.638-.178 1.323-.266 2.003-.27.68.004 1.364.092 2.003.27 1.527-1.035 2.198-.82 2.198-.82.437 1.102.163 1.915.08 2.117.513.56.823 1.274.823 2.147 0 3.073-1.87 3.75-3.653 3.947.287.246.543.735.543 1.48 0 1.07-.01 1.933-.01 2.195 0 .215.144.463.55.385C13.71 14.53 16 11.534 16 8c0-4.418-3.582-8-8-8" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 859 B

1
icons/google.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8.16 6.857V9.6h4.537c-.183 1.177-1.37 3.45-4.537 3.45-2.73 0-4.96-2.26-4.96-5.05s2.23-5.05 4.96-5.05c1.554 0 2.594.66 3.19 1.233l2.17-2.092C12.126.79 10.32 0 8.16 0c-4.423 0-8 3.577-8 8s3.577 8 8 8c4.617 0 7.68-3.246 7.68-7.817 0-.526-.057-.926-.126-1.326H8.16z" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 442 B

1
icons/googleplus.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><g fill="#fff"><path d="M5.09 7.273v1.745H7.98c-.116.75-.873 2.197-2.887 2.197-1.737 0-3.155-1.44-3.155-3.215S3.353 4.785 5.09 4.785c.99 0 1.652.422 2.03.786l1.382-1.33c-.887-.83-2.037-1.33-3.41-1.33C2.275 2.91 0 5.184 0 8s2.276 5.09 5.09 5.09c2.94 0 4.888-2.065 4.888-4.974 0-.334-.036-.59-.08-.843H5.09zM16 7.273h-1.455V5.818H13.09v1.455h-1.454v1.454h1.455v1.455h1.455V8.727H16"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 542 B

1
icons/govuk.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><g fill="#fff" fill-rule="nonzero"><path d="M1.597 8.686c.174-.425-.026-.914-.453-1.09-.42-.173-.906.033-1.08.458-.176.423.026.907.445 1.08.427.177.912-.025 1.087-.448M2.173 6.528c.175-.423-.026-.912-.454-1.09-.42-.172-.908.035-1.082.457-.175.424.027.91.447 1.083.428.177.914-.026 1.088-.45M2.984 5.8c.427.175.912-.027 1.087-.45.175-.424-.025-.914-.45-1.09-.422-.173-.91.033-1.083.456-.175.425.027.91.447 1.083M5.085 6.507c.428.177.914-.025 1.088-.448.174-.424-.026-.915-.454-1.09-.42-.174-.907.033-1.082.457-.174.422.028.908.447 1.08M14.402 8.686c.183.423.666.623 1.09.443.42-.175.62-.66.445-1.082-.177-.426-.664-.626-1.085-.452-.424.174-.627.663-.45 1.09M14.908 6.977c.425-.173.625-.66.448-1.086-.18-.422-.664-.625-1.087-.447-.425.174-.622.66-.448 1.086.177.425.664.626 1.086.447M13.006 5.806c.42-.175.622-.662.448-1.087-.177-.427-.664-.627-1.088-.454-.422.18-.623.666-.446 1.09.175.422.662.623 1.086.45M10.734 6.38c.42-.175.62-.662.446-1.083-.177-.425-.665-.626-1.09-.453-.42.18-.62.667-.444 1.093.175.42.662.62 1.088.442M6.27 3.302l.062 1.596 1.165-.614c.024.026.053.052.08.072-.12.477-.413 1.273-.595 1.713-.223.54.033 1.16.573 1.383.54.222 1.162-.036 1.386-.577.156-.377.08-.786-.164-1.078-.26-.45-.52-1.02-.664-1.457.037-.027.07-.063.096-.102l1.256.65.053-1.59-1.312.425c-.012-.02-.025-.035-.038-.05l.516-1.455-1.557-.044.462 1.427c-.04.025-.07.055-.1.087L6.27 3.302zM14.184 9.362c.106.587.124.854-.01 1.236-.19-.19-.36-.536-.498-1.06l-.58 1.856c.345-.23.608-.376.907-.38-.542 1.14-1.21 1.428-1.637 1.345-.523-.104-.765-.576-.673-.974.116-.56.7-.7.963-.045.528-1.042-.345-1.382-.91-1.08.874-.852.976-1.614.284-2.552-.974.736-.992 1.47-.566 2.51-.56-.656-1.45-.31-1.14.74.417-.632.953-.23.864.376-.073.525-.774.94-1.637.854-1.24-.117-1.305-.973-1.327-1.68.302-.055.85.234 1.313.896l.19-1.973c-.514.52-.978.624-1.49.633.176-.526.966-1.397.966-1.397l-2.467-.012s.784.874.956 1.405c-.513-.016-.974-.117-1.483-.647l.172 1.974c.467-.657 1.015-.94 1.32-.882-.032.707-.106 1.56-1.344 1.673-.864.075-1.557-.35-1.63-.874-.084-.603.46-1.003.87-.368.318-1.05-.567-1.4-1.135-.75.44-1.037.428-1.774-.546-2.518-.7.928-.6 1.696.266 2.56-.564-.312-1.44.017-.924 1.07.27-.655.85-.51.97.054.08.398-.16.866-.686.963-.43.08-1.094-.215-1.627-1.36.3.006.562.157.902.39l-.56-1.858c-.14.52-.32.864-.51 1.05-.128-.377-.11-.65.006-1.235L.57 9.717c.613.836 1.235 2.005 1.722 4.055 1.514-.253 4.096-.404 5.66-.4 1.562.01 4.143.185 5.65.454.51-2.048 1.142-3.208 1.762-4.038l-1.178-.426z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

1
icons/justgiving.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M15.81 6.616h-5.59l-3.266 3.28h4.485c-.59 1.316-1.902 2.04-3.432 2.04-2.072 0-3.758-1.78-3.758-3.848 0-2.075 1.686-3.808 3.758-3.808.755 0 1.458.196 2.04.58l3.027-3.04C11.693.687 9.927 0 8 0 3.58 0 0 3.578 0 8c0 4.415 3.58 8 8 8s8-3.41 8-7.826c0-.597-.068-.9-.19-1.558z" fill="#fff" fill-rule="nonzero"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 469 B

1
icons/mediatemple.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><g fill="#fff" fill-rule="nonzero"><path d="M3.226 6.763v.38h.023c.68-.41 1.38-.444 1.8-.444 1.135 0 1.52.323 1.668.442.26-.15.827-.443 1.79-.443 1.928 0 1.928.76 1.928 1.067V9.56H8.882V7.962c0-.33 0-.697-.827-.697-.408 0-.828.124-.975.307-.136.156-.193.297-.193.642V9.56H5.334V8.025c0-.474.01-.76-.804-.76-.41 0-.828.108-.987.27-.124.123-.204.253-.204.664v1.36H1.786V6.762h1.44zM14.18 7.382h-1.127v1.12c0 .396 0 .525.46.525.22 0 .413-.025.62-.064l.047-.006.146.57c-.545.1-1.14.11-1.31.11-.507 0-1.162-.074-1.404-.283-.206-.17-.23-.337-.23-.76V7.38h-.764v-.584h.763v-.553l1.673-.433v.986h1.127v.584zM1.027 11.14C.41 10.208 0 9.1 0 7.986 0 6.67.517 5.6 1.04 4.846h.624C1.2 5.873.886 6.746.886 8.014c0 1.455.516 2.577.75 3.085.007.007.022.033.022.04h-.63zM14.973 4.86C15.59 5.792 16 6.9 16 8.014c0 1.314-.517 2.387-1.04 3.14h-.624c.463-1.028.78-1.9.78-3.168 0-1.456-.518-2.576-.753-3.086-.007-.007-.02-.033-.02-.04h.63z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
icons/twitter.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.375-1.337.648-2.085.795-.598-.638-1.45-1.036-2.396-1.036-1.812 0-3.282 1.468-3.282 3.28 0 .258.03.51.085.75C5.152 5.39 2.733 4.084 1.114 2.1.83 2.583.67 3.147.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.416-.02-.617-.058.418 1.304 1.63 2.253 3.067 2.28-1.124.88-2.54 1.404-4.077 1.404-.265 0-.526-.015-.783-.045 1.453.93 3.178 1.474 5.032 1.474 6.038 0 9.34-5 9.34-9.338 0-.143-.004-.284-.01-.425.64-.463 1.198-1.04 1.638-1.7z" fill="#fff" fill-rule="nonzero"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 789 B

1
icons/vimeo.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M15.992 4.275c-.07 1.56-1.16 3.697-3.263 6.41-2.176 2.832-4.017 4.248-5.522 4.248-.933 0-1.722-.862-2.367-2.588L3.55 7.6c-.48-1.724-.993-2.587-1.542-2.587-.12 0-.538.252-1.255.755L0 4.796C.79 4.1 1.568 3.406 2.335 2.71c1.053-.912 1.844-1.39 2.37-1.44 1.246-.12 2.012.733 2.3 2.56.31 1.97.526 3.194.647 3.673.36 1.634.754 2.45 1.185 2.45.335 0 .838-.53 1.51-1.59.67-1.06 1.028-1.866 1.076-2.42.096-.915-.263-1.374-1.077-1.374-.383 0-.778.087-1.185.262.788-2.58 2.29-3.834 4.508-3.762 1.644.048 2.42 1.116 2.324 3.205z" fill="#fff" fill-rule="nonzero"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 716 B

1
icons/youtube.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M6.348 10.075V5.58l4.323 2.255-4.322 2.24zM15.84 4.8s-.156-1.102-.636-1.587c-.608-.637-1.29-.64-1.603-.678-2.238-.162-5.596-.162-5.596-.162h-.008s-3.358 0-5.597.162c-.314.038-.996.04-1.604.678C.316 3.698.16 4.8.16 4.8S0 6.097 0 7.39v1.215c0 1.294.16 2.59.16 2.59s.156 1.1.636 1.587c.608.637 1.408.617 1.764.684 1.28.123 5.44.16 5.44.16s3.362-.004 5.6-.166c.314-.038.996-.04 1.604-.678.48-.486.636-1.588.636-1.588S16 9.9 16 8.604V7.39c0-1.294-.16-2.59-.16-2.59" fill="#fff" fill-rule="nonzero"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 659 B

54
index.html
View File

@ -28,28 +28,41 @@
}
.navbar {
background: #EEE;
display: flex;
justify-content: space-between;
text-align: center;
}
.title {
font-size: 1rem;
font-weight: 400;
letter-spacing: 0.05rem;
margin: 0;
padding: 1.5rem;
padding: 1.5rem 1.5rem 0;
text-transform: uppercase;
}
.navbar__text {
font-size: 0.75rem;
letter-spacing: 0.05rem;
margin: 1.5rem;
margin: 0;
padding: 0 1.5rem 1.5rem;
text-transform: uppercase;
}
@media (min-width: 800px) {
.navbar {
display: flex;
justify-content: space-between;
text-align: left;
}
.title {
padding: 1.5rem;
}
.navbar__text {
padding: 1.5rem;
}
}
.hero {
font-size: 0.75rem;
letter-spacing: 0.05rem;
margin: 0 auto;
max-width: 21rem;
max-width: 18rem;
padding: 3rem;
text-align: center;
text-transform: uppercase;
@ -68,10 +81,20 @@
color: #FFF;
font-size: 0.75rem;
letter-spacing: 0.05rem;
padding: 0.75rem 1.5rem;
line-height: 1rem;
padding: 1.25rem 0.75rem 1.25rem;
text-transform: uppercase;
width: 100%;
}
.tiles li svg {
float: left;
height: 2rem;
margin: -0.5rem 0.75rem 0 0;
padding: 0.5rem 0.5rem 0;
}
.hex {
opacity: 0.5;
}
@media (min-width: 600px) { .tiles li { width: 50%; } }
@media (min-width: 800px) { .tiles li { width: 33.333%; } }
@media (min-width: 1000px) { .tiles li { width: 25% } }
@ -98,11 +121,24 @@
<p class="navbar__text">Share on <a href="#">Facebook</a> &amp; <a href="#">Twitter</a></p>
</header>
<main role="main">
<p class="hero">A set of SVG icons for popular brands. Download them from <a href="https://github.com/danleech/simple-icons">GitHub</a>.</p>
<ul class="tiles"><li class="tiles__item" style="background-color:#3B5998">Facebook<br>#3B5998</li><li class="tiles__item" style="background-color:#55ACEE">Twitter<br>#55ACEE</li><li class="tiles__item" style="background-color:#009CDB">Bath ASU<br>#009CDB</li><li class="tiles__item" style="background-color:#0B0C0C">GOV.UK<br>#0B0C0C</li><li class="tiles__item" style="background-color:#5AB552">Event Store<br>#5AB552</li><li class="tiles__item" style="background-color:#CD201F">YouTube<br>#CD201F</li><li class="tiles__item" style="background-color:#000000">MediaTemple<br>#000000</li> </ul>
<p class="hero">13 SVG icons for popular brands. Download them from <a href="https://github.com/danleech/simple-icons">GitHub</a>.</p>
<ul class="tiles"> <li style="background-color:#3B5998"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M15.117 0H.883C.395 0 0 .395 0 .883v14.234c0 .488.395.883.883.883h7.663V9.804H6.46V7.39h2.086V5.607c0-2.066 1.262-3.19 3.106-3.19.883 0 1.642.064 1.863.094v2.16h-1.28c-1 0-1.195.476-1.195 1.176v1.54h2.39l-.31 2.416h-2.08V16h4.077c.488 0 .883-.395.883-.883V.883C16 .395 15.605 0 15.117 0" fill="#fff" fill-rule="nonzero"/></svg>Facebook<br><span class="hex">#3B5998</span></li>
<li style="background-color:#4285F4"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8.16 6.857V9.6h4.537c-.183 1.177-1.37 3.45-4.537 3.45-2.73 0-4.96-2.26-4.96-5.05s2.23-5.05 4.96-5.05c1.554 0 2.594.66 3.19 1.233l2.17-2.092C12.126.79 10.32 0 8.16 0c-4.423 0-8 3.577-8 8s3.577 8 8 8c4.617 0 7.68-3.246 7.68-7.817 0-.526-.057-.926-.126-1.326H8.16z" fill="#fff"/></svg>Google<br><span class="hex">#4285F4</span></li>
<li style="background-color:#55ACEE"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.375-1.337.648-2.085.795-.598-.638-1.45-1.036-2.396-1.036-1.812 0-3.282 1.468-3.282 3.28 0 .258.03.51.085.75C5.152 5.39 2.733 4.084 1.114 2.1.83 2.583.67 3.147.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.416-.02-.617-.058.418 1.304 1.63 2.253 3.067 2.28-1.124.88-2.54 1.404-4.077 1.404-.265 0-.526-.015-.783-.045 1.453.93 3.178 1.474 5.032 1.474 6.038 0 9.34-5 9.34-9.338 0-.143-.004-.284-.01-.425.64-.463 1.198-1.04 1.638-1.7z" fill="#fff" fill-rule="nonzero"/></svg>Twitter<br><span class="hex">#55ACEE</span></li>
<li style="background-color:#005EA5"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><g fill="#fff" fill-rule="nonzero"><path d="M1.597 8.686c.174-.425-.026-.914-.453-1.09-.42-.173-.906.033-1.08.458-.176.423.026.907.445 1.08.427.177.912-.025 1.087-.448M2.173 6.528c.175-.423-.026-.912-.454-1.09-.42-.172-.908.035-1.082.457-.175.424.027.91.447 1.083.428.177.914-.026 1.088-.45M2.984 5.8c.427.175.912-.027 1.087-.45.175-.424-.025-.914-.45-1.09-.422-.173-.91.033-1.083.456-.175.425.027.91.447 1.083M5.085 6.507c.428.177.914-.025 1.088-.448.174-.424-.026-.915-.454-1.09-.42-.174-.907.033-1.082.457-.174.422.028.908.447 1.08M14.402 8.686c.183.423.666.623 1.09.443.42-.175.62-.66.445-1.082-.177-.426-.664-.626-1.085-.452-.424.174-.627.663-.45 1.09M14.908 6.977c.425-.173.625-.66.448-1.086-.18-.422-.664-.625-1.087-.447-.425.174-.622.66-.448 1.086.177.425.664.626 1.086.447M13.006 5.806c.42-.175.622-.662.448-1.087-.177-.427-.664-.627-1.088-.454-.422.18-.623.666-.446 1.09.175.422.662.623 1.086.45M10.734 6.38c.42-.175.62-.662.446-1.083-.177-.425-.665-.626-1.09-.453-.42.18-.62.667-.444 1.093.175.42.662.62 1.088.442M6.27 3.302l.062 1.596 1.165-.614c.024.026.053.052.08.072-.12.477-.413 1.273-.595 1.713-.223.54.033 1.16.573 1.383.54.222 1.162-.036 1.386-.577.156-.377.08-.786-.164-1.078-.26-.45-.52-1.02-.664-1.457.037-.027.07-.063.096-.102l1.256.65.053-1.59-1.312.425c-.012-.02-.025-.035-.038-.05l.516-1.455-1.557-.044.462 1.427c-.04.025-.07.055-.1.087L6.27 3.302zM14.184 9.362c.106.587.124.854-.01 1.236-.19-.19-.36-.536-.498-1.06l-.58 1.856c.345-.23.608-.376.907-.38-.542 1.14-1.21 1.428-1.637 1.345-.523-.104-.765-.576-.673-.974.116-.56.7-.7.963-.045.528-1.042-.345-1.382-.91-1.08.874-.852.976-1.614.284-2.552-.974.736-.992 1.47-.566 2.51-.56-.656-1.45-.31-1.14.74.417-.632.953-.23.864.376-.073.525-.774.94-1.637.854-1.24-.117-1.305-.973-1.327-1.68.302-.055.85.234 1.313.896l.19-1.973c-.514.52-.978.624-1.49.633.176-.526.966-1.397.966-1.397l-2.467-.012s.784.874.956 1.405c-.513-.016-.974-.117-1.483-.647l.172 1.974c.467-.657 1.015-.94 1.32-.882-.032.707-.106 1.56-1.344 1.673-.864.075-1.557-.35-1.63-.874-.084-.603.46-1.003.87-.368.318-1.05-.567-1.4-1.135-.75.44-1.037.428-1.774-.546-2.518-.7.928-.6 1.696.266 2.56-.564-.312-1.44.017-.924 1.07.27-.655.85-.51.97.054.08.398-.16.866-.686.963-.43.08-1.094-.215-1.627-1.36.3.006.562.157.902.39l-.56-1.858c-.14.52-.32.864-.51 1.05-.128-.377-.11-.65.006-1.235L.57 9.717c.613.836 1.235 2.005 1.722 4.055 1.514-.253 4.096-.404 5.66-.4 1.562.01 4.143.185 5.65.454.51-2.048 1.142-3.208 1.762-4.038l-1.178-.426z"/></g></svg>GOV.UK<br><span class="hex">#005EA5</span></li>
<li style="background-color:#1AB7EA"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M15.992 4.275c-.07 1.56-1.16 3.697-3.263 6.41-2.176 2.832-4.017 4.248-5.522 4.248-.933 0-1.722-.862-2.367-2.588L3.55 7.6c-.48-1.724-.993-2.587-1.542-2.587-.12 0-.538.252-1.255.755L0 4.796C.79 4.1 1.568 3.406 2.335 2.71c1.053-.912 1.844-1.39 2.37-1.44 1.246-.12 2.012.733 2.3 2.56.31 1.97.526 3.194.647 3.673.36 1.634.754 2.45 1.185 2.45.335 0 .838-.53 1.51-1.59.67-1.06 1.028-1.866 1.076-2.42.096-.915-.263-1.374-1.077-1.374-.383 0-.778.087-1.185.262.788-2.58 2.29-3.834 4.508-3.762 1.644.048 2.42 1.116 2.324 3.205z" fill="#fff" fill-rule="nonzero"/></svg>Vimeo<br><span class="hex">#1AB7EA</span></li>
<li style="background-color:#5AB552"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><g fill="#fff"><path d="M3.85 2.273c.286-.167.583-.315.893-.444.655-.273 1.33-.44 2.024-.508l.752.857-.345.88c-.678.136-1.316.382-1.914.74l-.13.08-.125-1.16L3.85 2.27z"/><path d="M3.523 2.48l1.194.46.125 1.14c-.646.475-1.15 1.082-1.51 1.82-.034.066-.064.132-.093.2l-.835-1.02-1.37.29c.34-.736.8-1.394 1.375-1.974.345-.347.715-.652 1.113-.917zm7.857 8.036c.13-.216.235-.435.32-.66l1.292 1.567 2.17-.468c-.124.342-.272.677-.442 1.005-.446.86-1.034 1.606-1.765 2.24-.742.642-1.58 1.11-2.515 1.406-.018.006-.037.01-.055.017l-1.608-1.36.42-1.85.033-.014c.92-.393 1.638-1.02 2.15-1.885z"/><path d="M14.097 3.2c.133.183.257.373.375.57.495.832.837 1.722 1.027 2.67.186.94.212 1.886.08 2.835-.067.456-.167.9-.303 1.335l-2.166.466-1.3-1.572c.157-.578.17-1.18.04-1.806-.15-.743-.473-1.377-.97-1.9l2.34-.28.876-2.318zM.885 5.72l1.4-.296.824 1.006c-.255.723-.318 1.474-.19 2.254.033.222.082.437.144.646l-1.478-.337-1.06 1.254c-.128-.555-.19-1.123-.19-1.703.002-.967.18-1.9.538-2.8l.01-.025z"/><path d="M3.18 9.677c.213.562.526 1.076.94 1.544.31.356.66.65 1.042.88l-1.467.84.08 1.91c-.484-.3-.93-.66-1.334-1.077-.68-.698-1.2-1.5-1.562-2.404-.1-.25-.184-.5-.256-.75l1.083-1.28 1.477.337z"/><path d="M5.482 12.276c.315.157.653.277 1.012.36.805.186 1.59.155 2.353-.094L8.43 14.38l1.592 1.347c-.796.208-1.61.297-2.44.267-.97-.03-1.902-.236-2.794-.616-.24-.102-.47-.215-.694-.34l-.08-1.922 1.468-.84zm8.39-9.37l-.875 2.325-2.41.286c-.07-.06-.142-.12-.218-.177C9.58 4.74 8.69 4.39 7.7 4.29c-.226-.02-.445-.028-.66-.02l.84-2.153L6.067.052C6.613.005 7.158-.01 7.7.006c.327.01.65.034.973.075.453.06.9.153 1.343.28.937.262 1.79.69 2.562 1.282.486.374.918.796 1.295 1.266z"/></g></svg>Event Store<br><span class="hex">#5AB552</span></li>
<li style="background-color:#6Fb536"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M6.348 10.075V5.58l4.323 2.255-4.322 2.24zM15.84 4.8s-.156-1.102-.636-1.587c-.608-.637-1.29-.64-1.603-.678-2.238-.162-5.596-.162-5.596-.162h-.008s-3.358 0-5.597.162c-.314.038-.996.04-1.604.678C.316 3.698.16 4.8.16 4.8S0 6.097 0 7.39v1.215c0 1.294.16 2.59.16 2.59s.156 1.1.636 1.587c.608.637 1.408.617 1.764.684 1.28.123 5.44.16 5.44.16s3.362-.004 5.6-.166c.314-.038.996-.04 1.604-.678.48-.486.636-1.588.636-1.588S16 9.9 16 8.604V7.39c0-1.294-.16-2.59-.16-2.59" fill="#fff" fill-rule="nonzero"/></svg>Evernote<br><span class="hex">#6Fb536</span></li>
<li style="background-color:#DD4B39"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><g fill="#fff"><path d="M5.09 7.273v1.745H7.98c-.116.75-.873 2.197-2.887 2.197-1.737 0-3.155-1.44-3.155-3.215S3.353 4.785 5.09 4.785c.99 0 1.652.422 2.03.786l1.382-1.33c-.887-.83-2.037-1.33-3.41-1.33C2.275 2.91 0 5.184 0 8s2.276 5.09 5.09 5.09c2.94 0 4.888-2.065 4.888-4.974 0-.334-.036-.59-.08-.843H5.09zM16 7.273h-1.455V5.818H13.09v1.455h-1.454v1.454h1.455v1.455h1.455V8.727H16"/></g></svg>Google+<br><span class="hex">#DD4B39</span></li>
<li style="background-color:#CD201F"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M6.348 10.075V5.58l4.323 2.255-4.322 2.24zM15.84 4.8s-.156-1.102-.636-1.587c-.608-.637-1.29-.64-1.603-.678-2.238-.162-5.596-.162-5.596-.162h-.008s-3.358 0-5.597.162c-.314.038-.996.04-1.604.678C.316 3.698.16 4.8.16 4.8S0 6.097 0 7.39v1.215c0 1.294.16 2.59.16 2.59s.156 1.1.636 1.587c.608.637 1.408.617 1.764.684 1.28.123 5.44.16 5.44.16s3.362-.004 5.6-.166c.314-.038.996-.04 1.604-.678.48-.486.636-1.588.636-1.588S16 9.9 16 8.604V7.39c0-1.294-.16-2.59-.16-2.59" fill="#fff" fill-rule="nonzero"/></svg>YouTube<br><span class="hex">#CD201F</span></li>
<li style="background-color:#EA4C89"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 16c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm6.747-6.905c-.234-.074-2.115-.635-4.257-.292.894 2.456 1.258 4.456 1.328 4.872 1.533-1.037 2.624-2.68 2.93-4.58zM10.67 14.3c-.102-.6-.5-2.688-1.46-5.18l-.044.014C5.312 10.477 3.93 13.15 3.806 13.4c1.158.905 2.614 1.444 4.194 1.444.947 0 1.85-.194 2.67-.543zm-7.747-1.72c.155-.266 2.03-3.37 5.555-4.51.09-.03.18-.056.27-.08-.173-.39-.36-.778-.555-1.16C4.78 7.85 1.47 7.807 1.17 7.8l-.003.208c0 1.755.665 3.358 1.756 4.57zM1.31 6.61c.307.005 3.122.017 6.318-.832-1.132-2.012-2.353-3.705-2.533-3.952-1.912.902-3.34 2.664-3.784 4.785zM6.4 1.368c.188.253 1.43 1.943 2.548 4 2.43-.91 3.46-2.293 3.582-2.468C11.323 1.827 9.736 1.176 8 1.176c-.55 0-1.087.066-1.6.19zm6.89 2.322c-.145.194-1.29 1.662-3.816 2.694.16.325.31.656.453.99.05.117.1.235.147.352 2.274-.286 4.533.172 4.758.22-.015-1.613-.59-3.094-1.543-4.257z" fill="#fff"/></svg>Dribbble<br><span class="hex">#EA4C89</span></li>
<li style="background-color:#AD29B6"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M15.81 6.616h-5.59l-3.266 3.28h4.485c-.59 1.316-1.902 2.04-3.432 2.04-2.072 0-3.758-1.78-3.758-3.848 0-2.075 1.686-3.808 3.758-3.808.755 0 1.458.196 2.04.58l3.027-3.04C11.693.687 9.927 0 8 0 3.58 0 0 3.578 0 8c0 4.415 3.58 8 8 8s8-3.41 8-7.826c0-.597-.068-.9-.19-1.558z" fill="#fff" fill-rule="nonzero"/></svg>JustGiving<br><span class="hex">#AD29B6</span></li>
<li style="background-color:#181717"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.083-.202-.358-1.015.077-2.117 0 0 .672-.215 2.2.82.638-.178 1.323-.266 2.003-.27.68.004 1.364.092 2.003.27 1.527-1.035 2.198-.82 2.198-.82.437 1.102.163 1.915.08 2.117.513.56.823 1.274.823 2.147 0 3.073-1.87 3.75-3.653 3.947.287.246.543.735.543 1.48 0 1.07-.01 1.933-.01 2.195 0 .215.144.463.55.385C13.71 14.53 16 11.534 16 8c0-4.418-3.582-8-8-8" fill="#fff"/></svg>GitHub<br><span class="hex">#181717</span></li>
<li style="background-color:#000000"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><g fill="#fff" fill-rule="nonzero"><path d="M3.226 6.763v.38h.023c.68-.41 1.38-.444 1.8-.444 1.135 0 1.52.323 1.668.442.26-.15.827-.443 1.79-.443 1.928 0 1.928.76 1.928 1.067V9.56H8.882V7.962c0-.33 0-.697-.827-.697-.408 0-.828.124-.975.307-.136.156-.193.297-.193.642V9.56H5.334V8.025c0-.474.01-.76-.804-.76-.41 0-.828.108-.987.27-.124.123-.204.253-.204.664v1.36H1.786V6.762h1.44zM14.18 7.382h-1.127v1.12c0 .396 0 .525.46.525.22 0 .413-.025.62-.064l.047-.006.146.57c-.545.1-1.14.11-1.31.11-.507 0-1.162-.074-1.404-.283-.206-.17-.23-.337-.23-.76V7.38h-.764v-.584h.763v-.553l1.673-.433v.986h1.127v.584zM1.027 11.14C.41 10.208 0 9.1 0 7.986 0 6.67.517 5.6 1.04 4.846h.624C1.2 5.873.886 6.746.886 8.014c0 1.455.516 2.577.75 3.085.007.007.022.033.022.04h-.63zM14.973 4.86C15.59 5.792 16 6.9 16 8.014c0 1.314-.517 2.387-1.04 3.14h-.624c.463-1.028.78-1.9.78-3.168 0-1.456-.518-2.576-.753-3.086-.007-.007-.02-.033-.02-.04h.63z"/></g></svg>MediaTemple<br><span class="hex">#000000</span></li>
</ul>
</main>
<footer class="footer" role="contentinfo">
<p>Distributed for free by Dan Leech under the Free Art License. Company logos in icons are copyright of their respective owners. <a href="#">Coffee fund donations</a> are greatly appreciated!</p>
<p>Distributed for free by <a href="https://twitter.com/bathtype">Dan Leech</a> under the Free Art License. Company logos in icons are copyright of their respective owners. <a href="#">“Buy me a coffee?”</a> — Dan Leech</p>
</footer>
</body>
</html>

53
simple-icons.json
View File

@ -1,32 +1,69 @@
{
"icons": [
{
"title": "Bath ASU",
"hex": "009CDB"
"title": "Dribbble",
"hex": "EA4C89",
"source": "https://dribbble.com/branding"
},
{
"title": "Event Store",
"hex": "5AB552"
"hex": "5AB552",
"source": "https://github.com/eventstore/brand"
},
{
"title": "Evernote",
"hex": "6Fb536",
"source": "https://evernote.com/media/pdf/evernote_quick_brand_guidelines.pdf"
},
{
"title": "Facebook",
"hex": "3B5998"
"hex": "3B5998",
"source": "https://www.facebookbrand.com"
},
{
"title": "GitHub",
"hex": "181717",
"source": "https://github.com/logos"
},
{
"title": "Google",
"hex": "4285F4"
"source": "https://developers.google.com/+/branding-guidelines?hl=en"
},
{
"title": "Google+",
"hex": "DD4B39",
"source": "https://developers.google.com/+/branding-guidelines?hl=en"
},
{
"title": "GOV.UK",
"hex": "0B0C0C"
"hex": "005EA5",
"source": "https://github.com/alphagov/design-assets/tree/master/Icons"
},
{
"title": "JustGiving",
"hex": "AD29B6",
"source": "https://justgiving.com"
},
{
"title": "MediaTemple",
"hex": "000000"
"hex": "000000",
"source": "https://mediatemple.net/company/about-us"
},
{
"title": "Twitter",
"hex": "55ACEE"
"hex": "55ACEE",
"source": "https://about.twitter.com/company/brand-assets"
},
{
"title": "Vimeo",
"hex": "1AB7EA",
"source": "https://vimeo.com/about/brand_guidelines"
},
{
"title": "YouTube",
"hex": "CD201F"
"hex": "CD201F",
"source": "https://www.youtube.com/yt/brand/en-GB/downloads.html"
}
]
}

2
src/footer.html
View File

@ -1,7 +1,7 @@
</ul>
</main>
<footer class="footer" role="contentinfo">
<p>Distributed for free by Dan Leech under the Free Art License. Company logos in icons are copyright of their respective owners. <a href="#">Coffee fund donations</a> are greatly appreciated!</p>
<p>Distributed for free by <a href="https://twitter.com/bathtype">Dan Leech</a> under the Free Art License. Company logos in icons are copyright of their respective owners. <a href="#">“Buy me a coffee?”</a> — Dan Leech</p>
</footer>
</body>
</html>

37
src/header.html
View File

@ -28,28 +28,41 @@
}
.navbar {
background: #EEE;
display: flex;
justify-content: space-between;
text-align: center;
}
.title {
font-size: 1rem;
font-weight: 400;
letter-spacing: 0.05rem;
margin: 0;
padding: 1.5rem;
padding: 1.5rem 1.5rem 0;
text-transform: uppercase;
}
.navbar__text {
font-size: 0.75rem;
letter-spacing: 0.05rem;
margin: 1.5rem;
margin: 0;
padding: 0 1.5rem 1.5rem;
text-transform: uppercase;
}
@media (min-width: 800px) {
.navbar {
display: flex;
justify-content: space-between;
text-align: left;
}
.title {
padding: 1.5rem;
}
.navbar__text {
padding: 1.5rem;
}
}
.hero {
font-size: 0.75rem;
letter-spacing: 0.05rem;
margin: 0 auto;
max-width: 21rem;
max-width: 18rem;
padding: 3rem;
text-align: center;
text-transform: uppercase;
@ -68,10 +81,20 @@
color: #FFF;
font-size: 0.75rem;
letter-spacing: 0.05rem;
padding: 0.75rem 1.5rem;
line-height: 1rem;
padding: 1.25rem 0.75rem 1.25rem;
text-transform: uppercase;
width: 100%;
}
.tiles li svg {
float: left;
height: 2rem;
margin: -0.5rem 0.75rem 0 0;
padding: 0.5rem 0.5rem 0;
}
.hex {
opacity: 0.5;
}
@media (min-width: 600px) { .tiles li { width: 50%; } }
@media (min-width: 800px) { .tiles li { width: 33.333%; } }
@media (min-width: 1000px) { .tiles li { width: 25% } }
@ -98,5 +121,3 @@
<p class="navbar__text">Share on <a href="#">Facebook</a> &amp; <a href="#">Twitter</a></p>
</header>
<main role="main">
<p class="hero">A set of SVG icons for popular brands. Download them from <a href="https://github.com/danleech/simple-icons">GitHub</a>.</p>
<ul class="tiles">