Mibew/simple-icons
1
0
Fork 0
mirror of https://github.com/Mibew/simple-icons.git synced 2025-02-27 19:24:33 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fixes sorting algorithm

Browse Source
This commit is contained in:
Dan Leech 2017-04-25 13:29:06 +01:00
parent aa0216ce2c
commit 9f2dc52c2d
3 changed files with 114 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_data/simple-icons.json
View File

@ -217,7 +217,7 @@
}, },
{ {
"title": "CSS3", "title": "CSS3",
"hex": "1572b6", "hex": "1572B6",
"source": "http://www.w3.org/html/logo/" "source": "http://www.w3.org/html/logo/"
}, },
{ {
@ -622,7 +622,7 @@
}, },
{ {
"title": "JSFiddle", "title": "JSFiddle",
"hex": "4679a4", "hex": "4679A4",
"source": "http://doc.jsfiddle.net/meta/downloads.html" "source": "http://doc.jsfiddle.net/meta/downloads.html"
}, },
{ {

234
_layouts/default.html
View File

@ -1,146 +1,112 @@
{% assign sortableString = "" %} {% assign iconsUnsortedString = "" %}
{% assign sortableStringGreys = "" %} {% assign greyscaleIconsUnsortedString = "" %}
{% for icon in site.data.simple-icons.icons %} {% for icon in site.data.simple-icons.icons %}
{% assign title = icon.title %}
{% assign filename = icon.title | replace: "+", "plus" | replace: " ", "" | replace: ".", "" | replace: "-", "" | replace: "!", "" | replace: "’", "" | downcase %}
{% assign hex = icon.hex %} {% assign hex = icon.hex %}
{% assign hexR1 = hex | slice: 0, 1 %} {% assign hex = icon.hex %}
{% assign hexR2 = hex | slice: 1, 1 %}
{% assign hexG1 = hex | slice: 2, 1 %}
{% assign hexG2 = hex | slice: 3, 1 %}
{% assign hexB1 = hex | slice: 4, 1 %}
{% assign hexB2 = hex | slice: 5, 1 %}
{% capture hexString %}{{ hexR1 }},{{ hexR2 }},{{ hexG1 }},{{ hexG2 }},{{ hexB1 }},{{ hexB2 }}{% endcapture %} {% assign hexCharacter1 = hex | slice: 0, 1 %}
{% assign hexArray = hexString | split: "," %} {% assign hexCharacter2 = hex | slice: 1, 1 %}
{% assign hexCharacter3 = hex | slice: 2, 1 %}
{% assign decString = "" %} {% assign hexCharacter4 = hex | slice: 3, 1 %}
{% assign hexCharacter5 = hex | slice: 4, 1 %}
{% for hex in hexArray %} {% assign hexCharacter6 = hex | slice: 5, 1 %}
{% case hex %} {% capture hexCharacterString %}{{ hexCharacter1 }},{{ hexCharacter2 }},{{ hexCharacter3 }},{{ hexCharacter4 }},{{ hexCharacter5 }},{{ hexCharacter6 }}{% endcapture %}
{% when "0" %} {% assign hexCharacterArray = hexCharacterString | split: "," %}
{% assign decString = decString | append: "0" %} {% assign rgbString = "" %}
{% when "1" %} {% for hexCharacter in hexCharacterArray %}
{% assign decString = decString | append: "1" %} {% case hexCharacter %}
{% when "2" %}
{% assign decString = decString | append: "2" %}
{% when "3" %}
{% assign decString = decString | append: "3" %}
{% when "4" %}
{% assign decString = decString | append: "4" %}
{% when "5" %}
{% assign decString = decString | append: "5" %}
{% when "6" %}
{% assign decString = decString | append: "6" %}
{% when "7" %}
{% assign decString = decString | append: "7" %}
{% when "8" %}
{% assign decString = decString | append: "8" %}
{% when "9" %}
{% assign decString = decString | append: "9" %}
{% when "A" %} {% when "A" %}
{% assign decString = decString | append: "10" %} {% assign rgbString = rgbString | append: "10" %}
{% when "B" %} {% when "B" %}
{% assign decString = decString | append: "11" %} {% assign rgbString = rgbString | append: "11" %}
{% when "C" %} {% when "C" %}
{% assign decString = decString | append: "12" %} {% assign rgbString = rgbString | append: "12" %}
{% when "D" %} {% when "D" %}
{% assign decString = decString | append: "13" %} {% assign rgbString = rgbString | append: "13" %}
{% when "E" %} {% when "E" %}
{% assign decString = decString | append: "14" %} {% assign rgbString = rgbString | append: "14" %}
{% when "F" %} {% when "F" %}
{% assign decString = decString | append: "15" %} {% assign rgbString = rgbString | append: "15" %}
{% else %}
{% assign rgbString = rgbString | append: hexCharacter %}
{% endcase %} {% endcase %}
{% unless forloop.last %}{% assign decString = decString | append: "," %}{% endunless %} {% unless forloop.last %}{% assign rgbString = rgbString | append: "," %}{% endunless %}
{% endfor %} {% endfor %}
{% assign rgbArray = rgbString | split: "," %}
{% assign rgbRed = rgbArray[0] | times: 16 | plus: rgbArray[1] | divided_by: 255.0 | round: 2 %}
{% assign rgbGreen = rgbArray[2] | times: 16 | plus: rgbArray[3] | divided_by: 255.0 | round: 2 %}
{% assign rgbBlue = rgbArray[4] | times: 16 | plus: rgbArray[5] | divided_by: 255.0 | round: 2 %}
{% assign decArray = decString | split: "," %} {% assign rgbMax = 0.0 %}
{% if rgbRed > rgbMax %}
{% assign decR = decArray[0] | times: 16 | plus: decArray[1] | divided_by: 255.0 %} {% assign rgbMax = rgbRed %}
{% assign decG = decArray[2] | times: 16 | plus: decArray[3] | divided_by: 255.0 %} {% endif %}
{% assign decB = decArray[4] | times: 16 | plus: decArray[5] | divided_by: 255.0 %} {% if rgbGreen > rgbMax %}
{% assign rgbMax = rgbGreen %}
{% if decR <= decG and decR <= decB %} {% endif %}
{% assign decMin = decR %} {% if rgbBlue > rgbMax %}
{% assign rgbMax = rgbBlue %}
{% endif %} {% endif %}
{% if decG < decR and decG <= decB %} {% assign rgbMin = 1.0 %}
{% assign decMin = decG %} {% if rgbRed < rgbMin %}
{% assign rgbMin = rgbRed %}
{% endif %}
{% if rgbGreen < rgbMin %}
{% assign rgbMin = rgbGreen %}
{% endif %}
{% if rgbBlue < rgbMin %}
{% assign rgbMin = rgbBlue %}
{% endif %} {% endif %}
{% if decB < decR and decB < decG %} {% assign hslLuminance = rgbMax | plus: rgbMin | times: 50.0 %}
{% assign decMin = decB %}
{% endif %}
{% assign rgbDelta = rgbMax | minus: rgbMin %}
{% if rgbDelta == 0 %}
{% if decR >= decG and decR >= decB %} {% assign hslHue = 0 %}
{% assign decMax = decR %} {% assign hslSaturation = 0 %}
{% endif %}
{% if decG > decR and decG >= decB %}
{% assign decMax = decG %}
{% endif %}
{% if decB > decR and decB > decG %}
{% assign decMax = decB %}
{% endif %}
{% assign decDelta = decMax | minus: decMin | times: 1.0 %}
{% assign hslL = decMax | plus: decMin | times: 50.0 %}
{% if decMax == decMin %}
{% assign hslH = 360.0 %}
{% assign hslS = 0.0 %}
{% else %} {% else %}
{% if hslL < 50 %} {% assign hslHue = "Undefined" %}
{% assign hslS = decMax | plus: decMin | times: 0.01 %} {% assign hslSaturation = "Undefined" %}
{% assign hslS = decDelta | divided_by: hslS %}
{% if hslLuminance < 0.5 %}
{% assign rgbMaxPlusMin = rgbMax | plus: rgbMin %}
{% assign hslSaturation = 100 | times: rgbDelta | divided_by: rgbMaxPlusMin %}
{% else %} {% else %}
{% assign hslS = 2 | minus: decMax | minus: decMin | times: 1.0 %} {% assign rgbTwoMinusMaxMinusMin = 2 | minus: rgbMax | minus: rgbMin %}
{% assign hslS = 100 | times: decDelta | divided_by: hslS %} {% assign hslSaturation = 100 | times: rgbDelta | divided_by: rgbTwoMinusMaxMinusMin %}
{% endif %} {% endif %}
{% if decMax == decR %}
{% assign hslH = decG | minus: decB | divided_by: decDelta | times: 60.0 %} {% if rgbMax == rgbRed %}
{% if hslH < 0 %} {% assign hslHue = rgbGreen | minus: rgbBlue | divided_by: rgbDelta | times: 60.0 | modulo: 360.0 %}
{% assign hslH = hslH | plus: 360.0 %} {% elsif rgbMax == rgbGreen %}
{% endif %} {% assign hslHue = rgbBlue | minus: rgbRed | divided_by: rgbDelta | plus: 2.0 | times: 60.0 | modulo: 360.0 %}
{% else if decMax == decG %}
{% assign hslH = decB | minus: decR | divided_by: decDelta | plus: 2.0 | times: 60.0 %}
{% else %} {% else %}
{% assign hslH = decR | minus: decG | divided_by: decDelta | plus: 4.0 | times: 60.0 %} {% assign hslHue = rgbRed | minus: rgbGreen | divided_by: rgbDelta | plus: 4.0 | times: 60.0 | modulo: 360.0 %}
{% endif %} {% endif %}
{% assign hslHue = hslHue | plus: 90.0 | modulo: 360.0 %}
{% endif %} {% endif %}
{% assign hslH = hslH | plus: 90 | modulo: 360 %} {% if hslSaturation < 10 %}
{% assign hslLuminance = hslLuminance | round: 0 | prepend: "000" | slice: -3, 3 %}
{% assign padding = "" %} {% capture greyscaleIconsUnsortedString %}{{ greyscaleIconsUnsortedString }}{{ hslLuminance }},{{ filename }},{{ hslHue }},{{ hslSaturation }},{{ hex }},{{ title }}{% unless forloop.last %};{% endunless %}{% endcapture %}
{% if hslH < 100 %}
{% assign padding = "0" %}
{% endif %}
{% if hslH < 10 %}
{% assign padding = "00" %}
{% endif %}
{% if hslS < 25 %}
{% capture sortableStringGreys %}{{ sortableStringGreys }}|{{ hslL }}${{ padding }}{{ hslH }}${{ hslS }}${{ hex }}${{ icon.title }}{% endcapture %}
{% else %} {% else %}
{% capture sortableString %}{{ sortableString }}|{{ padding }}{{ hslH }}${{ hslS }}${{ hslL }}${{ hex }}${{ icon.title }}{% endcapture %} {% assign hslHue = hslHue | round: 0 | prepend: "000" | slice: -3, 3 %}
{% capture iconsUnsortedString %}{{ iconsUnsortedString }}{{ hslHue }},{{ hslSaturation }},{{ hslLuminance }},{{ filename }},{{ hex }},{{ title }}{% unless forloop.last %};{% endunless %}{% endcapture %}
{% endif %} {% endif %}
{% endfor %} {% endfor %}
{% assign sortableString = sortableString | replace_first: "|", "" %} {% assign iconsArray = iconsUnsortedString | split: ";" %}
{% assign sortableArray = sortableString | split: "|" %} {% assign iconsArray = iconsArray | sort %}
{% assign sortableArray = sortableArray | sort %} {% assign greyscaleIconsArray = greyscaleIconsUnsortedString | split: ";" %}
{% assign sortableArrayGreys = sortableStringGreys | split: "|" %} {% assign greyscaleIconsArray = greyscaleIconsArray | sort | reverse %}
{% assign sortableArrayGreys = sortableArrayGreys | sort | reverse %}
<!doctype html> <!doctype html>
<html lang="en-gb"> <html lang="en-gb">
@ -173,26 +139,28 @@
</span> </span>
</div> </div>
</li> </li>
{% for entry in sortableArray %} {% for icon in iconsArray %}
{% assign entryArray = entry | split: "$" %} {% assign iconArray = icon | split: "," %}
<li class="grid-item" style="background-color:#{{ entryArray[3] }}"> <li class="grid-item" style="background-color: #{{ iconArray[4] }}">
<a class="grid-item__link" href="#"> <a class="grid-item__link" href="#">
<img class="grid-item__image" src="http://placehold.it/24x24"> {% assign filePath = iconArray[3] | prepend: "icons/" | append: ".svg" %}
<h2 class="grid-item__title">{{ entryArray[1] }}</h2> {% include_relative {{ filePath }} %}
</a> <h2 class="grid-item__title">{{ iconArray[5] }}</h2>
<p class="grid-item__subtitle">#{{ entryArray[3] }}</p> </a>
</li> <p class="grid-item__subtitle">#{{ iconArray[4] }}</p>
{% endfor %} </li>
{% for entry in sortableArrayGreys %} {% endfor %}
{% assign entryArray = entry | split: "$" %} {% for icon in greyscaleIconsArray %}
<li class="grid-item" style="background-color:#{{ entryArray[3] }}"> {% assign iconArray = icon | split: "," %}
<a class="grid-item__link" href="#"> <li class="grid-item" style="background-color: #{{ iconArray[4] }}">
<img class="grid-item__image" src="http://placehold.it/24x24"> <a class="grid-item__link" href="#">
<h2 class="grid-item__title">{{ entryArray[4] }}</h2> {% assign filePath = iconArray[1] | prepend: "icons/" | append: ".svg" %}
</a> {% include_relative {{ filePath }} %}
<p class="grid-item__subtitle">#{{ entryArray[3] }}</p> <h2 class="grid-item__title">{{ iconArray[5] }}</h2>
</li> </a>
{% endfor %} <p class="grid-item__subtitle">#{{ iconArray[4] }}</p>
</li>
{% endfor %}
<!-- <li class="grid-item"> <!-- <li class="grid-item">
<a class="grid-item__link" href="#"> <a class="grid-item__link" href="#">
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name"> <img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">

14
_sass/_components.grid.scss
View File

@ -2,8 +2,8 @@
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(9rem,1fr)); grid-template-columns: repeat(auto-fill, minmax(9rem,1fr));
grid-auto-rows: 6rem; grid-auto-rows: 6rem;
grid-column-gap: 0.75rem; grid-column-gap: 0.375rem;
grid-row-gap: 0.75rem; grid-row-gap: 0.375rem;
grid-auto-flow: dense; grid-auto-flow: dense;
list-style: none; list-style: none;
margin: 1.5rem; margin: 1.5rem;
@ -16,6 +16,13 @@
.grid-item { .grid-item {
background-color: #757575; background-color: #757575;
text-align: center; text-align: center;
svg {
height: 1.5rem;
width: 1.5rem;
}
path, rect, circle {
fill: #FFF;
}
} }
.grid-item--ad { .grid-item--ad {
@ -39,7 +46,8 @@
} }
.grid-item__image { .grid-item__image {
height: 1.5rem;
width: 1.5rem;
} }
.grid-item__title { .grid-item__title {