forked from simple-icons/simple-icons
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Dan Leech
committed
Oct 14, 2015
1 parent
09183fe
commit 463d502
Showing
6 changed files
with
262 additions
and
77 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| // Get JSON from source file | ||
| var source = require('./simple-icons.json'); | ||
|
|
||
| // Loop through icons | ||
| for (var i = 0; i < source.icons.length; i++) { | ||
|
|
||
| var hex = source.icons[i].hex; | ||
|
|
||
| // Add red, green and blue values to the JSON object | ||
| var red = parseInt(hex.substr(0,2), 16) / 255; | ||
| var green = parseInt(hex.substr(2,2), 16) / 255; | ||
| var blue = parseInt(hex.substr(4,2), 16) / 255; | ||
|
|
||
| // Add hue to the JSON object | ||
| var max = Math.max(red, green, blue); | ||
| var min = Math.min(red, green, blue); | ||
| var delta = max - min; | ||
| if (delta === 0) { | ||
| var hue = 0; | ||
| } else { | ||
| if (max === red) { | ||
| var hue = ((green - blue) / delta) * 60; | ||
| if (hue < 0) { | ||
| hue += 360; | ||
| } | ||
| } else if (max === green) { | ||
| var hue = (((blue - red) / delta) + 2) * 60; | ||
| } else { | ||
| var hue = (((red - green) / delta) + 4) * 60; | ||
| } | ||
| } | ||
| source.icons[i].hue = hue; | ||
| } | ||
|
|
||
| // Sort icons by hue | ||
| source.icons.sort(function(a, b) { | ||
| return parseFloat(b.hue) - parseFloat(a.hue); | ||
| }); | ||
|
|
||
| // Read header and footer content into variables | ||
| var fs = require('fs'); | ||
| function readFile(path, callback) { | ||
| try { | ||
| var filename = require.resolve(path); | ||
| fs.readFile(filename, 'utf8', callback); | ||
| } catch (e) { | ||
| callback(e); | ||
| } | ||
| } | ||
| 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 = ""; | ||
| 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>"; | ||
| } | ||
|
|
||
| // Put all content together and export to index.html | ||
| var htmlOutput = header + main + footer; | ||
| fs.writeFile("./index.html", htmlOutput, function(err) { | ||
| if(err) { | ||
| return console.log(err); | ||
| } | ||
| console.log("The file was saved!"); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| { | ||
| "icons": [ | ||
| { | ||
| "title": "Bath ASU", | ||
| "hex": "009CDB" | ||
| }, | ||
| { | ||
| "title": "Event Store", | ||
| "hex": "5AB552" | ||
| }, | ||
| { | ||
| "title": "Facebook", | ||
| "hex": "3B5998" | ||
| }, | ||
| { | ||
| "title": "GOV.UK", | ||
| "hex": "0B0C0C" | ||
| }, | ||
| { | ||
| "title": "MediaTemple", | ||
| "hex": "000000" | ||
| }, | ||
| { | ||
| "title": "Twitter", | ||
| "hex": "55ACEE" | ||
| }, | ||
| { | ||
| "title": "YouTube", | ||
| "hex": "CD201F" | ||
| } | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +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> | ||
| </footer> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>Simple Icons</title> | ||
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400"> | ||
| <style> | ||
| html { | ||
| font-size: 16px; | ||
| } | ||
| body { | ||
| color: #666; | ||
| font-family: Lato, sans-serif; | ||
| -webkit-font-feature-settings: "dlig", "kern", "liga"; | ||
| font-feature-settings: "dlig", "kern", "liga"; | ||
| -webkit-font-smoothing: antialiased; | ||
| font-weight: 400; | ||
| line-height: 1.5rem; | ||
| margin: 0; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| } | ||
| a { | ||
| color: #333; | ||
| } | ||
| a:focus, a:hover { | ||
| color: #999; | ||
| } | ||
| .navbar { | ||
| background: #EEE; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| } | ||
| .title { | ||
| font-size: 1rem; | ||
| font-weight: 400; | ||
| letter-spacing: 0.05rem; | ||
| margin: 0; | ||
| padding: 1.5rem; | ||
| text-transform: uppercase; | ||
| } | ||
| .navbar__text { | ||
| font-size: 0.75rem; | ||
| letter-spacing: 0.05rem; | ||
| margin: 1.5rem; | ||
| text-transform: uppercase; | ||
| } | ||
| .hero { | ||
| font-size: 0.75rem; | ||
| letter-spacing: 0.05rem; | ||
| margin: 0 auto; | ||
| max-width: 21rem; | ||
| padding: 3rem; | ||
| text-align: center; | ||
| text-transform: uppercase; | ||
| } | ||
| .tiles { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| list-style: none; | ||
| margin: -0.25rem 1.25rem; | ||
| padding: 0; | ||
| } | ||
| .tiles li { | ||
| box-sizing: border-box; | ||
| background: #333; | ||
| border: 0.25rem solid #FFF; | ||
| color: #FFF; | ||
| font-size: 0.75rem; | ||
| letter-spacing: 0.05rem; | ||
| padding: 0.75rem 1.5rem; | ||
| text-transform: uppercase; | ||
| width: 100%; | ||
| } | ||
| @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% } } | ||
| @media (min-width: 1200px) { .tiles li { width: 20% } } | ||
| @media (min-width: 1500px) { .tiles li { width: 16.666% } } | ||
| @media (min-width: 1800px) { .tiles li { width: 12.5% } } | ||
| .footer { | ||
| margin: 3rem; | ||
| } | ||
| .footer p { | ||
| font-size: 0.75rem; | ||
| letter-spacing: 0.05rem; | ||
| margin: 0 auto; | ||
| max-width: 31.5rem; | ||
| text-align: center; | ||
| text-transform: uppercase; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <header class="navbar" role="banner"> | ||
| <h1 class="title">Simple Icons</h1> | ||
| <p class="navbar__text">Share on <a href="#">Facebook</a> & <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"> |