Header (title and subtitle) color settings finished, currently working on font settings, inspired by Azbalac WordPress theme

3 files changed, 245 insertions, 72 deletions

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 4065cb2..b9bc224 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -27,78 +27,157 @@
 <script src="{{ .Site.BaseURL }}js/jquery-3.3.1.min.js"></script>
 <script src="{{ .Site.BaseURL }}js/functions.js"></script>
 
+
+{{- $overlayBackgroundColorFallback := "#000000" -}}
+{{- $overlayBackgroundColor := trim $overlayBackgroundColorFallback "#" -}}
+
+{{- if .Site.Params.Theme.Header.OverlayBackgroundColor -}}
+    {{- $overlayBackgroundColor = trim .Site.Params.Theme.Header.OverlayBackgroundColor "#" -}}
+    {{- $overlayBackgroundColorFallback = .Site.Params.Theme.Header.OverlayBackgroundColor -}}
+{{ end }}
+{{- $overlayTransparency := 70 -}} {{- /* default transparency 70% */ -}} 
+{{- if .Site.Params.Theme.Header.OverlayTransparency -}}
+    {{- $overlayTransparency = int .Site.Params.Theme.Header.OverlayTransparency -}}
+{{- end -}}
+
+{{- $overlayBackgroundTranspHex := printf "%1.2f" (div $overlayTransparency 100.0) -}}
+
+{{- $rr := int (printf "0x%s" (substr $overlayBackgroundColor 0 2)) -}}
+{{- $gg := int (printf "0x%s" (substr $overlayBackgroundColor 2 2)) -}}
+{{- $bb := int (printf "0x%s" (substr $overlayBackgroundColor 4 2)) -}}
+{{- $overlayBackgroundColor := printf " rgba(%d,%d,%d,%s)" $rr $gg $bb $overlayBackgroundTranspHex -}}
+
 <style>
 body {
-    {{ if .Site.Params.Navbar.fixedTop }}
+
+    {{- if .Site.Params.Navbar.fixedTop -}}
     /* Move down content because we have a fixed navbar that is 60px tall */
 
-        {{ $paddingTop := 60 }}
-        {{ if .Site.Params.Navbar.AdjustHeader }}
-            {{ $paddingTop  = add 60 .Site.Params.Navbar.AdjustHeader }}
-        {{ end }}
+        {{- $paddingTop := 60 -}}
+        {{- if .Site.Params.Navbar.AdjustHeader -}}
+            {{- $paddingTop  = add 60 .Site.Params.Navbar.AdjustHeader -}}
+        {{- end -}}
         padding-top: {{ $paddingTop }}px;
-    {{ end }}
+    {{- end -}}
 
-    {{ if .Site.Params.Theme.BackgroundColor }}
+    {{- if .Site.Params.Theme.BackgroundColor -}}
         background-color: {{ .Site.Params.Theme.BackgroundColor }};
-    {{ end }}
+    {{- end -}}
 
-    {{ $backgroundImage := .Site.Params.Theme.BackgroundImage }}
-    {{ if $backgroundImage }}
+    {{- $backgroundImage := .Site.Params.Theme.BackgroundImage -}}
+    {{- if $backgroundImage -}}
         background-image: url("{{ .Site.BaseURL }}{{ $backgroundImage }}");
-        {{ $backgroundRepeat := "repeat" }}
-        {{ if .Site.Params.Theme.BackgroundImageRepeat }}
-            {{ $backgroundRepeat =  .Site.Params.Theme.BackgroundImageRepeat }}
-        {{ end }}
+        {{- $backgroundRepeat := "repeat" -}}
+        {{- if .Site.Params.Theme.BackgroundImageRepeat -}}
+            {{- $backgroundRepeat =  .Site.Params.Theme.BackgroundImageRepeat -}}
+        {{- end -}}
         background-repeat: {{ $backgroundRepeat }};
-    {{ end }}
-
+    {{- end -}}
 
 }
-{{ if .Site.Params.Theme.Footer.BackgroundColor }}
+
+
+
+{{- if .Site.Params.Theme.Footer.BackgroundColor -}}
 .footer-container { background-color: {{ .Site.Params.Theme.Footer.BackgroundColor }}; }
-{{ end }}
-{{ if .Site.Params.Theme.Footer.FontColor }}
+{{- end -}}
+{{- if .Site.Params.Theme.Footer.FontColor -}}
 .footer-container { color: {{ .Site.Params.Theme.Footer.FontColor }}; }
-{{ end }}
-{{ if .Site.Params.Theme.Footer.LinkColor }}
+{{- end -}}
+{{- if .Site.Params.Theme.Footer.LinkColor -}}
 .footer-container a { color: {{ .Site.Params.Theme.Footer.LinkColor }}; }
