Better placement

docs/_includes/footer.html

@@ -1,3 +1,5 @@
+{% include native.html %}
+
 {% include book-banner.html %}
 
 {% include newsletter.html %}

docs/_layouts/documentation.html

@@ -59,8 +59,6 @@ route: documentation
 
 <section class="section bd-typo">
   <div class="container">
-    {% include native.html %}
-
     <p class="has-text-centered has-text-grey-light">
       <a href="{{ site.url }}/made-with-bulma/">
         <img src="{{ site.url }}/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
@@ -75,4 +73,3 @@ route: documentation
     </p>
   </div>
 </section>
-

docs/_layouts/post.html

@@ -47,7 +47,5 @@ route: blog
         </nav>
       </div>
     </div>
-
-    {% include native.html %}
   </div>
 </section>

docs/_sass/native.sass

@@ -1,14 +1,8 @@
 .native-js
   display: none
-  margin-left: auto
-  margin-right: auto
-  max-width: 760px
+  font-size: 1rem
   opacity: 0
   visibility: hidden
-  &:not(:first-child)
-    margin-top: 3rem
-  &:not(:last-child)
-    margin-bottom: 3rem
 
 .native-show
   display: block
@@ -18,8 +12,8 @@
 .native-flex
   align-items: center
   display: flex
-  justify-content: space-between
-  padding: 1.5rem
+  justify-content: center
+  padding: 2em
   text-decoration: none
 
 .native-img
@@ -35,12 +29,13 @@
 
 .native-main
   align-items: center
-  flex-grow: 1
+  flex-grow: 0
   flex-shrink: 1
+  max-width: 640px
 
 .native-company
   display: block
-  font-size: 10px
+  font-size: 0.625em
   letter-spacing: 2px
   margin-bottom: 4px
   text-transform: uppercase
@@ -55,7 +50,7 @@
   display: inline-block
   flex-grow: 0
   flex-shrink: 0
-  font-size: $size-small
+  font-size: 0.75em
   font-weight: $weight-normal
   padding: 0.75em 1em
   text-transform: uppercase
@@ -74,16 +69,21 @@ $native-bp: 600px
     display: block
     text-align: center
   .native-main
-    margin-bottom: 2rem
+    margin-bottom: 2em
   .native-details
-    margin: 1rem
+    margin: 1em
 
 +from($native-bp)
   .native-flex
     display: flex
+    padding: 4em
     text-align: left
   .native-main
     display: flex
-    margin-right: 2rem
+    margin-right: 2em
   .native-details
-    margin-left: 2rem
+    margin-left: 2em
+
++widescreen
+  .native-js
+    font-size: 1.25rem

docs/blog.html

@@ -29,7 +29,5 @@ route: blog
         </article>
       {% endfor %}
     </div>
-
-    {% include native.html %}
   </div>
 </section>

docs/css/bulma-docs.css

@@ -13773,21 +13773,11 @@ html.route-index .hero.is-primary a.column:hover .title strong {
 
 .native-js {
   display: none;
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 760px;
+  font-size: 1rem;
   opacity: 0;
   visibility: hidden;
 }
 
-.native-js:not(:first-child) {
-  margin-top: 3rem;
-}
-
-.native-js:not(:last-child) {
-  margin-bottom: 3rem;
-}
-
 .native-show {
   display: block;
   opacity: 1;
@@ -13801,10 +13791,10 @@ html.route-index .hero.is-primary a.column:hover .title strong {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  padding: 1.5rem;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  padding: 2em;
   text-decoration: none;
 }
 
@@ -13831,16 +13821,17 @@ html.route-index .hero.is-primary a.column:hover .title strong {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
+  -webkit-box-flex: 0;
+      -ms-flex-positive: 0;
+          flex-grow: 0;
   -ms-flex-negative: 1;
       flex-shrink: 1;
+  max-width: 640px;
 }
 
 .native-company {
   display: block;
-  font-size: 10px;
+  font-size: 0.625em;
   letter-spacing: 2px;
   margin-bottom: 4px;
   text-transform: uppercase;
@@ -13861,7 +13852,7 @@ html.route-index .hero.is-primary a.column:hover .title strong {
           flex-grow: 0;
   -ms-flex-negative: 0;
       flex-shrink: 0;
-  font-size: 0.75rem;
+  font-size: 0.75em;
   font-weight: 400;
   padding: 0.75em 1em;
   text-transform: uppercase;
@@ -13888,10 +13879,10 @@ html.route-index .hero.is-primary a.column:hover .title strong {
     text-align: center;
   }
   .native-main {
-    margin-bottom: 2rem;
+    margin-bottom: 2em;
   }
   .native-details {
-    margin: 1rem;
+    margin: 1em;
   }
 }
 
@@ -13900,16 +13891,23 @@ html.route-index .hero.is-primary a.column:hover .title strong {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
+    padding: 4em;
     text-align: left;
   }
   .native-main {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-    margin-right: 2rem;
+    margin-right: 2em;
   }
   .native-details {
-    margin-left: 2rem;
+    margin-left: 2em;
+  }
+}
+
+@media screen and (min-width: 1216px) {
+  .native-js {
+    font-size: 1.25rem;
   }
 }
 

docs/index.html

@@ -493,6 +493,5 @@ fixed_navbar: true
         <span>Contribute</span>
       </a>
     </div>
-    {% include native.html %}
   </div>
 </section>