From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Mon, 9 Apr 2018 19:19:29 +0000 (+0100)
Subject: Top-level pages
X-Git-Tag: 0.7.0~1^2~45
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=6b53425544cd15bb848750fb8eac3cd0cf8c71bd;p=thirdparty%2Fbulma.git

Top-level pages
---

diff --git a/docs/_data/global.json b/docs/_data/global.json
index bcc1dc61f..307a1029b 100644
--- a/docs/_data/global.json
+++ b/docs/_data/global.json
@@ -1,19 +1,5 @@
 {
   "navbar_items": [
-    {
-      "id": "templates",
-      "color": "has-text-info",
-      "fa_type": "fas",
-      "fa_icon": "fa-code",
-      "title": "Templates"
-    },
-    {
-      "id": "videos",
-      "color": "has-text-success",
-      "fa_type": "fas",
-      "fa_icon": "fa-play-circle",
-      "title": "Videos"
-    },
     {
       "id": "blog",
       "color": "bd-has-text-rss",
diff --git a/docs/_data/links.json b/docs/_data/links.json
index 3469a7bd3..c1a7c85c8 100644
--- a/docs/_data/links.json
+++ b/docs/_data/links.json
@@ -6,46 +6,62 @@
     },
     "documentation": {
       "name": "Documentation",
+      "subtitle": "Everything you need to <strong>create a website</strong> with Bulma",
       "path": "/documentation"
     },
     "overview": {
       "name": "Overview",
+      "subtitle": "An overview of what Bulma as a <strong>framework</strong> is all about",
       "path": "/documentation/overview"
     },
     "overview-start": {
-      "name": "Start",
+      "name": "Getting started",
+      "subtitle": "You only need <strong>1 CSS file</strong> to use Bulma",
       "path": "/documentation/overview/start"
     },
+    "overview-customize": {
+      "name": "Customize",
+      "subtitle": "Create your <strong>own theme</strong> with a simple set of <strong>variables</strong>",
+      "path": "/documentation/overview/customize"
+    },
     "overview-classes": {
-      "name": "Classes",
+      "name": "CSS Classes",
+      "subtitle": "Bulma is simply a <strong>collection</strong> of CSS classes. Write the HTML code you want.",
       "path": "/documentation/overview/classes"
     },
     "overview-modular": {
-      "name": "Modular",
+      "name": "Modularity",
+      "subtitle": "Just import what you <strong>need</strong>",
       "path": "/documentation/overview/modular"
     },
     "overview-responsiveness": {
       "name": "Responsiveness",
+      "subtitle": "Bulma is a <strong>mobile-first</strong> framework",
       "path": "/documentation/overview/responsiveness"
     },
     "overview-variables": {
       "name": "Variables",
+      "subtitle": "Easily <strong>customize</strong> Bulma to match your design",
       "path": "/documentation/overview/variables"
     },
     "overview-colors": {
       "name": "Colors",
+      "subtitle": "The <strong>colors</strong> that <strong>style</strong> most Bulma elements and components",
       "path": "/documentation/overview/colors"
     },
     "overview-functions": {
       "name": "Functions",
+      "subtitle": "Utility functions to calculate colors and other values",
       "path": "/documentation/overview/functions"
     },
     "overview-mixins": {
       "name": "Mixins",
+      "subtitle": "Utility mixins for custom elements and responsive helpers",
       "path": "/documentation/overview/mixins"
     },
     "modifiers": {
       "name": "Modifiers",
+      "subtitle": "An <strong>easy-to-read</strong> naming system designed for humans",
       "path": "/documentation/modifiers"
     },
     "modifiers-syntax": {
@@ -70,6 +86,7 @@
     },
     "columns": {
       "name": "Columns",
+      "subtitle": "The power of <strong>Flexbox</strong> in a simple interface",
       "path": "/documentation/columns"
     },
     "columns-basics": {
@@ -98,6 +115,7 @@
     },
     "layout": {
       "name": "Layout",
+      "subtitle": "Design the <strong>structure</strong> of your webpage with these CSS classes",
       "path": "/documentation/layout"
     },
     "layout-level": {
@@ -251,8 +269,9 @@
   },
   "categories": {
     "overview": ["overview-start", "overview-classes", "overview-modular", "overview-responsiveness", "overview-variables", "overview-colors", "overview-functions", "overview-mixins"],
-    "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
     "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"],
     "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"]
diff --git a/docs/_includes/components/docs.html b/docs/_includes/components/docs.html
new file mode 100644
index 000000000..0238c6f9b
--- /dev/null
+++ b/docs/_includes/components/docs.html
@@ -0,0 +1,28 @@
+<nav class="bd-docs">
+  {% for category in site.data.links.categories %}
+    {% assign category_id = category[0] %}
+    {% assign category_links = category[1] %}
+    {% assign category_link = site.data.links.by_id[category_id] %}
+
+    <article class="bd-doc">
+      <h2 class="bd-doc-title title is-5">
+        <a href="{{ site.url }}{{ category_link.path }}">
+          <strong>{{ category_link.name }}</strong>
+        </a>
+      </h2>
+
+      <div class="bd-doc-content">
+        <ul class="bd-doc-list">
+          {% for link_id in category_links %}
+            {% assign link = site.data.links.by_id[link_id] %}
+            <li {% if link_id == current_link_id %}class="is-current"{% endif %}>
+              <a href="{{ site.url }}{{ link.path }}">
+                {{ link.name }}
+              </a>
+            </li>
+          {% endfor %}
+        </ul>
+      </div>
+    </article>
+  {% endfor %}
+</nav>
diff --git a/docs/_includes/components/links.html b/docs/_includes/components/links.html
new file mode 100644
index 000000000..0bb3ddbd2
--- /dev/null
+++ b/docs/_includes/components/links.html
@@ -0,0 +1,21 @@
+<nav class="bd-links">
+  {% if include.category_id %}
+    {% assign category_id = include.category_id %}
+    {% assign category_links = site.data.links.categories[category_id] %}
+  {% else %}
+    {% assign category_links = site.data.links.categories %}
+  {% endif %}
+
+  {% for link_id in category_links %}
+    {% if include.category_id %}
+      {% assign link = site.data.links.by_id[link_id] %}
+    {% else %}
+      {% assign thingy = link_id[0] %}
+      {% assign link = site.data.links.by_id[thingy] %}
+    {% endif %}
+    <a class="bd-link" href="{{ site.url }}{{ link.path }}">
+      <h2 class="bd-link-name">{{ link.name }}</h2>
+      <p class="bd-link-subtitle">{{ link.subtitle }}</p>
+    </a>
+  {% endfor %}
+</nav>
diff --git a/docs/_includes/elements/categories-nav.html b/docs/_includes/elements/categories-nav.html
new file mode 100644
index 000000000..8011ebe00
--- /dev/null
+++ b/docs/_includes/elements/categories-nav.html
@@ -0,0 +1,31 @@
+<nav id="categories" class="bd-categories">
+  {% for category in site.data.links.categories %}
+    {% assign category_id = category[0] %}
+    {% assign category_links = category[1] %}
+    {% assign category_link = site.data.links.by_id[category_id] %}
+
+    <div class="bd-category {% if category_id == current_category %}is-active{% endif %}">
+      <header class="bd-category-header">
+        <a class="bd-category-toggle">
+          <span class="icon">
+            <i class="fas fa-chevron-down"></i>
+          </span>
+        </a>
+        <a class="bd-category-name" href="{{ site.url }}{{ category_link.path }}">
+          <strong>{{ category_link.name }}</strong>
+        </a>
+      </header>
+
+      <ul class="bd-category-list">
+        {% for link_id in category_links %}
+          {% assign link = site.data.links.by_id[link_id] %}
+          <li {% if link_id == current_link_id %}class="is-current"{% endif %}>
+            <a href="{{ site.url }}{{ link.path }}">
+              {{ link.name }}
+            </a>
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+  {% endfor %}
+</nav>
diff --git a/docs/_includes/layout/main-close.html b/docs/_includes/layout/main-close.html
index f2015f680..db38d4c02 100644
--- a/docs/_includes/layout/main-close.html
+++ b/docs/_includes/layout/main-close.html
@@ -1,8 +1,14 @@
+{% assign current_category = page.doc-tab %}
+{% assign current_link_id = page.breadcrumb | last %}
+{% assign category_links = site.data.links.categories[current_category] %}
+
         </div>
       </div>
 
       <aside class="bd-side">
-        <!-- Empty on purpose -->
+        {% if include.show_categories %}
+          {% include elements/categories-nav.html %}
+        {% endif %}
       </aside>
     </div>
   </div>
diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html
index 08909a01b..c4493e247 100644
--- a/docs/_includes/navbar.html
+++ b/docs/_includes/navbar.html
@@ -4,7 +4,7 @@
       <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
     </a>
 
-    <!-- <a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.github }}" target="_blank">
+    <a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.github }}" target="_blank">
       <span class="icon" style="color: #333;">
         <i class="fab fa-lg fa-github"></i>
       </span>
@@ -14,7 +14,7 @@
       <span class="icon" style="color: #55acee;">
         <i class="fab fa-lg fa-twitter"></i>
       </span>
