css: make hiding brand link on landing pages opt-in.

Not all landing pages repeat it, probably just one does that -- the
index one.

diff --git a/css/m-components.css b/css/m-components.css
index 50d684ec510083e6249aa77fc933503d6e958fc9..f222e19b8370985bc6c25387e73516402b011043 100644 (file)
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -149,10 +149,10 @@ 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 {
+body > header > nav.m-navbar-landing a#m-navbar-brand.m-navbar-brand-hidden {
   visibility: hidden;
 }
-body > header > nav.m-navbar-landing:target a#m-navbar-brand {
+body > header > nav.m-navbar-landing:target a#m-navbar-brand.m-navbar-brand-hidden {
   visibility: visible;
 }
 body > header > nav {

diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css
index ab1b172affd0204586ca3edfc5fc421e04f9aecb..71edd6dd8c0a96c1a0a0454e72705eda78b63c38 100644 (file)
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -507,10 +507,10 @@ body> header > nav.m-navbar-jumbo:target {
   background-color: #22272e;
   opacity: 1;
 }
-body > header > nav.m-navbar-landing a#m-navbar-brand {
+body > header > nav.m-navbar-landing a#m-navbar-brand.m-navbar-brand-hidden {
   visibility: hidden;
 }
-body > header > nav.m-navbar-landing:target a#m-navbar-brand {
+body > header > nav.m-navbar-landing:target a#m-navbar-brand.m-navbar-brand-hidden {
   visibility: visible;
 }
 body > header > nav {

diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
index d68d730873c5a4967d1818181bb3ae3d9831474d..98e7ff04012d07586b43c894cad7b1b15428dd0b 100644 (file)
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -507,10 +507,10 @@ body> header > nav.m-navbar-jumbo:target {
   background-color: #ffffff;
   opacity: 1;
 }
-body > header > nav.m-navbar-landing a#m-navbar-brand {
+body > header > nav.m-navbar-landing a#m-navbar-brand.m-navbar-brand-hidden {
   visibility: hidden;
 }
-body > header > nav.m-navbar-landing:target a#m-navbar-brand {
+body > header > nav.m-navbar-landing:target a#m-navbar-brand.m-navbar-brand-hidden {
   visibility: visible;
 }
 body > header > nav {

diff --git a/doc/css/page-layout.rst b/doc/css/page-layout.rst
index 0a1765b9646fb915ea0f529305f9278e6e9c6c2b..70db13d805781d9a1cb6131555bf6455e8e82b86 100644 (file)
--- a/doc/css/page-layout.rst
+++ b/doc/css/page-layout.rst
@@ -354,8 +354,9 @@ content "below the fold", *not* the cover image.
 The cover image always spans the whole screen width and goes also under the top
 navbar. In order to make the navbar aware of the image, put a :css:`.m-navbar-landing`
 CSS class on the :html:`<nav>` element --- this makes navbar dimmer with
-transparent background and hides the brand link on the left (with the
-assumption that the landing page includes a bigger version of it). While the
+transparent background. Usually the brand link on the left is superfluous as
+the landing page repeats it in a more prominent place, to hide it put a
+:css:`.m-navbar-brand-hidden` on the :css:`#m-navbar-brand` element. While the
 landing page is designed to catch attention of new users, it shouldn't prevent
 regular visitors from navigating the website --- because of that the top navbar
 is not hidden completely and hovering it will make it more visible. This works
@@ -579,8 +580,7 @@ Similarly to `landing pages <#landing-pages>`_, the cover image of the jumbo
 article always spans the whole screen width and goes below the top navbar. If
 you want the navbar to be semi-transparent, put :css:`.m-navbar-jumbo` on the
 :html:`<nav>` element. Compared to `landing pages <#landing-pages>`_ the navbar
-retains semi-transparent background and the brand link is not hidden, as brand
-name is not expected to be duplicated in article header.
+retains semi-transparent background at all times.
 
 .. note-info::
 

diff --git a/doc/index.rst b/doc/index.rst
index d38e57241a594c903593142f02ea55092987c3d5..c3751e1a99d2286ac0c847588ede39bb8083da0a 100644 (file)
--- a/doc/index.rst
+++ b/doc/index.rst
@@ -30,6 +30,7 @@ m.css
 :cover: {filename}/static/cover.jpg
 :summary: A no-nonsense, no-JavaScript CSS framework and Pelican theme for
     content-oriented websites
+:navbar_brand_hidden: true
 :landing:
     .. container:: m-row
 

diff --git a/doc/pelican/theme.rst b/doc/pelican/theme.rst
index 7fd9c2e691a48a12aad14812b2b2d292b40f6247..cfbb32b8c06f168f0903e2bc69e2a317ce874609 100644 (file)
--- a/doc/pelican/theme.rst
+++ b/doc/pelican/theme.rst
@@ -251,7 +251,8 @@ cover image spanning the whole window width. Put cover image URL into a
 :abbr:`reST <reStructuredText>`-processed content that appears on top of the
 cover image. Contents of the :rst:`:landing:` are put into a
 :html:`<div class="m-container">`, you are expected to fully take care of rows
-and columns in it.
+and columns in it. It's also possible to hide the navbar brand link --- simply
+add a :rst:`:navbar_brand_hidden:` field with non-empty contents.
 
 .. block-warning:: Configuration
 
@@ -275,6 +276,7 @@ destination and URL.
     :save_as: index.html
     :url:
     :cover: {filename}/static/cover.jpg
+    :navbar_brand_hidden: true
     :landing:
         .. container:: m-row
 

diff --git a/pelican-theme/templates/base.html b/pelican-theme/templates/base.html
index 430f06e74fb5afae7e00478731443a7ffe8dc068..52a421d1f970bf1783cba92f4927ff8130b2231d 100644 (file)
--- a/pelican-theme/templates/base.html
+++ b/pelican-theme/templates/base.html
@@ -23,7 +23,7 @@
 <header><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">
+      <a href="{{ SITEURL }}/" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m{% if page and page.landing and page.cover and page.navbar_brand_hidden %} m-navbar-brand-hidden{% endif %}">
         {%- if SITE_LOGO %}<img src="{{ SITE_LOGO }}" />{% endif -%}
         {{- SITE_LOGO_TEXT -}}
       </a>