css: .m-jumbo class and related unique things are now IDs.

Because there can be only one on the page.

diff --git a/css/m-components.css b/css/m-components.css
index 5564902080b85c814b3515a4e5c510b3f22253be..ac467a14bf0a897d93cf50cf31fa9539f2621c5a 100644 (file)
--- 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 0f9aac3c219dbb47d3f45f7919594040b6058f1e..ece32c0ff909daf6c5e800b99bef8b574d279203 100644 (file)
--- 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>