Fix main header

docs/_data/links.json

@@ -36,6 +36,34 @@
       "name": "Sizes",
       "path": "/documentation/columns/sizes"
     },
+    "layout": {
+      "name": "Layout",
+      "path": "/documentation/layout"
+    },
+    "layout-level": {
+      "name": "Level",
+      "path": "/documentation/layout/level"
+    },
+    "layout-media": {
+      "name": "Media Object",
+      "path": "/documentation/layout/media"
+    },
+    "layout-hero": {
+      "name": "Hero",
+      "path": "/documentation/layout/hero"
+    },
+    "layout-section": {
+      "name": "Section",
+      "path": "/documentation/layout/section"
+    },
+    "layout-footer": {
+      "name": "Footer",
+      "path": "/documentation/layout/footer"
+    },
+    "layout-tiles": {
+      "name": "Tiles",
+      "path": "/documentation/layout/tiles"
+    },
     "form": {
       "name": "Form",
       "path": "/documentation/form"

docs/_includes/layout/main-close.html

@@ -2,9 +2,7 @@
       </div>
 
       <aside class="bd-side">
-        {% if include.show_carbon %}
-          {% include carbon.html %}
-        {% endif %}
+        <!-- Empty on purpose -->
       </aside>
     </div>
   </div>

docs/_layouts/documentation.html

@@ -67,13 +67,13 @@ route: documentation
         </div>
 
         <header class="bd-header">
+          <div class="bd-header-titles">
             <h1 class="title">
               {{ page.title }}
             </h1>
             <p class="subtitle is-4">
               {{ page.subtitle }}
             </p>
-
             {% if page.meta %}
               {%
                 include meta.html
@@ -83,6 +83,11 @@ route: documentation
                 experimental=page.meta.experimental
               %}
             {% endif %}
+          </div>
+
+          <div class="bd-header-carbon">
+            {% include carbon.html %}
+          </div>
         </header>
 
         <div class="bd-content">
@@ -94,7 +99,7 @@ route: documentation
 
       <aside class="bd-side">
         {% unless page.hide_carbon %}
-          {% include carbon.html %}
+
         {% endunless %}
       </aside>
     </div>

docs/_sass/global.sass

@@ -16,7 +16,7 @@ $carbon-poweredby-height: 20px
   margin-left: auto
   margin-right: auto
   max-width: $carbon-width
-  min-height: 120px
+  min-height: $carbon-height
   min-width: 280px
 
 #carbon

docs/_sass/main.sass

@@ -1,3 +1,5 @@
+$main-spacing: 2.5rem
+
 .bd-main
   overflow: hidden
   position: relative
@@ -11,7 +13,7 @@
 .bd-breadcrumb
   display: flex
   justify-content: space-between
-  margin-bottom: 2.5rem
+  margin-bottom: $main-spacing
   .breadcrumb:not(:last-child)
     margin-bottom: 0
 
@@ -32,11 +34,15 @@
       background-color: $background
 
 .bd-header
-  margin-bottom: 2.5rem
+  border-bottom: 2px solid $background
+  margin-bottom: $main-spacing
+  padding-bottom: $main-spacing
   .subtitle
     color: $text-light
     strong
       color: currentColor
+  #meta
+    margin-top: -0.5rem
 
 // Side
 
@@ -72,6 +78,16 @@
     overflow: hidden
     flex-grow: 1
     flex-shrink: 1
+  .bd-header
+    display: flex
+  .bd-header-titles
+    flex-grow: 1
+    flex-shrink: 1
+  .bd-header-carbon
+    flex-grow: 0
+    flex-shrink: 0
+    margin-left: 1.5rem
+    width: $carbon-width
   .bd-prev-next
     display: flex
   .bd-side

docs/css/bulma-docs.css

@@ -9527,7 +9527,9 @@ label.panel-block:hover {
 }
 
 .bd-header {
+  border-bottom: 2px solid whitesmoke;
   margin-bottom: 2.5rem;
+  padding-bottom: 2.5rem;
 }
 
 .bd-header .subtitle {
@@ -9538,6 +9540,10 @@ label.panel-block:hover {
   color: currentColor;
 }
 
+.bd-header #meta {
+  margin-top: -0.5rem;
+}
+
 .bd-side,
 .bd-side-background {
   background-color: #fafafa;
@@ -9578,6 +9584,19 @@ label.panel-block:hover {
     flex-grow: 1;
     flex-shrink: 1;
   }
+  .bd-header {
+    display: flex;
+  }
+  .bd-header-titles {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+  .bd-header-carbon {
+    flex-grow: 0;
+    flex-shrink: 0;
+    margin-left: 1.5rem;
+    width: 300px;
+  }
   .bd-prev-next {
     display: flex;
   }
@@ -9879,7 +9898,7 @@ svg {
   margin-left: auto;
   margin-right: auto;
   max-width: 300px;
-  min-height: 120px;
+  min-height: 100px;
   min-width: 280px;
 }
 

docs/documentation/layout/container.html

@@ -5,6 +5,11 @@ layout: documentation
 hide_carbon: true
 doc-tab: layout
 doc-subtab: container
+breadcrumb:
+- home
+- documentation
+- layout
+- layout-container
 ---
 
 {% capture container_example %}
@@ -62,7 +67,7 @@ doc-subtab: container
   <p>The values <strong>960</strong>, <strong>1152</strong> and <strong>1344</strong> have been chosen because they are divisible by both <strong>12</strong> and <strong>16</strong>.</p>
 </div>
 
-{% include layout/main-close.html show_carbon=true %}
+{% include layout/main-close.html %}
 
 <div class="bd-example is-fullwidth">
   {{container_example}}

docs/documentation/layout/footer.html

@@ -5,6 +5,11 @@ layout: documentation
 hide_carbon: true
 doc-tab: layout
 doc-subtab: footer
+breadcrumb:
+- home
+- documentation
+- layout
+- layout-footer
 ---
 
 {% capture footer_example %}
@@ -21,7 +26,7 @@ doc-subtab: footer
 </footer>
 {% endcapture %}
 
-{% include layout/main-close.html show_carbon=true %}
+{% include layout/main-close.html %}
 
 {% include snippet.html content=footer_example horizontal=true more=true fullwidth=true %}
 

docs/documentation/layout/hero.html

@@ -5,9 +5,14 @@ layout: documentation
 hide_carbon: true
 doc-tab: layout
 doc-subtab: hero
+breadcrumb:
+- home
+- documentation
+- layout
+- layout-hero
 ---
 
-{% include layout/main-close.html show_carbon=true %}
+{% include layout/main-close.html %}
 
 <section class="section is-fullwidth">
   <div class="bd-example">

docs/documentation/layout/level.html

@@ -4,6 +4,11 @@ subtitle: "A multi-purpose <strong>horizontal level</strong>, which can contain
 layout: documentation
 doc-tab: layout
 doc-subtab: level
+breadcrumb:
+- home
+- documentation
+- layout
+- layout-level
 ---
 
 {% capture nav_example %}

docs/documentation/layout/media-object.html

@@ -4,6 +4,11 @@ subtitle: "The famous <strong>media object</strong> prevalent in social media in
 layout: documentation
 doc-tab: layout
 doc-subtab: media-object
+breadcrumb:
+- home
+- documentation
+- layout
+- layout-media
 ---
 
 {% capture media_example %}

docs/documentation/layout/section.html

@@ -4,6 +4,11 @@ subtitle: "A simple container to divide your page into <strong>sections</strong>
 layout: documentation
 doc-tab: layout
 doc-subtab: section
+breadcrumb:
+- home
+- documentation
+- layout
+- layout-section
 ---
 
 {% capture section_example %}

docs/documentation/layout/tiles.html

@@ -4,6 +4,11 @@ subtitle: "A <strong>single tile</strong> element to build 2-dimensional Metro-l
 layout: documentation
 doc-tab: layout
 doc-subtab: tiles
+breadcrumb:
+- home
+- documentation
+- layout
+- layout-tiles
 ---
 
 {% capture tile_empty %}