-{{ end }}
-{{ if .Site.Params.Theme.Subfooter.BackgroundColor }}
+{{- end -}}
+{{- if .Site.Params.Theme.Subfooter.BackgroundColor -}}
 .subfooter-container { background-color: {{ .Site.Params.Theme.Subfooter.BackgroundColor }}; }
-{{ end }}
-{{ if .Site.Params.Theme.Subfooter.FontColor }}
+{{- end -}}
+{{- if .Site.Params.Theme.Subfooter.FontColor -}}
 .subfooter-container { color: {{ .Site.Params.Theme.Subfooter.FontColor }}; }
-{{ end }}
-{{ if .Site.Params.Theme.Sobfooter.LinkColor }}
+{{- end -}}
+{{- if .Site.Params.Theme.align.LinkColor -}}
 .subfooter-container a { color: {{ .Site.Params.Theme.Subfooter.LinkColor }}; }
-{{ end }}
-
+{{- end -}}
+</style>
 
+{{/* 
+[params.fonts]
+   
+    headerTitle = '' # set font, use string, e.g. "Lucida, Verdana, sans-serif". You can use any font value. Please activate Google Font option if you want to include Google Fonts, see their names on https://fonts.google.com/
+    headerTitleGoogleFont = true # If the font in the above variable is a Google font, set this option to true. 
+    headerTitleVariant = '' # font variant, if available, e.g. "regular", "bold" etc. Not every font is available in multiple variants.
+    headerTitleSize = '' # set font size, empty for default settings. Valid values are '20px', '1.2em' and so on
+    
+*/}}
+
+
+{{/* Header Title Font Settings */}}
+    {{- $headerTitleVariant := "" -}}
+    {{- if .Site.Params.Fonts.headerTitleVariant -}}
+        {{- $headerTitleVariant = (printf ":%s" .Site.Params.Fonts.headerTitleVariant) -}}
+    {{- end -}}
+    {{- if .Site.Params.Fonts.headerTitleGoogleFont -}}
+        {{- safeHTML (printf "<link id=\"typography-header-title-font\" rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?%s\">" (querify "family" (printf "%s%s" (trim .Site.Params.Fonts.HeaderTitle "\"") $headerTitleVariant ))    ) -}}
+    {{- end -}}
+<style id="typography-title" type="text/css">
+    {{- if .Site.Params.Fonts.headerTitle -}}
+    #site-header-text a {
+        font-family: {{ safeCSS .Site.Params.Fonts.HeaderTitle }};
+    }
+    {{- end -}}
+    {{- if .Site.Params.Fonts.headerTitleSize -}}
+    #site-header-text a {
+        font-size: {{ .Site.Params.Fonts.headerTitleSize }}; 
+    }
+
+    {{- end -}}
+</style>
 
 
+{{/* Header Subtitle Font Settings */}}
+    {{- $headerSubtitleVariant := "" -}}
+    {{- if .Site.Params.Fonts.headerSubtitleVariant -}}
+        {{- $headerSubtitleVariant = (printf ":%s" .Site.Params.Fonts.headerSubtitleVariant) -}}
+    {{- end -}}
+    {{- if .Site.Params.Fonts.headerSubtitleGoogleFont -}}
+        {{- safeHTML (printf "<link id=\"typography-header-subtitle-font\" rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?%s\">" (querify "family" (printf "%s%s" (trim .Site.Params.Fonts.HeaderSubtitle "\"") $headerSubtitleVariant ))    ) -}}
+    {{- end -}}
+<style id="typography-subtitle" type="text/css">
+    {{- if .Site.Params.Fonts.headerSubtitle -}}
+    #site-description {
+        font-family: {{ safeCSS .Site.Params.Fonts.HeaderSubtitle }};
+    }
+    {{- end -}}
+    {{- if .Site.Params.Fonts.headerSubtitleSize -}}
+    #site-description {
+        font-size: {{ .Site.Params.Fonts.headerSubtitleSize }}; 
+    }
+
+    {{- end -}}
 </style>
+
+
+
+
+
 {{ if not .Site.Params.Navbar.FixedTop }}
-    {{ if and .Site.Params.Theme.Header.header_background_transp .Site.Params.Theme.Header.header_color_bg }}
+    {{/* if and .Site.Params.Theme.Header.header_background_transp .Site.Params.Theme.Header.header_color_bg */}}
     <script type="text/javascript">
