little better

templates/blocks/slide.html

@@ -9,7 +9,7 @@
   {% endif %}
   <div class="container">
     <div class="carousel-caption">
-      <h3 class="display-4">{{ this.title }}</h5>
+      <h3 class="display-4">{{ this.title }}</h3>
       <p class="lead">
         {{ this.description }}
         <br>

templates/layout-2020.html

@@ -44,6 +44,7 @@
     <style>
       video{
         width:100%;
+        object-fit: cover;
       }
 
     .carousel-caption {
@@ -55,39 +56,39 @@
 
     /* Extra small devices (portrait phones, less than 576px) */
     @media (max-width: 575.98px) {
-      .carousel-item {
-        height: 200px;
+      .carousel-item img, video {
+        height: 280px;
       }
     }
 
     /* Small devices (landscape phones, 576px and up) */
     @media (min-width: 576px) and (max-width: 767.98px) {
-      .carousel-item {
+      .carousel-item img, video {
         height: 300px;
       }
     }
 
     /* Medium devices (tablets, 768px and up) */
     @media (min-width: 768px) and (max-width: 991.98px) {
-      .carousel-item {
+      .carousel-item img, video {
         height: 400px;
       }
     }
 
     /* Large devices (desktops, 992px and up) */
     @media (min-width: 992px) and (max-width: 1199.98px) {
-      .carousel-item {
+      .carousel-item img, video {
         height: 450px;
       }
     }
 
     /* Extra large devices (large desktops, 1200px and up) */
-    /* 
+    
     @media (min-width: 1200px) {
-      .carousel-item {
+      .carousel-item img, video {
         height: 900px;
       }
-    } */
+    }
 
     </style>
   </head>
@@ -159,11 +160,7 @@
     <div id="head-carousel" class="carousel slide" data-ride="carousel">
       <ol class="carousel-indicators">
         {% for slide in this.slide.blocks %}
-          {% if loop.index0 == 0 %}
-            <li data-target="#head-carousel" data-slide-to="0" class="active"></li>
-          {% else %}
-            <li data-target="#head-carousel" data-slide-to="{{ loop.index0 }}"></li>
-          {% endif %}
+          {% if loop.index0 == 0 %}<li data-target="#head-carousel" data-slide-to="0" class="active"></li>{% else %}<li data-target="#head-carousel" data-slide-to="{{ loop.index0 }}"></li>{% endif %}
         {% endfor %}
       </ol>
       <div class="carousel-inner">