Move all subtitles

docs/_data/links.json

@@ -66,22 +66,27 @@
     },
     "modifiers-syntax": {
       "name": "Syntax",
+      "subtitle": "Most Bulma elements have <strong>alternative</strong> styles. To apply them, you only need to append one of the <strong>modifier classes</strong>. They all start with <code>is-</code> or <code>has-</code>.",
       "path": "/documentation/modifiers/syntax"
     },
     "modifiers-helpers": {
       "name": "Helpers",
+      "subtitle": "Apply <strong>helper classes</strong> to almost any element, in order to alter its style",
       "path": "/documentation/modifiers/helpers"
     },
     "modifiers-responsive-helpers": {
       "name": "Responsive helpers",
+      "subtitle": "<strong>Show/hide content</strong> depending on the width of the viewport",
       "path": "/documentation/modifiers/responsive-helpers"
     },
     "modifiers-color-helpers": {
       "name": "Color helpers",
+      "subtitle": "Change the <strong>color</strong> of the text and/or background",
       "path": "/documentation/modifiers/color-helpers"
     },
     "modifiers-typography-helpers": {
       "name": "Typography helpers",
+      "subtitle": "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width",
       "path": "/documentation/modifiers/typography-helpers"
     },
     "columns": {
@@ -91,26 +96,32 @@
     },
     "columns-basics": {
       "name": "Basics",
+      "subtitle": "A simple way to build <strong>responsive columns</strong>",
       "path": "/documentation/columns/basics"
     },
     "columns-gap": {
       "name": "Gap",
+      "subtitle": Customize the <strong>gap</strong> between the columns,
       "path": "/documentation/columns/gap"
     },
     "columns-nesting": {
       "name": "Nesting",
+      "subtitle": "A simple way to build <strong>responsive columns</strong>",
       "path": "/documentation/columns/nesting"
     },
     "columns-options": {
       "name": "Options",
+      "subtitle": "Design different <strong>types</strong> of column layouts",
       "path": "/documentation/columns/options"
     },
     "columns-responsiveness": {
       "name": "Responsiveness",
+      "subtitle": "Handle <strong>different</strong> column layouts for each <strong>breakpoint</strong>",
       "path": "/documentation/columns/responsiveness"
     },
     "columns-sizes": {
       "name": "Sizes",
+      "subtitle": "Define the <strong>size</strong> of each column <strong>individually</strong>",
       "path": "/documentation/columns/sizes"
     },
     "layout": {
@@ -118,152 +129,194 @@
       "subtitle": "Design the <strong>structure</strong> of your webpage with these CSS classes",
       "path": "/documentation/layout"
     },