-    </a> -->
+    </a>
 
     <div id="navbarBurger" class="navbar-burger burger" data-target="navMenu{{ include.id }}">
       <span></span>
diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js
index 2abf217f2..67459d3b9 100644
--- a/docs/_javascript/main.js
+++ b/docs/_javascript/main.js
@@ -25,6 +25,30 @@ document.addEventListener('DOMContentLoaded', () => {
   //   });
   // }
 
+  // Sidebar links
+
+  const $categories = getAll('#categories .bd-category');
+
+  if ($categories.length > 0) {
+    $categories.forEach(el => {
+      const toggle_el = el.querySelector('.bd-category-toggle');
+
+      toggle_el.addEventListener('click', event => {
+        closeCategories(el);
+        el.classList.toggle('is-active');
+      });
+    });
+  }
+
+  function closeCategories(current_el) {
+    $categories.forEach(el => {
+      if (current_el == el) {
+        return;
+      }
+      el.classList.remove('is-active');
+    });
+  }
+
   // Meta links
 
   const $metalinks = getAll('#meta a');
@@ -36,7 +60,6 @@ document.addEventListener('DOMContentLoaded', () => {
         const target = $el.getAttribute('href');
         const $target = document.getElementById(target.substring(1));
         $target.scrollIntoView(true);
-        // window.history.replaceState(null, document.title, `${window.location.origin}${window.location.pathname}${target}`);
         return false;
       });
     });
@@ -289,8 +312,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // translateHeader(window.scrollY, false);
 
-  let ticking = false;
-  let lastY = 0;
+  // let ticking = false;
+  // let lastY = 0;
 
   // window.addEventListener('scroll', function() {
   //   const currentY = window.scrollY;
diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html
index 68434cc9d..3689cdb2e 100644
--- a/docs/_layouts/documentation.html
+++ b/docs/_layouts/documentation.html
@@ -7,6 +7,7 @@ route: documentation
 
 {% assign current_category = page.doc-tab %}
 {% assign current_link_id = page.breadcrumb | last %}
+{% assign current_link = site.data.links.by_id[current_link_id] %}
 {% assign category_links = site.data.links.categories[current_category] %}
 
 {% for link_id in category_links %}
@@ -73,7 +74,11 @@ route: documentation
               {{ page.title }}
             </h1>
             <p class="subtitle is-4">
