{{!< default}}
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}

{{!-- The big featured header, it uses blog cover image as a BG if available --}}
<header class="site-home-header">
    {{> header-background background=@site.cover_image}}
    {{!--Special header-image.hbs partial to generate the background image--}}
    <div class="inner">
        {{> "site-nav"}}
        <div class="site-header-content">
            <h1 class="site-title">
                {{#if @site.logo}}
                <img class="site-logo" src="{{img_url @site.logo size="l"}}" alt="{{@site.title}}" />
                {{else}}
                {{@site.title}}
                {{/if}}
            </h1>
            <h2 class="site-description">{{@site.description}}</h2>
            <div class="user-links">
                <ul id="link-list">
                    {{!-- <li class="link">
                        <a href="#"><i class="fa fa-gitea"></i></a>
                    </li>
                    <li class="link">
                        <a href="#"><i class="fa fa-github"></i></a>
                    </li> --}}
                </ul>
            </div>
        </div>
    </div>
    </div>
</header>


{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
{{#contentFor "scripts"}}
<script>
    $(function () {
        const linkList = document.getElementById('link-list');
        if (landing_page_links) {
            landing_page_links.forEach(link => {
                const a = document.createElement('a');
                a.href = link.href;
                a.target = '_blank';
                const icon = document.createElement('i');
                icon.className = `fa fa-fw fa-${link.service}`;
                a.appendChild(icon);
                const li = document.createElement('li');
                li.classList.add('link');
                li.appendChild(a);
                linkList.appendChild(li);
            });
        }

    });
</script>
{{/contentFor}}

<style>
    div.outer {
        height: calc(100vh - 109px);
    }

    .site-header-content {
        position: absolute;
        top: 50%;
        right: 50%;
        width: 100%;
        transform: translate(50%, -50%);
    }

    .user-links {
        margin-top: 25px;
    }

    .user-links ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .link {
        font-size: 3rem;
        margin-left: 5px;
        display: inline;
    }

    .user-links ul[:last-child] {
        margin-left: 0;
    }

    .user-links a {
        color: hsla(0, 0%, 100%, .75);
    }

    .site-logo {
        max-height: 128px;
    }

    .user-links a:hover {
        color: rgb(60, 178, 199);
    }

    .nav li a::before {
        background: rgb(60, 178, 199);
    }

    .nav li a:hover::before {
        animation: pulse 2s;
        animation-iteration-count: infinite;
    }

    @keyframes pulse {
        0% {
            opacity: .5;
        }

        50% {
            opacity: 1;
        }

        100% {
            opacity: .5;
        }
    }
</style>