+    "layout-container": {
+      "name": "Container",
+      "subtitle": "A simple <strong>container</strong> to center your content horizontally",
+      "path": "/documentation/layout/container"
+    },
     "layout-level": {
       "name": "Level",
+      "subtitle": "A multi-purpose <strong>horizontal level</strong>, which can contain almost any other element",
       "path": "/documentation/layout/level"
     },
     "layout-media": {
       "name": "Media Object",
+      "subtitle": "The famous <strong>media object</strong> prevalent in social media interfaces, but useful in any context",
       "path": "/documentation/layout/media"
     },
     "layout-hero": {
       "name": "Hero",
+      "subtitle": "An imposing <strong>hero banner</strong> to showcase something",
       "path": "/documentation/layout/hero"
     },
     "layout-section": {
       "name": "Section",
+      "subtitle": "A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading",
       "path": "/documentation/layout/section"
     },
     "layout-footer": {
       "name": "Footer",
+      "subtitle": "A simple responsive <strong>footer</strong> which can include anything: lists, headings, columns, icons, buttons, etc.",
       "path": "/documentation/layout/footer"
     },
     "layout-tiles": {
       "name": "Tiles",
+      "subtitle": "A <strong>single tile</strong> element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids",
       "path": "/documentation/layout/tiles"
     },
     "form": {
       "name": "Form",
+      "subtitle": "The indispensable <strong>form controls</strong>, designed for maximum clarity",
       "path": "/documentation/form"
     },
     "form-general": {
       "name": "General",
+      "subtitle": "All generic <strong>form controls</strong>, designed for consistency",
       "path": "/documentation/form/general"
     },
     "form-input": {
       "name": "Input",
+      "subtitle": "The <strong>text input</strong> and its variations",
       "path": "/documentation/form/input"
     },
     "form-textarea": {
       "name": "Textarea",
+      "subtitle": "The multiline <strong>textarea</strong> and its variations",
       "path": "/documentation/form/textarea"
     },
     "form-select": {
       "name": "Select",
+      "subtitle": "The browser built-in <strong>select dropdown</strong>, styled accordingly",
       "path": "/documentation/form/select"
     },
     "form-checkbox": {
       "name": "Checkbox",
+      "subtitle": "The 2-state <strong>checkbox</strong> in its native format",
       "path": "/documentation/form/checkbox"
     },
     "form-radio": {
       "name": "Radio",
+      "subtitle": "The mutually exclusive <strong>radio buttons</strong> in their native format",
       "path": "/documentation/form/radio"
     },
     "form-file": {
       "name": "File",
+      "subtitle": "A custom <strong>file upload</strong> input, without JavaScript",
       "path": "/documentation/form/file"
     },
     "elements": {
       "name": "Elements",
+      "subtitle": "Essential interface elements that only require a <strong>single CSS class</strong>",
       "path": "/documentation/elements"
     },
     "elements-box": {
       "name": "Box",
+      "subtitle": "A white <strong>box</strong> to contain other elements",
       "path": "/documentation/elements/box"
     },
     "elements-button": {
       "name": "Button",
+      "subtitle": "The classic <strong>button</strong>, in different colors, sizes, and states",
       "path": "/documentation/elements/button"
     },
     "elements-content": {
       "name": "Content",
+      "subtitle": "A single class to handle WYSIWYG generated content, where only <strong>HTML tags</strong> are available",
       "path": "/documentation/elements/content"
     },
     "elements-delete": {
       "name": "Delete",
+      "subtitle": "A versatile <strong>delete</strong> cross",
       "path": "/documentation/elements/delete"
     },
     "elements-icon": {
       "name": "Icon",
+      "subtitle": "Compatible with all icon font libraries, including <strong>Font Awesome 5</strong>",
       "path": "/documentation/elements/icon"
     },
     "elements-image": {
       "name": "Image",
+      "subtitle": "A container for <strong>responsive images</strong>",
       "path": "/documentation/elements/image"
     },
     "elements-notification": {
       "name": "Notification",
+      "subtitle": "Bold <strong>notification</strong> blocks, to alert your users of something",
       "path": "/documentation/elements/notification"
     },
     "elements-progress": {
       "name": "Progress bars",
+      "subtitle": "Native HTML <strong>progress</strong> bars",
       "path": "/documentation/elements/progress"
     },
     "elements-table": {
       "name": "Table",
+      "subtitle": "The inevitable HTML <strong>table</strong>, with special case cells",
       "path": "/documentation/elements/table"
     },
     "elements-tag": {
       "name": "Tag",
+      "subtitle": "Small <strong>tag labels</strong> to insert anywhere",
       "path": "/documentation/elements/tag"
     },
     "elements-title": {
       "name": "Title",
+      "subtitle": "Simple <strong>headings</strong> to add depth to your page",
       "path": "/documentation/elements/title"
     },
     "components": {
       "name": "Components",
+      "subtitle": "Advanced multi-part components with lots of possibilities",
       "path": "/documentation/components"
     },
     "components-breadcrumb": {
       "name": "Breadcrumb",
+      "subtitle": "A simple <strong>breadcrumb</strong> component to improve your navigation experience",
       "path": "/documentation/components/breadcrumb"
     },
     "components-card": {
       "name": "Card",
+      "subtitle": "An all-around flexible and composable component",
       "path": "/documentation/components/card"
     },
     "components-dropdown": {
       "name": "Dropdown",
+      "subtitle": "An interactive <strong>dropdown menu</strong> for discoverable content",
       "path": "/documentation/components/dropdown"
     },
     "components-menu": {
       "name": "Menu",
+      "subtitle": "A simple <strong>menu</strong>, for any type of vertical navigation",
       "path": "/documentation/components/menu"
     },
     "components-message": {
       "name": "Message",
+      "subtitle": "Colored <strong>message</strong> blocks, to emphasize part of your page",
       "path": "/documentation/components/message"
     },
     "components-modal": {
       "name": "Modal",
+      "subtitle": "A classic <strong>modal</strong> overlay, in which you can include <em>any</em> content you want",
       "path": "/documentation/components/modal"
     },
     "components-navbar": {
       "name": "Navbar",
+      "subtitle": "A responsive horizontal <strong>navbar</strong> that can support images, links, buttons, and dropdowns",
       "path": "/documentation/components/navbar"
     },
     "components-pagination": {
       "name": "Pagination",
+      "subtitle": "A responsive, usable, and flexible <strong>pagination</strong>",
       "path": "/documentation/components/pagination"
     },
     "components-panel": {
       "name": "Panel",
+      "subtitle": "A composable <strong>panel</strong>, for compact controls",
       "path": "/documentation/components/panel"
     },
     "components-tabs": {
       "name": "Tabs",
+      "subtitle": "Simple responsive horizontal navigation <strong>tabs</strong>, with different styles",
       "path": "/documentation/components/tabs"
     }
   },
