Fix main header

diff --git a/docs/_data/links.json b/docs/_data/links.json
index 4d45689ddd2342e2efb1db4fb609bb422253b678..1c5c1eec25c5907917d9a5e996dbb3e18d442721 100644 (file)
--- a/docs/_data/links.json
+++ b/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"

diff --git a/docs/_includes/layout/main-close.html b/docs/_includes/layout/main-close.html
index 275d81294b8bca4ec19255ebaa8186fa47c99ad0..f2015f6808cde0b117dca71631cdee15931bd634 100644 (file)
--- a/docs/_includes/layout/main-close.html
+++ b/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>

diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html
index 7a38032bd1ecf20d89998f81b0ae16367e1001b7..07626370c93f906594282c537779b3eaa5785753 100644 (file)
--- a/docs/_layouts/documentation.html
+++ b/docs/_layouts/documentation.html
@@ -67,22 +67,27 @@ route: documentation
         </div>
 
         <header class="bd-header">
-          <h1 class="title">
-            {{ page.title }}
-          </h1>
-          <p class="subtitle is-4">
-            {{ page.subtitle }}
-          </p>
+          <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
+                colors=page.meta.colors
+                sizes=page.meta.sizes
+                variables=page.meta.variables
+                experimental=page.meta.experimental
+              %}
+            {% endif %}
+          </div>
 
-          {% if page.meta %}
-            {%
-              include meta.html
-              colors=page.meta.colors
-              sizes=page.meta.sizes
-              variables=page.meta.variables
-              experimental=page.meta.experimental
-            %}
-          {% endif %}
+          <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>

diff --git a/docs/_sass/global.sass b/docs/_sass/global.sass
index a7169b0b389de090e0383bf3f4a717c105de3597..8e3250aaf83e66605b92c97733e4e344ab0a3c01 100644 (file)
--- a/docs/_sass/global.sass
+++ b/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

diff --git a/docs/_sass/main.sass b/docs/_sass/main.sass
index 7855586a19875e3c974639802a71cfb139a45133..db12616bbd844e640dd9d52b704a61944bde6338 100644 (file)
--- a/docs/_sass/main.sass
+++ b/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

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 3ea97d6bf5d37c815694ea5e3e35690815bc25cb..44404ce99f1e0c896cbcb8bc6294395987fa9a83 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/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;
 }
 

diff --git a/docs/documentation/layout/container.html b/docs/documentation/layout/container.html
index 95721fbb714b137d492c2b142ae804cf87fb1b35..6ccc9efeec89e413fa742b11f9151bb183878e52 100644 (file)
--- a/docs/documentation/layout/container.html
+++ b/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}}

diff --git a/docs/documentation/layout/footer.html b/docs/documentation/layout/footer.html
index 410a6b7acf4b64f8978fe71139cbe5b63936ef8b..3872f2a063b4029b4e69e6254ba4b826a160f895 100644 (file)
--- a/docs/documentation/layout/footer.html
+++ b/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 %}
 

diff --git a/docs/documentation/layout/hero.html b/docs/documentation/layout/hero.html
index f9e616d12d4a4b2c4dc9f248389b5e21a8740696..8132a50cf5b5190ebcbd6064055c57ca04432ed3 100644 (file)
--- a/docs/documentation/layout/hero.html
+++ b/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">

diff --git a/docs/documentation/layout/level.html b/docs/documentation/layout/level.html
index 0c4e746ad74121d1cd17864c5f4a659e571bd7f0..1cc144e394037ea58dc9726299d8c2054f40a469 100644 (file)
--- a/docs/documentation/layout/level.html
+++ b/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 %}

diff --git a/docs/documentation/layout/media-object.html b/docs/documentation/layout/media-object.html
index a86900234fcb27b87da74a71785bbb28bbbefbff..5155db1e4b5985d21c6cbf4b87da4c65b0c2ccfc 100644 (file)
--- a/docs/documentation/layout/media-object.html
+++ b/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 %}

diff --git a/docs/documentation/layout/section.html b/docs/documentation/layout/section.html
index b1b2452e87d2124f4d3b46c92c2b047d05f019d8..b7811c1bd2664c9dd05ec49c0ff123a55e543f46 100644 (file)
--- a/docs/documentation/layout/section.html
+++ b/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 %}

diff --git a/docs/documentation/layout/tiles.html b/docs/documentation/layout/tiles.html
index 6cdb413ab50cace21683e2e3abb8ba83e1296584..a8f892ccadaf054034c0a8262ebc0e52e2799c0e 100644 (file)
--- a/docs/documentation/layout/tiles.html
+++ b/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 %}