Fix media object

docs/css/bulma-docs.css

@@ -173,7 +173,7 @@ input[type="radio"] {
 }
 
 small {
-  font-size: 0.75rem;
+  font-size: 0.8em;
 }
 
 span {
@@ -2234,7 +2234,6 @@ a.box:active {
   text-align: center;
   vertical-align: top;
   width: 1.5rem;
-  background: coral;
 }
 
 .icon .fa {
@@ -3243,6 +3242,9 @@ a.box:active {
 .level-item {
   align-items: center;
   display: flex;
+  flex-basis: auto;
+  flex-grow: 0;
+  flex-shrink: 0;
   justify-content: center;
 }
 
@@ -3257,6 +3259,13 @@ a.box:active {
   }
 }
 
+.level-left,
+.level-right {
+  flex-basis: auto;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
 .level-left .level-item:not(:last-child),
 .level-right .level-item:not(:last-child) {
   margin-right: 0.75rem;
@@ -3336,19 +3345,21 @@ a.box:active {
 
 .media-left,
 .media-right {
+  flex-basis: auto;
   flex-grow: 0;
   flex-shrink: 0;
 }
 
 .media-left {
-  margin-right: 0.75rem;
+  margin-right: 1rem;
 }
 
 .media-right {
-  margin-left: 0.75rem;
+  margin-left: 1rem;
 }
 
 .media-content {
+  flex-basis: auto;
   flex-grow: 1;
   flex-shrink: 1;
   text-align: left;
@@ -3361,7 +3372,7 @@ a.box:active {
 }
 
 .media .content:not(:last-child) {
-  margin-bottom: 1rem;
+  margin-bottom: 0.75rem;
 }
 
 .media .media {

docs/documentation/components/card.html

@@ -17,7 +17,7 @@ doc-subtab: card
 <div class="card">
   <div class="card-image">
     <figure class="image is-4by3">
-      <img src="{{site.url}}/images/placeholders/300x225.png" alt="">
+      <img src="{{site.url}}/images/placeholders/300x225.png" alt="Image">
     </figure>
   </div>
   <div class="card-content">
@@ -35,8 +35,8 @@ doc-subtab: card
 
     <div class="content">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-      Phasellus nec iaculis mauris. <a href="#">@bulmaio</a>.
-      <a href="#">#css</a> <a href="#">#responsive</a>
+      Phasellus nec iaculis mauris. <a>@bulmaio</a>.
+      <a>#css</a> <a>#responsive</a>
       <br>
       <small>11:09 PM - 1 Jan 2016</small>
     </div>
@@ -71,7 +71,7 @@ doc-subtab: card
   <div class="card-content">
     <div class="content">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
-      <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
+      <a>@bulmaio</a>. <a>#css</a> <a>#responsive</a>
       <br>
       <small>11:09 PM - 1 Jan 2016</small>
     </div>

docs/documentation/components/level.html

@@ -117,20 +117,28 @@ doc-subtab: level
 {% capture nav_centered_example %}
 <nav class="level">
   <div class="level-item has-text-centered">
-    <p class="heading">Tweets</p>
-    <p class="title">3,456</p>
+    <div>
+      <p class="heading">Tweets</p>
+      <p class="title">3,456</p>
+    </div>
   </div>
   <div class="level-item has-text-centered">
-    <p class="heading">Following</p>
-    <p class="title">123</p>
+    <div>
+      <p class="heading">Following</p>
+      <p class="title">123</p>
+    </div>
   </div>
   <div class="level-item has-text-centered">
-    <p class="heading">Followers</p>
-    <p class="title">456K</p>
+    <div>
+      <p class="heading">Followers</p>
+      <p class="title">456K</p>
+    </div>
   </div>
   <div class="level-item has-text-centered">
-    <p class="heading">Likes</p>
-    <p class="title">789</p>
+    <div>
+      <p class="heading">Likes</p>
+      <p class="title">789</p>
+    </div>
   </div>
 </nav>
 {% endcapture %}
@@ -143,7 +151,7 @@ doc-subtab: level
     <a class="link is-info">Menu</a>
   </p>
   <p class="level-item has-text-centered">
-    <img src="{{ site.url }}/images/bulma-type.png" alt="" style="height: 33px;">
+    <img src="{{ site.url }}/images/bulma-type.png" alt="" style="height: 30px;">
   </p>
   <p class="level-item has-text-centered">
     <a class="link is-info">Reservations</a>
@@ -175,20 +183,28 @@ doc-subtab: level
 {% capture nav_mobile_example %}
 <nav class="level is-mobile">
   <div class="level-item has-text-centered">
-    <p class="heading">Tweets</p>
-    <p class="title">3,456</p>
+    <div>
+      <p class="heading">Tweets</p>
+      <p class="title">3,456</p>
+    </div>
   </div>
   <div class="level-item has-text-centered">
-    <p class="heading">Following</p>
-    <p class="title">123</p>
+    <div>
+      <p class="heading">Following</p>
+      <p class="title">123</p>
+    </div>
   </div>
   <div class="level-item has-text-centered">
-    <p class="heading">Followers</p>
-    <p class="title">456K</p>
+    <div>
+      <p class="heading">Followers</p>
+      <p class="title">456K</p>
+    </div>
   </div>
   <div class="level-item has-text-centered">
-    <p class="heading">Likes</p>
-    <p class="title">789</p>
+    <div>
+      <p class="heading">Likes</p>
+      <p class="title">789</p>
+    </div>
   </div>
 </nav>
 {% endcapture %}

sass/base/generic.sass

@@ -71,7 +71,7 @@ input[type="radio"]
   vertical-align: baseline
 
 small
-  font-size: $size-small
+  font-size: 0.8em
 
 span
   font-style: inherit

sass/components/level.sass

@@ -1,6 +1,9 @@
 .level-item
   align-items: center
   display: flex
+  flex-basis: auto
+  flex-grow: 0
+  flex-shrink: 0
   justify-content: center
   .title,
   .subtitle
@@ -12,6 +15,9 @@
 
 .level-left,
 .level-right
+  flex-basis: auto
+  flex-grow: 0
+  flex-shrink: 0
   .level-item
     &:not(:last-child)
       margin-right: 0.75rem

sass/components/media.sass

@@ -1,15 +1,17 @@
 .media-left,
 .media-right
+  flex-basis: auto
   flex-grow: 0
   flex-shrink: 0
 
 .media-left
-  margin-right: 0.75rem
+  margin-right: 1rem
 
 .media-right
-  margin-left: 0.75rem
+  margin-left: 1rem
 
 .media-content
+  flex-basis: auto
   flex-grow: 1
   flex-shrink: 1
   text-align: left
@@ -19,7 +21,7 @@
   display: flex
   text-align: left
   .content:not(:last-child)
-    margin-bottom: 1rem
+    margin-bottom: 0.75rem
   .media
     border-top: 1px solid rgba($border, 0.5)
     display: flex

sass/elements/icon.sass

@@ -1,6 +1,5 @@
 .icon
   +fa(21px, 1.5rem)
-  background: coral
   .fa
     font-size: inherit
     line-height: inherit