old.jeddunk.xyz/src/routes/index.svelte

<script>
    const feather = require('feather-icons');
    import Header from '../components/Header.svelte';
</script>

<style>
    .custom-link, .custom-link:hover {
        color:#EBEBEB;
        text-decoration: none;
        padding: 1em;
    }

    .container-extra {
        background-color: rgb(39, 56, 73);
        padding: 1em 2em;
    }

    .hvr-float {
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        -webkit-transition-duration: 0.1s;
        transition-duration: 0.1s;
        -webkit-transition-property: transform;
        transition-property: transform;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }

    .hvr-float:hover, .hvr-float:focus, .hvr-float:active {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
</style>

<svelte:head>
    <title>jeddunk.xyz</title>
</svelte:head>

<Header/>

<div class="container container-extra text-center">
        <div class="row">
            <div class="col">
                <a class="custom-link hvr-float" href="https://twitter.com/jeddunk" target="_blank" rel="noopener noreferrer">
                    {@html feather.icons['twitter'].toSvg({ class: 'custom-icon','stroke-width': 1, 'height': 48, 'width':  48 })}
                    <br>twitter</a>
            </div>
            <div class="col">
                <a class="custom-link hvr-float" href="https://www.youtube.com/channel/UCQ2prEm4bewrOP8gI6qyT2w" target="_blank" rel="noopener noreferrer">
                    {@html feather.icons['youtube'].toSvg({ class: 'custom-icon', 'stroke-width': 1, 'height': 48, 'width':  48 })}
                    <br>youtube</a>
            </div>
            <div class="col">
                <a class="custom-link hvr-float" href="https://twitch.tv/jeddunk" target="_blank" rel="noopener noreferrer">
                    {@html feather.icons['twitch'].toSvg({ class: 'custom-icon', 'stroke-width': 1, 'height': 48, 'width':  48 })}
                    <br>twitch</a>
            </div>
            <div class="col">
                <a class="custom-link hvr-float" href="https://git.jeddunk.xyz/explore/repos" target="_blank">
                    {@html feather.icons['git-branch'].toSvg({ class: 'custom-icon', 'stroke-width': 1, 'height': 48, 'width':  48 })}
                    <br>git</a>
            </div>
        </div>
</div>