<script>
    const routes = [
        { name: '名人名言', path: '/makequote' },
        { name: 'Latex', path: '/latex' },
        { name: 'MarkDown', path: '/markdown' },
        { name: '提示', path: '/notice' }
    ]
</script>

<ul>
    {#each routes as route}
        <li><a href="{route.path}">{route.name}</a></li>
    {/each}
</ul>

<style>
    ul {
        list-style: none;
        padding: 0;
        display: flex;
        gap: 1rem;
        width: 100%;
        height: 100vh;
        justify-content: center;
        align-items: center;
    }

    a {
        text-decoration: none;
        color: #ffffff;
        display: inline-block;
        margin: 1em;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        padding: 0.5em 1em;
        border-radius: 0.2em;
        background-color: rgb(0, 170, 0);
        user-select: none;
        cursor:default;
        transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    }

    a:hover {
        transform: scale(1.1);
    }

    a:active {
        transform: scale(0.9);
    }
</style>