{{ define "head" }}
	{{ if .Site.Params.bgImg -}}
	<style>.bg-img {background-image: url('{{.Site.Params.bgImg}}');}</style>
	{{- else if .Site.Params.images -}}
		{{- range first 1 .Site.Params.images -}}
		<style>.bg-img {background-image: url('{{. | absURL}}');}</style>
		{{- end -}}
	{{- end -}}
{{ end }}

{{ define "main" }}
	{{ if (or .Site.Params.images .Site.Params.bgImg) }}
	<div class="bg-img"></div>
	{{ end }}
	<div id="spotlight" class="animated fadeIn">
		<div id="home-center">
			<h1 id="home-title">{{ .Site.Title }}</h1>
			<hr>
			{{ range .Site.Params.homeSubtitle }}
			<p id="home-subtitle">{{ . }}</p>
			{{ end }}
			{{ with .Site.Params.social }}
			<div id="home-social">
				{{ partialCached "social-icons.html" . }}
			</div>
			{{ end }}
			<hr>
			<div id="home-nav-header">
				All the fun lies right here
				<br>
				<img width="30" height="20" alt="Down arrow" src="{{"arrow.svg" | relURL}}">
			</div>
			<nav id="home-nav" class="site-nav">
				{{ partialCached "menu.html" . }}
			</nav>
		</div>
		<div id="home-footer">
			<p>
				&copy; {{ now.Format "2006" }} <a href="{{ .Site.BaseURL }}">{{ .Site.Author.name }}</a>{{ .Site.Params.footerCopyright | safeHTML }}
			</p>
		</div>
	</div>
{{ end }}