css: new Badge component.

diff --git a/css/m-components.css b/css/m-components.css
index 31491661a92a57edbbbbc43e9501347e1f48005a..3c743d2fdacc04232a0d31830fb73b424045ca27 100644 (file)
--- 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 c7ac4201b15994ae49c0e7dd35a6a78f5886f7eb..60a90da2c29466db688ca36ef0e0eb5ef1a03514 100644 (file)
--- 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 88cf94d6a3f54b717a9dcf4e1c4c04f7a5f7ed92..13b2845d550d995b2261fe43cfc312c6edc4c526 100644 (file)
--- 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 (file)
index 0000000..2992b65
Binary files /dev/null and b/doc/static/mosra.jpg differ