simple-icons/_layouts/default.html

{% assign iconsUnsortedString = "" %}
{% assign greyscaleIconsUnsortedString = "" %}

{% 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 hexCharacter1 = hex | slice: 0, 1 %}
    {% assign hexCharacter2 = hex | slice: 1, 1 %}
    {% assign hexCharacter3 = hex | slice: 2, 1 %}
    {% assign hexCharacter4 = hex | slice: 3, 1 %}
    {% assign hexCharacter5 = hex | slice: 4, 1 %}
    {% assign hexCharacter6 = hex | slice: 5, 1 %}
    {% capture hexCharacterString %}{{ hexCharacter1 }},{{ hexCharacter2 }},{{ hexCharacter3 }},{{ hexCharacter4 }},{{ hexCharacter5 }},{{ hexCharacter6 }}{% endcapture %}
    {% assign hexCharacterArray = hexCharacterString | split: "," %}
    {% assign rgbString = "" %}
    {% for hexCharacter in hexCharacterArray %}
        {% case hexCharacter %}
            {% when "A" %}
                {% assign rgbString = rgbString | append: "10" %}
            {% when "B" %}
                {% assign rgbString = rgbString | append: "11" %}
            {% when "C" %}
                {% assign rgbString = rgbString | append: "12" %}
            {% when "D" %}
                {% assign rgbString = rgbString | append: "13" %}
            {% when "E" %}
                {% assign rgbString = rgbString | append: "14" %}
            {% when "F" %}
                {% assign rgbString = rgbString | append: "15" %}
            {% else %}
                {% assign rgbString = rgbString | append: hexCharacter %}
        {% 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 %}
    {% if rgbGreen > rgbMax %}
        {% assign rgbMax = rgbGreen %}
    {% endif %}
    {% if rgbBlue > rgbMax %}
        {% assign rgbMax = rgbBlue %}
    {% endif %}

    {% assign rgbMin = 1.0 %}
    {% if rgbRed < rgbMin %}
        {% assign rgbMin = rgbRed %}
    {% endif %}
    {% if rgbGreen < rgbMin %}
        {% assign rgbMin = rgbGreen %}
    {% endif %}
    {% if rgbBlue < rgbMin %}
        {% assign rgbMin = rgbBlue %}
    {% endif %}

    {% assign hslLuminance = rgbMax | plus: rgbMin | times: 50.0 %}

    {% assign rgbDelta = rgbMax | minus: rgbMin %}
    {% if rgbDelta == 0 %}
        {% assign hslHue = 0 %}
        {% assign hslSaturation = 0 %}
    {% else %}
        {% assign hslHue = "Undefined" %}
        {% assign hslSaturation = "Undefined" %}

        {% if hslLuminance < 0.5 %}
            {% assign rgbMaxPlusMin = rgbMax | plus: rgbMin %}
            {% assign hslSaturation = 100 | times: rgbDelta | divided_by: rgbMaxPlusMin %}
        {% else %}
            {% assign rgbTwoMinusMaxMinusMin = 2 | minus: rgbMax | minus: rgbMin %}
            {% assign hslSaturation = 100 | times: rgbDelta | divided_by: rgbTwoMinusMaxMinusMin %}
        {% endif %}

        {% if rgbMax == rgbRed %}
            {% assign hslHue = rgbGreen | minus: rgbBlue | divided_by: rgbDelta | times: 60.0 | modulo: 360.0 %}
        {% elsif rgbMax == rgbGreen %}
            {% assign hslHue = rgbBlue | minus: rgbRed | divided_by: rgbDelta | plus: 2.0 | times: 60.0 | modulo: 360.0 %}
        {% else %}
            {% assign hslHue = rgbRed | minus: rgbGreen | divided_by: rgbDelta | plus: 4.0 | times: 60.0 | modulo: 360.0 %}
        {% 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 }}{% 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 %}
    {% endif %}
{% endfor %}

{% assign iconsArray = iconsUnsortedString | split: ";" %}
{% assign iconsArray = iconsArray | sort %}
{% assign greyscaleIconsArray = greyscaleIconsUnsortedString | split: ";" %}
{% assign greyscaleIconsArray = greyscaleIconsArray | sort | reverse %}

<!doctype html>
<html lang="en-gb">
<head>
    <meta charset="utf-8">
    <meta content="initial-scale=1, width=device-width" name="viewport">
    <link href="/css/styles.css" rel="stylesheet">
</head>

<body>
    <header class="navbar" role="banner">
        <ul class="navbar__nav" role="navigation">
            <li class="navbar__nav-item navbar__nav-item--home"><a href="/">Simple&nbsp;Icons</a></li>
            <li class="navbar__nav-item"><a href="https://github.com/danleech/simple-icons/blob/master/README.md">About</a></li>
            <li class="navbar__nav-item"><a href="https://github.com/danleech/simple-icons">GitHub</a></li>
        </ul>
    </header>
    <main role="main">
        <ul class="grid">
            <li class="grid-item grid-item--ad">
                <div id="carbonads">
                    <span>
                        <span class="carbon-wrap">
                            <a class="carbon-img" href="#">
                                <img src="http://placehold.it/130x100&text=Ad">
                            </a>
                            <a class="carbon-text" href="#">Create your website with a beautiful Squarespace template. Start a free trial.</a>
                        </span>
                        <a class="carbon-poweredby" href="#">ads via Carbon</a>
                    </span>
                </div>
            </li>
            {% for icon in iconsArray %}
                {% assign iconArray = icon | split: "," %}
                <li class="grid-item" style="background-color: #{{ iconArray[4] }}">
                    <a class="grid-item__link" href="#">
                        {% assign filePath = iconArray[3] | prepend: "icons/" | append: ".svg" %}
                        {% include_relative {{ filePath }} %}
                        <h2 class="grid-item__title">{{ iconArray[5] }}</h2>
                    </a>
                    <p class="grid-item__subtitle">#{{ iconArray[4] }}</p>
                </li>
            {% endfor %}
            {% for icon in greyscaleIconsArray %}
                {% assign iconArray = icon | split: "," %}
                <li class="grid-item" style="background-color: #{{ iconArray[4] }}">
                    <a class="grid-item__link" href="#">
                        {% assign filePath = iconArray[1] | prepend: "icons/" | append: ".svg" %}
                        {% include_relative {{ filePath }} %}
                        <h2 class="grid-item__title">{{ iconArray[5] }}</h2>
                    </a>
                    <p class="grid-item__subtitle">#{{ iconArray[4] }}</p>
                </li>
            {% endfor %}
            <!-- <li class="grid-item">
                <a class="grid-item__link" href="#">
                    <img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
                    <h2 class="grid-item__title">Icon name</h2>
                </a>
                <p class="grid-item__subtitle">#AABBCC</p>
            </li> -->
        </ul>
    </main>
    <footer class="footer" role="contentinfo">
        <p>A <a href="https://github.com/danleech/simple-icons/blob/master/LICENSE.md">CC0</a> project maintained by <a href="https://twitter.com/bathtype">Dan&nbsp;Leech</a>.</p>
        <p>Use <a href="https://github.com/danleech/simple-icons">GitHub</a> for requests, corrections and contributions.</p>
    </footer>
</body>
</html>