Init v1

docs/documentation/layout/level.html

@@ -1,34 +1,30 @@
 ---
 title: Level
-layout: documentation
+layout: docs
+theme: library
 doc-tab: layout
 doc-subtab: level
 breadcrumb:
-- home
-- documentation
-- layout
-- layout-level
+  - home
+  - documentation
+  - layout
+  - layout-level
 ---
-
 {% capture nav_example %}
 <!-- Main container -->
 <nav class="level">
   <!-- Left side -->
   <div class="level-left">
     <div class="level-item">
-      <p class="subtitle is-5">
-        <strong>123</strong> posts
-      </p>
+      <p class="subtitle is-5"><strong>123</strong> posts</p>
     </div>
     <div class="level-item">
       <div class="field has-addons">
         <p class="control">
-          <input class="input" type="text" placeholder="Find a post">
+          <input class="input" type="text" placeholder="Find a post" />
         </p>
         <p class="control">
-          <button class="button">
-            Search
-          </button>
+          <button class="button">Search</button>
         </p>
       </div>
     </div>
@@ -44,7 +40,6 @@ breadcrumb:
   </div>
 </nav>
 {% endcapture %}
-
 {% capture nav_centered_example %}
 <nav class="level">
   <div class="level-item has-text-centered">
@@ -73,7 +68,6 @@ breadcrumb:
   </div>
 </nav>
 {% endcapture %}
-
 {% capture nav_centered_bis_example %}
 <nav class="level">
   <p class="level-item has-text-centered">
@@ -83,7 +77,11 @@ breadcrumb:
     <a class="link is-info">Menu</a>
   </p>
   <p class="level-item has-text-centered">
-    <img src="{{ site.url }}/images/bulma-type.png" alt="" style="height: 30px;">
+    <img
+      src="{{ site.url }}/assets/images/bulma-type.png"
+      alt=""
+      style="height: 30px"
+    />
   </p>
   <p class="level-item has-text-centered">
     <a class="link is-info">Reservations</a>
@@ -93,7 +91,6 @@ breadcrumb:
   </p>
 </nav>
 {% endcapture %}
-
 {% capture nav_mobile_example %}
 <nav class="level is-mobile">
   <div class="level-item has-text-centered">
@@ -129,7 +126,7 @@ breadcrumb:
     <li>
       <code>level</code>: main container
       <ul>
-        <li><code>level-left</code> for the left side
+        <li><code>level-left</code> for the left side</li>
         <li>
           <code>level-right</code> for the right side
           <ul>
@@ -139,25 +136,41 @@ breadcrumb:
       </ul>
     </li>
   </ul>
-  <p>In a <code>level-item</code>, you can then insert almost <em>anything</em> you want: a title, a button, a text input, or just simple text. No matter what elements you put inside a Bulma <code>level</code>, they will always be <strong>vertically centered</strong>.</p>
+  <p>
+    In a <code>level-item</code>, you can then insert almost <em>anything</em> you want: a title, a button, a text
+    input, or just simple text. No matter what elements you put inside a Bulma <code>level</code>, they will always be
+    <strong>vertically centered</strong>.
+  </p>
 </div>
 
-{% include elements/snippet.html content=nav_example horizontal=true more=true %}
-
-{% include elements/anchor.html name="Centered level" %}
+{%
+  include docs/elements/snippet.html content=nav_example horizontal=true
+  more=true
+%}
+{% include docs/elements/anchor.html name="Centered level" %}
 
 <div class="content">
-  If you want a <strong>centered level</strong>, you can use as many <code>level-item</code> as you want, as long as they are <strong>direct</strong> children of the <code>level</code> container.
+  If you want a <strong>centered level</strong>, you can use as many <code>level-item</code> as you want, as long as
+  they are <strong>direct</strong> children of the <code>level</code> container.
 </div>
 
-{% include elements/snippet.html content=nav_centered_example horizontal=true more=true %}
-
-{% include elements/snippet.html content=nav_centered_bis_example horizontal=true more=true %}
-
-{% include elements/anchor.html name="Mobile level" %}
+{%
+  include docs/elements/snippet.html content=nav_centered_example
+  horizontal=true more=true
+%}
+{%
+  include docs/elements/snippet.html
+  content=nav_centered_bis_example horizontal=true more=true
+%}
+{% include docs/elements/anchor.html name="Mobile level" %}
 
 <div class="content">
-  By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the <code>is-mobile</code> modifier on the <code>level</code> container.
+  By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as
+  well, add the
+  <code>is-mobile</code> modifier on the <code>level</code> container.
 </div>
 
-{% include elements/snippet.html content=nav_mobile_example horizontal=true more=true %}
+{%
+  include docs/elements/snippet.html content=nav_mobile_example horizontal=true
+  more=true
+%}