generators/hugo/layouts/shortcodes/video: Remove some classes

5 files changed, 26 insertions, 17 deletions

diff --git a/app/views/index.view.php b/app/views/index.view.php
index b561e10..6bd5f58 100644
--- a/app/views/index.view.php
+++ b/app/views/index.view.php
@@ -23,15 +23,13 @@
                         In it for the long haul
                     </h2>
 
-                    <div class="video has-text-centered">
-                      <video preload="none" poster="/images/pipes.png" width="732" height="" autoplay="true" loop="true" muted="true">
+                    <video-container>
+                      <video preload="none" poster="/images/pipes.png" width="732" autoplay="true" loop="true" muted="true">
                         <source src="/videos/pipes.mp4" type="video/mp4" />
-                        Your browser does not support the video tag.
+                        Sorry, your browser doesn't support embedded videos.
                       </video>
-                      <footer class="has-text-centered has-text-grey-dark">
-                      pipes.sh terminal screensaver
-                      </footer>
-                    </div>
+                      <footer class="has-text-grey-dark">pipes.sh terminal screensaver</footer>
+                    </video-container>
 
                     <div class="content">
 
diff --git a/generators/hugo/themes/tdro/layouts/_default/_markup/render-image.html b/generators/hugo/themes/tdro/layouts/_default/_markup/render-image.html
index a181ed4..9c368c7 100644
--- a/generators/hugo/themes/tdro/layouts/_default/_markup/render-image.html
+++ b/generators/hugo/themes/tdro/layouts/_default/_markup/render-image.html
@@ -11,7 +11,7 @@
       height="{{ $image.Height }}"
     />
   </a>
-  <figcaption class="has-text-centered has-text-grey-dark">
+  <figcaption class="has-text-grey-dark">
     {{ $.Title | markdownify }}
   </figcaption>
 </figure>
diff --git a/generators/hugo/themes/tdro/layouts/shortcodes/image.html b/generators/hugo/themes/tdro/layouts/shortcodes/image.html
index 31527e2..e90352d 100644
--- a/generators/hugo/themes/tdro/layouts/shortcodes/image.html
+++ b/generators/hugo/themes/tdro/layouts/shortcodes/image.html
@@ -5,5 +5,5 @@
   <a href="{{ .Get `source` }}" onclick="return false;">
     <img data-image-zoom src="{{ .Get `source` }}" alt="{{ .Get `title` }}" title="{{ .Get `title` }}" width="{{ $image.Width }}" height="{{ $image.Height }}"/>
   </a>
-  <figcaption class="has-text-centered has-text-grey-dark">{{ .Inner | markdownify }}</figcaption>
+  <figcaption class="has-text-grey-dark">{{ .Inner | markdownify }}</figcaption>
 </figure>
diff --git a/generators/hugo/themes/tdro/layouts/shortcodes/video.html b/generators/hugo/themes/tdro/layouts/shortcodes/video.html
index 47d0c46..719e212 100644
--- a/generators/hugo/themes/tdro/layouts/shortcodes/video.html
+++ b/generators/hugo/themes/tdro/layouts/shortcodes/video.html
@@ -1,7 +1,12 @@
-<div class="video has-text-centered">
-  <video preload="none" poster="{{ .Get `poster` }}" width="{{ .Get `width` }}" height="{{ .Get `height`}}" controls {{ .Get `options` | safeHTMLAttr }}>
+<video-container>
+  <video
+    preload="none"
+    poster="{{ .Get `poster` }}"
+    width="{{ .Get `width` }}"
+    height="{{ .Get `height`}}"
+    controls {{ .Get `options` | safeHTMLAttr }}>
     <source src="{{ .Get `source` }}" type="video/mp4">
-    Your browser does not support the video tag.
+    Sorry, your browser doesn't support embedded videos.
   </video>
-  <footer class="has-text-centered has-text-grey-dark">{{ .Inner | markdownify }}</footer>
-</div>
+  <footer class="has-text-grey-dark">{{ .Inner | markdownify }}</footer>
+</video-container>
diff --git a/public/css/tdro.css b/public/css/tdro.css
index fb1017c..bd7dabe 100644
--- a/public/css/tdro.css
+++ b/public/css/tdro.css
@@ -1931,15 +1931,21 @@ figcaption code {
 }
 
 figcaption,
-.video footer,
-.video footer code {
+video ~ footer,
+video ~ footer code {
   font-size: 0.9rem;
 }
 
 figcaption,
-.video footer {
+video ~ footer {
   margin-top: 1.5em;
   margin-bottom: 1em;
+  text-align: center;
+}
+
+video-container {
+  display: block;
+  text-align: center;
 }
 
 /*