-              {{ page.subtitle }}
+              {% if current_link.subtitle %}
+                {{ current_link.subtitle }}
+              {% else %}
+                {{ page.subtitle }}
+              {% endif %}
             </p>
             {% if page.meta %}
               {%
@@ -95,42 +100,27 @@ route: documentation
           {{ content }}
         </div>
 
+        <nav class="bd-prev-next-bis">
+          {% if previous_link %}
+            <a class="bd-prev-next-bis-previous" href="{{ site.url }}{{ previous_link.path }}" title="{{ previous_link.name }}">
+              ← {{ previous_link.name }}
+            </a>
+          {% endif %}
+
+          {% if next_link %}
+            <a class="bd-prev-next-bis-next" href="{{ site.url }}{{ next_link.path }}" title="{{ next_link.name }}">
+              {{ next_link.name }} →
+            </a>
+          {% endif %}
+        </nav>
+
         {% include elements/improve-page.html %}
       </div>
 
       <aside class="bd-side">
-        <nav class="bd-categories">
-          {% for category in site.data.links.categories %}
-            <div class="bd-category">
-              {% assign category_id = category[0] %}
-              {% assign category_links = category[1] %}
-
-              {% assign category_link = site.data.links.by_id[category_id] %}
-
-              <header class="bd-category-header">
-                <a class="bd-category-toggle">
-                  <span class="icon">
-                    <i class="fas fa-chevron-down"></i>
-                  </span>
-                </a>
-                <a class="bd-category-name" href="{{ site.url }}{{ category_link.path }}">
-                  <strong>{{ category_link.name }}</strong>
-                </a>
-              </header>
-
-              <ul class="bd-category-list {% if category_id == current_category %}is-active{% endif %}">
-                {% for link_id in category_links %}
-                  {% assign link = site.data.links.by_id[link_id] %}
-                  <li {% if link_id == current_link_id %}class="is-current"{% endif %}>
-                    <a href="{{ site.url }}{{ link.path }}">
-                      {{ link.name }}
-                    </a>
-                  </li>
-                {% endfor %}
-              </ul>
-            </div>
-          {% endfor %}
-        </nav>
+        {% unless page.hide_categories %}
+          {% include elements/categories-nav.html %}
+        {% endunless %}
       </aside>
     </div>
   </div>
diff --git a/docs/_sass/example.sass b/docs/_sass/example.sass
index 3936522b8..837747a8e 100644
--- a/docs/_sass/example.sass
+++ b/docs/_sass/example.sass
@@ -46,7 +46,7 @@
 // Snippet
 .bd-snippet
   +block
-  border: 1px solid $yellow
+  border: 2px solid $background
   margin-top: 2rem
   position: relative
   &::before
diff --git a/docs/_sass/global.sass b/docs/_sass/global.sass
index 8e3250aaf..762c9dd52 100644
--- a/docs/_sass/global.sass
+++ b/docs/_sass/global.sass
@@ -40,8 +40,12 @@ $carbon-poweredby-height: 20px
     min-height: $carbon-height
     position: relative
     &:hover
-      .carbon-img
-        opacity: 0.9
+      .carbon-img::after
+        +overlay
+        background-color: rgba(#000, 0.05)
+        content: ""
+        display: block
+        right: $carbon-spacing
   .carbon-img
     bottom: 0
     float: left
@@ -70,7 +74,7 @@ $carbon-poweredby-height: 20px
       color: $link
   .carbon-poweredby
     bottom: 0
-    color: $text-light
+    color: $grey-light
     display: inline
     font-size: $size-small
     line-height: $carbon-poweredby-height
diff --git a/docs/_sass/highlight.sass b/docs/_sass/highlight.sass
index f6827fec7..d9576b0d2 100644
--- a/docs/_sass/highlight.sass
+++ b/docs/_sass/highlight.sass
@@ -1,6 +1,8 @@
 .highlight
   background-color: #f5f5f5
   color: #586e75
+  pre
+    font-size: 12px
   .c
     color: #93a1a1
   .err,
diff --git a/docs/_sass/main.sass b/docs/_sass/main.sass
index 7da720cc4..5ffe3be3d 100644
--- a/docs/_sass/main.sass
+++ b/docs/_sass/main.sass
@@ -1,5 +1,3 @@
-$main-spacing: 2.5rem
-
 .bd-main
   overflow: hidden
   position: relative
@@ -32,6 +30,20 @@ $main-spacing: 2.5rem
     &:hover
       background-color: $background
 
+.bd-prev-next-bis
+  border-top: 2px solid $background
+  display: flex
+  justify-content: space-between
+  margin-top: $main-spacing
+  a
+    margin-top: $main-spacing / 2
+
+.bd-prev-next-bis-previous
+  margin-right: auto
+
+.bd-prev-next-bis-next
+  margin-left: auto
+
 .bd-header
   border-bottom: 2px solid $background
   margin-bottom: $main-spacing
@@ -72,6 +84,12 @@ $main-spacing: 2.5rem
       color: $link
   &:not(:last-child)
     margin-bottom: 0.5rem
+  &.is-active
+    .bd-category-toggle
+      .icon
+        transform: rotate(180deg)
+    .bd-category-list
+      display: block
 
 .bd-category-header
   position: relative
@@ -84,6 +102,9 @@ $main-spacing: 2.5rem
   justify-content: flex-end
   .icon
     font-size: 0.75rem
+    transform-origin: center
+    transition-duration: $speed
+    transition-property: transform
 
 .bd-category-name
   color: $text-strong
@@ -101,8 +122,6 @@ $main-spacing: 2.5rem
         color: $link
   a
     color: $text-light
-  &.is-active
-    display: block
 
 +touch
   .bd-lead,
@@ -146,7 +165,7 @@ $sidebar-width: 14rem
   .bd-header-carbon
     flex-grow: 0
     flex-shrink: 0
-    margin: -15px 0 -15px 1.5rem
+    margin: -15px 0 -15px $main-spacing
     width: $carbon-width
   .bd-side
     padding: 3rem 0 3rem 1.5rem
diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass
index c48841316..f557a5f0c 100644
--- a/docs/_sass/specific.sass
+++ b/docs/_sass/specific.sass
@@ -1,6 +1,75 @@
+.bd-links
+  counter-reset: bd-links
+
+.bd-link
+  border-radius: $radius-large
+  color: $text-light
+  display: block
+  font-size: $size-5
+  padding: 1rem 3rem 1.5rem
+  strong
+    font-weight: $weight-semibold
+  &:hover
+    background-color: $white-bis
+
+.bd-link-name
+  position: relative
+  &::before
+    color: $link
+    counter-increment: bd-links
+    content: counter(bd-links)
+    font-weight: $weight-normal
+    position: absolute
+    right: calc(100% + 0.625em)
+
++desktop
+  .bd-links
+    display: flex
+    flex-wrap: wrap
+  .bd-link
+    width: 50%
+
+.bd-link-name
+  color: $text-strong
+  font-size: $size-4
+  font-weight: $weight-semibold
+
+.bd-docs
+  display: flex
+  flex-wrap: wrap
+
+.bd-doc
+  margin: 0 3rem 1.5rem 0
+  +mobile
+    min-width: calc(50% - 3rem)
+  +tablet
+    min-width: calc(33.3333% - 3rem)
+
+.bd-doc-title
+  color: $text-strong
+  a
+    color: currentColor
+    &:hover
+      color: $link
+  &:not(:last-child)
+    margin-bottom: 0.75rem
+
+.bd-boxes
+  display: flex
+  flex-wrap: wrap
+  justify-content: space-between
+
+.bd-box
+  border: 4px solid $background
+  border-radius: $radius
+
+.bd-box-header
+  text-align: center
+
 .bd-typo
+  text-align: center
   &:not(:first-child)
-    margin-top: 3rem
+    margin-top: $main-spacing
 
 .bd-has-text-rss
   color: $rss
@@ -22,10 +91,9 @@ $navbar-items: ("documentation": $primary, "templates": $info, "videos": $succes
 
 .bd-navbar-item-expo
   &:hover
-    color: #744F09 !important
+    color: #8F6900 !important
     .icon
-      color: #FF7B00 !important
-
+      color: #F4B300 !important
 
 .bd-special-shadow
   background-image: linear-gradient(rgba(#000, 0.1), rgba(#000, 0))
diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass
index 7b745a6d1..3f3396676 100644
--- a/docs/bulma-docs.sass
+++ b/docs/bulma-docs.sass
@@ -13,6 +13,7 @@ $star: #FFD257
 $rss: #f26522
 
 $carbon-width: 300px
+$main-spacing: 3rem
 
 @import "../bulma"
 @import "./_sass/main"
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 47bbf03dd..525f5828a 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -130,7 +130,7 @@
   width: 1em;
 }
 
-.is-overlay, .image.is-square img, .image.is-1by1 img, .image.is-5by4 img, .image.is-4by3 img, .image.is-3by2 img, .image.is-5by3 img, .image.is-16by9 img, .image.is-2by1 img, .image.is-3by1 img, .image.is-4by5 img, .image.is-3by4 img, .image.is-2by3 img, .image.is-3by5 img, .image.is-9by16 img, .image.is-1by2 img, .image.is-1by3 img, .modal, .modal-background, .hero-video, .bd-category-toggle, .intro-spinner, .intro-shadow, .bd-article-overlay, .bd-article-icon,
+.is-overlay, .image.is-square img, .image.is-1by1 img, .image.is-5by4 img, .image.is-4by3 img, .image.is-3by2 img, .image.is-5by3 img, .image.is-16by9 img, .image.is-2by1 img, .image.is-3by1 img, .image.is-4by5 img, .image.is-3by4 img, .image.is-2by3 img, .image.is-3by5 img, .image.is-9by16 img, .image.is-1by2 img, .image.is-1by3 img, .modal, .modal-background, .hero-video, .bd-category-toggle, #carbonads .carbon-wrap:hover .carbon-img::after, .intro-spinner, .intro-shadow, .bd-article-overlay, .bd-article-icon,
 .bd-article-info, .bd-structure-item::before, .bd-structure-item::after, .highlight .bd-show, .bd-banner-background, .bd-book-pattern::before,
 .bd-book-modal-column.bd-is-cover::before, .bd-book-pattern, .bd-book-modal-background {
   bottom: 0;
@@ -150,7 +150,7 @@
   -webkit-appearance: none;
   align-items: center;
   border: 1px solid transparent;
-  border-radius: 3px;
+  border-radius: 4px;
   box-shadow: none;
   display: inline-flex;
   font-size: 1rem;
@@ -500,7 +500,7 @@ table th {
   }
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1087px) {
   .is-size-1-touch {
     font-size: 3rem !important;
   }
@@ -524,7 +524,7 @@ table th {
   }
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .is-size-1-desktop {
     font-size: 3rem !important;
   }
@@ -548,7 +548,7 @@ table th {
   }
 }
 
-@media screen and (min-width: 1216px) {
+@media screen and (min-width: 1280px) {
   .is-size-1-widescreen {
     font-size: 3rem !important;
   }
@@ -572,7 +572,7 @@ table th {
   }
 }
 
-@media screen and (min-width: 1408px) {
+@media screen and (min-width: 1472px) {
   .is-size-1-fullhd {
     font-size: 3rem !important;
   }
@@ -624,43 +624,43 @@ table th {
   }
 }
 
-@media screen and (min-width: 769px) and (max-width: 1023px) {
+@media screen and (min-width: 769px) and (max-width: 1087px) {
   .has-text-centered-tablet-only {
     text-align: center !important;
   }
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1087px) {
   .has-text-centered-touch {
     text-align: center !important;
   }
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .has-text-centered-desktop {
     text-align: center !important;
   }
 }
 
-@media screen and (min-width: 1024px) and (max-width: 1215px) {
+@media screen and (min-width: 1088px) and (max-width: 1279px) {
   .has-text-centered-desktop-only {
     text-align: center !important;
   }
 }
 
-@media screen and (min-width: 1216px) {
+@media screen and (min-width: 1280px) {
   .has-text-centered-widescreen {
     text-align: center !important;
   }
 }
 
-@media screen and (min-width: 1216px) and (max-width: 1407px) {
+@media screen and (min-width: 1280px) and (max-width: 1471px) {
   .has-text-centered-widescreen-only {
     text-align: center !important;
   }
 }
 
-@media screen and (min-width: 1408px) {
+@media screen and (min-width: 1472px) {
   .has-text-centered-fullhd {
     text-align: center !important;
   }
@@ -678,43 +678,43 @@ table th {
   }
 }
 
-@media screen and (min-width: 769px) and (max-width: 1023px) {
+@media screen and (min-width: 769px) and (max-width: 1087px) {
   .has-text-justified-tablet-only {
     text-align: justify !important;
   }
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1087px) {
   .has-text-justified-touch {
     text-align: justify !important;
   }
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .has-text-justified-desktop {
     text-align: justify !important;
   }
 }
 
-@media screen and (min-width: 1024px) and (max-width: 1215px) {
+@media screen and (min-width: 1088px) and (max-width: 1279px) {
   .has-text-justified-desktop-only {
     text-align: justify !important;
   }
 }
 
-@media screen and (min-width: 1216px) {
+@media screen and (min-width: 1280px) {
   .has-text-justified-widescreen {
     text-align: justify !important;
   }
 }
 
-@media screen and (min-width: 1216px) and (max-width: 1407px) {
+@media screen and (min-width: 1280px) and (max-width: 1471px) {
   .has-text-justified-widescreen-only {
     text-align: justify !important;
   }
 }
 
-@media screen and (min-width: 1408px) {
+@media screen and (min-width: 1472px) {
   .has-text-justified-fullhd {
     text-align: justify !important;
   }
@@ -732,43 +732,43 @@ table th {
   }
 }
 
-@media screen and (min-width: 769px) and (max-width: 1023px) {
+@media screen and (min-width: 769px) and (max-width: 1087px) {
   .has-text-left-tablet-only {
     text-align: left !important;
   }
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1087px) {
   .has-text-left-touch {
     text-align: left !important;
   }
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .has-text-left-desktop {
     text-align: left !important;
   }
 }
 
-@media screen and (min-width: 1024px) and (max-width: 1215px) {
+@media screen and (min-width: 1088px) and (max-width: 1279px) {
   .has-text-left-desktop-only {
     text-align: left !important;
   }
 }
 
-@media screen and (min-width: 1216px) {
+@media screen and (min-width: 1280px) {
   .has-text-left-widescreen {
     text-align: left !important;
   }
 }
 
-@media screen and (min-width: 1216px) and (max-width: 1407px) {
+@media screen and (min-width: 1280px) and (max-width: 1471px) {
   .has-text-left-widescreen-only {
     text-align: left !important;
   }
 }
 
-@media screen and (min-width: 1408px) {
+@media screen and (min-width: 1472px) {
   .has-text-left-fullhd {
     text-align: left !important;
   }
@@ -786,43 +786,43 @@ table th {
   }
 }
 
-@media screen and (min-width: 769px) and (max-width: 1023px) {
+@media screen and (min-width: 769px) and (max-width: 1087px) {
   .has-text-right-tablet-only {
     text-align: right !important;
   }
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1087px) {
   .has-text-right-touch {
     text-align: right !important;
   }
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .has-text-right-desktop {
     text-align: right !important;
   }
 }
 
-@media screen and (min-width: 1024px) and (max-width: 1215px) {
+@media screen and (min-width: 1088px) and (max-width: 1279px) {
   .has-text-right-desktop-only {
     text-align: right !important;
   }
 }
 
-@media screen and (min-width: 1216px) {
+@media screen and (min-width: 1280px) {
   .has-text-right-widescreen {
     text-align: right !important;
   }
 }
 
-@media screen and (min-width: 1216px) and (max-width: 1407px) {
+@media screen and (min-width: 1280px) and (max-width: 1471px) {
   .has-text-right-widescreen-only {
     text-align: right !important;
   }
 }
 
-@media screen and (min-width: 1408px) {
+@media screen and (min-width: 1472px) {
   .has-text-right-fullhd {
     text-align: right !important;
   }
@@ -1032,43 +1032,43 @@ a.has-text-danger:hover, a.has-text-danger:focus {
   }
 }
 
-@media screen and (min-width: 769px) and (max-width: 1023px) {
+@media screen and (min-width: 769px) and (max-width: 1087px) {
   .is-block-tablet-only {
     display: block !important;
   }
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1087px) {
   .is-block-touch {
     display: block !important;
   }
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .is-block-desktop {
     display: block !important;
   }
 }
 
-@media screen and (min-width: 1024px) and (max-width: 1215px) {
+@media screen and (min-width: 1088px) and (max-width: 1279px) {
   .is-block-desktop-only {
     display: block !important;
   }
 }
 
-@media screen and (min-width: 1216px) {
+@media screen and (min-width: 1280px) {
   .is-block-widescreen {
     display: block !important;
   }
 }
 
-@media screen and (min-width: 1216px) and (max-width: 1407px) {
+@media screen and (min-width: 1280px) and (max-width: 1471px) {
   .is-block-widescreen-only {
     display: block !important;
   }
 }
 
-@media screen and (min-width: 1408px) {
+@media screen and (min-width: 1472px) {
   .is-block-fullhd {
     display: block !important;
   }
@@ -1090,43 +1090,43 @@ a.has-text-danger:hover, a.has-text-danger:focus {
   }
 }
 
-@media screen and (min-width: 769px) and (max-width: 1023px) {
+@media screen and (min-width: 769px) and (max-width: 1087px) {
   .is-flex-tablet-only {
     display: flex !important;
   }
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1087px) {
   .is-flex-touch {
     display: flex !important;
   }
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .is-flex-desktop {
     display: flex !important;
   }
 }
 
-@media screen and (min-width: 1024px) and (max-width: 1215px) {
+@media screen and (min-width: 1088px) and (max-width: 1279px) {
   .is-flex-desktop-only {
     display: flex !important;
   }
 }
 
-@media screen and (min-width: 1216px) {
+@media screen and (min-width: 1280px) {
   .is-flex-widescreen {
     display: flex !important;
   }
 }
 
-@media screen and (min-width: 1216px) and (max-width: 1407px) {
+@media screen and (min-width: 1280px) and (max-width: 1471px) {
   .is-flex-widescreen-only {
     display: flex !important;
   }
 }
 
-@media screen and (min-width: 1408px) {
+@media screen and (min-width: 1472px) {
   .is-flex-fullhd {
     display: flex !important;
   }
@@ -1148,43 +1148,43 @@ a.has-text-danger:hover, a.has-text-danger:focus {
   }
 }
 
-@media screen and (min-width: 769px) and (max-width: 1023px) {
+@media screen and (min-width: 769px) and (max-width: 1087px) {
   .is-inline-tablet-only {
     display: inline !important;
   }
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1087px) {
   .is-inline-touch {
     display: inline !important;
   }
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .is-inline-desktop {
     display: inline !important;
   }
 }
 
-@media screen and (min-width: 1024px) and (max-width: 1215px) {
+@media screen and (min-width: 1088px) and (max-width: 1279px) {
   .is-inline-desktop-only {
     display: inline !important;
   }
 }
 
-@media screen and (min-width: 1216px) {
+@media screen and (min-width: 1280px) {
   .is-inline-widescreen {
     display: inline !important;
   }
 }
 
-@media screen and (min-width: 1216px) and (max-width: 1407px) {
+@media screen and (min-width: 1280px) and (max-width: 1471px) {
   .is-inline-widescreen-only {
     display: inline !important;
   }
 }
 
-@media screen and (min-width: 1408px) {
+@media screen and (min-width: 1472px) {
   .is-inline-fullhd {
     display: inline !important;
   }
@@ -1206,43 +1206,43 @@ a.has-text-danger:hover, a.has-text-danger:focus {
   }
 }
 
-@media screen and (min-width: 769px) and (max-width: 1023px) {
+@media screen and (min-width: 769px) and (max-width: 1087px) {
   .is-inline-block-tablet-only {
     display: inline-block !important;
   }
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1087px) {
   .is-inline-block-touch {
     display: inline-block !important;
   }
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .is-inline-block-desktop {
     display: inline-block !important;
   }
 }
 
-@media screen and (min-width: 1024px) and (max-width: 1215px) {
+@media screen and (min-width: 1088px) and (max-width: 1279px) {
   .is-inline-block-desktop-only {
     display: inline-block !important;
   }
 }
 
-@media screen and (min-width: 1216px) {
+@media screen and (min-width: 1280px) {
   .is-inline-block-widescreen {
     display: inline-block !important;
   }
 }
 
-@media screen and (min-width: 1216px) and (max-width: 1407px) {
+@media screen and (min-width: 1280px) and (max-width: 1471px) {
   .is-inline-block-widescreen-only {
     display: inline-block !important;
   }
 }
 
-@media screen and (min-width: 1408px) {
+@media screen and (min-width: 1472px) {
   .is-inline-block-fullhd {
     display: inline-block !important;
   }
@@ -1264,43 +1264,43 @@ a.has-text-danger:hover, a.has-text-danger:focus {
   }
 }
 
-@media screen and (min-width: 769px) and (max-width: 1023px) {
+@media screen and (min-width: 769px) and (max-width: 1087px) {
   .is-inline-flex-tablet-only {
     display: inline-flex !important;
   }
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1087px) {
   .is-inline-flex-touch {
     display: inline-flex !important;
   }
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .is-inline-flex-desktop {
     display: inline-flex !important;
   }
 }
 
-@media screen and (min-width: 1024px) and (max-width: 1215px) {
+@media screen and (min-width: 1088px) and (max-width: 1279px) {
   .is-inline-flex-desktop-only {
     display: inline-flex !important;
   }
 }
 
-@media screen and (min-width: 1216px) {
+@media screen and (min-width: 1280px) {
   .is-inline-flex-widescreen {
     display: inline-flex !important;
   }
 }
 
-@media screen and (min-width: 1216px) and (max-width: 1407px) {
+@media screen and (min-width: 1280px) and (max-width: 1471px) {
   .is-inline-flex-widescreen-only {
     display: inline-flex !important;
   }
 }
 
-@media screen and (min-width: 1408px) {
+@media screen and (min-width: 1472px) {
   .is-inline-flex-fullhd {
     display: inline-flex !important;
   }
@@ -1322,43 +1322,43 @@ a.has-text-danger:hover, a.has-text-danger:focus {
   }
 }
 
-@media screen and (min-width: 769px) and (max-width: 1023px) {
+@media screen and (min-width: 769px) and (max-width: 1087px) {
   .is-hidden-tablet-only {
     display: none !important;
   }
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1087px) {
   .is-hidden-touch {
     display: none !important;
   }
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .is-hidden-desktop {
     display: none !important;
   }
 }
 
-@media screen and (min-width: 1024px) and (max-width: 1215px) {
+@media screen and (min-width: 1088px) and (max-width: 1279px) {
   .is-hidden-desktop-only {
     display: none !important;
   }
 }
 
-@media screen and (min-width: 1216px) {
+@media screen and (min-width: 1280px) {
   .is-hidden-widescreen {
     display: none !important;
   }
 }
 
-@media screen and (min-width: 1216px) and (max-width: 1407px) {
+@media screen and (min-width: 1280px) and (max-width: 1471px) {
   .is-hidden-widescreen-only {
     display: none !important;
   }
 }
 
-@media screen and (min-width: 1408px) {
+@media screen and (min-width: 1472px) {
   .is-hidden-fullhd {
     display: none !important;
   }
@@ -1380,43 +1380,43 @@ a.has-text-danger:hover, a.has-text-danger:focus {
   }
 }
 
-@media screen and (min-width: 769px) and (max-width: 1023px) {
+@media screen and (min-width: 769px) and (max-width: 1087px) {
   .is-invisible-tablet-only {
     visibility: hidden !important;
   }
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1087px) {
   .is-invisible-touch {
     visibility: hidden !important;
   }
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .is-invisible-desktop {
     visibility: hidden !important;
   }
 }
 
-@media screen and (min-width: 1024px) and (max-width: 1215px) {
+@media screen and (min-width: 1088px) and (max-width: 1279px) {
   .is-invisible-desktop-only {
     visibility: hidden !important;
   }
 }
 
-@media screen and (min-width: 1216px) {
+@media screen and (min-width: 1280px) {
   .is-invisible-widescreen {
     visibility: hidden !important;
   }
 }
 
-@media screen and (min-width: 1216px) and (max-width: 1407px) {
+@media screen and (min-width: 1280px) and (max-width: 1471px) {
   .is-invisible-widescreen-only {
     visibility: hidden !important;
   }
 }
 
-@media screen and (min-width: 1408px) {
+@media screen and (min-width: 1472px) {
   .is-invisible-fullhd {
     visibility: hidden !important;
   }
@@ -1440,7 +1440,7 @@ a.has-text-danger:hover, a.has-text-danger:focus {
 
 .box {
   background-color: white;
-  border-radius: 5px;
+  border-radius: 6px;
   box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
   color: #4a4a4a;
   display: block;
@@ -2594,41 +2594,41 @@ a.box:active {
   position: relative;
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .container {
     max-width: 960px;
     width: 960px;
   }
   .container.is-fluid {
-    margin-left: 32px;
-    margin-right: 32px;
+    margin-left: 64px;
+    margin-right: 64px;
     max-width: none;
     width: auto;
   }
 }
 
-@media screen and (max-width: 1215px) {
+@media screen and (max-width: 1279px) {
   .container.is-widescreen {
     max-width: 1152px;
     width: auto;
   }
 }
 
-@media screen and (max-width: 1407px) {
+@media screen and (max-width: 1471px) {
   .container.is-fullhd {
     max-width: 1344px;
     width: auto;
   }
 }
 
-@media screen and (min-width: 1216px) {
+@media screen and (min-width: 1280px) {
   .container {
     max-width: 1152px;
     width: 1152px;
   }
 }
 
-@media screen and (min-width: 1408px) {
+@media screen and (min-width: 1472px) {
   .container {
     max-width: 1344px;
     width: 1344px;
@@ -3624,7 +3624,7 @@ a.box:active {
 }
 
 .file.has-name.is-empty .file-cta {
-  border-radius: 3px;
+  border-radius: 4px;
 }
 
 .file.has-name.is-empty .file-name {
@@ -3667,11 +3667,11 @@ a.box:active {
 }
 
 .file.is-boxed.has-name .file-cta {
-  border-radius: 3px 3px 0 0;
+  border-radius: 4px 4px 0 0;
 }
 
 .file.is-boxed.has-name .file-name {
-  border-radius: 0 0 3px 3px;
+  border-radius: 0 0 4px 4px;
   border-width: 0 1px 1px;
 }
 
@@ -3693,11 +3693,11 @@ a.box:active {
 }
 
 .file.is-right .file-cta {
-  border-radius: 0 3px 3px 0;
+  border-radius: 0 4px 4px 0;
 }
 
 .file.is-right .file-name {
-  border-radius: 3px 0 0 3px;
+  border-radius: 4px 0 0 4px;
   border-width: 1px 0 1px 1px;
   order: -1;
 }
@@ -3741,7 +3741,7 @@ a.box:active {
 .file-cta,
 .file-name {
   border-color: #dbdbdb;
-  border-radius: 3px;
+  border-radius: 4px;
   font-size: 1em;
   padding-left: 1em;
   padding-right: 1em;
@@ -4296,7 +4296,7 @@ a.box:active {
 
 .notification {
   background-color: whitesmoke;
-  border-radius: 3px;
+  border-radius: 4px;
   padding: 1.25rem 2.5rem 1.25rem 1.5rem;
   position: relative;
 }
@@ -4781,7 +4781,7 @@ a.box:active {
 .tag:not(body) {
   align-items: center;
   background-color: whitesmoke;
-  border-radius: 3px;
+  border-radius: 4px;
   color: #4a4a4a;
   display: inline-flex;
   font-size: 0.75rem;
@@ -5263,7 +5263,7 @@ a.tag:hover {
 
 .dropdown-content {
   background-color: white;
-  border-radius: 3px;
+  border-radius: 4px;
   box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
   padding-bottom: 0.5rem;
   padding-top: 0.5rem;
@@ -5307,7 +5307,7 @@ a.dropdown-item.is-active {
 }
 
 .level code {
-  border-radius: 3px;
+  border-radius: 4px;
 }
 
 .level img {
@@ -5538,7 +5538,7 @@ a.dropdown-item.is-active {
 
 .message {
   background-color: whitesmoke;
-  border-radius: 3px;
+  border-radius: 4px;
   font-size: 1rem;
 }
 
@@ -5706,7 +5706,7 @@ a.dropdown-item.is-active {
 .message-header {
   align-items: center;
   background-color: #4a4a4a;
-  border-radius: 3px 3px 0 0;
+  border-radius: 4px 4px 0 0;
   color: #fff;
   display: flex;
   justify-content: space-between;
@@ -5729,7 +5729,7 @@ a.dropdown-item.is-active {
 
 .message-body {
   border: 1px solid #dbdbdb;
-  border-radius: 3px;
+  border-radius: 4px;
   color: #4a4a4a;
   padding: 1em 1.25em;
 }
@@ -5807,8 +5807,8 @@ a.dropdown-item.is-active {
 
 .modal-card-head {
   border-bottom: 1px solid #dbdbdb;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
 }
 
 .modal-card-title {
@@ -5820,8 +5820,8 @@ a.dropdown-item.is-active {
 }
 
 .modal-card-foot {
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
   border-top: 1px solid #dbdbdb;
 }
 
@@ -5867,7 +5867,7 @@ a.dropdown-item.is-active {
   border-color: #0a0a0a;
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .navbar.is-white .navbar-start > .navbar-item,
   .navbar.is-white .navbar-start .navbar-link,
   .navbar.is-white .navbar-end > .navbar-item,
@@ -5920,7 +5920,7 @@ a.dropdown-item.is-active {
   border-color: white;
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .navbar.is-black .navbar-start > .navbar-item,
   .navbar.is-black .navbar-start .navbar-link,
   .navbar.is-black .navbar-end > .navbar-item,
@@ -5973,7 +5973,7 @@ a.dropdown-item.is-active {
   border-color: #363636;
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .navbar.is-light .navbar-start > .navbar-item,
   .navbar.is-light .navbar-start .navbar-link,
   .navbar.is-light .navbar-end > .navbar-item,
@@ -6026,7 +6026,7 @@ a.dropdown-item.is-active {
   border-color: whitesmoke;
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .navbar.is-dark .navbar-start > .navbar-item,
   .navbar.is-dark .navbar-start .navbar-link,
   .navbar.is-dark .navbar-end > .navbar-item,
@@ -6079,7 +6079,7 @@ a.dropdown-item.is-active {
   border-color: #fff;
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .navbar.is-primary .navbar-start > .navbar-item,
   .navbar.is-primary .navbar-start .navbar-link,
   .navbar.is-primary .navbar-end > .navbar-item,
@@ -6132,7 +6132,7 @@ a.dropdown-item.is-active {
   border-color: #fff;
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .navbar.is-link .navbar-start > .navbar-item,
   .navbar.is-link .navbar-start .navbar-link,
   .navbar.is-link .navbar-end > .navbar-item,
@@ -6185,7 +6185,7 @@ a.dropdown-item.is-active {
   border-color: #fff;
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .navbar.is-info .navbar-start > .navbar-item,
   .navbar.is-info .navbar-start .navbar-link,
   .navbar.is-info .navbar-end > .navbar-item,
@@ -6238,7 +6238,7 @@ a.dropdown-item.is-active {
   border-color: #fff;
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .navbar.is-success .navbar-start > .navbar-item,
   .navbar.is-success .navbar-start .navbar-link,
   .navbar.is-success .navbar-end > .navbar-item,
@@ -6291,7 +6291,7 @@ a.dropdown-item.is-active {
   border-color: rgba(0, 0, 0, 0.7);
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .navbar.is-warning .navbar-start > .navbar-item,
   .navbar.is-warning .navbar-start .navbar-link,
   .navbar.is-warning .navbar-end > .navbar-item,
@@ -6344,7 +6344,7 @@ a.dropdown-item.is-active {
   border-color: #fff;
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .navbar.is-danger .navbar-start > .navbar-item,
   .navbar.is-danger .navbar-start .navbar-link,
   .navbar.is-danger .navbar-end > .navbar-item,
@@ -6496,7 +6496,7 @@ body.has-navbar-fixed-bottom {
 
 a.navbar-item,
 .navbar-link {
-  border-radius: 3px;
+  border-radius: 4px;
   cursor: pointer;
 }
 
@@ -6578,7 +6578,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
   margin: 0.5rem 0;
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1087px) {
   .navbar > .container {
     display: block;
   }
@@ -6626,7 +6626,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
   }
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .navbar,
   .navbar-menu,
   .navbar-start,
@@ -6670,7 +6670,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
   }
   .navbar-item.has-dropdown-up .navbar-dropdown {
     border-bottom: 1px solid #dbdbdb;
-    border-radius: 5px 5px 0 0;
+    border-radius: 6px 6px 0 0;
     border-top: none;
     bottom: 100%;
     box-shadow: 0 -8px 8px rgba(10, 10, 10, 0.1);
@@ -6703,8 +6703,8 @@ a.navbar-item:hover, a.navbar-item.is-active,
   }
   .navbar-dropdown {
     background-color: white;
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
     border-top: 1px solid #dbdbdb;
     box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1);
     display: none;
@@ -6731,7 +6731,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
     color: #3273dc;
   }
   .navbar-dropdown.is-boxed {
-    border-radius: 5px;
+    border-radius: 6px;
     border-top: none;
     box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
     display: block;
@@ -6975,7 +6975,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
 
 .panel-heading {
   background-color: whitesmoke;
-  border-radius: 3px 3px 0 0;
+  border-radius: 4px 4px 0 0;
   color: #363636;
   font-size: 1.25em;
   font-weight: 300;
@@ -7150,7 +7150,7 @@ label.panel-block:hover {
 
 .tabs.is-boxed a {
   border: 1px solid transparent;
-  border-radius: 3px 3px 0 0;
+  border-radius: 4px 4px 0 0;
 }
 
 .tabs.is-boxed a:hover {
@@ -7188,11 +7188,11 @@ label.panel-block:hover {
 }
 
 .tabs.is-toggle li:first-child a {
-  border-radius: 3px 0 0 3px;
+  border-radius: 4px 0 0 4px;
 }
 
 .tabs.is-toggle li:last-child a {
-  border-radius: 0 3px 3px 0;
+  border-radius: 0 4px 4px 0;
 }
 
 .tabs.is-toggle li.is-active a {
@@ -7750,7 +7750,7 @@ label.panel-block:hover {
   }
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1087px) {
   .column.is-narrow-touch {
     flex: none;
   }
@@ -7907,7 +7907,7 @@ label.panel-block:hover {
   }
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .column.is-narrow-desktop {
     flex: none;
   }
@@ -8064,7 +8064,7 @@ label.panel-block:hover {
   }
 }
 
-@media screen and (min-width: 1216px) {
+@media screen and (min-width: 1280px) {
   .column.is-narrow-widescreen {
     flex: none;
   }
@@ -8221,7 +8221,7 @@ label.panel-block:hover {
   }
 }
 
-@media screen and (min-width: 1408px) {
+@media screen and (min-width: 1472px) {
   .column.is-narrow-fullhd {
     flex: none;
   }
@@ -8433,7 +8433,7 @@ label.panel-block:hover {
   }
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .columns.is-desktop {
     display: flex;
   }
@@ -8617,7 +8617,7 @@ label.panel-block:hover {
   color: #0a0a0a;
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1087px) {
   .hero.is-white .navbar-menu {
     background-color: white;
   }
@@ -8695,7 +8695,7 @@ label.panel-block:hover {
   color: white;
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1087px) {
   .hero.is-black .navbar-menu {
     background-color: #0a0a0a;
   }
@@ -8773,7 +8773,7 @@ label.panel-block:hover {
   color: #363636;
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1087px) {
   .hero.is-light .navbar-menu {
     background-color: whitesmoke;
   }
@@ -8851,7 +8851,7 @@ label.panel-block:hover {
   color: whitesmoke;
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1087px) {
   .hero.is-dark .navbar-menu {
     background-color: #363636;
   }
@@ -8929,7 +8929,7 @@ label.panel-block:hover {
   color: #fff;
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1087px) {
   .hero.is-primary .navbar-menu {
     background-color: #00d1b2;
   }
@@ -9007,7 +9007,7 @@ label.panel-block:hover {
   color: #fff;
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1087px) {
   .hero.is-link .navbar-menu {
     background-color: #3273dc;
   }
@@ -9085,7 +9085,7 @@ label.panel-block:hover {
   color: #fff;
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1087px) {
   .hero.is-info .navbar-menu {
     background-color: #209cee;
   }
@@ -9163,7 +9163,7 @@ label.panel-block:hover {
   color: #fff;
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1087px) {
   .hero.is-success .navbar-menu {
     background-color: #23d160;
   }
@@ -9241,7 +9241,7 @@ label.panel-block:hover {
   color: rgba(0, 0, 0, 0.7);
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1087px) {
   .hero.is-warning .navbar-menu {
     background-color: #ffdd57;
   }
@@ -9319,7 +9319,7 @@ label.panel-block:hover {
   color: #fff;
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1087px) {
   .hero.is-danger .navbar-menu {
     background-color: #ff3860;
   }
@@ -9473,7 +9473,7 @@ label.panel-block:hover {
   padding: 3rem 1.5rem;
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .section.is-medium {
     padding: 9rem 1.5rem;
   }
@@ -9499,7 +9499,7 @@ label.panel-block:hover {
 .bd-breadcrumb {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 2.5rem;
+  margin-bottom: 3rem;
 }
 
 .bd-breadcrumb .breadcrumb:not(:last-child) {
@@ -9518,7 +9518,7 @@ label.panel-block:hover {
 
 .bd-prev-next a,
 .bd-prev-next span {
-  border-radius: 3px;
+  border-radius: 4px;
   width: 1.5rem;
 }
 
@@ -9526,10 +9526,29 @@ label.panel-block:hover {
   background-color: whitesmoke;
 }
 
+.bd-prev-next-bis {
+  border-top: 2px solid whitesmoke;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 3rem;
+}
+
+.bd-prev-next-bis a {
+  margin-top: 1.5rem;
+}
+
+.bd-prev-next-bis-previous {
+  margin-right: auto;
+}
+
+.bd-prev-next-bis-next {
+  margin-left: auto;
+}
+
 .bd-header {
   border-bottom: 2px solid whitesmoke;
-  margin-bottom: 2.5rem;
-  padding-bottom: 2.5rem;
+  margin-bottom: 3rem;
+  padding-bottom: 3rem;
 }
 
 .bd-header .subtitle {
@@ -9578,6 +9597,14 @@ label.panel-block:hover {
   margin-bottom: 0.5rem;
 }
 
+.bd-category.is-active .bd-category-toggle .icon {
+  transform: rotate(180deg);
+}
+
+.bd-category.is-active .bd-category-list {
+  display: block;
+}
+
 .bd-category-header {
   position: relative;
 }
@@ -9591,6 +9618,9 @@ label.panel-block:hover {
 
 .bd-category-toggle .icon {
   font-size: 0.75rem;
+  transform-origin: center;
+  transition-duration: 86ms;
+  transition-property: transform;
 }
 
 .bd-category-name {
@@ -9616,11 +9646,7 @@ label.panel-block:hover {
   color: #7a7a7a;
 }
 
-.bd-category-list.is-active {
-  display: block;
-}
-
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1087px) {
   .bd-lead,
   .bd-side {
     padding: 1.5rem;
@@ -9654,7 +9680,7 @@ label.panel-block:hover {
   }
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .bd-main {
     padding: 0 3rem;
   }
@@ -9674,7 +9700,7 @@ label.panel-block:hover {
   .bd-header-carbon {
     flex-grow: 0;
     flex-shrink: 0;
-    margin: -15px 0 -15px 1.5rem;
+    margin: -15px 0 -15px 3rem;
     width: 300px;
   }
   .bd-side {
@@ -9687,6 +9713,10 @@ label.panel-block:hover {
   color: #586e75;
 }
 
+.highlight pre {
+  font-size: 12px;
+}
+
 .highlight .c {
   color: #93a1a1;
 }
@@ -9999,8 +10029,11 @@ svg {
   position: relative;
 }
 
-#carbonads .carbon-wrap:hover .carbon-img {
-  opacity: 0.9;
+#carbonads .carbon-wrap:hover .carbon-img::after {
+  background-color: rgba(0, 0, 0, 0.05);
+  content: "";
+  display: block;
+  right: 1rem;
 }
 
 #carbonads .carbon-img {
@@ -10042,7 +10075,7 @@ svg {
 
 #carbonads .carbon-poweredby {
   bottom: 0;
-  color: #7a7a7a;
+  color: #b5b5b5;
   display: inline;
   font-size: 0.75rem;
   line-height: 20px;
@@ -10076,7 +10109,7 @@ svg {
 
 .intro-npm {
   background: #242424;
-  border-radius: 5px;
+  border-radius: 6px;
   color: white;
   display: flex;
   font-size: 15px;
@@ -10093,7 +10126,7 @@ svg {
 }
 
 .intro-npm .intro-npm-copy {
-  border-radius: 3px;
+  border-radius: 4px;
   color: #ffdd57;
   cursor: pointer;
   margin: -2px -7px -3px;
@@ -10276,13 +10309,13 @@ svg {
   }
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1087px) {
   .intro-column.is-video {
     margin-top: 3rem;
   }
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .intro-columns {
     display: flex;
     justify-content: center;
@@ -10355,7 +10388,7 @@ svg {
   color: #f96854;
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   #blogDropdown {
     width: 17rem;
   }
@@ -10485,6 +10518,111 @@ svg {
   text-decoration: underline;
 }
 
+.bd-links {
+  counter-reset: bd-links;
+}
+
+.bd-link {
+  border-radius: 6px;
+  color: #7a7a7a;
+  display: block;
+  font-size: 1.25rem;
+  padding: 1rem 3rem 1.5rem;
+}
+
+.bd-link strong {
+  font-weight: 600;
+}
+
+.bd-link:hover {
+  background-color: #fafafa;
+}
+
+.bd-link-name {
+  position: relative;
+}
+
+.bd-link-name::before {
+  color: #3273dc;
+  counter-increment: bd-links;
+  content: counter(bd-links);
+  font-weight: 400;
+  position: absolute;
+  right: calc(100% + 0.625em);
+}
+
+@media screen and (min-width: 1088px) {
+  .bd-links {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .bd-link {
+    width: 50%;
+  }
+}
+
+.bd-link-name {
+  color: #363636;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.bd-docs {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.bd-doc {
+  margin: 0 3rem 1.5rem 0;
+}
+
+@media screen and (max-width: 768px) {
+  .bd-doc {
+    min-width: calc(50% - 3rem);
+  }
+}
+
+@media screen and (min-width: 769px), print {
+  .bd-doc {
+    min-width: calc(33.3333% - 3rem);
+  }
+}
+
+.bd-doc-title {
+  color: #363636;
+}
+
+.bd-doc-title a {
+  color: currentColor;
+}
+
+.bd-doc-title a:hover {
+  color: #3273dc;
+}
+
+.bd-doc-title:not(:last-child) {
+  margin-bottom: 0.75rem;
+}
+
+.bd-boxes {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.bd-box {
+  border: 4px solid whitesmoke;
+  border-radius: 4px;
+}
+
+.bd-box-header {
+  text-align: center;
+}
+
+.bd-typo {
+  text-align: center;
+}
+
 .bd-typo:not(:first-child) {
   margin-top: 3rem;
 }
@@ -10576,11 +10714,11 @@ svg {
 }
 
 .bd-navbar-item-expo:hover {
-  color: #744F09 !important;
+  color: #8F6900 !important;
 }
 
 .bd-navbar-item-expo:hover .icon {
-  color: #FF7B00 !important;
+  color: #F4B300 !important;
 }
 
 .bd-special-shadow {
@@ -10595,7 +10733,7 @@ svg {
   transform-origin: center top;
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1087px) {
   .bd-is-clipped-touch {
     overflow: hidden !important;
   }
@@ -10655,7 +10793,7 @@ svg {
   position: relative;
 }
 
-@media screen and (max-width: 1215px) {
+@media screen and (max-width: 1279px) {
   .bd-anchor-title {
     padding-left: 2rem;
   }
@@ -10666,7 +10804,7 @@ svg {
   right: calc(100% + 1rem);
 }
 
-@media screen and (max-width: 1215px) {
+@media screen and (max-width: 1279px) {
   .bd-anchor-link {
     left: 0;
     right: auto;
@@ -10826,7 +10964,7 @@ svg {
 
 .bd-notification {
   background-color: whitesmoke;
-  border-radius: 3px;
+  border-radius: 4px;
   padding: 1.25rem 0;
   position: relative;
   text-align: center;
@@ -10921,7 +11059,7 @@ svg {
 .bd-structure::before,
 .bd-snippet::before {
   background: #ffdd57;
-  border-radius: 3px 3px 0 0;
+  border-radius: 4px 4px 0 0;
   bottom: 100%;
   color: rgba(0, 0, 0, 0.7);
   content: "Example";
@@ -10962,12 +11100,12 @@ svg {
 }
 
 .bd-example.bd-is-clipped {
-  border-top-right-radius: 5px;
+  border-top-right-radius: 6px;
 }
 
 .bd-example + .highlight {
   border: 1px solid #ffdd57;
-  border-radius: 0 0 3px 3px;
+  border-radius: 0 0 4px 4px;
   border-top: none;
   margin-top: -1.5rem;
 }
@@ -10977,7 +11115,7 @@ svg {
 }
 
 .bd-snippet {
-  border: 1px solid #ffdd57;
+  border: 2px solid whitesmoke;
   margin-top: 2rem;
   position: relative;
 }
@@ -11010,7 +11148,7 @@ svg {
 }
 
 .bd-snippet.bd-is-horizontal {
-  border-radius: 5px;
+  border-radius: 6px;
   border-top-left-radius: 0;
 }
 
@@ -11027,10 +11165,10 @@ svg {
   border-width: 1px 0;
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .bd-snippet.bd-is-vertical {
     align-items: stretch;
-    border-radius: 5px;
+    border-radius: 6px;
     border-top-left-radius: 0;
     display: flex;
     justify-content: center;
@@ -11043,7 +11181,7 @@ svg {
   .bd-snippet.bd-is-vertical .bd-snippet-code .highlight,
   .bd-snippet.bd-is-vertical .bd-snippet-code .highlight pre {
     align-items: stretch;
-    border-radius: 0 5px 5px 0;
+    border-radius: 0 6px 6px 0;
     display: flex;
     flex-direction: column;
   }
@@ -11103,7 +11241,7 @@ svg {
 
 .bd-structure {
   border-color: #ff3860;
-  border-radius: 3px;
+  border-radius: 4px;
   padding: 1.5rem;
 }
 
@@ -11246,7 +11384,7 @@ svg {
 
 .bd-callout {
   background-color: whitesmoke;
-  border-radius: 3px;
+  border-radius: 4px;
   padding: 1.25rem 2.5rem 1.25rem 1.5rem;
   position: relative;
 }
@@ -11323,7 +11461,7 @@ svg {
 
 #_default_ > a {
   background-color: white;
-  border-radius: 5px;
+  border-radius: 6px;
   box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
   color: #4a4a4a;
   display: block;
@@ -11622,13 +11760,13 @@ html.route-index .hero.is-primary a.column:hover .title strong {
   }
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1087px) {
   .bd-tws-love .bd-tw:not(:last-child) {
     margin-bottom: 1.5rem;
   }
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .bd-tws-home {
     min-height: 595px;
   }
@@ -11643,13 +11781,13 @@ html.route-index .hero.is-primary a.column:hover .title strong {
   }
 }
 
-@media screen and (min-width: 1216px) {
+@media screen and (min-width: 1280px) {
   .bd-tws-home {
     min-height: 653px;
   }
 }
 
-@media screen and (min-width: 1408px) {
+@media screen and (min-width: 1472px) {
   .bd-tws-home {
     min-height: 632px;
   }
@@ -11829,19 +11967,19 @@ html.route-index .hero.is-primary a.column:hover .title strong {
   }
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1088px) {
   .bd-testimonials {
     min-height: 595px;
   }
 }
 
-@media screen and (min-width: 1216px) {
+@media screen and (min-width: 1280px) {
   .bd-testimonials {
     min-height: 653px;
   }
 }
 
-@media screen and (min-width: 1408px) {
+@media screen and (min-width: 1472px) {
   .bd-testimonials {
     min-height: 632px;
   }
@@ -12081,7 +12219,7 @@ html.route-index .hero.is-primary a.column:hover .title strong {
 
 .bd-klmn-gap {
   background-color: whitesmoke;
-  border-radius: 3px;
+  border-radius: 4px;
   color: #ff3860;
   font-family: monospace;
   font-size: 0.75rem;
@@ -12536,7 +12674,7 @@ html.route-index .hero.is-primary a.column:hover .title strong {
   }
 }
 
-@media screen and (min-width: 1216px) {
+@media screen and (min-width: 1280px) {
   .native-js {
     font-size: 1.25rem;
   }
diff --git a/docs/documentation.html b/docs/documentation.html
index 6bfe7ea96..b1dd2301d 100644
--- a/docs/documentation.html
+++ b/docs/documentation.html
@@ -1,8 +1,9 @@
 ---
 title: Documentation
-subtitle: "Everything you need to <strong>create a website</strong> with Bulma"
 layout: documentation
 breadcrumb:
 - home
 - documentation
 ---
+
+{% include components/links.html %}
diff --git a/docs/documentation/columns.html b/docs/documentation/columns.html
new file mode 100644
index 000000000..b4778ff58
--- /dev/null
+++ b/docs/documentation/columns.html
@@ -0,0 +1,11 @@
+---
+title: Columns
+layout: documentation
+doc-tab: columns
+breadcrumb:
+- home
+- documentation
+- columns
+---
+
+{% include components/links.html category_id='columns' %}
diff --git a/docs/documentation/components.html b/docs/documentation/components.html
new file mode 100644
index 000000000..777293f27
--- /dev/null
+++ b/docs/documentation/components.html
@@ -0,0 +1,11 @@
+---
+title: Components
+layout: documentation
+doc-tab: components
+breadcrumb:
+- home
+- documentation
+- components
+---
+
+{% include components/links.html category_id='components' %}
diff --git a/docs/documentation/elements.html b/docs/documentation/elements.html
new file mode 100644
index 000000000..d87f2a08b
--- /dev/null
+++ b/docs/documentation/elements.html
@@ -0,0 +1,11 @@
+---
+title: Elements
+layout: documentation
+doc-tab: elements
+breadcrumb:
+- home
+- documentation
+- elements
+---
+
+{% include components/links.html category_id='elements' %}
diff --git a/docs/documentation/form.html b/docs/documentation/form.html
index e3627319b..7c0e87f25 100644
--- a/docs/documentation/form.html
+++ b/docs/documentation/form.html
@@ -1,9 +1,11 @@
 ---
 title: Form
-subtitle: "All <strong>form controls</strong>"
 layout: documentation
+doc-tab: form
 breadcrumb:
 - home
 - documentation
 - form
 ---
+
+{% include components/links.html category_id='form' %}
diff --git a/docs/documentation/modifiers.html b/docs/documentation/modifiers.html
new file mode 100644
index 000000000..265f8e412
--- /dev/null
+++ b/docs/documentation/modifiers.html
@@ -0,0 +1,11 @@
+---
+title: Modifiers
+layout: documentation
+doc-tab: modifiers
+breadcrumb:
+- home
+- documentation
+- modifiers
+---
+
+{% include components/links.html category_id='modifiers' %}
diff --git a/docs/documentation/modifiers/typography-helpers.html b/docs/documentation/modifiers/typography-helpers.html
index 74f0b2148..db4927152 100644
--- a/docs/documentation/modifiers/typography-helpers.html
+++ b/docs/documentation/modifiers/typography-helpers.html
@@ -2,6 +2,7 @@
 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
 doc-subtab: typography-helpers
 breadcrumb:
@@ -96,7 +97,7 @@ breadcrumb:
   </p>
 </div>
 
-{% include layout/main-close.html %}
+{% include layout/main-close.html show_categories=true %}
 
 <div class="container">
   <div class="table-container">
diff --git a/docs/documentation/overview.html b/docs/documentation/overview.html
new file mode 100644
index 000000000..cbfea21bf
--- /dev/null
+++ b/docs/documentation/overview.html
@@ -0,0 +1,11 @@
+---
+title: Overview
+layout: documentation
+doc-tab: overview
+breadcrumb:
+- home
+- documentation
+- overview
+---
+
+{% include components/links.html category_id='overview' %}
diff --git a/docs/documentation/overview/classes.html b/docs/documentation/overview/classes.html
index ac7b857ac..9a074976a 100644
--- a/docs/documentation/overview/classes.html
+++ b/docs/documentation/overview/classes.html
@@ -1,6 +1,5 @@
 ---
 title: CSS classes
-subtitle: "Bulma is simply a <strong>collection</strong> of CSS classes. Write the HTML code you want."
 layout: documentation
 doc-tab: overview
 doc-subtab: classes
diff --git a/docs/documentation/overview/colors.html b/docs/documentation/overview/colors.html
index 87bf25e82..52d7edc14 100644
--- a/docs/documentation/overview/colors.html
+++ b/docs/documentation/overview/colors.html
@@ -1,6 +1,5 @@
 ---
 title: Colors
-subtitle: "The <strong>colors</strong> that <strong>style</strong> most Bulma elements and components"
 layout: documentation
 doc-tab: overview
 doc-subtab: colors
diff --git a/docs/documentation/overview/customize.html b/docs/documentation/overview/customize.html
index 98d15ac5c..e3191085d 100644
--- a/docs/documentation/overview/customize.html
+++ b/docs/documentation/overview/customize.html
@@ -1,6 +1,5 @@
 ---
 title: Customize Bulma with Sass
-subtitle: "Create your <strong>own theme</strong> with a simple set of <strong>variables</strong>"
 layout: documentation
 doc-tab: overview
 doc-subtab: customize
diff --git a/docs/documentation/overview/functions.html b/docs/documentation/overview/functions.html
index 8b12ad38d..80abc189c 100644
--- a/docs/documentation/overview/functions.html
+++ b/docs/documentation/overview/functions.html
@@ -1,6 +1,5 @@
 ---
 title: Functions
-subtitle: "Utility functions to calculate colors and other values"
 layout: documentation
 doc-tab: overview
 doc-subtab: functions
diff --git a/docs/documentation/overview/mixins.html b/docs/documentation/overview/mixins.html
index 3721b0a19..b8aa78663 100644
--- a/docs/documentation/overview/mixins.html
+++ b/docs/documentation/overview/mixins.html
@@ -1,6 +1,5 @@
 ---
 title: Mixins
-subtitle: "Utility mixins for custom elements and responsive helpers"
 layout: documentation
 doc-tab: overview
 doc-subtab: mixins
diff --git a/docs/documentation/overview/modular.html b/docs/documentation/overview/modular.html
index 02135faa8..2075b6cd5 100644
--- a/docs/documentation/overview/modular.html
+++ b/docs/documentation/overview/modular.html
@@ -1,6 +1,5 @@
 ---
 title: Modularity
-subtitle: "Just import what you <strong>need</strong>"
 layout: documentation
 doc-tab: overview
 doc-subtab: modular
@@ -99,5 +98,8 @@ breadcrumb:
       <code>[disabled]</code>
     </li>
   </ul>
-  {% highlight html %}{{ buttons }}{% endhighlight %}
+
+  <div class="bd-snippet-code highlight-full">
+    {% highlight html %}{{ buttons }}{% endhighlight %}
+  </div>
 </div>
diff --git a/docs/documentation/overview/responsiveness.html b/docs/documentation/overview/responsiveness.html
index c6a2b586f..8c118801c 100644
--- a/docs/documentation/overview/responsiveness.html
+++ b/docs/documentation/overview/responsiveness.html
@@ -1,6 +1,5 @@
 ---
 title: Responsiveness
-subtitle: "Bulma is a <strong>mobile-first</strong> framework"
 layout: documentation
 doc-tab: overview
 doc-subtab: responsiveness
@@ -36,7 +35,7 @@ $fullhd-enabled: false
     <li>the <code>level</code> component will show its children stacked vertically</li>
     <li>the <code>nav</code> menu will be hidden</li>
   </ul>
-  <p>For example, you can enforce the <strong>horizontal</strong> layout for both <code>columns</code> or <code>nav</code> by appending the <code>is-mobile</code> modifier.</p>
+  <p>You can however enforce the <strong>horizontal</strong> layout for both <code>columns</code> or <code>nav</code> by appending the <code>is-mobile</code> modifier.</p>
 </div>
 
 {% include anchor.html name="Breakpoints" %}
diff --git a/docs/documentation/overview/start.html b/docs/documentation/overview/start.html
index aa23c584b..e48c93f9e 100644
--- a/docs/documentation/overview/start.html
+++ b/docs/documentation/overview/start.html
@@ -1,6 +1,5 @@
 ---
 title: Getting started with Bulma
-subtitle: "You only need <strong>1 CSS file</strong> to use Bulma"
 layout: documentation
 doc-tab: overview
 doc-subtab: start
diff --git a/docs/documentation/overview/variables.html b/docs/documentation/overview/variables.html
index 099db28d8..7532f7233 100644
--- a/docs/documentation/overview/variables.html
+++ b/docs/documentation/overview/variables.html
@@ -1,6 +1,5 @@
 ---
 title: Variables
-subtitle: "Easily <strong>customize</strong> Bulma to match your design"
 layout: documentation
 doc-tab: overview
 doc-subtab: variables
diff --git a/docs/lib/main.js b/docs/lib/main.js
index 4063ee490..7c526ee8a 100644
--- a/docs/lib/main.js
+++ b/docs/lib/main.js
@@ -27,6 +27,30 @@ document.addEventListener('DOMContentLoaded', function () {
   //   });
   // }
 
+  // Sidebar links
+
+  var $categories = getAll('#categories .bd-category');
+
+  if ($categories.length > 0) {
+    $categories.forEach(function (el) {
+      var toggle_el = el.querySelector('.bd-category-toggle');
+
+      toggle_el.addEventListener('click', function (event) {
+        closeCategories(el);
+        el.classList.toggle('is-active');
+      });
+    });
+  }
+
+  function closeCategories(current_el) {
+    $categories.forEach(function (el) {
+      if (current_el == el) {
+        return;
+      }
+      el.classList.remove('is-active');
+    });
+  }
+
   // Meta links
 
   var $metalinks = getAll('#meta a');
@@ -38,7 +62,6 @@ document.addEventListener('DOMContentLoaded', function () {
         var target = $el.getAttribute('href');
         var $target = document.getElementById(target.substring(1));
         $target.scrollIntoView(true);
-        // window.history.replaceState(null, document.title, `${window.location.origin}${window.location.pathname}${target}`);
         return false;
       });
     });
@@ -289,8 +312,8 @@ document.addEventListener('DOMContentLoaded', function () {
 
   // translateHeader(window.scrollY, false);
 
-  var ticking = false;
-  var lastY = 0;
+  // let ticking = false;
+  // let lastY = 0;
 
   // window.addEventListener('scroll', function() {
   //   const currentY = window.scrollY;
diff --git a/sass/utilities/initial-variables.sass b/sass/utilities/initial-variables.sass
index 6a9ad80c7..421bd3d54 100644
--- a/sass/utilities/initial-variables.sass
+++ b/sass/utilities/initial-variables.sass
@@ -46,7 +46,7 @@ $weight-bold: 700 !default
 // Responsiveness
 
 // The container horizontal gap, which acts as the offset for breakpoints
-$gap: 32px !default
+$gap: 64px !default
 // 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
 $tablet: 769px !default
 // 960px container + 4rem
@@ -62,8 +62,8 @@ $fullhd-enabled: true !default
 
 $easing: ease-out !default
 $radius-small: 2px !default
-$radius: 3px !default
-$radius-large: 5px !default
+$radius: 4px !default
+$radius-large: 6px !default
 $radius-rounded: 290486px !default
 $speed: 86ms !default