<template>
    <footer>
        <div class="mobile-middle">
            <a href="/#nav-bar"><img src="small-logo.png" alt="small logo" /></a>
        </div>
        <div class="container">
            <div class="left">
                Livonsaari & Palva & Velkuanmaa<br />
                Naantalin saaristo<br />
            </div>
            <div class="middle">
                <a href="/#nav-bar"><img src="small-logo.png" alt="small logo" /></a>
            </div>
            <div class="right">
                Katariina Vuorinen <br />
                <a class="generic-link" href="mailto:runosaari@gmail.com">runosaari@gmail.com</a>
            </div>
        </div>
        <div>
            <a class="generic-link" href="https://github.com/codevictory/runosaari.net">lähdekoodi</a>
            by codevictory
        </div>
    </footer>
</template>
<style lang="scss">
footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;

    .container {
        display: flex;
        justify-content: space-between;
        width: 50%;
        align-items: start;

        .middle img {
            max-width: 55px;
            margin-top: 10px;
        }

        .right {
            text-align: right;
        }
    }

    .mobile-middle {
        visibility: hidden;

        img {
            max-width: 55px;
            margin-top: 10px;
        }
    }
}

@media screen and (max-width: 600px) {
    footer {
        .container {
            width: 95% !important;
            flex-direction: column;
            align-items: center;
            margin-top: 20px;
            margin-bottom: 20px;

            div {
                text-align: center !important;
            }

            .middle {
                visibility: hidden;
                max-height: 15px;
            }
        }

        .mobile-middle {
            visibility: visible;
        }
    }
}
</style>