TinyLifeWeb/web/_includes/social.html

<div class="section">
    <h1 id="social">🔗 Social</h1>
    <p>
        If you want to stay up to date with Tiny Life's development, you should follow the game on <a href="https://twitter.com/TinyLifeGame">Twitter</a> or <a href="https://bsky.app/profile/tinylifegame.bsky.social">Bluesky</a> or subscribe to the mailing list below. You can also join the Discord to ask questions or share your gameplay!
    </p>

    <div class="row justify-content-center socials">
        <div class="col-auto" style="padding: 10px;">
            <a class="twitter-timeline" href="https://twitter.com/TinyLifeGame" width="350" height="600"></a>
            <script defer src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
            <span class="social-bottom">Or view on <a href="https://twitter.com/TinyLifeGame">Twitter</a> or <a href="https://bsky.app/profile/tinylifegame.bsky.social">Bluesky</a></span>
        </div>
        <div class="col-auto" style="padding: 10px;">
            <iframe id="discord-widget" title="Ellpeck Games Discord server" width="350" height="600" allowtransparency="true" frameborder="0" style="display: block;"></iframe>
            <span class="social-bottom">Or check out <a href="https://link.tinylifegame.com/discordweb">the landing page</a></span>
        </div>

        <script>
            let theme = darkTheme ? "dark" : "light";
            $("#discord-widget").attr("src", `https://discordapp.com/widget?id=181435613147430913&theme=${theme}`);
            $(".twitter-timeline").attr("data-theme", theme);
        </script>
    </div>

    <div id="subscribe" class="mailing-list bg-light">
        <h3>📫 Subscribe</h3>
        <p>You can also subscribe to the mailing list, which means you will be notified about future news, sneak peeks and devlog posts via email. We promise not to send too many emails, but you can always unsubscribe easily, too.</p>

        <form method="post" action="https://lists.ellpeck.de/subscription/form" class="listmonk-form text-center">
            <div>
                <input type="hidden" name="nonce">
                <p><input type="email" name="email" required placeholder="E-mail"></p>
                <p><input type="text" name="name" placeholder="Name (optional)"></p>

                <p>
                    <input id="16f4b" type="checkbox" name="l" checked value="16f4bf5a-7133-4255-958e-1d325fea6ba8">
                    <label for="16f4b">🏡 Tiny Life News</label>
                </p>

                <p><input type="submit" value="Subscribe"></p>
            </div>
        </form>

        <script>
            if (darkTheme) {
                let navbar = $("#subscribe");
                navbar.removeClass("bg-light");
                navbar.addClass("bg-dark");
            }
        </script>
    </div>
</div>