script.html

<!-- loads fontawesome, so that I can create a fontawesome button (see below) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script>

// the following function adds padding to all h2 elements, so that I can 
// easily present the content of the page in a more readable way
function presenter(){
    var paragraphs = document.querySelectorAll("h2", "h3");
    paragraphs.forEach(function (paragraph) {
        paragraph.classList.toggle("padding-top-500");
    });
}

// once the page is loaded, the button is injected into the sidebar. This button
// calls the presenter function (see above)
window.onload = function() {
    // create the button (similar to the buttons already availables)
    const linkElement = document.createElement('a');

    linkElement.classList.add('quarto-navigation-tool');
    linkElement.classList.add('px-1');
    linkElement.innerHTML = '<i class="fa-solid fa-person-chalkboard"></i>';
    linkElement.href = '#';
    linkElement.addEventListener('click', function(event) {
        event.preventDefault(); // Prevent the default link behavior
        presenter();
    });

    // Find the target element by its class name
    const sidebar_tools = document.querySelector(".sidebar-tools-main")
    sidebar_tools.appendChild(linkElement);
};

</script>