From 298d30bd020d1ad5793706390cb039fed15f609f Mon Sep 17 00:00:00 2001
From: =?utf8?q?Vladim=C3=ADr=20Vondru=C5=A1?= <mosra@centrum.cz>
Date: Thu, 12 Sep 2019 21:28:10 +0200
Subject: [PATCH] css: support .m-badge on standalone images as well.

---
 css/m-components.css                   |  5 +++++
 css/m-dark+documentation.compiled.css  |  3 +++
 css/m-dark.compiled.css                |  3 +++
 css/m-light+documentation.compiled.css |  3 +++
 css/m-light.compiled.css               |  3 +++
 doc/css/components-test.rst            | 14 ++++++++++++++
 doc/css/components.rst                 | 17 ++++++++++++++++-
 7 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/css/m-components.css b/css/m-components.css
index bb2dfe16..a365ca5f 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -501,6 +501,11 @@ img.m-image, svg.m-image, div.m-image img, div.m-image svg {
 div.m-image.m-fullwidth img, div.m-image.m-fullwidth svg {
   width: 100%;
 }
+/* Image badge. Deliberately omitting <svg> since I don't see any use for those
+   as avatars yet. */
+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.m-figure {
diff --git a/css/m-dark+documentation.compiled.css b/css/m-dark+documentation.compiled.css
index 65935bc2..e5d42b53 100644
--- a/css/m-dark+documentation.compiled.css
+++ b/css/m-dark+documentation.compiled.css
@@ -777,6 +777,9 @@ img.m-image, svg.m-image, div.m-image img, div.m-image svg {
 div.m-image.m-fullwidth img, div.m-image.m-fullwidth svg {
   width: 100%;
 }
+img.m-image.m-badge, div.m-image.m-badge img {
+  border-radius: 50%;
+}
 figure.m-figure {
   max-width: 100%;
   margin-top: 0;
diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css
index c3641866..f10b51e0 100644
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -777,6 +777,9 @@ img.m-image, svg.m-image, div.m-image img, div.m-image svg {
 div.m-image.m-fullwidth img, div.m-image.m-fullwidth svg {
   width: 100%;
 }
+img.m-image.m-badge, div.m-image.m-badge img {
+  border-radius: 50%;
+}
 figure.m-figure {
   max-width: 100%;
   margin-top: 0;
diff --git a/css/m-light+documentation.compiled.css b/css/m-light+documentation.compiled.css
index 2f7fa5bf..12aa5ccc 100644
--- a/css/m-light+documentation.compiled.css
+++ b/css/m-light+documentation.compiled.css
@@ -777,6 +777,9 @@ img.m-image, svg.m-image, div.m-image img, div.m-image svg {
 div.m-image.m-fullwidth img, div.m-image.m-fullwidth svg {
   width: 100%;
 }
+img.m-image.m-badge, div.m-image.m-badge img {
+  border-radius: 50%;
+}
 figure.m-figure {
   max-width: 100%;
   margin-top: 0;
diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
index 81c3754d..b250c267 100644
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -777,6 +777,9 @@ img.m-image, svg.m-image, div.m-image img, div.m-image svg {
 div.m-image.m-fullwidth img, div.m-image.m-fullwidth svg {
   width: 100%;
 }
+img.m-image.m-badge, div.m-image.m-badge img {
+  border-radius: 50%;
+}
 figure.m-figure {
   max-width: 100%;
   margin-top: 0;
diff --git a/doc/css/components-test.rst b/doc/css/components-test.rst
index af8973fb..f0e165b3 100644
--- a/doc/css/components-test.rst
+++ b/doc/css/components-test.rst
@@ -988,6 +988,20 @@ SVG image, fullwidth, with link outside:
       </a>
     </div>
 
+Badge:
+
+.. raw:: html
+
+    <img src="{static}/static/mosra.jpg" class="m-image m-badge">
+
+Badge, with a link:
+
+.. raw:: html
+
+    <div class="m-image m-badge">
+      <a href="http://blog.mosra.cz/"><img src="{static}/static/mosra.jpg" /></a>
+    </div>
+
 Figures
 =======
 
diff --git a/doc/css/components.rst b/doc/css/components.rst
index 7fa8cc36..d2e055e5 100644
--- a/doc/css/components.rst
+++ b/doc/css/components.rst
@@ -151,7 +151,8 @@ but the CSS class can be used on any block element.
 Badges are blocks together with an avatar, containing for example info about
 the author of given article. Simply add :css:`.m-badge` to your colored block
 element and put an :html:`<img>` element with the avatar as the first child.
-Only :html:`<h3>` is supported for a badge.
+Only :html:`<h3>` is supported for a badge. For standalone rounded avatars, see
+`Images`_ below.
 
 .. code-figure::
 
@@ -643,6 +644,20 @@ not the surrounding area:
     your :abbr:`reST <reStructuredText>` markup using the
     `Pelican Images plugin <{filename}/plugins/images.rst>`_.
 
+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">`.
+
+.. code-figure::
+
+    .. code:: html
+
+        <img src="author.jpg" alt="The Author" class="m-image m-badge" />
+
+    .. raw:: html
+
+        <img src="{static}/static/mosra.jpg" alt="The Author" class="m-image m-badge" style="width: 125px" />
+
 `Figures`_
 ==========
 
-- 
2.30.2