From 21681ca9e1d24862794e6ed4a8ff0d1e9c3a2bf6 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Vladim=C3=ADr=20Vondru=C5=A1?= <mosra@centrum.cz>
Date: Wed, 20 Sep 2017 13:24:37 +0200
Subject: [PATCH] css, theme: support for landing pages.

Also goes together with improved layout for jumbo articles, as the two
are now kinda similar use cases, but in a different context.
---
 css/m-components.css              | 57 ++++++++++++++++++++++++++++---
 css/m-dark.css                    |  3 ++
 css/m-light.css                   |  7 ++--
 pelican-theme/templates/base.html |  2 +-
 pelican-theme/templates/page.html | 42 +++++++++++++++--------
 5 files changed, 89 insertions(+), 22 deletions(-)

diff --git a/css/m-components.css b/css/m-components.css
index ac467a14..37d03a57 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -97,10 +97,38 @@ code {
 }
 
 /* Header navigation */
-body > header {
+body > header > nav {
   width: 100%;
   background-color: var(--header-background-color);
 }
+body > header > nav.m-navbar-landing,
+body > header > nav.m-navbar-jumbo {
+  background-color: transparent;
+  position: relative;
+}
+body > header > nav.m-navbar-landing {
+  opacity: 0.8;
+}
+body > header > nav.m-navbar-jumbo {
+  background-color: var(--header-background-color-jumbo);
+  opacity: 1;
+}
+body > header > nav.m-navbar-landing:hover,
+body > header > nav.m-navbar-jumbo:hover {
+  background-color: var(--header-background-color-landing);
+  opacity: 1;
+}
+body> header > nav.m-navbar-landing:target,
+body> header > nav.m-navbar-jumbo:target {
+  background-color: var(--header-background-color);
+  opacity: 1;
+}
+body > header > nav.m-navbar-landing a#m-navbar-brand {
+  visibility: hidden;
+}
+body > header > nav.m-navbar-landing:target a#m-navbar-brand {
+  visibility: visible;
+}
 body > header > nav {
   margin-left: auto;
   margin-right: auto;
@@ -164,6 +192,14 @@ body > header > nav #m-navbar-collapse li a:active {
   border-color: var(--header-link-active-color);
   background-color: var(--header-link-active-background-color);
 }
+body > header > nav.m-navbar-landing #m-navbar-collapse li a:hover,
+body > header > nav.m-navbar-jumbo #m-navbar-collapse li a:hover,
+body > header > nav.m-navbar-landing #m-navbar-collapse li a:focus,
+body > header > nav.m-navbar-jumbo #m-navbar-collapse li a:focus,
+body > header > nav.m-navbar-landing #m-navbar-collapse li a:active,
+body > header > nav.m-navbar-jumbo #m-navbar-collapse li a:active {
+  background-color: var(--header-link-active-background-color-semi);
+}
 
 /* Header navigation -- collapsible part */
 body > header > nav #m-navbar-hide {
@@ -361,7 +397,19 @@ article section > h4 a, article section > h5 a, article section > h6 a {
   text-decoration: var(--link-decoration-heading);
 }
 
-/* Jumbo article */
+/* Landing page, jumbo article */
+#m-landing-image {
+  background-size: cover;
+  background-color: var(--article-jumbo-cover-background-color);
+  background-position: center center;
+  background-repeat: no-repeat;
+  margin-top: -4rem;
+  padding-top: 5rem;
+  color: #ffffff;
+}
+#m-landing-cover {
+  padding-bottom: 4rem;
+}
 article#m-jumbo {
   margin-top: -1rem;
 }
@@ -372,10 +420,11 @@ article#m-jumbo > header #m-jumbo-image {
   background-repeat: no-repeat;
   font-size: 2.5vh;
   height: 60vh;
+  margin-top: -4rem;
   margin-bottom: 1rem;
-  padding-top: 1rem;
+  padding-top: 5rem;
 }
-article#m-jumbo > header #m-jumbo-cover, body#m-landing #m-landing-cover {
+article#m-jumbo > header #m-jumbo-cover, #m-landing-cover {
   background: linear-gradient(transparent 0%, transparent 50%, var(--background-color) 100%);
   width: 100%;
   height: 100%;
