diff --git a/index.html b/index.html index fda092f5..f5cf9e6e 100644 --- a/index.html +++ b/index.html @@ -36,11 +36,13 @@ {% endcase %} {% unless forloop.last %}{% assign rgbString = rgbString | append: "," %}{% endunless %} {% 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 rgbMax = 0.0 %} + {% if rgbRed > rgbMax %} {% assign rgbMax = rgbRed %} {% endif %} @@ -105,18 +107,17 @@ {% endif %} {% assign hslHue = hslHue | plus: 90.0 | modulo: 360.0 %} {% endif %} + {% if hslSaturation < 10 %} {% assign hslLuminance = hslLuminance | round: 0 | prepend: "000" | slice: -3, 3 %} - {% capture greyscaleIconsUnsortedString %}{{ greyscaleIconsUnsortedString }}{{ hslLuminance }},{{ filename }},{{ hslHue }},{{ hslSaturation }},{{ hex }},{{ title }},{{ class }}{% unless forloop.last %};{% endunless %}{% endcapture %} + {% capture greyscaleIconsUnsortedString %}{{ greyscaleIconsUnsortedString }}{{ hslLuminance }},{{ filename }},{{ hslHue }},{{ hslSaturation }},{{ hex }},{{ title }},{{ class }},{{ forloop.index }}{% 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 }},{{ class }}{% unless forloop.last %};{% endunless %}{% endcapture %} + {% capture iconsUnsortedString %}{{ iconsUnsortedString }}{{ hslHue }},{{ hslSaturation }},{{ hslLuminance }},{{ filename }},{{ hex }},{{ title }},{{ class }},{{ forloop.index }}{% unless forloop.last %};{% endunless %}{% endcapture %} {% endif %} {% endfor %} -{% assign iconsArray = iconsUnsortedString | split: ";" %} -{% assign iconsArray = iconsArray | sort %} -{% assign greyscaleIconsArray = greyscaleIconsUnsortedString | split: ";" %} -{% assign greyscaleIconsArray = greyscaleIconsArray | sort | reverse %} +{% assign iconsArray = iconsUnsortedString | split: ";" | sort %} +{% assign greyscaleIconsArray = greyscaleIconsUnsortedString | split: ";" | sort | reverse %} @@ -275,6 +276,8 @@ } .search { + display: flex; + align-items: center; margin: 1rem 1.5rem; text-align: center; } @@ -319,6 +322,43 @@ padding-right: 32px; } + .sort-btn { + cursor: pointer; + margin-left: .5rem; + opacity: .5; + } + .sort-btn.active { + opacity: 1; + } + .sort-btn:first-of-type { + margin-left: 1rem; + } + + .sort-btn:hover { + opacity: 1; + } + .sort-btn:hover path:first-of-type { + opacity: 0.8; + } + + #sort-color:hover path:nth-of-type(2) { + fill: #E57373; + } + #sort-color:hover path:nth-of-type(3) { + fill: #F44336; + } + #sort-color:hover path:nth-of-type(4) { + fill: #D32F2F; + } + #sort-color:hover path:nth-of-type(5) { + fill: #B71C1C; + } + + #sort-alphabetically:hover path:nth-of-type(2), + #sort-alphabetically:hover path:nth-of-type(3) { + opacity: 1; + } + .grid { display: flex; flex-wrap: wrap; @@ -491,6 +531,9 @@
×
+ + Sort by color + Sort alphabetically