From ae325b1c9364d9437c074ab627928f9e51a9dbe2 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Vladim=C3=ADr=20Vondru=C5=A1?= <mosra@centrum.cz>
Date: Mon, 18 Sep 2017 19:00:40 +0200
Subject: [PATCH] css: .m-jumbo class and related unique things are now IDs.

Because there can be only one on the page.
---
 css/m-components.css                 | 22 +++++++++++-----------
 pelican-theme/templates/article.html |  6 +++---
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/css/m-components.css b/css/m-components.css
index 55649020..ac467a14 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -362,10 +362,10 @@ article section > h4 a, article section > h5 a, article section > h6 a {
 }
 
 /* Jumbo article */
-article.m-jumbo {
+article#m-jumbo {
   margin-top: -1rem;
 }
-article.m-jumbo > header .m-jumbo-image {
+article#m-jumbo > header #m-jumbo-image {
   background-size: cover;
   background-color: var(--article-jumbo-cover-background-color);
   background-position: center center;
@@ -375,36 +375,36 @@ article.m-jumbo > header .m-jumbo-image {
   margin-bottom: 1rem;
   padding-top: 1rem;
 }
-article.m-jumbo > header .m-jumbo-cover {
+article#m-jumbo > header #m-jumbo-cover, body#m-landing #m-landing-cover {
   background: linear-gradient(transparent 0%, transparent 50%, var(--background-color) 100%);
   width: 100%;
   height: 100%;
 }
-article.m-jumbo > header h1, article.m-jumbo > header h2 {
+article#m-jumbo > header h1, article#m-jumbo > header h2 {
   text-align: center;
   font-weight: bold;
 }
-article.m-jumbo > header h1 {
+article#m-jumbo > header h1 {
   font-size: 10vh;
 }
-article.m-jumbo > header h2 {
+article#m-jumbo > header h2 {
   font-size: 3vh;
 }
-article.m-jumbo > header a {
+article#m-jumbo > header a {
   text-decoration: none;
 }
 
-article.m-jumbo > header, article.m-jumbo > header h1, article.m-jumbo > header a {
+article#m-jumbo > header, article#m-jumbo > header h1, article#m-jumbo > header a {
   color: #ffffff;
 }
-article.m-jumbo > header a:hover, article.m-jumbo > header a:focus, article.m-jumbo > header a:active {
+article#m-jumbo > header a:hover, article#m-jumbo > header a:focus, article#m-jumbo > header a:active {
   color: #f0f0f0;
 }
 
-article.m-jumbo.m-inverted > header, article.m-jumbo.m-inverted > header h1, article.m-jumbo.m-inverted > header a {
+article#m-jumbo.m-inverted > header, article#m-jumbo.m-inverted > header h1, article#m-jumbo.m-inverted > header a {
   color: #000000;
 }
-article.m-jumbo.m-inverted > header a:hover, article.m-jumbo.m-inverted > header a:focus, article.m-jumbo.m-inverted > header a:active {
+article#m-jumbo.m-inverted > header a:hover, article#m-jumbo.m-inverted > header a:focus, article#m-jumbo.m-inverted > header a:active {
   color: #0f0f0f;
 }
 
diff --git a/pelican-theme/templates/article.html b/pelican-theme/templates/article.html
index 0f9aac3c..ece32c0f 100644
--- a/pelican-theme/templates/article.html
+++ b/pelican-theme/templates/article.html
@@ -24,10 +24,10 @@
 
 {% block content %}
   {% if article.cover %}
-  <article class="m-jumbo{% if article.class %} {{ article.class }}{%endif%}">
+  <article id="m-jumbo"{% if article.class %}class="{{ article.class }}"{%endif%}">
     <header>
-      <div class="m-jumbo-image" style="background-image: url('{{ article|expand_link('cover') }}');">
-        <div class="m-jumbo-cover">
+      <div id="m-jumbo-image" style="background-image: url('{{ article|expand_link(article.cover) }}');">
+        <div id="m-jumbo-cover">
           <div class="m-container">
             <div class="m-row">
               <div class="m-col-t-6 m-col-s-5 m-push-s-1 m-text-left">{{ article.locale_date }}</div>
-- 
2.30.2