Alter banner colours

_config.yml

@@ -5,4 +5,5 @@ defaults:
     values:
       layout: page
 
-title: Syndicate
+title: "syn·di·cate"
+subtitle: "a language for interactive programs"

_includes/common_header

@@ -0,0 +1,5 @@
+<!-- -*- html -*- -->
+<div class="pagebanner">
+  <h1>{{ site.title }}</h1>
+  <h2>{{ site.subtitle }}</h2>
+</div>

code.md

@@ -0,0 +1,6 @@
+---
+---
+
+# Title
+
+Content content.

index.md

@@ -6,18 +6,14 @@ link:
   ghrepo: 'https://github.com/tonyg/syndicate'
 ---
 
-> # syn·di·cate
->
-> ## a language for interactive programs
->
-> **noun**  
-> /ˈsindikit/
->
-> 1. a self-organizing group of individuals, companies, corporations or
->    entities formed to transact some specific business, to pursue or
->    promote a shared interest. <small>—[Wikipedia](https://en.wikipedia.org/wiki/Syndicate)</small>
->
-> <div class="linkbuttons"><a href="{{ page.link.ghrepo }}"><img alt="Link to Syndicate github repo" src="{{ site.baseurl }}/img/GitHub-Mark-64px.png"></a></div>
+**noun**  
+/ˈsindikit/
+
+1. a self-organizing group of individuals, companies, corporations or
+   entities formed to transact some specific business, to pursue or
+   promote a shared interest. <small>—[Wikipedia](https://en.wikipedia.org/wiki/Syndicate)</small>
+
+<div class="linkbuttons"><a href="{{ page.link.ghrepo }}"><img alt="Link to Syndicate github repo" src="{{ site.baseurl }}/img/GitHub-Mark-64px.png"></a></div>
 
 # Motivation
 

style.css

@@ -323,38 +323,58 @@ strong {
 
 /*---------------------------------------------------------------------------*/
 
-#page.frontpage blockquote h1,
-#page.frontpage blockquote h2 {
-    text-align: center;
-    margin-left: auto;
-    margin-right: auto;
-    color: {{ page.heroheadercolor }};
+.pagebanner h1,
+.pagebanner h2 {
+    margin: 0;
+    padding-top: 0.5rem;
+    padding-bottom: 1rem;
+    color: white;
 }
 
-#page.frontpage blockquote h1 {
-    font-size: 5.6em;
-    margin-top: 0;
-    padding-top: 0.2em;
+.pagebanner h1 {
+    text-align: right;
 }
 
-#page.frontpage blockquote h2 {
-    font-size: 2.1em;
+.pagebanner h2 {
+    display: none;
 }
 
-#page.frontpage blockquote {
-    /* width: 75%; */
+.pagebanner {
     margin: 0 -2em;
-    background: {{ page.herobackground }};
-    color: {{ page.herotextcolor }};
-    padding: 1em 2em;
+    background-color: {{ page.heroheadercolor }};
+    padding: 0em 1em;
 }
 
+#page.frontpage .pagebanner h1,
+#page.frontpage .pagebanner h2 {
+    text-align: center;
+    margin: 0 auto;
+    color: white;
+}
+
+#page.frontpage .pagebanner h1 {
+    font-size: 5.6em;
+    padding-top: 2rem;
+}
+
+#page.frontpage .pagebanner h2 {
+    font-size: 2.1em;
+    padding: 1rem;
+}
+
+#page.frontpage .pagebanner {
+    margin: 0 -2em;
+    background-color: {{ page.heroheadercolor }};
+    padding: 0em 2em;
+}
+
+/*---------------------------------------------------------------------------*/
+
 div.linkbuttons {
     text-align: center;
     padding-top: 1em;
 }
 
-
 /*---------------------------------------------------------------------------*/
 
 @media (max-width: 600px) {
@@ -372,7 +392,15 @@ div.linkbuttons {
         margin-left: 0;
     }
 
-    #page.frontpage blockquote h1 {
+    .pagebanner {
+        margin: 0 -0.5em;
+    }
+
+    #page.frontpage .pagebanner h1 {
         font-size: 17vw;
     }
+
+    #page.frontpage .pagebanner {
+        margin: 0 -0.5em;
+    }
 }