From: Vladimír Vondruš <mosra@centrum.cz>
Date: Fri, 3 Nov 2023 12:50:40 +0000 (+0100)
Subject: css: support .m-image and .m-figure for <video> as well.
X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~cjwatson/git?a=commitdiff_plain;h=0c8966de0dfb0fe7654314d251592aa4f6e1ab65;p=blog.git

css: support .m-image and .m-figure for <video> as well.
---

diff --git a/css/m-components.css b/css/m-components.css
index e90e1cd9..7aac3c55 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -489,8 +489,8 @@ table.m-table th.m-dim pre, table.m-table th.m-dim code {
   background-color: var(--code-note-background-color);
 }
 
-/* Image. Ensure everything is done for both <img> and <svg>. */
-img.m-image, svg.m-image {
+/* Image. Ensure everything is done for <img>, <svg> and <video> as well. */
+img.m-image, svg.m-image, video.m-image {
   display: block;
   margin-left: auto;
   margin-right: auto;
@@ -498,20 +498,23 @@ img.m-image, svg.m-image {
 div.m-image {
   text-align: center;
 }
-img.m-image, svg.m-image, div.m-image img, div.m-image svg {
+img.m-image, svg.m-image, video.m-image,
+div.m-image img, div.m-image svg, div.m-image video {
   max-width: 100%;
   border-radius: var(--border-radius);
 }
-div.m-image.m-fullwidth img, div.m-image.m-fullwidth svg {
+div.m-image.m-fullwidth img,
+div.m-image.m-fullwidth svg,
+div.m-image.m-fullwidth video {
   width: 100%;
 }
 /* Image badge. Deliberately omitting <svg> since I don't see any use for those
-   as avatars yet. */
+   as avatars yet, <video> as well. */
 img.m-image.m-badge, div.m-image.m-badge img {
   border-radius: 50%;
 }
 
-/* Figure. Ensure everything is done for both <img> and <svg>. */
+/* Figure. Ensure everything is done for <img>, <svg> and <video> as well. */
 figure.m-figure {
   max-width: 100%;
   margin-top: 0;
@@ -553,7 +556,9 @@ figure.m-figure > *:last-child {
      priority than this */
   margin-bottom: 1rem !important;
 }
-figure.m-figure img, figure.m-figure svg {
+figure.m-figure img,
+figure.m-figure svg,
+figure.m-figure video {
   position: relative; /* so it's above the border */
   margin-left: 0;
   margin-right: 0;
@@ -562,11 +567,15 @@ figure.m-figure img, figure.m-figure svg {
   border-top-right-radius: var(--border-radius);
   max-width: 100%;
 }
-figure.m-figure.m-flat img, figure.m-figure.m-flat svg {
+figure.m-figure.m-flat img,
+figure.m-figure.m-flat svg,
+figure.m-figure.m-flat video {
   border-bottom-left-radius: var(--border-radius);
   border-bottom-right-radius: var(--border-radius);
 }
-figure.m-figure a img, figure.m-figure a svg {
+figure.m-figure a img,
+figure.m-figure a svg,
+figure.m-figure a video {
   margin-left: -1rem;
   margin-right: -1rem;
 }
@@ -578,7 +587,9 @@ figure.m-figure.m-fullwidth > *:first-child {
   /* otherwise figure with clickable image is centered differently */
   display: inline;
 }
-figure.m-figure.m-fullwidth img, figure.m-figure.m-fullwidth svg {
+figure.m-figure.m-fullwidth img,
+figure.m-figure.m-fullwidth svg,
+figure.m-figure.m-fullwidth video {
   width: 100%;
 }
 figure.m-figure.m-fullwidth::after {
diff --git a/css/m-dark+documentation.compiled.css b/css/m-dark+documentation.compiled.css
index 7d091c2f..cda89e73 100644
--- a/css/m-dark+documentation.compiled.css
+++ b/css/m-dark+documentation.compiled.css
@@ -766,7 +766,7 @@ table.m-table td.m-dim pre, table.m-table td.m-dim code,
 table.m-table th.m-dim pre, table.m-table th.m-dim code {
   background-color: rgba(34, 39, 46, 0.5);
 }
-img.m-image, svg.m-image {
+img.m-image, svg.m-image, video.m-image {
   display: block;
   margin-left: auto;
   margin-right: auto;
@@ -774,11 +774,14 @@ img.m-image, svg.m-image {
 div.m-image {
   text-align: center;
 }
-img.m-image, svg.m-image, div.m-image img, div.m-image svg {
+img.m-image, svg.m-image, video.m-image,
+div.m-image img, div.m-image svg, div.m-image video {
   max-width: 100%;
   border-radius: 0.2rem;
 }
-div.m-image.m-fullwidth img, div.m-image.m-fullwidth svg {
+div.m-image.m-fullwidth img,
+div.m-image.m-fullwidth svg,
+div.m-image.m-fullwidth video {
   width: 100%;
 }
 img.m-image.m-badge, div.m-image.m-badge img {
@@ -820,7 +823,9 @@ figure.m-figure > *:first-child {
 figure.m-figure > *:last-child {
   margin-bottom: 1rem !important;
 }
-figure.m-figure img, figure.m-figure svg {
+figure.m-figure img,
+figure.m-figure svg,
+figure.m-figure video {
   position: relative;
   margin-left: 0;
   margin-right: 0;
@@ -829,11 +834,15 @@ figure.m-figure img, figure.m-figure svg {
   border-top-right-radius: 0.2rem;
   max-width: 100%;
 }
-figure.m-figure.m-flat img, figure.m-figure.m-flat svg {
+figure.m-figure.m-flat img,
+figure.m-figure.m-flat svg,
+figure.m-figure.m-flat video {
   border-bottom-left-radius: 0.2rem;
   border-bottom-right-radius: 0.2rem;
 }
-figure.m-figure a img, figure.m-figure a svg {
+figure.m-figure a img,
+figure.m-figure a svg,
+figure.m-figure a video {
   margin-left: -1rem;
   margin-right: -1rem;
 }
@@ -843,7 +852,9 @@ figure.m-figure.m-fullwidth, figure.m-figure.m-fullwidth > * {
 figure.m-figure.m-fullwidth > *:first-child {
   display: inline;
 }
-figure.m-figure.m-fullwidth img, figure.m-figure.m-fullwidth svg {
+figure.m-figure.m-fullwidth img,
+figure.m-figure.m-fullwidth svg,
+figure.m-figure.m-fullwidth video {
   width: 100%;
 }
 figure.m-figure.m-fullwidth::after {
diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css
index c59cf409..42436566 100644
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -766,7 +766,7 @@ table.m-table td.m-dim pre, table.m-table td.m-dim code,
 table.m-table th.m-dim pre, table.m-table th.m-dim code {
   background-color: rgba(34, 39, 46, 0.5);
 }
-img.m-image, svg.m-image {
+img.m-image, svg.m-image, video.m-image {
   display: block;
   margin-left: auto;
   margin-right: auto;
@@ -774,11 +774,14 @@ img.m-image, svg.m-image {
 div.m-image {
   text-align: center;
 }
-img.m-image, svg.m-image, div.m-image img, div.m-image svg {
+img.m-image, svg.m-image, video.m-image,
+div.m-image img, div.m-image svg, div.m-image video {
   max-width: 100%;
   border-radius: 0.2rem;
 }
-div.m-image.m-fullwidth img, div.m-image.m-fullwidth svg {
+div.m-image.m-fullwidth img,
+div.m-image.m-fullwidth svg,
+div.m-image.m-fullwidth video {
   width: 100%;
 }
 img.m-image.m-badge, div.m-image.m-badge img {
@@ -820,7 +823,9 @@ figure.m-figure > *:first-child {
 figure.m-figure > *:last-child {
   margin-bottom: 1rem !important;
 }
-figure.m-figure img, figure.m-figure svg {
+figure.m-figure img,
+figure.m-figure svg,
+figure.m-figure video {
   position: relative;
   margin-left: 0;
   margin-right: 0;
@@ -829,11 +834,15 @@ figure.m-figure img, figure.m-figure svg {
   border-top-right-radius: 0.2rem;
   max-width: 100%;
 }
-figure.m-figure.m-flat img, figure.m-figure.m-flat svg {
+figure.m-figure.m-flat img,
+figure.m-figure.m-flat svg,
+figure.m-figure.m-flat video {
   border-bottom-left-radius: 0.2rem;
   border-bottom-right-radius: 0.2rem;
 }
-figure.m-figure a img, figure.m-figure a svg {
+figure.m-figure a img,
+figure.m-figure a svg,
+figure.m-figure a video {
   margin-left: -1rem;
   margin-right: -1rem;
 }
@@ -843,7 +852,9 @@ figure.m-figure.m-fullwidth, figure.m-figure.m-fullwidth > * {
 figure.m-figure.m-fullwidth > *:first-child {
   display: inline;
 }
-figure.m-figure.m-fullwidth img, figure.m-figure.m-fullwidth svg {
+figure.m-figure.m-fullwidth img,
+figure.m-figure.m-fullwidth svg,
+figure.m-figure.m-fullwidth video {
   width: 100%;
 }
 figure.m-figure.m-fullwidth::after {
diff --git a/css/m-light+documentation.compiled.css b/css/m-light+documentation.compiled.css
index e0759f22..88d6de9b 100644
--- a/css/m-light+documentation.compiled.css
+++ b/css/m-light+documentation.compiled.css
@@ -766,7 +766,7 @@ table.m-table td.m-dim pre, table.m-table td.m-dim code,
 table.m-table th.m-dim pre, table.m-table th.m-dim code {
   background-color: rgba(251, 240, 236, 0.5);
 }
-img.m-image, svg.m-image {
+img.m-image, svg.m-image, video.m-image {
   display: block;
   margin-left: auto;
   margin-right: auto;
@@ -774,11 +774,14 @@ img.m-image, svg.m-image {
 div.m-image {
   text-align: center;
 }
-img.m-image, svg.m-image, div.m-image img, div.m-image svg {
+img.m-image, svg.m-image, video.m-image,
+div.m-image img, div.m-image svg, div.m-image video {
   max-width: 100%;
   border-radius: 0.2rem;
 }
-div.m-image.m-fullwidth img, div.m-image.m-fullwidth svg {
+div.m-image.m-fullwidth img,
+div.m-image.m-fullwidth svg,
+div.m-image.m-fullwidth video {
   width: 100%;
 }
 img.m-image.m-badge, div.m-image.m-badge img {
@@ -820,7 +823,9 @@ figure.m-figure > *:first-child {
 figure.m-figure > *:last-child {
   margin-bottom: 1rem !important;
 }
-figure.m-figure img, figure.m-figure svg {
+figure.m-figure img,
+figure.m-figure svg,
+figure.m-figure video {
   position: relative;
   margin-left: 0;
   margin-right: 0;
@@ -829,11 +834,15 @@ figure.m-figure img, figure.m-figure svg {
   border-top-right-radius: 0.2rem;
   max-width: 100%;
 }
-figure.m-figure.m-flat img, figure.m-figure.m-flat svg {
+figure.m-figure.m-flat img,
+figure.m-figure.m-flat svg,
+figure.m-figure.m-flat video {
   border-bottom-left-radius: 0.2rem;
   border-bottom-right-radius: 0.2rem;
 }
-figure.m-figure a img, figure.m-figure a svg {
+figure.m-figure a img,
+figure.m-figure a svg,
+figure.m-figure a video {
   margin-left: -1rem;
   margin-right: -1rem;
 }
@@ -843,7 +852,9 @@ figure.m-figure.m-fullwidth, figure.m-figure.m-fullwidth > * {
 figure.m-figure.m-fullwidth > *:first-child {
   display: inline;
 }
-figure.m-figure.m-fullwidth img, figure.m-figure.m-fullwidth svg {
+figure.m-figure.m-fullwidth img,
+figure.m-figure.m-fullwidth svg,
+figure.m-figure.m-fullwidth video {
   width: 100%;
 }
 figure.m-figure.m-fullwidth::after {
diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
index 56cef576..0382f33b 100644
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -766,7 +766,7 @@ table.m-table td.m-dim pre, table.m-table td.m-dim code,
 table.m-table th.m-dim pre, table.m-table th.m-dim code {
   background-color: rgba(251, 240, 236, 0.5);
 }
-img.m-image, svg.m-image {
+img.m-image, svg.m-image, video.m-image {
   display: block;
   margin-left: auto;
   margin-right: auto;
@@ -774,11 +774,14 @@ img.m-image, svg.m-image {
 div.m-image {
   text-align: center;
 }
-img.m-image, svg.m-image, div.m-image img, div.m-image svg {
+img.m-image, svg.m-image, video.m-image,
+div.m-image img, div.m-image svg, div.m-image video {
   max-width: 100%;
   border-radius: 0.2rem;
 }
-div.m-image.m-fullwidth img, div.m-image.m-fullwidth svg {
+div.m-image.m-fullwidth img,
+div.m-image.m-fullwidth svg,
+div.m-image.m-fullwidth video {
   width: 100%;
 }
 img.m-image.m-badge, div.m-image.m-badge img {
@@ -820,7 +823,9 @@ figure.m-figure > *:first-child {
 figure.m-figure > *:last-child {
   margin-bottom: 1rem !important;
 }
-figure.m-figure img, figure.m-figure svg {
+figure.m-figure img,
+figure.m-figure svg,
+figure.m-figure video {
   position: relative;
   margin-left: 0;
   margin-right: 0;
@@ -829,11 +834,15 @@ figure.m-figure img, figure.m-figure svg {
   border-top-right-radius: 0.2rem;
   max-width: 100%;
 }
-figure.m-figure.m-flat img, figure.m-figure.m-flat svg {
+figure.m-figure.m-flat img,
+figure.m-figure.m-flat svg,
+figure.m-figure.m-flat video {
   border-bottom-left-radius: 0.2rem;
   border-bottom-right-radius: 0.2rem;
 }
-figure.m-figure a img, figure.m-figure a svg {
+figure.m-figure a img,
+figure.m-figure a svg,
+figure.m-figure a video {
   margin-left: -1rem;
   margin-right: -1rem;
 }
@@ -843,7 +852,9 @@ figure.m-figure.m-fullwidth, figure.m-figure.m-fullwidth > * {
 figure.m-figure.m-fullwidth > *:first-child {
   display: inline;
 }
-figure.m-figure.m-fullwidth img, figure.m-figure.m-fullwidth svg {
+figure.m-figure.m-fullwidth img,
+figure.m-figure.m-fullwidth svg,
+figure.m-figure.m-fullwidth video {
   width: 100%;
 }
 figure.m-figure.m-fullwidth::after {
diff --git a/doc/css/components.rst b/doc/css/components.rst
index 785f3eee..439974e7 100644
--- a/doc/css/components.rst
+++ b/doc/css/components.rst
@@ -607,10 +607,11 @@ justified.
 `Images`_
 =========
 
-Putting :css:`.m-image` class onto an :html:`<img>` / :html:`<svg>` tag makes
-the image centered, slightly rounded and sets its max width to 100%. Adding
-:css:`.m-fullwidth` on the image element works as expected. For accessibility
-reasons it's a good practice to include the ``alt`` attribute.
+Putting :css:`.m-image` class onto an :html:`<img>`, :html:`<svg>` or
+:html:`<video>` tag makes the image or video centered, slightly rounded and
+sets its max width to 100%. Adding :css:`.m-fullwidth` on the image element
+works as expected. For accessibility reasons it's a good practice to include
+the ``alt`` attribute.
 
 .. code-figure::
 
@@ -650,6 +651,8 @@ not the surrounding area:
 For avatars, similarly to the `Badges`_ above, applying a :css:`.m-badge` class
 together with :css:`.m-image` will make the image round. Works for both plain
 :html:`<img>` and clickable images wrapped in :html:`<div class="m-image">`.
+The :css:`.m-badge` isn't recognized for :html:`<svg>` or :html:`<video>`
+however.
 
 .. code-figure::
 
@@ -670,8 +673,8 @@ border around the caption and description. The caption is expected to be in the
 :html:`<figcaption>` element. Inside it, there can optionally be a longer
 description wrapped in a :css:`div.m-figure-description` element. The
 :css:`.m-fullwidth` class works here too and you can also wrap the
-:html:`<img>` / :html:`<svg>` element in an :html:`<a>` tag to make it
-clickable.
+:html:`<img>` / :html:`<svg>` / :html:`<video>` element in an :html:`<a>` tag
+to make it clickable.
 
 Figure always expects at least the caption to be present. If you want just an
 image, use the plain image tag. If you have a lot of figures on the page and