-        var azbalacSettingHeaderColor = { 'bg': '{{ .Site.Params.Theme.Header.header_color_bg }}',
-            'transp': '{{ .Site.Params.Theme.Header.header_background_transp }}'
+        var azbalacSettingHeaderColor = { 'bg': '{{ $overlayBackgroundColorFallback }}',
+            'transp': '{{ $overlayTransparency }}'
             };
 
     </script>
     <style type="text/css">
         #site-header-text a, #site-description {
-    
-            background: {{ .Site.Params.Theme.Header.header_color_bg}}; /* fallback color */
-            background: {{ .Site.Params.Theme.Header.header_color_bg }}{{ .Site.Params.Theme.Header.header_background_transp_hex }};
+                background: "{{ safeCSS $overlayBackgroundColorFallback }}"; /* fallback color */
+            background: {{ safeCSS $overlayBackgroundColor }};
             
         }
     </style>
-    {{ end }}
+    {{/* end */}}
     {{ if .Site.Params.Theme.Header.OverlayDistanceBetween }}
     <style type="text/css">
         #site-header-box-title {
-            margin-bottom: '{{ .Site.Params.Theme.Header.OverlayDistanceBetween }}px';
+            margin-bottom: {{ .Site.Params.Theme.Header.OverlayDistanceBetween }}px;
         }
     </style>
     {{ end }}
@@ -121,4 +200,9 @@ body {
     </style>
     {{ end }}
 {{ end }}
+  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+        <!--[if lt IE 9]>
+        <script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+        <script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+        <![endif]-->
 </head>
\ No newline at end of file
diff --git a/layouts/partials/header_default.html b/layouts/partials/header_default.html
index 5ee5eca..1054e17 100644
--- a/layouts/partials/header_default.html
+++ b/layouts/partials/header_default.html
@@ -46,37 +46,37 @@ $content['headerOptions']['header_container'] = ['container_class' => $headerCon
 
 */}}
 
-  {{ $overlayBackgroundColor := "#000000" }}
-{{ if .Site.Params.Theme.Header.OverlayBackgroundColor }}
-    {{ $overlayBackgroundColor = .Site.Params.Theme.Header.OverlayBackgroundColor }}
-{{ end }}
-{{ $overlayTransparency := 70 }} {{/* default transparency 70% */}} 
-{{ if .Site.Params.Theme.Header.OverlayTransparency }}
-    {{ $overlayTransparency = int .Site.Params.Theme.Header.OverlayTransparency }}
-{{ end }}
-
-{{ $overlayBackgroundTranspHex := math.Round (mul (div 255.0 100.0) $overlayTransparency) }}
-
-{{ $foo := "#4488ff" }}
-{{ $foo = trim $foo "#" }}
-{{ $foo }}
-<p>
-{{ $rr := substr $foo 0 2 }}
-{{ $gg := substr $foo 2 2 }}
-{{ $bb := substr $foo 4 2 }}
-{{ int (printf "0x%s" $rr) }} || {{ int (printf "0x%s" $gg) }} || {{ int (printf "0x%s" $bb) }}
-<p>
-{{ printf "0x%s" "ff" }} 
-<p>
-{{ int (printf "0x%s" "ff") }}
-<p>
-{{ $overlayBackgroundTranspHex }}
-
-
-
-<div id="header" role="banner" style="{{ if .Site.Params.Theme.Header.BackgroundColor }}background-color: 
-{{ .Site.Params.Theme.Header.BackgroundColor }};{{ end }}
-{{ if .Site.Params.Theme.Header.FontColor }}color: {{  .Site.Params.Theme.Header.FontColor }};{{ end }}">
+
+{{/*  default lt, left/top */}}
+{{- $headerContainerClass := " fixed-top " -}}
+{{- $headerBoxClassTitle := " d-flex justify-content-start " -}}
+{{- $headerBoxClassSubtitle := " d-flex justify-content-start " -}}
+
+{{- if (eq .Site.Params.Theme.Header.OverlayAlignment "mt") -}}
+    {{- $headerContainerClass = " fixed-top " -}}
+    {{- $headerBoxClassTitle = " d-flex justify-content-center " -}}
+    {{- $headerBoxClassSubtitle = " d-flex justify-content-center " -}}
+{{- else if (eq .Site.Params.Theme.Header.OverlayAlignment "rt") -}}
+    {{- $headerContainerClass = " fixed-top " -}}
+    {{- $headerBoxClassTitle = " d-flex justify-content-end " -}}
+    {{- $headerBoxClassSubtitle = " d-flex justify-content-end " -}}
+{{- else if (eq .Site.Params.Theme.Header.OverlayAlignment "lb") -}}
+    {{- $headerContainerClass = " fixed-bottom " -}}
+    {{- $headerBoxClassTitle = " d-flex justify-content-start " -}}
+    {{- $headerBoxClassSubtitle = " d-flex justify-content-start " -}}
+{{- else if (eq .Site.Params.Theme.Header.OverlayAlignment "mb") -}}
+    {{- $headerContainerClass = " fixed-bottom " -}}
+    {{- $headerBoxClassTitle = " d-flex justify-content-center " -}}
+    {{- $headerBoxClassSubtitle = " d-flex justify-content-center " -}}
+{{- else if (eq .Site.Params.Theme.Header.OverlayAlignment "rt") -}}
+    {{- $headerContainerClass = " fixed-bottom " -}}
+    {{- $headerBoxClassTitle = " d-flex justify-content-end " -}}
+    {{- $headerBoxClassSubtitle = " d-flex justify-content-end " -}}
+{{- end -}}
+
+<div id="header" role="banner" style="{{- if .Site.Params.Theme.Header.BackgroundColor -}}background-color: 
+{{ .Site.Params.Theme.Header.BackgroundColor }};{{- end -}}
+{{ if .Site.Params.Theme.Header.FontColor }}color: {{  .Site.Params.Theme.Header.FontColor }};{{- end -}}">
 
     <div class="container">
         <header class="masthead">
