css: support .m-badge on standalone images as well.

diff --git a/css/m-components.css b/css/m-components.css
index bb2dfe1644d7a137e11a9199f934f13173bb4b61..a365ca5f19625af8d522cbd689c621419661a476 100644 (file)
--- 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 65935bc2ba5c8776fd4e565da0cbaeff69f18be3..e5d42b538ef6925ec2094761904b6179af067c8e 100644 (file)
--- 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 c3641866231e297cbaaa56d3ed0bf3ef66c883dc..f10b51e0a018e14ecec845bd4f8a5fd5152c8e32 100644 (file)
--- 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 2f7fa5bfb7ffe3053b02a1bd87c15845cd5d44d7..12aa5ccc544a3f20e968918a274868f92466a07c 100644 (file)
--- 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 81c3754d5fa2de8be070a2006c2f78b0460ac084..b250c267365d4478f8370ce4b774e974d95214d8 100644 (file)
--- 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 af8973fb2c66edb4c00b3f7779c619e565e1bc26..f0e165b3a617f45ef5b1ccffdd751e1fa43e4696 100644 (file)
--- 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 7fa8cc36d1cae88b1cda7396b51a08429fc87a2e..d2e055e594d09df1ac11b5c82a81a3c17f71dcb2 100644 (file)
--- 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`_
 ==========