Enable website development (#2490)

theme/assets/stylesheets/extra.css

@@ -484,7 +484,7 @@ path[d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-
 }
 
 /* Cover images */
-.center-cropped {
+.cover.center-cropped {
     width: 100%;
     height: 200px;
     background-position: center center;
@@ -497,19 +497,15 @@ path[d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-
 }
 
 /* Set the image to fill its parent and make transparent */
-.center-cropped img {
-    min-height: 100%;
-    min-width: 100%;
-    opacity: 0;
+.cover.center-cropped img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
 }
 
-.center-cropped h1 {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    color: white;
-    z-index: 1;
+.cover ~ h1 {
+    margin: 1.25em 0 0;
+    text-align: center;
 }
 
 /* Social share button */

theme/partials/content.html

@@ -22,10 +22,10 @@
 -->
 
 {% if page and page.meta and page.meta.cover %}
-  <div class="center-cropped" style="background-image:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/en/assets/img/cover/{{ page.meta.cover }}');">
+  <div class="cover center-cropped">
       <img src="/en/assets/img/cover/{{ page.meta.cover }}" alt="">
   </div>
-  <h1 style="margin-top: 50px; text-align: center">{{ page.title | d(config.site_name, true)}}</h1>
+  <h1>{{ page.title | d(config.site_name, true)}}</h1>
 {% endif %}
 
 <!-- Tags -->