diff --git a/.npmignore b/.npmignore new file mode 100644 index 00000000..6be3879e --- /dev/null +++ b/.npmignore @@ -0,0 +1,8 @@ +# Ignore all files in root +/* +# Except the ones we want to publish +!_data/ +!icons/ +!package.json +!README.md +!LICENSE.md \ No newline at end of file diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 2030f178..ed737ebd 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -13,7 +13,7 @@ This repository welcomes contributions and corrections. Before submitting a pull ## JSON data for simpleicons.org In addition to following the guidelines for SVGs, list new icons in the `_data/simple-icons.json` file. Each icon in the array has three required values: - + - The `title` of the new SVG. - A `hex` color value that matches the brand or logo's main accent color. (Without the `#` pound symbol.) - The `source` URL of the logo being used. @@ -50,3 +50,11 @@ Here is the un-minified contents of the GitHub icon, for reference: ``` +* * * + +# Building locally + +- Make sure you have [Ruby](https://www.ruby-lang.org/en/downloads/) installed. +- Make sure you have [Jekyll](https://jekyllrb.com/) installed (using `$ gem install jekyll bundler`). +- Build and run the website locally using `$ jekyll serve`. +- Connect to the website in your browser via the "Server address" provided by the output of this command, e.g. `http://localhost:4000/` diff --git a/icons/codeigniter.svg b/icons/codeigniter.svg index 91a356a7..fbbbb1f5 100644 --- a/icons/codeigniter.svg +++ b/icons/codeigniter.svg @@ -1 +1 @@ -Artboard \ No newline at end of file +Artboard \ No newline at end of file diff --git a/icons/discourse.svg b/icons/discourse.svg index 14ba1a52..888de16c 100644 --- a/icons/discourse.svg +++ b/icons/discourse.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/icons/ethereum.svg b/icons/ethereum.svg index 8d800255..5f8b5ef6 100644 --- a/icons/ethereum.svg +++ b/icons/ethereum.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/icons/instapaper.svg b/icons/instapaper.svg index 17dc9162..d8481295 100644 --- a/icons/instapaper.svg +++ b/icons/instapaper.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/icons/mozilla.svg b/icons/mozilla.svg index b27a9299..d3e97153 100644 --- a/icons/mozilla.svg +++ b/icons/mozilla.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/icons/nintendoswitch.svg b/icons/nintendoswitch.svg index 7329734e..4c41f963 100644 --- a/icons/nintendoswitch.svg +++ b/icons/nintendoswitch.svg @@ -1 +1 @@ -Shape \ No newline at end of file +Shape \ No newline at end of file diff --git a/icons/nodejs.svg b/icons/nodejs.svg index 18f55ad7..303cc1fb 100644 --- a/icons/nodejs.svg +++ b/icons/nodejs.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/icons/pinboard.svg b/icons/pinboard.svg index be02c803..c6aa782a 100644 --- a/icons/pinboard.svg +++ b/icons/pinboard.svg @@ -1 +1 @@ -Shape \ No newline at end of file +Shape \ No newline at end of file diff --git a/icons/sentiayoga.svg b/icons/sentiayoga.svg index 2cd94e41..5ce59bfb 100644 --- a/icons/sentiayoga.svg +++ b/icons/sentiayoga.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/icons/zendesk.svg b/icons/zendesk.svg index bab8caba..88f29e27 100644 --- a/icons/zendesk.svg +++ b/icons/zendesk.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/icons/zerply.svg b/icons/zerply.svg index 39482dbc..9fe755df 100644 --- a/icons/zerply.svg +++ b/icons/zerply.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/index.html b/index.html index a933acbc..520dd63e 100644 --- a/index.html +++ b/index.html @@ -60,6 +60,29 @@ {% if rgbBlue < rgbMin %} {% assign rgbMin = rgbBlue %} {% endif %} + + {% if rgbRed <= 0.03928 %} + {% assign lRed = rgbRed | divided_by: 12.92 | times: 0.2126 %} + {% else %} + {% assign lRed = rgbRed | times: 0.3053 | plus: 0.6822 | times: rgbRed | plus: 0.0125 | times: rgbRed | times: 0.2126 %} + {% endif %} + {% if rgbGreen <= 0.03928 %} + {% assign lGreen = rgbGreen | divided_by: 12.92 | times: 0.7152 %} + {% else %} + {% assign lGreen = rgbGreen | times: 0.3053 | plus: 0.6822 | times: rgbGreen | plus: 0.0125 | times: rgbGreen | times: 0.7152 %} + {% endif %} + {% if rgbBlue <= 0.03928 %} + {% assign lBlue = rgbBlue | divided_by: 12.92 | times: 0.0722 %} + {% else %} + {% assign lBlue = rgbBlue | times: 0.3053 | plus: 0.6822 | times: rgbBlue | plus: 0.0125 | times: rgbBlue | times: 0.0722 %} + {% endif %} + {% assign luminance = lRed | plus: lGreen | plus: lBlue %} + {% if luminance >= 0.83 %} + {% assign class = "grid-item--dark" %} + {% else %} + {% assign class = "grid-item--light" %} + {% endif %} + {% assign hslLuminance = rgbMax | plus: rgbMin | times: 50.0 %} {% assign rgbDelta = rgbMax | minus: rgbMin %} {% if rgbDelta == 0 %} @@ -84,10 +107,10 @@ {% endif %} {% if hslSaturation < 10 %} {% assign hslLuminance = hslLuminance | round: 0 | prepend: "000" | slice: -3, 3 %} - {% capture greyscaleIconsUnsortedString %}{{ greyscaleIconsUnsortedString }}{{ hslLuminance }},{{ filename }},{{ hslHue }},{{ hslSaturation }},{{ hex }},{{ title }}{% unless forloop.last %};{% endunless %}{% endcapture %} + {% capture greyscaleIconsUnsortedString %}{{ greyscaleIconsUnsortedString }}{{ hslLuminance }},{{ filename }},{{ hslHue }},{{ hslSaturation }},{{ hex }},{{ title }},{{ class }}{% unless forloop.last %};{% endunless %}{% endcapture %} {% else %} {% assign hslHue = hslHue | round: 0 | prepend: "000" | slice: -3, 3 %} - {% capture iconsUnsortedString %}{{ iconsUnsortedString }}{{ hslHue }},{{ hslSaturation }},{{ hslLuminance }},{{ filename }},{{ hex }},{{ title }}{% unless forloop.last %};{% endunless %}{% endcapture %} + {% capture iconsUnsortedString %}{{ iconsUnsortedString }}{{ hslHue }},{{ hslSaturation }},{{ hslLuminance }},{{ filename }},{{ hex }},{{ title }},{{ class }}{% unless forloop.last %};{% endunless %}{% endcapture %} {% endif %} {% endfor %} {% assign iconsArray = iconsUnsortedString | split: ";" %} @@ -154,14 +177,11 @@ } svg { + fill: currentColor; height: 1.5rem; width: 1.5rem; } - path, rect, circle { - fill: #FFF; - } - #carbonads { height: 100%; width: 100%; @@ -340,6 +360,15 @@ background-color: #757575; text-align: center; } + .grid-item--light { + color: #FFF; + } + .grid-item--dark { + color: #222; + } + .grid-item__link { + color: inherit; + } @supports not (display: grid) { .grid-item { border: 0.1875rem solid #FFF; @@ -366,7 +395,6 @@ } .grid-item__link { - color: #FFFFFF; display: block; padding: 1rem 1rem 0; text-align: center; @@ -389,7 +417,6 @@ } .grid-item__subtitle { - color: #FFFFFF; font-size: 0.75rem; line-height: 1rem; margin: 0; @@ -461,7 +488,7 @@ {% for icon in iconsArray %} {% assign iconArray = icon | split: "," %} -
  • +
  • {% assign filePath = iconArray[3] | prepend: "icons/" | append: ".svg" %} {% include_relative {{ filePath }} %} @@ -472,7 +499,7 @@ {% endfor %} {% for icon in greyscaleIconsArray %} {% assign iconArray = icon | split: "," %} -
  • +
  • {% assign filePath = iconArray[1] | prepend: "icons/" | append: ".svg" %} {% include_relative {{ filePath }} %} diff --git a/package.json b/package.json new file mode 100644 index 00000000..38d357d8 --- /dev/null +++ b/package.json @@ -0,0 +1,14 @@ +{ + "name": "simple-icons", + "version": "1.0.0", + "description": "SVG icons for popular brands https://simpleicons.org", + "homepage": "https://www.simpleicons.org", + "keywords": [ + "svg", + "icons" + ], + "main": "_data/simple-icons.json", + "repository": "git@github.com:danleech/simple-icons.git", + "author": "Dan Leech", + "license": "CCO" +}