Fix tiles

docs/_includes/snippet.html

@@ -16,6 +16,7 @@
     {% if include.clipped %}bd-is-clipped{% endif %}
     {% if include.size %}bd-is-{{ include.size }}{% endif %}
     {% if include.one_fifth %}bd-is-one-fifth{% endif %}
+    {% if include.fullwidth %}bd-is-fullwidth{% endif %}
     ">
     <div class="bd-snippet-preview {% if include.paddingless %}is-paddingless{% endif %}">
       {{ include.content }}

docs/_sass/example.sass

@@ -81,6 +81,10 @@
   .bd-snippet-code
     overflow: auto
 
+.bd-snippet.bd-is-fullwidth
+  border-radius: 0
+  border-width: 1px 0
+
 +desktop
   .bd-snippet.bd-is-vertical
     align-items: stretch

docs/_sass/specific.sass

@@ -1,4 +1,5 @@
 .bd-typo
+  &:not(:first-child)
     margin-top: 3rem
 
 .bd-has-text-rss

docs/css/bulma-docs.css

@@ -10402,7 +10402,7 @@ svg {
   text-decoration: underline;
 }
 
-.bd-typo {
+.bd-typo:not(:first-child) {
   margin-top: 3rem;
 }
 
@@ -10939,6 +10939,11 @@ svg {
   overflow: auto;
 }
 
+.bd-snippet.bd-is-fullwidth {
+  border-radius: 0;
+  border-width: 1px 0;
+}
+
 @media screen and (min-width: 1024px) {
   .bd-snippet.bd-is-vertical {
     align-items: stretch;

docs/documentation/layout/footer.html

@@ -1,12 +1,12 @@
 ---
 title: Footer
+subtitle: "A simple responsive <strong>footer</strong> which can include anything: lists, headings, columns, icons, buttons, etc."
 layout: documentation
+hide_carbon: true
 doc-tab: layout
 doc-subtab: footer
 ---
 
-{% include subnav/subnav-layout.html %}
-
 {% capture footer_example %}
 <footer class="footer">
   <div class="container">
@@ -21,15 +21,10 @@ doc-subtab: footer
 </footer>
 {% endcapture %}
 
-<section class="section">
+{% include layout/main-close.html show_carbon=true %}
-  <div class="container">
-    <h1 class="title">Footer</h1>
-    <h2 class="subtitle">
-      A simple responsive <strong>footer</strong> which can include anything: lists, headings, columns, icons, buttons, etc.
-    </h2>
 
-    {% include snippet.html content=footer_example horizontal=true more=true %}
+{% include snippet.html content=footer_example horizontal=true more=true fullwidth=true %}
 
-    {% include variables.html %}
+{% include layout/main-open.html %}
-  </div>
+
-</section>
+{% include variables.html %}

docs/documentation/layout/hero.html

@@ -1,20 +1,13 @@
 ---
 title: Hero
+subtitle: "An imposing <strong>hero banner</strong> to showcase something"
 layout: documentation
+hide_carbon: true
 doc-tab: layout
 doc-subtab: hero
 ---
 
-{% include subnav/subnav-layout.html %}
+{% include layout/main-close.html show_carbon=true %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Hero</h1>
-    <h2 class="subtitle">
-      An imposing <strong>hero banner</strong> to showcase something
-    </h2>
-  </div>
-</section>
 
 <section class="section is-fullwidth">
   <div class="bd-example">
@@ -31,6 +24,7 @@ doc-subtab: hero
       </div>
     </section>
   </div>
+</section>
 
 {% highlight html %}
 <section class="hero">
@@ -654,3 +648,5 @@ doc-subtab: hero
   {% include snippet.html content=heroNavbarB horizontal=true more=true %}
   {% include snippet.html content=heroNavbarC horizontal=true more=true %}
 </section>
+
+{% include layout/main-open.html %}

docs/documentation/layout/level.html

@@ -1,5 +1,6 @@
 ---
 title: Level
+subtitle: "A multi-purpose <strong>horizontal level</strong>, which can contain almost any other element"
 layout: documentation
 doc-tab: layout
 doc-subtab: level
@@ -118,16 +119,7 @@ doc-subtab: level
 </nav>
 {% endcapture %}
 
-{% include subnav/subnav-layout.html %}
+<div class="content">
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Level</h1>
-    <h2 class="subtitle">A multi-purpose <strong>horizontal level</strong>, which can contain almost any other element</h2>
-
-    <hr>
-
-    <div class="content">
   <p>The <strong>structure</strong> of a level is the following:</p>
   <ul>
     <li>
@@ -144,9 +136,9 @@ doc-subtab: level
     </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>
-    </div>
+</div>
 
-    <div class="bd-structure">
+<div class="bd-structure">
   <nav class="level bd-structure-item bd-is-structure-container" title="level">
     <div class="level-left bd-structure-item" title="level-left">
       <div class="level-item">
@@ -187,27 +179,24 @@ doc-subtab: level
       </p>
     </div>
   </nav>
-    </div>
+</div>
 
-    {% include snippet.html content=nav_example horizontal=true more=true %}
+{% include snippet.html content=nav_example horizontal=true more=true %}
 
-    {% include anchor.html name="Centered level" %}
+{% include anchor.html name="Centered level" %}
 
-    <div class="content">
+<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.
-    </div>
+</div>
 
-    {% include snippet.html content=nav_centered_example horizontal=true more=true %}
+{% include snippet.html content=nav_centered_example horizontal=true more=true %}
 
-    {% include snippet.html content=nav_centered_bis_example horizontal=true more=true %}
+{% include snippet.html content=nav_centered_bis_example horizontal=true more=true %}
 
-    {% include anchor.html name="Mobile level" %}
+{% include anchor.html name="Mobile level" %}
 
-    <div class="content">
+<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.
-    </div>
+</div>
 
-    {% include snippet.html content=nav_mobile_example horizontal=true more=true %}
+{% include snippet.html content=nav_mobile_example horizontal=true more=true %}
-
-  </div>
-</section>

docs/documentation/layout/media-object.html

@@ -1,5 +1,6 @@
 ---
 title: Media Object
+subtitle: "The famous <strong>media object</strong> prevalent in social media interfaces, but useful in any context"
 layout: documentation
 doc-tab: layout
 doc-subtab: media-object
@@ -156,20 +157,11 @@ doc-subtab: media-object
 </article>
 {% endcapture %}
 
-{% include subnav/subnav-layout.html %}
+<div class="content">
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Media Object</h1>
-    <h2 class="subtitle">The famous <strong>media object</strong> prevalent in social media interfaces, but useful in any context</h2>
-
-    <hr>
-
-    <div class="content">
   <p>The <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code">media object</a> is a UI element perfect for repeatable and nestable content.</p>
-    </div>
+</div>
 
-    <div class="bd-structure">
+<div class="bd-structure">
   <article class="media">
     <figure class="media-left bd-structure-item" title="media-left">
       <p class="image is-64x64">
@@ -202,23 +194,20 @@ doc-subtab: media-object
       <button class="delete"></button>
     </div>
   </article>
-    </div>
+</div>
 
-    {% include snippet.html content=media_example horizontal=true more=true %}
+{% include snippet.html content=media_example horizontal=true more=true %}
 
-    <div class="content">
+<div class="content">
   <p>You can include <em>any</em> other Bulma element, like inputs, textareas, icons, buttons... or even a <strong>nav bar</strong>.</p>
-    </div>
+</div>
 
-    {% include snippet.html content=media_bis_example horizontal=true more=true %}
+{% include snippet.html content=media_bis_example horizontal=true more=true %}
 
-    {% include anchor.html name="Nesting" %}
+{% include anchor.html name="Nesting" %}
 
-    <div class="content">
+<div class="content">
   <p>You can nest media objects up to <strong>3 levels</strong> deep.</p>
-    </div>
+</div>
 
-    {% include snippet.html content=media_nested_example horizontal=true more=true %}
+{% include snippet.html content=media_nested_example horizontal=true more=true %}
-
-  </div>
-</section>

docs/documentation/layout/section.html

@@ -1,26 +1,12 @@
 ---
 title: Section
+subtitle: "A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading"
 layout: documentation
 doc-tab: layout
 doc-subtab: section
 ---
 
-{% include subnav/subnav-layout.html %}
+{% capture section_example %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Section</h1>
-    <h2 class="subtitle">
-      A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading
-    </h2>
-
-    <hr>
-
-    <div class="content">
-      <p>Use sections as <strong>direct</strong> children of <code>body</code>.</p>
-    </div>
-
-{% highlight html %}
 <body>
   <section class="section">
     <div class="container">
@@ -31,13 +17,16 @@ doc-subtab: section
     </div>
   </section>
 </body>
-{% endhighlight %}
+{% endcapture %}
 
-    <div class="content">
+<div class="content">
+  <p>Use sections as <strong>direct</strong> children of <code>body</code>.</p>
+</div>
+
+{% highlight html %}{{ section_example }}{% endhighlight %}
+
+<div class="content">
   <p>You can use the modifiers <code>is-medium</code> and <code>is-large</code> to change the <strong>spacing</strong>.</p>
-    </div>
+</div>
 
-    {% include variables.html %}
+{% include variables.html %}
-
-  </div>
-</section>