@@ -271,7 +324,7 @@
     "overview": ["overview-start", "overview-classes", "overview-modular", "overview-responsiveness", "overview-variables", "overview-colors", "overview-functions", "overview-mixins"],
     "modifiers": ["modifiers-syntax", "modifiers-helpers", "modifiers-responsive-helpers", "modifiers-color-helpers", "modifiers-typography-helpers"],
     "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
-    "layout": ["layout-level", "layout-media", "layout-hero", "layout-section", "layout-footer", "layout-tiles"],
+    "layout": ["layout-container", "layout-level", "layout-media", "layout-hero", "layout-section", "layout-footer", "layout-tiles"],
     "form": ["form-general", "form-input", "form-textarea", "form-select", "form-checkbox", "form-radio", "form-file"],
     "elements": ["elements-box", "elements-button", "elements-content", "elements-delete", "elements-icon", "elements-image", "elements-notification", "elements-progress", "elements-table", "elements-tag", "elements-title"],
     "components": ["components-breadcrumb", "components-card", "components-dropdown", "components-menu", "components-message", "components-modal", "components-navbar", "components-pagination", "components-panel", "components-tabs"]

docs/_sass/main.sass

@@ -50,7 +50,7 @@
   padding-bottom: $main-spacing
   .subtitle
     color: $text-light
-    max-width: 21em
+    max-width: 16em
     strong
       color: currentColor
   #meta

docs/css/bulma-docs.css

