Remove inline style and script of bg-img

* See #22

3 files changed, 34 insertions, 14 deletions

diff --git a/layouts/index.html b/layouts/index.html
index 0535cbb..7927023 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,10 +1,20 @@
+{{ define "head" }}
+	<style>
+	.bg-img {background-image: url('
+	{{- if .Site.Params.bgImg -}}
+		{{.Site.Params.bgImg | absURL}}
+	{{- else if .Site.Params.images -}}
+		{{- range first 1 .Site.Params.images -}}
+		{{. | absURL}}
+		{{- end -}}
+	{{- end -}}
+	');}
+	</style>
+{{ end }}
+
 {{ define "main" }}
-	{{- if .Site.Params.bgImg }}
-	<div class="bg-img" style="background-image: url({{.Site.Params.bgImg}});"></div>
-	{{- else if .Site.Params.images }}
-	{{- range first 1 .Site.Params.images }}
-	<div class="bg-img" style="background-image: url({{.}});"></div>
-	{{- end }}
+	{{- if (or .Site.Params.images .Site.Params.bgImg) }}
+	<div class="bg-img"></div>
 	{{- end }}
 	<div id="spotlight" class="animated fadeIn">
 		<div id="home-center">
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 47b04b7..f643337 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -12,10 +12,10 @@
 			</div>
 			<div class="hdr-right hdr-icons">
 				{{ if (or .Params.images .Params.featuredImg) -}}
-				<button class="hdr-btn" onclick="showFeaturedImg()" title="{{i18n "featuredImage"}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg></button>
+				<button id="img-btn" class="hdr-btn" title="{{i18n "featuredImage"}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg></button>
 				{{- end }}
 				{{- with .Params.toc -}}
-				<button class="hdr-btn desktop-only-ib" onclick="toggleToc()" title="{{i18n "tableOfContents"}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3" y2="6"></line><line x1="3" y1="12" x2="3" y2="12"></line><line x1="3" y1="18" x2="3" y2="18"></line></svg></button>
+				<button id="toc-btn" class="hdr-btn desktop-only-ib" title="{{i18n "tableOfContents"}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3" y2="6"></line><line x1="3" y1="12" x2="3" y2="12"></line><line x1="3" y1="18" x2="3" y2="18"></line></svg></button>
 				{{- end }}
 				{{- with .Site.Params.social -}}
 				<span class="hdr-social hide-in-mobile">{{ partialCached "social-icons.html" . }}</span>
diff --git a/layouts/posts/single.html b/layouts/posts/single.html
index 026a626..dc70fd3 100644
--- a/layouts/posts/single.html
+++ b/layouts/posts/single.html
@@ -1,14 +1,24 @@
+{{ define "head" }}
+	<style>
+	.bg-img {background-image: url('
+	{{- if .Params.featuredImg -}}
+		{{.Params.featuredImg | absURL}}
+	{{- else if .Params.images -}}
+		{{- range first 1 .Params.images -}}
+		{{. | absURL}}
+		{{- end -}}
+	{{- end -}}
+	');}
+	</style>
+{{ end }}
+
 {{ define "header" }}
 {{ partial "header.html" . }}
 {{ end }}
 
 {{ define "main" }}
-	{{- if .Params.featuredImg }}
-	<div id="bg-img" class="bg-img" style="background-image: url({{.Params.featuredImg}});" onclick="showContent()"></div>
-	{{- else if .Params.images }}
-	{{- range first 1 .Params.images }}
-	<div id="bg-img" class="bg-img" style="background-image: url({{.}});" onclick="showContent()"></div>
-	{{- end }}
+	{{- if (or .Params.images .Params.featuredImg) }}
+	<div class="bg-img"></div>
 	{{- end }}
 	<main class="site-main section-inner animated fadeIn faster">
 		<article class="thin">