tcmulder / aquamin

Aquamin WordPress Theme
3 stars 1 forks source link

Consider adding font sizes to style guide. #62

Closed tcmulder closed 11 months ago

tcmulder commented 11 months ago

This could certainly be cleaned up, but here's the idea:

<script>
    document.querySelectorAll('h1, h2, h3, h4, h5, h6, p:not(:has(small)), small')?.forEach((el)=>{
        el.dataset.content = el.innerHTML;
    });
    function foobar() {
        document.querySelectorAll('h1, h2, h3, h4, h5, h6, p:not(:has(small)), small')?.forEach((el)=>{
            el.innerHTML = `${el.dataset.content} ${getComputedStyle(el).getPropertyValue('font-size')}`;
        });
    }
    foobar();
    window.addEventListener('resize', foobar);
    setInterval(foobar, 2000);
</script>

I could also insert e.g. a <span class="size-check"></span> to a bunch of things, and then use the JS to inject the font size of that thing's parent into the span: very flexible.