@@ -9553,7 +9553,7 @@ label.panel-block:hover {
 
 .bd-header .subtitle {
   color: #7a7a7a;
-  max-width: 21em;
+  max-width: 16em;
 }
 
 .bd-header .subtitle strong {

docs/documentation/columns/basics.html

@@ -1,6 +1,5 @@
 ---
 title: Columns powered by Flexbox
-subtitle: "A simple way to build <strong>responsive columns</strong>"
 layout: documentation
 doc-tab: columns
 doc-subtab: basics

docs/documentation/columns/gap.html

@@ -1,6 +1,5 @@
 ---
 title: Columns gap
-subtitle: Customize the <strong>gap</strong> between the columns
 layout: documentation
 doc-tab: columns
 doc-subtab: gap

docs/documentation/columns/nesting.html

@@ -1,6 +1,5 @@
 ---
 title: Nesting columns
-subtitle: "A simple way to build <strong>responsive columns</strong>"
 layout: documentation
 doc-tab: columns
 doc-subtab: nesting

docs/documentation/columns/options.html

@@ -1,6 +1,5 @@
 ---
 title: Column options
-subtitle: "Design different <strong>types</strong> of column layouts"
 layout: documentation
 doc-tab: columns
 doc-subtab: options

docs/documentation/columns/responsiveness.html

@@ -1,6 +1,5 @@
 ---
 title: Columns responsiveness
-subtitle: "Handle <strong>different</strong> column layouts for each <strong>breakpoint</strong>"
 layout: documentation
 doc-tab: columns
 doc-subtab: responsiveness

docs/documentation/columns/sizes.html

@@ -1,6 +1,5 @@
 ---
 title: Column sizes
-subtitle: "Define the <strong>size</strong> of each column <strong>individually</strong>"
 layout: documentation
 doc-tab: columns
 doc-subtab: sizes

docs/documentation/components/breadcrumb.html

@@ -1,6 +1,5 @@
 ---
 title: Breadcrumb
-subtitle: "A simple <strong>breadcrumb</strong> component to improve your navigation experience"
 layout: documentation
 doc-tab: components
 doc-subtab: breadcrumb

docs/documentation/components/card.html

@@ -1,6 +1,5 @@
 ---
 title: Card
-subtitle: "An all-around flexible and composable component"
 layout: documentation
 doc-tab: components
 doc-subtab: card

docs/documentation/components/dropdown.html

@@ -1,6 +1,5 @@
 ---
 title: Dropdown
-subtitle: "An interactive <strong>dropdown menu</strong> for discoverable content"
 layout: documentation
 doc-tab: components
 doc-subtab: dropdown

docs/documentation/components/menu.html

@@ -1,6 +1,5 @@
 ---
 title: Menu
-subtitle: "A simple <strong>menu</strong>, for any type of vertical navigation"
 layout: documentation
 doc-tab: components
 doc-subtab: menu

docs/documentation/components/message.html

@@ -1,6 +1,5 @@
 ---
 title: Message
-subtitle: "Colored <strong>message</strong> blocks, to emphasize part of your page"
 layout: documentation
 doc-tab: components
 doc-subtab: message

docs/documentation/components/modal.html

@@ -1,6 +1,5 @@
 ---
 title: Modal
-subtitle: "A classic <strong>modal</strong> overlay, in which you can include <em>any</em> content you want"
 layout: documentation
 doc-tab: components
 doc-subtab: modal

docs/documentation/components/navbar.html

@@ -1,6 +1,5 @@
 ---
 title: Navbar
-subtitle: "A responsive horizontal <strong>navbar</strong> that can support images, links, buttons, and dropdowns"
 layout: documentation
 doc-tab: components
 doc-subtab: navbar

docs/documentation/components/pagination.html

@@ -1,6 +1,5 @@
 ---
 title: Pagination
-subtitle: "A responsive, usable, and flexible <strong>pagination</strong>"
 layout: documentation
 doc-tab: components
 doc-subtab: pagination

docs/documentation/components/panel.html

@@ -1,6 +1,5 @@
 ---
 title: Panel
-subtitle: "A composable <strong>panel</strong>, for compact controls"
 layout: documentation
 doc-tab: components
 doc-subtab: panel

docs/documentation/components/tabs.html

@@ -1,6 +1,5 @@
 ---
 title: Tabs
-subtitle: "Simple responsive horizontal navigation <strong>tabs</strong>, with different styles"
 layout: documentation
 doc-tab: components
 doc-subtab: tabs

docs/documentation/elements/box.html

@@ -1,6 +1,5 @@
 ---
 title: Box
-subtitle: "A white <strong>box</strong> to contain other elements"
 layout: documentation
 doc-tab: elements
 doc-subtab: box

docs/documentation/elements/button.html

@@ -1,6 +1,5 @@
 ---
 title: Button
-subtitle: "The classic <strong>button</strong>, in different colors, sizes, and states"
 layout: documentation
 doc-tab: elements
 doc-subtab: button

docs/documentation/elements/content.html

@@ -1,6 +1,5 @@
 ---
 title: Content
-subtitle: "A single class to handle WYSIWYG generated content, where only <strong>HTML tags</strong> are available"
 layout: documentation
 doc-tab: elements
 doc-subtab: content

docs/documentation/elements/delete.html

@@ -1,6 +1,5 @@
 ---
 title: Delete
-subtitle: "A versatile <strong>delete</strong> cross"
 layout: documentation
 doc-tab: elements
 doc-subtab: delete

docs/documentation/elements/icon.html

@@ -1,6 +1,5 @@
 ---
 title: Icon
-subtitle: 'Bulma is compatible with <strong>all icon font libraries</strong>: <a href="https://fontawesome.com/">Font Awesome 5</a>, <a href="http://fontawesome.io/">Font Awesome 4</a>, <a href="https://materialdesignicons.com">Material Design Icons</a>, <a href="https://useiconic.com/open">Open Iconic</a>, <a href="http://ionicons.com/">Ionicons</a> etc.'
 fontawesome4: true
 iconic: true
 ionicons: true

docs/documentation/elements/image.html

@@ -1,6 +1,5 @@
 ---
 title: Image
-subtitle: "A container for <strong>responsive images</strong>"
 layout: documentation
 doc-tab: elements
 doc-subtab: image

docs/documentation/elements/notification.html

@@ -1,6 +1,5 @@
 ---
 title: Notification
-subtitle: "Bold <strong>notification</strong> blocks, to alert your users of something"
 layout: documentation
 doc-tab: elements
 doc-subtab: notification

docs/documentation/elements/progress.html

@@ -1,6 +1,5 @@
 ---
 title: Progress Bar
-subtitle: "Native HTML <strong>progress</strong> bars"
 layout: documentation
 doc-tab: elements
 doc-subtab: progress

docs/documentation/elements/table.html

@@ -1,6 +1,5 @@
 ---
 title: Table
-subtitle: "The inevitable HTML <strong>table</strong>, with special case cells"
 layout: documentation
 doc-tab: elements
 doc-subtab: table

docs/documentation/elements/tag.html

@@ -1,6 +1,5 @@
 ---
 title: Tags
-subtitle: "Small <strong>tag labels</strong> to insert anywhere"
 layout: documentation
 doc-tab: elements
 doc-subtab: tag

docs/documentation/elements/title.html

@@ -1,6 +1,5 @@
 ---
 title: Title and Subtitle
-subtitle: "Simple <strong>headings</strong> to add depth to your page"
 layout: documentation
 doc-tab: elements
 doc-subtab: title

docs/documentation/form/checkbox.html

@@ -1,6 +1,5 @@
 ---
 title: Checkbox
-subtitle: "The 2-state <strong>checkbox</strong> in its native format"
 layout: documentation
 doc-tab: form
 doc-subtab: checkbox

docs/documentation/form/file.html

@@ -1,6 +1,5 @@
 ---
 title: File upload
-subtitle: "A custom <strong>file upload</strong> input, without JavaScript"
 layout: documentation
 doc-tab: form
 doc-subtab: file

docs/documentation/form/general.html

@@ -1,6 +1,5 @@
 ---
 title: Form controls
-subtitle: "All generic <strong>form controls</strong>, designed for consistency"
 layout: documentation
 doc-tab: form
 doc-subtab: general

docs/documentation/form/input.html

@@ -1,6 +1,5 @@
 ---
 title: Input
-subtitle: "The <strong>text input</strong> and its variations"
 layout: documentation
 doc-tab: form
 doc-subtab: input

docs/documentation/form/radio.html

@@ -1,6 +1,5 @@
 ---
 title: Radio button
-subtitle: "The mutually exclusive <strong>radio buttons</strong> in their native format"
 layout: documentation
 doc-tab: form
 doc-subtab: radio

docs/documentation/form/select.html

@@ -1,6 +1,5 @@
 ---
 title: Select
-subtitle: "The browser built-in <strong>select dropdown</strong>, styled accordingly"
 layout: documentation
 doc-tab: form
 doc-subtab: select

docs/documentation/form/textarea.html

@@ -1,6 +1,5 @@
 ---
 title: Textarea
-subtitle: "The multiline <strong>textarea</strong> and its variations"
 layout: documentation
 doc-tab: form
 doc-subtab: textarea

docs/documentation/layout.html

@@ -0,0 +1,11 @@
+---
+title: Layout
+layout: documentation
+doc-tab: layout
+breadcrumb:
+- home
+- documentation
+- layout
+---
+
+{% include components/links.html category_id='layout' %}

docs/documentation/layout/container.html

@@ -1,6 +1,5 @@
 ---
 title: Container
-subtitle: "A simple <strong>container</strong> to center your content horizontally"
 layout: documentation
 hide_carbon: true
 doc-tab: layout

docs/documentation/layout/footer.html

@@ -1,6 +1,5 @@
 ---
 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

docs/documentation/layout/hero.html

@@ -1,6 +1,5 @@
 ---
 title: Hero
-subtitle: "An imposing <strong>hero banner</strong> to showcase something"
 layout: documentation
 hide_carbon: true
 doc-tab: layout

docs/documentation/layout/level.html

@@ -1,6 +1,5 @@
 ---
 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

docs/documentation/layout/media-object.html

@@ -1,6 +1,5 @@
 ---
 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

docs/documentation/layout/section.html

@@ -1,6 +1,5 @@
 ---
 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

docs/documentation/layout/tiles.html

@@ -1,6 +1,5 @@
 ---
 title: Tiles powered by Flexbox
-subtitle: "A <strong>single tile</strong> element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids"
 layout: documentation
 doc-tab: layout
 doc-subtab: tiles

docs/documentation/modifiers/color-helpers.html

@@ -1,6 +1,5 @@
 ---
 title: Color helpers
-subtitle: "Change the <strong>color</strong> of the text and/or background"
 layout: documentation
 doc-tab: modifiers
 doc-subtab: color-helpers

docs/documentation/modifiers/helpers.html

@@ -1,6 +1,5 @@
 ---
 title: Helpers
-subtitle: "You can apply <strong>helper classes</strong> to almost any element, in order to alter its style."
 layout: documentation
 doc-tab: modifiers
 doc-subtab: helpers

docs/documentation/modifiers/responsive-helpers.html

@@ -1,6 +1,5 @@
 ---
 title: Responsive helpers
-subtitle: "<strong>Show/hide content</strong> depending on the width of the viewport"
 layout: documentation
 doc-tab: modifiers
 doc-subtab: responsive-helpers

docs/documentation/modifiers/syntax.html

@@ -1,6 +1,5 @@
 ---
 title: Modifiers syntax
-subtitle: "Most Bulma elements have <strong>alternative</strong> styles. To apply them, you only need to append one of the <strong>modifier classes</strong>.<br>They all start with <code>is-</code> or <code>has-</code>.</h2>"
 layout: documentation
 doc-tab: modifiers
 doc-subtab: syntax

docs/documentation/modifiers/typography-helpers.html

@@ -1,6 +1,5 @@
 ---
 title: Typography helpers
-subtitle: "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width"
 layout: documentation
 hide_categories: true
 doc-tab: modifiers