From: Vladimír Vondruš <mosra@centrum.cz>
Date: Sat, 18 Nov 2017 17:11:12 +0000 (+0100)
Subject: css: new Badge component.
X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~cjwatson/git?a=commitdiff_plain;h=486df9f810bd142ba165a46ef447cc23eca9bd92;p=blog.git

css: new Badge component.
---

diff --git a/css/m-components.css b/css/m-components.css
index 31491661..3c743d2f 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -643,6 +643,26 @@ dl.m-diary dd {
   padding: 0.9375rem 0.9375rem 0.9375rem 0.75rem;
 }
 
+/* Badge */
+.m-block.m-badge::after {
+  content: ' ';
+  display: block;
+  clear: both;
+}
+.m-block.m-badge h3 {
+  margin-left: 5rem;
+}
+.m-block.m-badge p {
+  margin-left: 5rem;
+  text-indent: 0;
+}
+.m-block.m-badge img {
+  width: 4rem;
+  height: 4rem;
+  border-radius: 2rem;
+  float: left;
+}
+
 /* Button */
 a.m-button {
   display: inline-block;
diff --git a/doc/css/components-test.rst b/doc/css/components-test.rst
index c7ac4201..60a90da2 100644
--- a/doc/css/components-test.rst
+++ b/doc/css/components-test.rst
@@ -82,6 +82,30 @@ Blocks
       </div>
     </div>
 
+Badge
+=====
+
+Badge with lots of text and less text:
+
+.. raw:: html
+
+    <div class="m-block m-badge m-primary">
+      <img src="{filename}/static/mosra.jpg" alt="The Author" />
+      <h3>About the author</h3>
+      <p><a href="#">The Author</a> is lorem ipsum dolor sit amet, consectetur
+      adipiscing elit. Aenean id elit posuere, consectetur magna congue,
+      sagittis est. Pellentesque est neque, aliquet nec consectetur in, mattis
+      ac diam. Aliquam placerat justo ut purus interdum, ac placerat lacus
+      consequat. Mauris id suscipit mauris, in scelerisque lectus.</p>
+    </div>
+
+    <div class="m-block m-badge m-dim">
+      <img src="{filename}/static/mosra.jpg" alt="The Author" />
+      <h3>About the author</h3>
+      <p><a href="#">The Author</a> is lorem ipsum dolor sit amet, consectetur
+      adipiscing elit.</p>
+    </div>
+
 Notes, frame
 ============
 
diff --git a/doc/css/components.rst b/doc/css/components.rst
index 88cf94d6..13b2845d 100644
--- a/doc/css/components.rst
+++ b/doc/css/components.rst
@@ -136,6 +136,35 @@ but the CSS class can be used on any block element.
           </div>
         </div>
 
+`Badges`_
+=========
+
+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.
+
+.. code-figure::
+
+    .. code:: html
+
+        <div class="m-block m-badge m-success">
+          <img src="author.jpg" alt="The Author" />
+          <h3>About the author</h3>
+          <p><a href="#">The Author</a> is ...</p>
+        </div>
+
+    .. raw:: html
+
+        <div class="m-block m-badge m-success">
+          <img src="{filename}/static/mosra.jpg" alt="The Author" />
+          <h3>About the author</h3>
+          <p><a href="http://blog.mosra.cz">The Author</a> is not really
+          smiling at you from this avatar. Sorry about that. He knows that and
+          he promises to improve. Stalk him
+          <a href="https://twitter.com/czmosra">on Twitter</a> if you want to
+          get notified when he gets a better avatar.</p>
+        </div>
+
 `Notes, frame`_
 ===============
 
diff --git a/doc/static/mosra.jpg b/doc/static/mosra.jpg
new file mode 100644
index 00000000..2992b650
Binary files /dev/null and b/doc/static/mosra.jpg differ