Hugofied main.scss (#15)

* adding Hugo template support to main.scss now styling in banner.html isn't needed anymore and could be overwritten in user example.css * added option for font import via generated main.scss * changed banner image source to Site-wide config * optional text and direct contact information
funkydan2 · Aug 12, 2019 · 4dfb9a3 · 4dfb9a3
1 parent 5ee7832
commit 4dfb9a3
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 11 deletions.
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
@@ -5,7 +5,11 @@
 @import 'libs/breakpoints';
 @import 'libs/html-grid';
 @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300italic,400italic");
-
+/* 	import additional Fonts from fonts.google.com
+	use Format e.g. "Playfair+Display:400,700" 		*/
+{{ range .Site.Params.Style.googleFonts }}
+@import url("https://fonts.googleapis.com/css?family={{ . }}");
+{{ end }}
 /*
 	Alpha by HTML5 UP
 	html5up.net | @ajlkn
@@ -1370,7 +1374,7 @@
 	#banner {
 		background-attachment:	scroll,							fixed;
 		background-color:		#666;
-		background-image:		url('images/overlay.png'),		url('../../images/banner.jpg');
+		background-image:		url({{ "img/overlay.png" | absURL }}), url({{ .Site.Params.Banner.image | absURL }});
 		background-position:	top left,						center center;
 		background-repeat:		repeat,							no-repeat;
 		background-size:		auto,							cover;
@@ -1524,6 +1528,11 @@
 		padding: 3.5em 0 4em 0;
 		text-align: center;
 
+		a {
+			color: inherit;
+			font-weight: bold;
+		}
+
 		h2, h3, h4, h5, h6 {
 			color: inherit;
 		}

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -71,12 +71,20 @@ googleAnalytics = ""
   author = "Daniel Saunders"
   languageCode = "en" # For accessibility this needs to be set. You can find all language codes at https://www.w3schools.com/tags/ref_language_codes.asp
 
-  customCSS = ["example.css"]
+
 
   bible_popups = "faithlife" #faithlife, blb
   bible_version = "CSB" #HCSB, NIV, NLT, ESV, etc.
   instant_page = true
 
+  customCSS = ["example.css"]
+  [parapms.style]
+  googleFonts = ["Cardo",
+                 "Crimson+Text",
+                 "Merriweather",
+                 "Playfair+Display:400,700",
+                 "Roboto+Slab"]
+
   [params.podcast]
     title = "Listen to Alpha Church"
     subtitle = ""

diff --git a/layouts/partials/banner.html b/layouts/partials/banner.html
@@ -1,4 +1,4 @@
-<section id="banner" style="background-image:url({{ "img/overlay.png" | absURL }}), url({{ .Params.Banner.image | absURL }})">
+<section id="banner">
   <h2>{{ .Site.Params.title }}</h2>
   <p>{{ .Site.Params.subtitle }}</p>
   <ul class="actions special">

diff --git a/layouts/partials/contact.html b/layouts/partials/contact.html
@@ -1,18 +1,46 @@
+{{ if .Site.Params.Contact.text }}
+	<p>{{ .Site.Params.Contact.text }}
+	{{ if .Site.Params.Contact.phone }}
+		<br />
+		<a href="tel:{{ .Site.Params.Contact.phone }}" target="_blank" aria-label="{{ .Site.Params.Contact.phone }}">
+			<i class="icon fas fa-phone-alt">
+				<span class="label">
+					{{ .Site.Params.Contact.phone }}
+				</span>
+			</i>
+			&nbsp;
+			{{ .Site.Params.Contact.phone }}
+		</a>
+	{{ end }}
+	{{ if .Site.Params.Contact.mail }}
+		<br />
+		<a href="mailto:{{ .Site.Params.Contact.mail }}" target="_blank" aria-label="{{ .Site.Params.Contact.mail }}">
+			<i class="icon fas fa-envelope">
+				<span class="label">
+					{{ .Site.Params.Contact.mail }}
+				</span>
+			</i>
+			&nbsp;
+			{{ .Site.Params.Contact.mail }}
+		</a>
+	{{ end }}
+	</p>
+{{ end}}
 {{ if eq .Site.Params.Contact.service "netlify" }}
 	<form name="contact" method="POST" action="{{ .Site.Params.Contact.confirm_page }}" netlify>
 		<div class="row gtr-50 gtr-uniform">
 			<div class="col-6 col-12-mobilep">
-	    	<input type="text" name="name" aria-label="Your name" placeholder="Your name">
-	  	</div>
+	    		<input type="text" name="name" aria-label="Your name" placeholder="Your name">
+	  		</div>
 			<div class="col-6 col-12-mobilep">
-	    	<input type="email" name="email" aria-label="Email address" placeholder = "Email address">
-	  	</div>
+	    		<input type="email" name="email" aria-label="Email address" placeholder = "Email address">
+	  		</div>
 			<div class="col-12">
 				<textarea name="message" aria-label="Enter your message" placeholder="Enter your message" rows="6"></textarea>
 			</div>
 			<div class="col-12">
 				<ul class="actions special">
-	  			<li>
+	  				<li>
 						<input type="submit" value="Send" />
 					</li>
 				</ul>

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -18,10 +18,10 @@
 		<link rel="stylesheet" href="/fontawesome/css/all.min.css" />
 		{{- $css := .Site.Data.libs.css -}}
 		{{ if .IsPage }}{{ printf "<link rel=\"stylesheet\" href=\"//cdn.plyr.io/%s/plyr.css\" integrity=\"%s\" crossorigin=\"anonymous\">" $css.plyr.version $css.plyr.integrity | safeHTML }}{{ end }}
-		{{- $ieStyles := resources.Get "scss/main.scss" | toCSS | minify -}}
+		{{- $ieStyles := resources.Get "scss/main.scss" | resources.ExecuteAsTemplate "style.main.scss" . | toCSS | minify -}}
 		{{- $ieJs := resources.Get "js/ie/html5shiv.js" | minify -}}
 		{{ printf "<!--[if lte IE 8]><script src=\"%s\"></script><link rel=\"stylesheet\" href=\"%s\" /><![endif]-->" $ieJs.RelPermalink $ieStyles.RelPermalink | safeHTML }}
-		{{- $style := resources.Get "scss/main.scss" | toCSS | minify | fingerprint -}}
+		{{ $style := resources.Get "scss/main.scss" | resources.ExecuteAsTemplate "style.main.scss" . | toCSS | minify | fingerprint }}
 		<link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}" media="screen" crossorigin="anonymous" />
 		{{- range .Site.Params.customCSS -}}
     	<link rel="stylesheet" href="{{ . | absURL }}">