treehouse/template/components/_footer.hbs

<footer>
    <section class="left">
        <button id="open-command-line" title="open command line"></button>
        <script type="module">
            document.getElementById("open-command-line").addEventListener("click", (event) => {
                document.querySelector("th-command-line").show();
                event.stopPropagation();
            });
        </script>
    </section>
    
    <section class="right">
        <a href="{{ config.site }}/treehouse" id="footer-icon">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g id="all">
                    <mask id="mask">
                        <rect width="32" height="32" fill="black" />

                        <clipPath id="treehouse">
                            <path fill-rule="evenodd" clip-rule="evenodd" fill="white" transform="translate(0.5 12)"
                                d="M2.95266 3.95816C2.74074 1.83892 4.40494 0 6.53475 0C8.68036 0 10.3496 1.86501 10.1127 3.9975L10.0568 4.5L10.352 4.37352C11.7717 3.76506 13.316 4.92718 13.1244 6.45988L13.0568 7C14.1537 6.56127 15.3084 7.4907 15.1142 8.65595L15.0449 9.07153C14.7633 10.7614 13.3012 12 11.588 12H4.05892C2.0541 12 0.358966 10.5159 0.0940032 8.52866L0.0241185 8.00452C-0.210422 6.24546 1.30006 4.74903 3.05685 5L2.95266 3.95816ZM4.55685 7H2.55685V8H4.55685V7ZM4.55685 9H2.55685V10H4.55685V9ZM5.55685 7H7.55685V8H5.55685V7ZM7.55685 9H5.55685V10H7.55685V9ZM5.55685 13H7.55685L8.05685 16L9.55685 13H10.5569L9.49201 16.5495C9.21835 17.4617 9.39407 18.4496 9.96549 19.2115L10.5569 20H7.55685V18H6.55685V20H4.55685L5.35542 18.9352C5.80652 18.3338 6.01534 17.5848 5.94053 16.8367L5.55685 13Z" />
                        </clipPath>

                        <clipPath id="rectangleClip">
                            <rect id="rectangle1" width="16" height="16" />
                        </clipPath>

                        <clipPath id="rectangleTreehouseClip" clip-path="url(#treehouse)">
                            <rect id="rectangle2" width="16" height="16" />
                        </clipPath>

                        <g transform="translate(3 0)">
                            <rect width="32" height="32" fill="white" clip-path="url(#treehouse)" />
                            <rect width="32" height="32" fill="white" clip-path="url(#rectangleClip)" />
                            <rect width="32" height="32" fill="black" clip-path="url(#rectangleTreehouseClip)" />
                        </g>
                    </mask>

                    <rect width="32" height="32" fill="currentColor" mask="url(#mask)" />
                </g>

                <style>
                    #rectangle1,
                    #rectangle2 {
                        transform: translate(16px, 12px) rotate(15deg) translate(-8px, -8px);
                        rx: 0px;
                        transition: all 1s;
                    }

                    #all:hover #rectangle1,
                    #all:hover #rectangle2 {
                        transform: translate(22px, 24px) rotate(360deg) translate(-2px, -2px);
                        width: 4px;
                        height: 4px;
                        rx: 4px;
                    }
                </style>
            </svg>
        </a>
    </section>
</footer>