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

Merge pull request #488 from ericcornelissen/develop

Browse Source 
Use dark color icons/text on light backgrounds
This commit is contained in:
Johan Fagerberg 2017-08-03 20:37:08 +02:00 committed by GitHub
commit 2e1b5064a2
1 changed files with 37 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
index.html
View File

@ -60,6 +60,29 @@
{% if rgbBlue < rgbMin %} {% if rgbBlue < rgbMin %}
{% assign rgbMin = rgbBlue %} {% assign rgbMin = rgbBlue %}
{% endif %} {% 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 hslLuminance = rgbMax | plus: rgbMin | times: 50.0 %}
{% assign rgbDelta = rgbMax | minus: rgbMin %} {% assign rgbDelta = rgbMax | minus: rgbMin %}
{% if rgbDelta == 0 %} {% if rgbDelta == 0 %}
@ -84,10 +107,10 @@
{% endif %} {% endif %}
{% if hslSaturation < 10 %} {% if hslSaturation < 10 %}
{% assign hslLuminance = hslLuminance | round: 0 | prepend: "000" | slice: -3, 3 %} {% 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 %} {% else %}
{% assign hslHue = hslHue | round: 0 | prepend: "000" | slice: -3, 3 %} {% 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 %} {% endif %}
{% endfor %} {% endfor %}
{% assign iconsArray = iconsUnsortedString | split: ";" %} {% assign iconsArray = iconsUnsortedString | split: ";" %}
@ -154,14 +177,11 @@
} }
svg { svg {
fill: currentColor;
height: 1.5rem; height: 1.5rem;
width: 1.5rem; width: 1.5rem;
} }
path, rect, circle {
fill: #FFF;
}
#carbonads { #carbonads {
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -340,6 +360,15 @@
background-color: #757575; background-color: #757575;
text-align: center; text-align: center;
} }
.grid-item--light {
color: #FFF;
}
.grid-item--dark {
color: #222;
}
.grid-item__link {
color: inherit;
}
@supports not (display: grid) { @supports not (display: grid) {
.grid-item { .grid-item {
border: 0.1875rem solid #FFF; border: 0.1875rem solid #FFF;
@ -366,7 +395,6 @@
} }
.grid-item__link { .grid-item__link {
color: #FFFFFF;
display: block; display: block;
padding: 1rem 1rem 0; padding: 1rem 1rem 0;
text-align: center; text-align: center;
@ -389,7 +417,6 @@
} }
.grid-item__subtitle { .grid-item__subtitle {
color: #FFFFFF;
font-size: 0.75rem; font-size: 0.75rem;
line-height: 1rem; line-height: 1rem;
margin: 0; margin: 0;
@ -461,7 +488,7 @@
</li> </li>
{% for icon in iconsArray %} {% for icon in iconsArray %}
{% assign iconArray = icon | split: "," %} {% assign iconArray = icon | split: "," %}
<li class="grid-item" style="background-color: #{{ iconArray[4] }}"> <li class="grid-item {{ iconArray[6] }}" style="background-color: #{{ iconArray[4] }}">
<a class="grid-item__link" href="/icons/{{ iconArray[3] }}.svg" download> <a class="grid-item__link" href="/icons/{{ iconArray[3] }}.svg" download>
{% assign filePath = iconArray[3] | prepend: "icons/" | append: ".svg" %} {% assign filePath = iconArray[3] | prepend: "icons/" | append: ".svg" %}
{% include_relative {{ filePath }} %} {% include_relative {{ filePath }} %}
@ -472,7 +499,7 @@
{% endfor %} {% endfor %}
{% for icon in greyscaleIconsArray %} {% for icon in greyscaleIconsArray %}
{% assign iconArray = icon | split: "," %} {% assign iconArray = icon | split: "," %}
<li class="grid-item" style="background-color: #{{ iconArray[4] }}"> <li class="grid-item {{ iconArray[6] }}" style="background-color: #{{ iconArray[4] }}">
<a class="grid-item__link" href="/icons/{{ iconArray[1] }}.svg" download> <a class="grid-item__link" href="/icons/{{ iconArray[1] }}.svg" download>
{% assign filePath = iconArray[1] | prepend: "icons/" | append: ".svg" %} {% assign filePath = iconArray[1] | prepend: "icons/" | append: ".svg" %}
{% include_relative {{ filePath }} %} {% include_relative {{ filePath }} %}