Make bg image configurable (#84)v6.4.0

* Make bg image configurable

* fix prod config

* override bg on custom theme scss

Co-authored-by: Curtis Timson <curt@live.co.uk>

6 files changed, 68 insertions, 51 deletions

diff --git a/assets/scss/hugotheme/main.scss b/assets/scss/hugotheme/main.scss
index de91d93..9fe9e17 100644
--- a/assets/scss/hugotheme/main.scss
+++ b/assets/scss/hugotheme/main.scss
@@ -1,3 +1,9 @@
 img {
   max-width: 100%;
+}
+
+#wrapper {
+  >.bg {
+    background-image: url('../../images/overlay.png'), linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("../../"+ $backgroundPath);
+  }
 }
\ No newline at end of file
diff --git a/assets/scss/layout/_wrapper.scss b/assets/scss/layout/_wrapper.scss
index 7b1bd55..987f356 100644
--- a/assets/scss/layout/_wrapper.scss
+++ b/assets/scss/layout/_wrapper.scss
@@ -6,59 +6,59 @@
 

 /* Wrapper */

 

-	#wrapper {

-		@include vendor('transition', 'opacity #{_duration(menu)} ease');

-		position: relative;

-		z-index: 1;

-		overflow: hidden;

+#wrapper {

+	@include vendor('transition', 'opacity #{_duration(menu)} ease');

+	position: relative;

+	z-index: 1;

+	overflow: hidden;

 

-		> .bg {

-			position: absolute;

-			top: 0;

+	>.bg {

+		position: absolute;

+		top: 0;

+		left: 0;

+		width: 100%;

+		height: 100%;

+		background-color: _palette(wrapper-bg);

+		background-image: url('../../images/overlay.png'), linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('../../images/bg.jpg');

+		background-size: auto, auto, 100% auto;

+		background-position: center, center, top center;

+		background-repeat: repeat, no-repeat, no-repeat;

+		background-attachment: scroll, scroll, scroll;

+		z-index: -1;

+

+		&.fixed {

+			position: fixed;

+			width: 100vw;

+			height: 100vh;

+		}

+	}

+

+	&.fade-in {

+		&:before {

+			@include vendor('pointer-events', 'none');

+			@include vendor('transition', 'opacity 1s ease-in-out');

+			@include vendor('transition-delay', '0.75s');

+			background: _palette(invert, bg);

+			content: '';

+			display: block;

+			height: 100%;

 			left: 0;

+			opacity: 0;

+			position: fixed;

+			top: 0;

 			width: 100%;

-			height: 100%;

-			background-color:		_palette(wrapper-bg);

-			background-image:		url('../../images/overlay.png'),	linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)),	url('../../images/bg.jpg');

-			background-size:		auto,								auto,														100% auto;

-			background-position:	center,								center,														top center;

-			background-repeat:		repeat,								no-repeat,													no-repeat;

-			background-attachment:	scroll,								scroll,														scroll;

-			z-index: -1;

-

-			&.fixed {

-				position: fixed;

-				width: 100vw;

-				height: 100vh;

-			}

 		}

 

-		&.fade-in {

+		body.is-preload & {

 			&:before {

-				@include vendor('pointer-events', 'none');

-				@include vendor('transition', 'opacity 1s ease-in-out');

-				@include vendor('transition-delay', '0.75s');

-				background: _palette(invert, bg);

-				content: '';

-				display: block;

-				height: 100%;

-				left: 0;

-				opacity: 0;

-				position: fixed;

-				top: 0;

-				width: 100%;

-			}

-

-			body.is-preload & {

-				&:before {

-					opacity: 1;

-				}

+				opacity: 1;

 			}

 		}

+	}

 

-		@include orientation(portrait) {

-			> .bg {

-				background-size:	auto,								auto,														auto 175%;

-			}

+	@include orientation(portrait) {

+		>.bg {

+			background-size: auto, auto, auto 175%;

 		}

-	}
\ No newline at end of file
+	}

+}
\ No newline at end of file
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 38e2c56..feba7d0 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -14,6 +14,9 @@
 	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)

 */

 

+// Variables

+$backgroundPath: "{{ .Site.Params.backgroundPath | default "images/bg.jpg" }}";

+

 // Breakpoints.

 

 @include breakpoints((default: (1681px, null),

diff --git a/exampleSite/config-prod.toml b/exampleSite/config-prod.toml
index c345fb9..93d0bdf 100644
--- a/exampleSite/config-prod.toml
+++ b/exampleSite/config-prod.toml
@@ -6,11 +6,15 @@ googleanalytics = ""
 disqusShortname = ""
 disableKinds = ["taxonomy", "taxonomyTerm", "section"]
 
+
+
 # [params]
   # set below parameter to define a favicon
   # favicon = "favicon.ico"
   # set to change date format
   # dateFormat = "2.1.2006"
+  # backgroundPath = "images/bg.jpg"
+
 # Below parameters can be set to override default post settings
 # [params.posts]
 #     folderName = "post"
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 18a8c22..a6076bd 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -11,6 +11,7 @@ disableKinds = ["taxonomy", "taxonomyTerm", "section"]
   # favicon = "favicon.ico"
   # set to change date format
   # dateFormat = "2.1.2006"
+  # backgroundPath = "images/bg.jpg"
 
 # Below parameters can be set to override default post settings
 # [params.posts]
diff --git a/exampleSite/resources/_gen/assets/scss/scss/main.scss_12bfed357d24ca59ff7ceeb30292a324.content b/exampleSite/resources/_gen/assets/scss/scss/main.scss_12bfed357d24ca59ff7ceeb30292a324.content
index 7e6a5e1..cd714f0 100644
--- a/exampleSite/resources/_gen/assets/scss/scss/main.scss_12bfed357d24ca59ff7ceeb30292a324.content
+++ b/exampleSite/resources/_gen/assets/scss/scss/main.scss_12bfed357d24ca59ff7ceeb30292a324.content
@@ -2038,10 +2038,10 @@ table.alt tbody tr td {
     height: 100%;
     background-color: #212931;
     background-image: url("../../images/overlay.png"), linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("../../images/bg.jpg");
-    background-size: auto,								auto,														100% auto;
-    background-position: center,								center,														top center;
-    background-repeat: repeat,								no-repeat,													no-repeat;
-    background-attachment: scroll,								scroll,														scroll;
+    background-size: auto, auto, 100% auto;
+    background-position: center, center, top center;
+    background-repeat: repeat, no-repeat, no-repeat;
+    background-attachment: scroll, scroll, scroll;
     z-index: -1; }
     #wrapper > .bg.fixed {
       position: fixed;
@@ -2070,7 +2070,7 @@ table.alt tbody tr td {
     opacity: 1; }
   @media screen and (orientation: portrait) {
     #wrapper > .bg {
-      background-size: auto,								auto,														auto 175%; } }
+      background-size: auto, auto, auto 175%; } }
 /* Intro */
 #intro {
   color: #ffffff;
@@ -2979,4 +2979,7 @@ table.alt tbody tr td {
 img {
   max-width: 100%; }
 
+#wrapper > .bg {
+  background-image: url("../../images/overlay.png"), linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("../../images/bg.jpg"); }
+
 /*# sourceMappingURL=main.css.map */
\ No newline at end of file