Fix index columns

docs/_includes/index/columns.html

@@ -8,14 +8,30 @@
 </div>
 {% endcapture %}
 
-<section class="section is-medium">
+{% assign columns_link = site.data.links.by_id['columns-basics'] %}
+
+<section class="bd-columns section is-medium">
   <div class="container">
-    <h3 class="title is-2">
-      <a href="{{ site.url }}/documentation/columns/basics">
-        Simple <strong>columns</strong>
-      </a>
-    </h3>
-    <h4 class="subtitle is-4">Just add columns, they will resize themselves</h4>
+    <header class="bd-columns-header">
+      <h3 class="title is-3">
+        <a href="{{ site.url }}{{ columns_link.path }}">
+          The <strong>simplest</strong> grid system
+        </a>
+      </h3>
+      <h4 class="subtitle is-4">
+        Just add columns, they will resize themselves
+      </h4>
+    </header>
+
+    <div class="message is-warning is-hidden-tablet">
+      <p class="message-header">
+        Better on desktop
+      </p>
+      <p class="message-body">
+        This interactive tool works better on larger screens! That's because Bulma columns are <strong>vertical by default</strong>. I recommend revisiting this page later when you're on desktop. 😉
+      </p>
+    </div>
+
     <div id="grid" class="columns">
       <div class="column">
         <div class="notification is-primary has-text-centered">
@@ -78,21 +94,30 @@
         </div>
       </div>
     </div>
-    <div class="field has-addons has-addons-centered">
-      <p class="control">
-        <a id="add" class="button is-unselectable">Add column</a>
-      </p>
-      <p class="control">
-        <a id="remove" class="button is-unselectable">Remove column</a>
-      </p>
+
+    <div class="bd-columns-tools">
+      <div class="bd-columns-tool bd-is-try">
+        <div class="buttons">
+          <a id="add" class="button is-large is-link is-unselectable">
+            <strong>Add column</strong>
+          </a>
+          <a id="remove" class="button is-large is-light is-unselectable">
+            <strong>Remove</strong>
+          </a>
+        </div>
+      </div>
+
+      <div class="bd-columns-tool bd-is-markup">
+        <div id="markup">
+          {% highlight html %}{{ columns }}{% endhighlight %}
+        </div>
+      </div>
     </div>
+
     <div id="message" class="message is-info">
       <p class="message-header">Info</p>
       <p class="message-body">While it's possible to add as many columns as you want, it is recommended to stick with <strong>12 columns</strong>.<br>
       If you want smaller divisions, you can always <strong>nest</strong> columns.</p>
     </div>
-    <div id="markup">
-      {% highlight html %}{{ columns }}{% endhighlight %}
-    </div>
   </div>
 </section>

docs/_javascript/index.js