@@ -105,13 +105,13 @@ $content['headerOptions']['header_container'] = ['container_class' => $headerCon
 
                 {{ if and .Site.Params.Theme.Header.TitleOnImage .Site.Params.Theme.Header.DisplayHeaderText }}
 
-                <div id="site-header-container-overlay" class="position-absolute {{ .Site.Params.Theme.Header.header_container.container_class }}">
-                    <div id="site-header-box-title" class="{{ .Site.Params.Theme.Header.header_container.box_class_title }}">
+                <div id="site-header-container-overlay" class="position-absolute {{ $headerContainerClass }}">
+                    <div id="site-header-box-title" class="{{ $headerBoxClassTitle }}">
                         <h1 class="azbalac-title" id="site-header-text"><a class="header-url" style="{{ if .Site.Params.Theme.Header.FontColorTitle }}color: {{ .Site.Params.Theme.Header.FontColorTitle }};{{ end }}" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
                     </div>
                     {{ if .Site.Params.Subtitle }}
-                    <div id="site-header-box-subtitle" class="{{ .Site.Params.Theme.Header.header_container.box_class_subtitle }}">   
-                        <h2 class="azbalac-subtitle" id="site-description" style="{{ if .Site.Params.Theme.Header.headerStyles.colorFgSubtitle }}color: {{ .Site.Params.Theme.Header.headerStyles.colorFgSubtitle }};{{ end }}">{{ .Site.Params.Subtitle }}</h2>
+                    <div id="site-header-box-subtitle" class="{{ $headerBoxClassSubtitle }}">   
+                        <h2 class="azbalac-subtitle" id="site-description" style="{{ if .Site.Params.Theme.Header.FontColorSubtitle }}color: {{ .Site.Params.Theme.Header.FontColorSubtitle }};{{ end }}">{{ .Site.Params.Subtitle }}</h2>
                     </div>{{ end }}
                 </div>
                 {{ end }}
diff --git a/static/css/custom.css b/static/css/custom.css
index 4fb706c..2d54fca 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -7,6 +7,95 @@
   padding-top: 20px; 
 }
 
+
+/* media query stuff, new widths come from Bootstrap grid widths */
+
+#media-width-detection-element {
+  display: block;
+  /*border: 1px solid white;*/
+  height: 1px;
+  width: 100%;
+
+}
+
+
+@media (max-width: 575.98px) {
+  #media-width-detection-element {
+      width: 1px;
+  }
+}
+
+@media (min-width: 576px) and (max-width: 767.98px) {
+  #media-width-detection-element {
+      width: 540px;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 991.98px) {
+  #media-width-detection-element {
+      width: 720px;
+  }
+}
+@media (min-width: 992px) and (max-width: 1199.98px) {
+  #media-width-detection-element {
+      width: 960px;
+  }
+}
+@media (min-width: 1200px) {
+  #media-width-detection-element {
+      width: 1140px;
+  }
+}
+
+
+/* Header */
+
+#site-header-image {
+  box-shadow: #000 0em 0em 0em; /* fix for fadeIn bug in firefox */
+}
+
+
+
+/* default: hidden, will be shown by JavaScript */
+#site-header-above {
+  display: none;
+  position: relative;
+}
+
+#site-header-above img {
+  position: relative;
+}
+
+
+/**********************************/
+
+
+/* default: hidden, will be shown by JavaScript */
+/*#site-header1 {
+  display: block;
+  position: relative;
+}
+
+#site-header1 img {
+  position: relative;
+}*/
+
+#site-header-container-overlay {
+/*    position: absolute;
+  top: 20px;
+  left: 100px;*/
+  z-index: 1000;
+}
+
+/*
+#site-header-text a, #site-description {
+ 
+  background: rgb(0, 0, 0); 
+  background: rgba(0, 0, 0, 0.7);
+  padding: 10px;
+}*/
+
+
 /* Menu Settings - later... */
 .main-nav ul {
   text-align: center;