Init v1

docs/documentation/columns/nesting.html

@@ -1,18 +1,21 @@
 ---
 title: Nesting columns
-layout: documentation
+layout: docs
+theme: library
+doc-library: true
 doc-tab: columns
 doc-subtab: nesting
 breadcrumb:
-- home
-- documentation
-- columns
-- columns-nesting
+  - home
+  - documentation
+  - columns
+  - columns-nesting
 ---
 
 <div class="content">
   <p>
-    You can <strong>nest</strong> columns to have more flexibility in your design. You only need to follow this structure:
+    You can <strong>nest</strong> columns to have more flexibility in your
+    design. You only need to follow this structure:
   </p>
   <ul>
     <li>
@@ -24,9 +27,7 @@ breadcrumb:
             <li>
               <code>columns</code>: nested columns
               <ul>
-                <li>
-                  <code>column</code> and so on…
-                </li>
+                <li><code>column</code> and so on…</li>
               </ul>
             </li>
           </ul>
@@ -35,7 +36,14 @@ breadcrumb:
     </li>
   </ul>
   <p>
-    The difference with <a href="{{ site.url }}/documentation/columns/options/#multiline">multiline columns</a> is the <strong>order</strong> in the HTML code: all the <strong class="has-text-info">blue</strong> columns appear <em>before</em> the <strong class="has-text-danger">red</strong> ones. Resize to a narrower viewport to see the result.
+    The difference with
+    <a href="{{ site.url }}/documentation/columns/options/#multiline"
+      >multiline columns</a
+    >
+    is the <strong>order</strong> in the HTML code: all the
+    <strong class="has-text-info">blue</strong> columns appear
+    <em>before</em> the <strong class="has-text-danger">red</strong> ones.
+    Resize to a narrower viewport to see the result.
   </p>
 </div>
 
@@ -67,16 +75,15 @@ breadcrumb:
     </div>
   </div>
 </div>
-{% endcapture %}
-
-{{ columns_nested_example }}
+{% endcapture %} {{ columns_nested_example }}
 
 <div class="content">
   <p>
-    Multiline columns will also have a <strong>gap</strong> between each <strong>line</strong>.
+    Multiline columns will also have a <strong>gap</strong> between each
+    <strong>line</strong>.
   </p>
 </div>
 
 <div class="bd-highlight-full">
-  {% highlight html %}{{ columns_nested_example }}{% endhighlight %}
+  {% highlight html -%} {{- columns_nested_example -}} {%- endhighlight %}
 </div>