Web/main/_includes/social.html

<span class="anchor" id="social"></span>
<div class="list-display rounded">
    <h1>Social</h1>
    <p>
        These are other websites where you can find me and the things I do, including the pages where I publish my code and games and where I sometimes stream and upload videos. This list also includes a lot of ways to reach me.
    </p>
    <div class="row">
        <div class="col">
            <div id="social-list">
                {% for item in site.data.socials %}
                <a class="btn btn-light social-button rounded-0" href="{{ item.link }}">
                    <img class="social-image social-image-light" src="res/social/{{ item.name | downcase }}.png" alt="Social icon">

                    {% if item.darkIcon %}
                    {% assign dark = item.name | downcase | append: "_dark" %}
                    {% else %}
                    {% assign dark = item.name | downcase %}
                    {% endif %}
                    <img class="social-image social-image-dark" src="res/social/{{ dark }}.png" alt="Social icon" hidden>

                    {{ item.name }}
                </a>
                {% endfor %}
            </div>

            Additionally, here are some miscellaneous platforms:
            <ul>
                <li>My Nintendo Switch friend code is <strong>SW-5281-8834-6801</strong></li>
                <li>If you want to play my Mario Maker 2 levels, my ID is <strong>8BH-566-4WF</strong></li>
                <li>If you play The Sims 4, you can check out my builds on the gallery by searching for <strong>Ellpeck</strong></li>
            </ul>
        </div>
        <div class="col-md-auto" id="discord-div">
            <iframe id="discord-widget" title="Ellpeck's Discord server" width="300" height="450" allowtransparency="true" frameborder="0"></iframe>
        </div>

        <script>
            if (dark) {
                $(".social-image-light").attr("hidden", true);
                $(".social-image-dark").attr("hidden", false);
                $("#social-list").find(".btn-light").each(function () {
                    let e = $(this);
                    e.removeClass("btn-light");
                    e.addClass("btn-dark");
                });
            }
            let theme = dark ? "dark" : "light";
            $("#discord-widget").attr("src", `https://discordapp.com/widget?id=181435613147430913&theme=${theme}`);
        </script>
    </div>
</div>