diff --git a/css/m-dark.css b/css/m-dark.css
index 0993388b..0dafc698 100644
--- a/css/m-dark.css
+++ b/css/m-dark.css
@@ -32,10 +32,13 @@
   --header-border-width: 0 0 0.25rem 0;
   --header-color: #ffffff;
   --header-background-color: #22272e;
+  --header-background-color-landing: rgba(34, 39, 46, 0.75);
+  --header-background-color-jumbo: rgba(34, 39, 46, 0.25);
   --header-link-color: #ffffff;
   --header-link-active-color: #a5c9ea;
   --header-link-current-color: #5b9dd9;
   --header-link-active-background-color: #292f37;
+  --header-link-active-background-color-semi: rgba(41, 47, 55, 0.5);
 
   /* Footer */
   --footer-font-size: 0.85rem;
diff --git a/css/m-light.css b/css/m-light.css
index 4f138270..db10089b 100644
--- a/css/m-light.css
+++ b/css/m-light.css
@@ -29,11 +29,14 @@
   /* Header */
   --header-border-width: 0.25rem 0 0 0;
   --header-color: #000000;
-  --header-background-color: rgba(255, 255, 255, 0.75);
+  --header-background-color: #ffffff;
+  --header-background-color-landing: rgba(255, 255, 255, 0.75);
+  --header-background-color-jumbo: rgba(255, 255, 255, 0.25);
   --header-link-color: #000000;
   --header-link-active-color: #cb4b16;
   --header-link-current-color: #ea7944;
-  --header-link-active-background-color: rgba(255, 255, 255, 0.95);
+  --header-link-active-background-color: #ffffff;
+  --header-link-active-background-color: rgba(255, 255, 255, 0.5);
 
   /* Footer */
   --footer-font-size: 0.85rem;
diff --git a/pelican-theme/templates/base.html b/pelican-theme/templates/base.html
index a4302d45..265ed45e 100644
--- a/pelican-theme/templates/base.html
+++ b/pelican-theme/templates/base.html
@@ -19,7 +19,7 @@
 </head>
 <body>
 <header>
-  <nav id="navigation">
+  <nav id="navigation"{% if page and page.landing and page.cover %} class="m-navbar-landing"{% endif %}{% if article and article.cover %} class="m-navbar-jumbo"{% endif %}>
     <div class="m-container">
       <div class="m-row">
         <a href="{{ SITEURL }}/" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m">
diff --git a/pelican-theme/templates/page.html b/pelican-theme/templates/page.html
index 8701037b..a2c92915 100644
--- a/pelican-theme/templates/page.html
+++ b/pelican-theme/templates/page.html
@@ -17,25 +17,37 @@
 {% endblock %}
 
 {% block main %}
-<article class="m-container" id="m-container-inflatable">
-  <div class="m-row">
-    <div class="m-col-l-10 m-push-l-1">
-      {% if not page.landing %}
-      <h1>
-        {% if page.breadcrumb %}
-        <span class="m-breadcrumb">
-          {% set breadcrumbs = page.breadcrumb.strip().split('\n') %}
-          {% for i in breadcrumbs %}
-          {% set url, _, title = i.strip().partition(' ') %}
-          <a href="{{ url|expand_link(page) }}">{{ title }}</a> &raquo;
-          {% endfor %}
-        </span>
+<article>
+  {% if page.landing %}
+  <div id="m-landing-image"{% if page.cover %} style="background-image: url('{{ page.cover|expand_link(page) }}');"{% endif %}>
+    <div id="m-landing-cover">
+      <div class="m-container">
+        {{ page.landing }}
+      </div>
+    </div>
+  </div>
+  {% endif %}
+  <div class="m-container" id="m-container-inflatable">
+    <div class="m-row">
+      <div class="m-col-l-10 m-push-l-1">
+        {% if not page.landing %}
+        <h1>
+          {% if page.breadcrumb %}
+          <span class="m-breadcrumb">
+            {% set breadcrumbs = page.breadcrumb.strip().split('\n') %}
+            {% for i in breadcrumbs %}
+            {% set url, _, title = i.strip().partition(' ') %}
+            <a href="{{ url|expand_link(page) }}">{{ title }}</a> &raquo;
+            {% endfor %}
+          </span>
+          {% endif %}
+          {{ page.title }}
+        </h1>
         {% endif %}
-        {{ page.title }}
-      </h1>
 <!-- content -->
 {{ page.content -}}
 <!-- /content -->
+      </div>
     </div>
   </div>
 </article>
-- 
2.30.2