{{ partial "core/html-start.html" . }}

{{ partial "core/head.html" . }}

{{ $baseUrl := .Site.BaseURL }}
<body class="page-colors">
    <div class="parallax">
        {{ with .Site.Params.Header }}
            <!-- NOTE: Must be at root level for firefox to work (cannot wrap in header) -->
            <div class="parallax__group">
                <div class="parallax__layer parallax__layer--base">
                    {{ partial "homepage/header-logo.html" . }}
                </div>
                <div class="parallax__layer parallax__layer--back {{ if .image }}fullsize-background-image{{ end }}"
                    {{ if .image }}
                        style="background-image: url('{{ $baseUrl }}{{ .image }}'); {{ with .image_position }}background-position: {{ . }};{{ end }}"
                    {{ else }}
                        style="background-color: {{ .color }}"
                    {{ end }}
                ></div>
            </div>
        {{ end }}

        <div class="parallax__group parallax__group--auto-height">
            <div class="parallax__layer parallax__layer--base">
                <div class="row-colors center-align">
                    <h2 class="no-margin">
                        <ul class="horizontal no-bullets no-margin">
                            <li>{{ partial "homepage/svg-face.html" . }}</li>
                            <li>About Me</li>
                        </ul>
                    </h2>
                </div>

                <div class="flex-container">
                    {{ range .Site.Params.Cells.List }}
                        <!-- 
                             Note: The link and contents must be here since we 
                             cannot pass .Site.BaseURL as part of the context 
                        -->
                        <a href="{{ if .disable }}#!{{ else }}{{ $baseUrl }}{{ .link }}{{ end }}" class="flex-item">
                            <div class="cell
                                fill-container
                                no-padding
                                {{ if or .grayscale .disable }}grayscale{{ end }}
                                {{ if .disable }}no-change-on-hover{{ end }}
                                {{ if .image}}fullsize-background-image{{ end }}
                            " style="
                                {{ with .image }}
                                    background-image: url('{{ $baseUrl }}{{ . }}');
                                {{ else }}
                                    background-color: {{ .color }};
                                {{ end }}

                                {{ with .image_position }}
                                    background-position: {{ . }};
                                {{ end }}
                                height: {{ with .height }}
                                    {{ . }}
                                {{ else }}
                                    33.33vh
                                {{ end }};
                            ">
                                <!-- Show text permanently -->
                                {{ if eq .always_show_text true }}
                                    <div class="center-items center-text fill-container black-overlay">
                                        <h3 class="white-text">{{ .name }}</h3>
                                    </div>
                                {{ end }}

                                {{ if not (or (eq .no_highlight true) .disable) }}
                                    <div class="highlight-block">
                                        <h3 class="white-text">{{ .name }}</h3>
                                    </div>
                                {{ end }}
                            </div>
                        </a>
                    {{ end }}
                </div>

                {{ with .Site.Params.Footer }}
                    <div class="row-colors right-align">
                        <ul class="main-page-footer horizontal no-bullets no-margin">
                            {{ range .List }}
                                <li>
                                    <a href="{{ .icon_link }}">
                                        <i class="fa fa-{{ .icon_class }}"></i>
                                    </a>
                                </li>
                                <li>|</li>
                            {{ end }}
                            <li><a href="irc://chat.freenode.net/lupine"><i class="fa fa-hashtag"></i></a></li>
                            <li>{{ $.Site.Copyright | markdownify }}</li>
                        </ul>
                    </div>
                {{ end }}
            </div>
        </div>
    </div>

    {{ partial "core/js.html" . }}
</body>

{{ partial "core/html-end.html" . }}