@@ -47,7 +47,7 @@ document.addEventListener('DOMContentLoaded', () => {
       $message.style.display = 'none';
     }
 
-    showing = Math.min(Math.max(parseInt(showing), 2), 12);
+    showing = Math.min(Math.max(parseInt(showing), 1), 12);
 
     $columns.forEach($el => {
       $el.style.display = 'none';

docs/_sass/index.sass

@@ -1,3 +1,56 @@
+// Columns
+
+.bd-columns-header
+  margin-bottom: 3rem
+  text-align: center
+  strong
+    color: $primary
+    font-weight: $weight-semibold
+  .subtitle
+    color: $grey-light
+
+#grid
+  .notification
+    padding-left: 0
+    padding-right: 0
+
+.bd-columns-tools
+  margin-top: 3rem
+
+.bd-columns-tool
+  @extend %center
+  &.bd-is-try
+    .buttons
+      justify-content: center
+    .button
+      strong
+        font-weight: $weight-semibold
+
+#markup
+  width: 100%
+  .highlight pre
+    max-height: none
+
+#message
+  display: none
+  margin-top: 3rem
+
++mobile
+  .bd-columns-tool
+    &.bd-is-markup
+      margin-top: 3rem
+
++tablet
+  .bd-columns-tools
+    align-items: flex-start
+    display: flex
+  .bd-columns-tool
+    width: 50%
+    &.bd-is-try
+      padding-top: 60px
+
+// Focus
+
 .bd-focus
   margin: 6rem auto 0
   max-width: $intro-width
@@ -27,6 +80,8 @@
   .fa-github-alt
     color: $github
 
+// Intro
+
 .intro-content
   margin-left: auto
   margin-right: auto
@@ -210,15 +265,3 @@
     margin-top: -11px
     &:not(:last-child)
       margin-bottom: 20px
-
-#grid
-  .notification
-    padding-left: 0
-    padding-right: 0
-
-#message
-  display: none
-
-#markup
-  .highlight pre
-    max-height: none

docs/_sass/route.sass

@@ -1,11 +1,12 @@
 html.route-index
-  .title.is-2
+  .title.is-2,
+  .title.is-3
     position: relative
-  .title.is-2 a
-    color: $text-strong
-    position: relative
-  .title.is-2 a:hover
-    color: $blue
+    a
+      color: $text-strong
+      position: relative
+    a:hover
+      color: $blue
   .hero .title.is-2 a
     color: $white
   .hero .title.is-2 a:hover

docs/_sass/sponsors.sass

@@ -13,12 +13,11 @@
   display: flex
   flex-wrap: wrap
   justify-content: space-between
-  margin-bottom: -1rem
   a
     align-items: center
     display: flex
     justify-content: center
-    margin: 0 1rem 1rem 0
+    margin-right: 1rem
     min-height: $carbon-height
 
 .bd-partners

docs/bulma-docs.sass

@@ -17,6 +17,11 @@ $carbon-height: 100px
 $main-spacing: 3rem
 $intro-width: 1130px
 
+%center
+  align-items: center
+  display: flex
+  justify-content: center
+
 =selection($current-selector: false)
   @if $current-selector
     &::-moz-selection

docs/css/bulma-docs.css

@@ -1,4 +1,10 @@
 @charset "UTF-8";
+.bd-columns-tool {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
 /*! bulma.io v0.6.2 | MIT License | github.com/jgthms/bulma */
 @keyframes spinAround {
   from {
@@ -10089,6 +10095,69 @@ svg {
   text-decoration: underline;
 }
 
+.bd-columns-header {
+  margin-bottom: 3rem;
+  text-align: center;
+}
+
+.bd-columns-header strong {
+  color: #00d1b2;
+  font-weight: 600;
+}
+
+.bd-columns-header .subtitle {
+  color: #b5b5b5;
+}
+
+#grid .notification {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.bd-columns-tools {
+  margin-top: 3rem;
+}
+
+.bd-columns-tool.bd-is-try .buttons {
+  justify-content: center;
+}
+
+.bd-columns-tool.bd-is-try .button strong {
+  font-weight: 600;
+}
+
+#markup {
+  width: 100%;
+}
+
+#markup .highlight pre {
+  max-height: none;
+}
+
+#message {
+  display: none;
+  margin-top: 3rem;
+}
+
+@media screen and (max-width: 768px) {
+  .bd-columns-tool.bd-is-markup {
+    margin-top: 3rem;
+  }
+}
+
+@media screen and (min-width: 769px), print {
+  .bd-columns-tools {
+    align-items: flex-start;
+    display: flex;
+  }
+  .bd-columns-tool {
+    width: 50%;
+  }
+  .bd-columns-tool.bd-is-try {
+    padding-top: 60px;
+  }
+}
+
 .bd-focus {
   margin: 6rem auto 0;
   max-width: 1130px;
@@ -10376,19 +10445,6 @@ svg {
   }
 }
 
-#grid .notification {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-#message {
-  display: none;
-}
-
-#markup .highlight pre {
-  max-height: none;
-}
-
 #github {
   color: #333333;
   border-color: #333333;
@@ -11390,16 +11446,19 @@ svg {
   }
 }
 
-html.route-index .title.is-2 {
+html.route-index .title.is-2,
+html.route-index .title.is-3 {
   position: relative;
 }
 
-html.route-index .title.is-2 a {
+html.route-index .title.is-2 a,
+html.route-index .title.is-3 a {
   color: #363636;
   position: relative;
 }
 
-html.route-index .title.is-2 a:hover {
+html.route-index .title.is-2 a:hover,
+html.route-index .title.is-3 a:hover {
   color: #3273dc;
 }
 
@@ -12161,14 +12220,13 @@ html.route-index .hero.is-primary a.column:hover .title strong {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  margin-bottom: -1rem;
 }
 
 .bd-partner-sponsors a {
   align-items: center;
   display: flex;
   justify-content: center;
-  margin: 0 1rem 1rem 0;
+  margin-right: 1rem;
   min-height: 100px;
 }
 

docs/lib/index.js

@@ -49,7 +49,7 @@ document.addEventListener('DOMContentLoaded', function () {
       $message.style.display = 'none';
     }
 
-    showing = Math.min(Math.max(parseInt(showing), 2), 12);
+    showing = Math.min(Math.max(parseInt(showing), 1), 12);
 
     $columns.forEach(function ($el) {
       $el.style.display = 'none';