Add website redesign post

docs/_includes/index/customize.html

@@ -1,6 +1,6 @@
 {% assign customize_link = site.data.links.by_id['overview-customize'] %}
 
-<section class="bd-easy section is-medium">
+<section id="customize" class="bd-easy section is-medium">
   <div class="container">
     <header class="bd-index-header">
       <h3 class="title is-3">

docs/_posts/2018-04-13-new-website.md

@@ -0,0 +1,132 @@
+---
+title: "Website redesign: clearer layout, easier navigation, better content, and much more!"
+layout: post
+introduction: "A brand new look"
+color: "star"
+name: "Website redesign"
+icon: "star"
+---
+
+The Bulma website has been widely redesigned!
+
+<div class="columns">
+  <div class="column">
+    <p class="has-text-centered has-text-grey-light">Before</p>
+    <a href="/images/blog/v7/before.png">
+      <img src="/images/blog/v7/before.png" alt="v7 website" width="1400" height="1200">
+    </a>
+  </div>
+  <div class="column">
+    <p class="has-text-centered has-text-grey-light">After</p>
+    <a href="/images/blog/v7/after.png">
+      <img src="/images/blog/v7/after.png" alt="v7 website" width="1400" height="1200">
+    </a>
+  </div>
+</div>
+
+{% include elements/anchor.html name="Navbar" %}
+
+The **navbar** has been updated with a ligther markup and cleaner design:
+
+<figure>
+  <a href="/images/blog/v7/navbar.png">
+    <img src="/images/blog/v7/navbar.png" alt="navbar" width="1080" height="84">
+  </a>
+</figure>
+
+This doesn't affect the current navbars. There's actually a new modifier called `is-spaced` that was created for this new navbar. Documentation coming soon!
+
+{% include elements/anchor.html name="Customize example" %}
+
+On the homepage, there's a new [**customization** section with a live example](/#customize):
+
+<figure>
+  <a href="/#customize">
+    <img src="/images/blog/v7/customize.png" alt="customize" width="492" height="582">
+  </a>
+</figure>
+
+{% include elements/anchor.html name="Breadcrumb" %}
+
+<figure>
+  <a href="/images/blog/v7/breadcrumb.png">
+    <img src="/images/blog/v7/breadcrumb.png" alt="breadcrumb" width="422" height="24">
+  </a>
+</figure>
+
+A **breadcrumb** is not visible at the top of each page, to easily navigate up and down the hierarchy.
+
+This has led to the creation of new **intermediate pages**:
+
+* [documentation](/documentation)
+* [documentation/modifiers](/documentation/modifiers)
+* [documentation/columns](/documentation/columns)
+* [documentation/layout](/documentation/layout)
+* [documentation/form](/documentation/form)
+* [documentation/elements](/documentation/elements)
+* [documentation/components](/documentation/components)
+* [more](/more)
+
+{% include elements/anchor.html name="Links" %}
+
+These intermediate pages have new **link boxes** that help dive into each sub-category:
+
+<figure>
+  <a href="/images/blog/v7/links.png">
+    <img src="/images/blog/v7/links.png" alt="footer links" width="664" height="468">
+  </a>
+</figure>
+
+{% include elements/anchor.html name="Previous/Next" %}
+
+Next to the breadcrumb, you can easily navigate to the **sibling** pages with the **previous** and **next** links:
+
+<figure>
+  <a href="/images/blog/v7/prevnext.png">
+    <img src="/images/blog/v7/prevnext.png" alt="prevnext buttons" width="48" height="24">
+  </a>
+</figure>
+
+These links are also available at the bottom:
+
+<figure>
+  <a href="/images/blog/v7/prevnextbis.png">
+    <img src="/images/blog/v7/prevnextbis.png" alt="prevnextbis buttons" width="664" height="58">
+  </a>
+</figure>
+
+{% include elements/anchor.html name="Categories" %}
+
+There's a new **sidebar** including a navigation menu with all the categories and sub-categories:
+
+<figure>
+  <a href="/images/blog/v7/categories.png">
+    <img src="/images/blog/v7/categories.png" alt="categories menu" width="256" height="397">
+  </a>
+</figure>
+
+{% include elements/anchor.html name="Scroll spy" %}
+
+On some pages below the categories, you'll find a new menu called "On this page" which is actually a **scroll spy**:
+
+<figure>
+  <a href="/images/blog/v7/scrollspy.png">
+    <img src="/images/blog/v7/scrollspy.png" alt="scrollspy menu" width="199" height="341">
+  </a>
+</figure>
+
+{% include elements/anchor.html name="Footer" %}
+
+The footer has been redesigned as well. Among other things, there's a **sitemap** available:
+
+<figure>
+  <a href="/images/blog/v7/footer.png">
+    <img src="/images/blog/v7/footer.png" alt="footer links" width="984" height="302">
+  </a>
+</figure>
+
+{% include elements/anchor.html name="Code" %}
+
+The Bulma website is built with **Jekyll**. In the process of this redesign, the underlying code that helps maintain this website has been optimized and cleaned up as well.
+
+This well help further updates to be easier.

docs/_sass/global.sass

@@ -30,7 +30,7 @@ $carbon-poweredby-height: 20px
   margin-left: auto
   margin-right: auto
   max-width: $carbon-width
-  min-height: $carbon-height
+  min-height: $carbon-height + $carbon-poweredby-height
   min-width: 280px
 
 #carbon
@@ -55,11 +55,14 @@ $carbon-poweredby-height: 20px
     position: relative
     &:hover
       .carbon-img::after
-        +overlay
         background-color: rgba(#000, 0.05)
         content: ""
         display: block
+        height: $carbon-height
+        left: 0
+        position: absolute
         right: $carbon-spacing
+        top: 0
   .carbon-img
     bottom: 0
     float: left

docs/css/bulma-docs.css

@@ -133,7 +133,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, .bd-patreon-button:hover::after, #carbonads .carbon-wrap:hover .carbon-img::after, .bd-focus-item::before, .intro-spinner, .intro-shadow, .bd-structure-item::before, .bd-structure-item::after, .highlight .bd-show, .bd-banner-background, .bd-book-pattern::before,
+.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, .bd-patreon-button:hover::after, .bd-focus-item::before, .intro-spinner, .intro-shadow, .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;
   left: 0;
@@ -10201,7 +10201,7 @@ svg {
   margin-left: auto;
   margin-right: auto;
   max-width: 300px;
-  min-height: 100px;
+  min-height: 120px;
   min-width: 280px;
 }
 
@@ -10242,7 +10242,11 @@ svg {
   background-color: rgba(0, 0, 0, 0.05);
   content: "";
   display: block;
+  height: 100px;
+  left: 0;
+  position: absolute;
   right: 1rem;
+  top: 0;
 }
 
 #carbonads .carbon-img {