Merge pull request #318 from jgthms/fix/docs-mobile

Fix docs mobile version

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Bulma Changelog
 
+## 0.2.1
+
+* Fix: container flex
+* Fix: nav-item flex
+* Fix: media-number flex
+
 ## 0.2.0
 
 * Added: new branding

docs/_includes/footer.html

@@ -75,6 +75,7 @@
     .title.is-2 a {
       color: #242424;
       padding-left: 60px;
+      position: relative;
     }
 
     .title.is-2 a:hover {

docs/bulma-docs.sass

@@ -4,7 +4,6 @@
 @import "../sass/utilities/mixins.sass"
 
 // Override
-
 .button
   +tablet
     small
@@ -25,13 +24,15 @@ body.page-grid .column > .notification
     margin-left: 10px
 
 // Additional
+svg
+  max-height: 100%
+  max-width: 100%
 
 $carbon-space: 15px
 
 #carbon
   max-width: 340px
   min-height: 100px + ($carbon-space * 2)
-  min-width: 300px
   padding: $carbon-space
   +tablet
     margin-left: auto
@@ -137,7 +138,7 @@ $curve: cubic-bezier(0, 0.71, 0.29, 1)
   animation-fill-mode: both
   animation-name: floatUp
   animation-timing-function: $curve
-  border-radius: 20px
+  border-radius: 24px
   display: inline-block
   height: 240px
   margin-bottom: 40px
@@ -173,9 +174,9 @@ $curve: cubic-bezier(0, 0.71, 0.29, 1)
         fill: $turquoise
 
   +mobile
-    border-radius: 10px
+    border-radius: 16px
-    height: 120px
+    height: 160px
-    width: 120px
+    width: 160px
 
 #bulma
   animation: slideDown 500ms both
@@ -232,7 +233,7 @@ html.route-index #carbon
 #social
   align-items: center
   display: flex
-  height: 20px
+  flex-wrap: wrap
   margin-bottom: 1em
   justify-content: center
   a
@@ -240,8 +241,9 @@ html.route-index #carbon
     font-size: 11px
     height: 20px
     line-height: 20px
-  iframe:last-child
+    margin: 5px
-    margin-left: 10px
+  iframe
+    margin: 5px
 
 #images
   tr

docs/css/bulma-docs.css

@@ -3415,6 +3415,16 @@ a.box:active {
   }
 }
 
+.media-number,
+.media-left,
+.media-right {
+  -webkit-box-flex: 0;
+      -ms-flex-positive: 0;
+          flex-grow: 0;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+}
+
 .media-number {
   background-color: whitesmoke;
   border-radius: 290486px;
@@ -3422,24 +3432,13 @@ a.box:active {
   font-size: 18px;
   height: 32px;
   line-height: 24px;
+  margin-right: 10px;
   min-width: 32px;
   padding: 4px 8px;
   text-align: center;
   vertical-align: top;
 }
 
-@media screen and (max-width: 768px) {
-  .media-number {
-    margin-bottom: 10px;
-  }
-}
-
-@media screen and (min-width: 769px) {
-  .media-number {
-    margin-right: 10px;
-  }
-}
-
 .media-left {
   margin-right: 10px;
 }
@@ -3998,6 +3997,11 @@ a.box:active {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-flex: 0;
+      -ms-flex-positive: 0;
+          flex-grow: 0;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
@@ -6708,8 +6712,8 @@ a.panel-block:hover {
   -webkit-box-flex: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
-  -ms-flex-negative: 0;
+  -ms-flex-negative: 1;
-      flex-shrink: 0;
+      flex-shrink: 1;
 }
 
 @keyframes spin-around {
@@ -6792,10 +6796,14 @@ body.page-grid .column > .notification {
   }
 }
 
+svg {
+  max-height: 100%;
+  max-width: 100%;
+}
+
 #carbon {
   max-width: 340px;
   min-height: 130px;
-  min-width: 300px;
   padding: 15px;
 }
 
@@ -7041,7 +7049,7 @@ body.page-grid .column > .notification {
           animation-name: floatUp;
   -webkit-animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
           animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
-  border-radius: 20px;
+  border-radius: 24px;
   display: inline-block;
   height: 240px;
   margin-bottom: 40px;
@@ -7106,9 +7114,9 @@ body.page-grid .column > .notification {
 
 @media screen and (max-width: 768px) {
   #b {
-    border-radius: 10px;
+    border-radius: 16px;
-    height: 120px;
+    height: 160px;
-    width: 120px;
+    width: 160px;
   }
 }
 
@@ -7195,7 +7203,8 @@ html.route-index #carbon {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  height: 20px;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
   margin-bottom: 1em;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
@@ -7207,10 +7216,11 @@ html.route-index #carbon {
   font-size: 11px;
   height: 20px;
   line-height: 20px;
+  margin: 5px;
 }
 
-#social iframe:last-child {
+#social iframe {
-  margin-left: 10px;
+  margin: 5px;
 }
 
 #images tr td:nth-child(2) {

docs/index.html

@@ -405,10 +405,10 @@ route: index
   <div class="hero-body">
     <div class="container has-text-centered">
       <h3 class="title is-2">
-        <span class="icon is-large">
-          <i class="fa fa-arrows-v"></i>
-        </span>
         <a href="{{ site.baseurl }}/documentation/layout/hero/">
+          <span class="icon is-large">
+            <i class="fa fa-arrows-v"></i>
+          </span>
           Easy <strong>vertical centering</strong> in <strong>fullscreen</strong>
         </a>
       </h3>

sass/components/media.sass

@@ -1,6 +1,12 @@
 @import "../utilities/mixins.sass"
 @import "../utilities/variables.sass"
 
+.media-number,
+.media-left,
+.media-right
+  flex-grow: 0
+  flex-shrink: 0
+
 .media-number
   background-color: $background
   border-radius: 290486px
@@ -8,15 +14,11 @@
   font-size: $size-medium
   height: 32px
   line-height: 24px
+  margin-right: 10px
   min-width: 32px
   padding: 4px 8px
   text-align: center
   vertical-align: top
-  // Responsiveness
-  +mobile
-    margin-bottom: 10px
-  +tablet
-    margin-right: 10px
 
 .media-left
   margin-right: 10px

sass/components/nav.sass

@@ -14,6 +14,8 @@ $nav-height: 50px !default
 .nav-item
   align-items: center
   display: flex
+  flex-grow: 0
+  flex-shrink: 0
   justify-content: center
   padding: 10px
   a

sass/layout/hero.sass

@@ -148,4 +148,4 @@
       display: flex
       & > .container
         flex-grow: 1
-        flex-shrink: 0
+        flex-shrink: 1