From 5d4e3582f0f3c74faacdd89f5eb7635245db4c4d Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 9 Apr 2018 16:50:33 +0100 Subject: [PATCH] Fix main header --- docs/_data/links.json | 28 ++++++++++++++++ docs/_includes/layout/main-close.html | 4 +-- docs/_layouts/documentation.html | 37 ++++++++++++--------- docs/_sass/global.sass | 2 +- docs/_sass/main.sass | 20 +++++++++-- docs/css/bulma-docs.css | 21 +++++++++++- docs/documentation/layout/container.html | 7 +++- docs/documentation/layout/footer.html | 7 +++- docs/documentation/layout/hero.html | 7 +++- docs/documentation/layout/level.html | 5 +++ docs/documentation/layout/media-object.html | 5 +++ docs/documentation/layout/section.html | 5 +++ docs/documentation/layout/tiles.html | 5 +++ 13 files changed, 127 insertions(+), 26 deletions(-) diff --git a/docs/_data/links.json b/docs/_data/links.json index 4d45689dd..1c5c1eec2 100644 --- 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 275d81294..f2015f680 100644 --- a/docs/_includes/layout/main-close.html +++ b/docs/_includes/layout/main-close.html @@ -2,9 +2,7 @@ diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html index 7a38032bd..07626370c 100644 --- a/docs/_layouts/documentation.html +++ b/docs/_layouts/documentation.html @@ -67,22 +67,27 @@ route: documentation
-

- {{ page.title }} -

-

- {{ page.subtitle }} -

+
+

+ {{ page.title }} +

+

+ {{ page.subtitle }} +

+ {% if page.meta %} + {% + include meta.html + colors=page.meta.colors + sizes=page.meta.sizes + variables=page.meta.variables + experimental=page.meta.experimental + %} + {% endif %} +
- {% if page.meta %} - {% - include meta.html - colors=page.meta.colors - sizes=page.meta.sizes - variables=page.meta.variables - experimental=page.meta.experimental - %} - {% endif %} +
+ {% include carbon.html %} +
@@ -94,7 +99,7 @@ route: documentation
diff --git a/docs/_sass/global.sass b/docs/_sass/global.sass index a7169b0b3..8e3250aaf 100644 --- 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 7855586a1..db12616bb 100644 --- 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 3ea97d6bf..44404ce99 100644 --- 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 95721fbb7..6ccc9efee 100644 --- 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

The values 960, 1152 and 1344 have been chosen because they are divisible by both 12 and 16.

-{% include layout/main-close.html show_carbon=true %} +{% include layout/main-close.html %}
{{container_example}} diff --git a/docs/documentation/layout/footer.html b/docs/documentation/layout/footer.html index 410a6b7ac..3872f2a06 100644 --- 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 {% 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 f9e616d12..8132a50cf 100644 --- 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 %}
diff --git a/docs/documentation/layout/level.html b/docs/documentation/layout/level.html index 0c4e746ad..1cc144e39 100644 --- a/docs/documentation/layout/level.html +++ b/docs/documentation/layout/level.html @@ -4,6 +4,11 @@ subtitle: "A multi-purpose horizontal level, 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 a86900234..5155db1e4 100644 --- a/docs/documentation/layout/media-object.html +++ b/docs/documentation/layout/media-object.html @@ -4,6 +4,11 @@ subtitle: "The famous media object 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 b1b2452e8..b7811c1bd 100644 --- 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 sections 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 6cdb413ab..a8f892cca 100644 --- a/docs/documentation/layout/tiles.html +++ b/docs/documentation/layout/tiles.html @@ -4,6 +4,11 @@ subtitle: "A single tile element to build 2-dimensional Metro-l layout: documentation doc-tab: layout doc-subtab: tiles +breadcrumb: +- home +- documentation +- layout +- layout-tiles --- {% capture tile_empty %} -- 2.47.3