<script>
    import Banner from "$lib/Banner.svelte";

    let services = [
        {
            name: "Gitea",
            link: "https://git.quartznet.info",
            description: "Software development version control",
        },
    ];
</script>

<svelte:head>
    <title>Quartznet - Admin</title>
</svelte:head>

<Banner title="Admin" />

<main class="container">
    <section>
        <h2>Services</h2>
        <ul>
            {#each services as service}
                <li>
                    <a href={service.link}>{service.name}</a>
                </li>
            {/each}
        </ul>
    </section>
</main>

<style>
    section {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }

    ul {
        padding: 0 !important;
    }

    li {
        display: flex;
        padding-bottom: 10px;
        margin-bottom: 5px;
    }

    li a {
        display: flex;
        font-weight: bold;
        font-size: 1.25rem;
        border-bottom: 2px solid transparent;
    }

    li a:hover {
        border-bottom: 2px solid white;
    }

    h2 {
        line-height: 1.4;
        margin-bottom: 20px;
    }
</style>
