Better placement

diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
index 823f571cf97a6fd8313b47efb074fb99d6cf8712..68418d60cf12a61620399d3ff8fc1b1e1f304fa0 100644 (file)
--- a/docs/_includes/footer.html
+++ b/docs/_includes/footer.html
@@ -1,3 +1,5 @@
+{% include native.html %}
+
 {% include book-banner.html %}
 
 {% include newsletter.html %}

diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html
index 32102e4ec3e59b9715a9dfef4173185793f7a355..894c1a71e7d3d7d9251ebc870a5b6ad69b4b4e00 100644 (file)
--- a/docs/_layouts/documentation.html
+++ b/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>
-

diff --git a/docs/_layouts/post.html b/docs/_layouts/post.html
index 7ec97b0c4e5916119f1565d9c1f5a3cd27d58c6b..e9a0c6485be73c9f20ec29b9e6adfb4b63cc0111 100644 (file)
--- a/docs/_layouts/post.html
+++ b/docs/_layouts/post.html
@@ -47,7 +47,5 @@ route: blog
         </nav>
       </div>
     </div>
-
-    {% include native.html %}
   </div>
 </section>

diff --git a/docs/_sass/native.sass b/docs/_sass/native.sass
index 67cf42cf8bd40304fbc30cdf137911f1029b9556..e1a6c91b253b73d9ebc97de2437babcdfa5e395f 100644 (file)
--- a/docs/_sass/native.sass
+++ b/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
\ No newline at end of file

diff --git a/docs/blog.html b/docs/blog.html
index 8c01f6ef619890a0b22ad1a9bbc10f3a1fd838bc..e4cd413636f70da8f2a3940ca290ee11ffec2169 100644 (file)
--- a/docs/blog.html
+++ b/docs/blog.html
@@ -29,7 +29,5 @@ route: blog
         </article>
       {% endfor %}
     </div>
-
-    {% include native.html %}
   </div>
 </section>

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 89c5fbf3c85131421d91457e4ca17cf1256d132c..7092f450d55762b031194491c20c3a688e25484e 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/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;
   }
 }
 

diff --git a/docs/index.html b/docs/index.html
index 0cc6b8d695b0d0c3665717c10456a071917eeb1b..746fcc23830a96074d3c4a4b93aede3b17ce05c3 100644 (file)
--- a/docs/index.html
+++ b/docs/index.html
@@ -493,6 +493,5 @@ fixed_navbar: true
         <span>Contribute</span>
       </a>
     </div>
-    {% include native.html %}
   </div>
 </section>