neovan-website/routes/above_the_fold.neovan

<@script>
    const rand = (min, max)=>{
        return (Math.random() * (max - min + 1)) + min;
    }

    const linkContainer = document.querySelector(".links");
    const links = document.querySelectorAll(".links a");

    for(let i = 0; i < links.length; i++){
        links[i].style.top = `${rand(100, linkContainer.offsetHeight-100)}px`;
        links[i].style.left = `${rand(100, linkContainer.offsetWidth-100)}px`;
        links[i].style.transform = `rotate(${rand(-55, 55)}deg)`;
    }
<@/script>

<@html>
    <div class="aboveTheFold">
        <div class="menu">
            <img class="menuLogo" src="/assets/logo.svg" alt="NeoVan Logo"> |
            <a href="#why">Why?</a> |
            <a href="https://git.leemorgan.dev/Lee/NeoVan">Docs</a> |
            <a href="/todo">TODO</a> |
        </div>

        <@ ./components/rotating_logo.neovan @>

        <h2>An anti-framework for building the front-end with plain HTML/CSS/JavaScript</h2>
    </div>
<@/html>

<@style>
    .aboveTheFold{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        height: 100vh;
        width: 100%;
        position: relative;
        overflow: hidden;
    }

    h2{
        text-align: center;
        margin: 15px;
    }

    .menu{
        display: flex;
        align-items: center;
        height: 55px;
        width: 100%;
        box-shadow: 0 4px 8px white;
        position: absolute;
        top: 0;
        left: 0;
        padding: 0 25px;
        box-sizing: border-box;
    }

    .menuLogo{
        max-height: 100%;
    }

    .menu a{
        font-size: 25px;
        margin: 0 15px;
        color: white;
        max-height: 100%;
        text-decoration: none;
    }
<@/style>