Add image_header header style

3 files changed, 67 insertions, 0 deletions

diff --git a/README.md b/README.md
index 1317a70..2ccaf61 100644
--- a/README.md
+++ b/README.md
@@ -33,6 +33,13 @@ Within your `config.toml` add the according parameter you want the theme to use.
 
 The theme will look for the theme parts in *layouts/partials/navs/*, *layouts/partials/headers/*, and *layouts/partials/footers/* accordingly. For instance, with `nav = "simple"`, it will look for *layouts/partials/navs/simple.html*.
 
+### Supported page header styles
+
+The following page header styles are included:
+
+* `simple`, just a plain centered title and subtitle.
+* `image_header`, a screen-wide header image (located in `headerImage`) with the title and subtitle on it.
+
 ### Supported footer styles
 
 The following footer styles are included:
diff --git a/layouts/partials/headers/image_header.html b/layouts/partials/headers/image_header.html
new file mode 100644
index 0000000..6cc530f
--- /dev/null
+++ b/layouts/partials/headers/image_header.html
@@ -0,0 +1,24 @@
+{{- $title := .Params.title -}}
+{{- $subtitle := .Params.subtitle -}}
+{{- $headerImage := .Params.headerImage -}}
+
+<style>
+</style>
+
+<header class="header-section">
+  <div class="intro-header header-img" style='background-image: url("{{$headerImage.src}}");'>
+    <div class="container">
+      <div class="row">
+        <div class="col-lg-8 offset-lg-2 col-md-10 offset-md-1">
+          <div class="heading">
+            <h1>{{ with $title }}{{.}}{{ else }}<br/>{{ end }}</h1>
+              {{ if $subtitle }}
+                <hr class="small">
+                <span class="subheading">{{ $subtitle }}</span>
+              {{ end }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</header>
diff --git a/static/css/theme.css b/static/css/theme.css
new file mode 100644
index 0000000..0802296
--- /dev/null
+++ b/static/css/theme.css
@@ -0,0 +1,36 @@
+.intro-header {
+    margin-bottom: 20px;
+}
+
+.intro-header.header-img {
+  background: no-repeat center center;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  background-size: cover;
+  -o-background-size: cover;
+  margin-top: 0px;
+  margin-bottom: 35px;
+  height: 200px;
+}
+
+.intro-header.header-img .heading
+{
+  padding: 10px 0;
+  color: #ffffff;
+  text-shadow: 1px 1px 3px #000000;
+}
+
+.intro-header .heading .subheading
+{
+  font-size: 27px;
+  line-height: 1.1;
+  display: block;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 300;
+  margin: 10px 0 0;
+}
+
+.intro-header.header-img .heading .subheading
+{
+  font-weight: 400;
+}