Add cover images (#2137)

theme/assets/img/cover/README.md

@@ -0,0 +1,7 @@
+# Cover images
+
+The cover images in this folder were obtained from Unsplash.
+
+## License
+
+See the [Unsplash License](https://unsplash.com/license) for details.

theme/assets/stylesheets/extra.css

@@ -454,3 +454,31 @@ div[class="md-source__icon md-icon"], div[class="md-source__repository md-source
 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-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25Z"] {
     d: path('M16.937 3.722a2.363 2.363 0 1 1 3.341 3.341L19.342 8 16 4.658l.937-.936ZM13.467 7 3 17.467V21h3.532L17 10.533 13.465 7h.001Z')
 }
+
+/* Cover images */
+.center-cropped {
+    width: 100%;
+    height: 200px;
+    background-position: center center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    overflow: hidden;
+    position: relative;
+    text-align: center;
+    border-radius: 0.5em;
+}
+  
+/* Set the image to fill its parent and make transparent */
+.center-cropped img {
+    min-height: 100%;
+    min-width: 100%;
+    opacity: 0;
+}
+
+.center-cropped h1 {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+}