Init migrating blog post

docs/_data/blog/migratingv070.json

@@ -0,0 +1,169 @@
+{
+  "removed": [
+    {
+      "file": "sass/components/message.sass",
+      "before": "$message-body-border",
+      "after": ["$message-body-border-color", "$message-body-border-width"]
+    }
+  ],
+  "updated": [
+    {
+      "file": "sass/utilities/initial-variables.sass",
+      "changes": [
+        {
+          "variable": "$gap",
+          "from": "32px",
+          "to": "64px"
+        },
+        {
+          "variable": "$radius",
+          "from": "3px",
+          "to": "4px"
+        },
+        {
+          "variable": "$radius-large",
+          "from": "5px",
+          "to": "6px"
+        }
+      ]
+    },
+    {
+      "file": "sass/base/generic.sass",
+      "changes": [
+        {
+          "variable": "$hr-background-color",
+          "from": "border",
+          "to": "$background"
+        },
+        {
+          "variable": "$hr-height",
+          "from": "1px",
+          "to": "2px"
+        }
+      ]
+    },
+    {
+      "file": "sass/components/message.sass",
+      "changes": [
+        {
+          "variable": "$message-header-padding",
+          "from": "0.5em 0.75em",
+          "to": "0.75em 1em"
+        },
+        {
+          "variable": "$message-body-padding",
+          "from": "1em 1.25em",
+          "to": "1.25em 1.5em"
+        }
+      ]
+    },
+    {
+      "file": "sass/components/navbar.sass",
+      "changes": [
+        {
+          "variable": "$navbar-item-hover-background-color",
+          "from": "$background",
+          "to": "$white-bis"
+        },
+        {
+          "variable": "$navbar-dropdown-border-top",
+          "from": "1px solid $border",
+          "to": "2px solid $border"
+        },
+        {
+          "variable": "$navbar-divider-background-color",
+          "from": "$border",
+          "to": "$background"
+        }
+      ]
+    },
+    {
+      "file": "sass/layout/footer.sass",
+      "changes": [
+        {
+          "variable": "$footer-background-color",
+          "from": "$background",
+          "to": "$white-bis"
+        }
+      ]
+    }
+  ],
+  "new": [
+    {
+      "file":"sass/components/breadcrumb.sass",
+      "newcomers":[
+        {
+          "name": "$breadcrumb-item-padding-vertical",
+          "value": "0"
+        },
+        {
+          "name": "$breadcrumb-item-padding-horizontal",
+          "value": "0.75em"
+        }
+      ]
+    },
+    {
+      "file":"sass/components/message.sass",
+      "newcomers":[
+        {
+          "name": "$message-body-border-color",
+          "value": "$border"
+        },
+        {
+          "name": "$message-body-border-width",
+          "value": "0 0 0 4px"
+        },
+        {
+          "name": "$message-header-weight",
+          "value": "$weight-bold"
+        },
+        {
+          "name": "$message-header-body-border-width",
+          "value": "0"
+        }
+      ]
+    },
+    {
+      "file":"sass/components/navbar.sass",
+      "newcomers":[
+        {
+          "name": "$navbar-box-shadow-size",
+          "value": "0 2px 0 0"
+        },
+        {
+          "name": "$navbar-box-shadow-color",
+          "value": "$background"
+        },
+        {
+          "name": "$navbar-padding-vertical",
+          "value": "1rem"
+        },
+        {
+          "name": "$navbar-padding-horizontal",
+          "value": "2rem"
+        },
+        {
+          "name": "$navbar-z",
+          "value": "30"
+        }
+      ]
+    },
+    {
+      "file":"sass/elements/title.sass",
+      "newcomers":[
+        {
+          "name": "$title-line-height",
+          "value": "1.125"
+        },
+        {
+          "name": "$subtitle-line-height",
+          "value": "1.25"
+        },
+        {
+          "name": "$subtitle-negative-margin",
+          "value": "-1.25rem"
+        }
+      ]
+    }
+  ]
+}

docs/_includes/elements/link.html

@@ -14,4 +14,9 @@
   <p class="bd-link-subtitle">
     {{ include.subtitle }}
   </p>
+  {% if include.more %}
+    <div class="bd-link-more">
+      {{ include.more }}
+    </div>
+  {% endif %}
 </a>

docs/_posts/2016-02-09-blog-launched-new-responsive-columns-new-helpers.md

@@ -1,7 +1,8 @@
 ---
 layout: post
 title: "Blog launched, new responsive columns, new helpers"
-introduction: "First blog post on the newly launched blog! It even has its own [RSS feed](/atom.xml) for those who still use that. This blog will be more frequently updated than the [newsletter](#newsletter), so you can subscribe to either or both, as they will be used for different purposes."
+introduction: "Stay updated with everything that's coming up with Bulma"
+long_introduction: "First blog post on the newly launched blog! It even has its own [RSS feed](/atom.xml) for those who still use that. This blog will be more frequently updated than the [newsletter](#newsletter), so you can subscribe to either or both, as they will be used for different purposes."
 color: "danger"
 name: "Launch!"
 icon: "rocket"

docs/_posts/2016-04-11-metro-ui-css-grid-with-bulma-tiles.md

@@ -1,7 +1,8 @@
 ---
 layout: post
 title: "Metro UI CSS grid with Bulma tiles"
-introduction: "Have you ever wanted to build a **Metro-UI-like grid in CSS**?<br>Thanks to Flexbox and the new [Bulma tiles](https://bulma.io/documentation/layout/tiles/), you now can! And it only requires 1 HTML element: the `tile` element."
+introduction: "Build a **Metro-UI-like grid in CSS** with the new `tile` element"
+long_introduction: "Have you ever wanted to build a **Metro-UI-like grid in CSS**?<br>Thanks to Flexbox and the new [Bulma tiles](https://bulma.io/documentation/layout/tiles/), you now can! And it only requires 1 HTML element: the `tile` element."
 color: "info"
 name: "Metro UI"
 icon: "th-large"

docs/_posts/2017-03-10-new-field-element.md

@@ -2,7 +2,8 @@
 layout: post
 title: "New field element (for better controls)"
 published: true
-introduction: "<p>The <code>.control</code> element has been a very versatile container for form controls. But it came at a cost: it was difficult to combine its <strong>block</strong> characteristics with its <strong>inline</strong> variations.</p>"
+introduction: "A new versatile container for form controls"
+long_introduction: "<p>The <code>.control</code> element has been a very versatile container for form controls. But it came at a cost: it was difficult to combine its <strong>block</strong> characteristics with its <strong>inline</strong> variations.</p>"
 color: "success"
 name: "Field element"
 icon: "square"

docs/_posts/2017-07-24-access-previous-bulma-versions.md

@@ -1,7 +1,8 @@
 ---
 layout: post
 title: "Access previous Bulma versions"
-introduction: "It is now possible to **access previous versions** of Bulma. Just head towards: [http://versions.bulma.io/](http://versions.bulma.io/)"
+introduction: "It is now possible to **access previous versions** of Bulma"
+long_introduction: "It is now possible to **access previous versions** of Bulma. Just head towards: [http://versions.bulma.io/](http://versions.bulma.io/)"
 color: "primary"
 name: "Versions"
 icon: "undo"

docs/_posts/2017-08-01-bulma-bootstrap-comparison.md

@@ -1,7 +1,8 @@
 ---
 layout: post
 title: "Bulma / Bootstrap comparison"
-introduction: "If you're unsure _how_ or _why_ you should try out Bulma if you're familiar to Bootstrap, the new page [\"Alternative to Bootstrap\"](https://bulma.io/alternative-to-bootstrap/) tries to help you answer questions you might have."
+introduction: "New page \"Alternative to Bootstrap\""
+long_introduction: "If you're unsure _how_ or _why_ you should try out Bulma if you're familiar to Bootstrap, the new page [\"Alternative to Bootstrap\"](https://bulma.io/alternative-to-bootstrap/) tries to help you answer questions you might have."
 color: "bootstrap"
 name: "Bulma over Bootstrap?"
 icon: "heart"

docs/_posts/2018-04-11-migration-to-v070.md

@@ -0,0 +1,99 @@
+---
+title: "Migrating to v0.7.0"
+layout: post
+introduction: "What has changed"
+color: "success"
+name: "Migrating to v0.7.0"
+icon: "sync-alt"
+---
+
+## Updated default values
+
+{% for item in site.data.blog.migratingv070.updated %}
+  <table class="table is-bordered">
+    <tbody>
+      <tr>
+        <th class="is-light" colspan="3">
+          File
+          <code>{{ item.file }}</code>
+        </th>
+      </tr>
+      <tr>
+        <th>Variable</th>
+        <th>From</th>
+        <th>To</th>
+      </tr>
+      {% for change in item.changes %}
+        <tr>
+          <td>
+            <code>{{ change.variable }}</code>
+          </td>
+          <td>
+            <code>{{ change.from }}</code>
+          </td>
+          <td>
+            <code>{{ change.to }}</code>
+          </td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+{% endfor %}
+
+## New variables
+
+{% for item in site.data.blog.migratingv070.new %}
+  <table class="table is-bordered">
+    <tbody>
+      <tr>
+        <th class="is-light" colspan="2">
+          File
+          <code>{{ item.file }}</code>
+        </th>
+      </tr>
+      <tr>
+        <th>Name</th>
+        <th>Value</th>
+      </tr>
+      {% for newcomer in item.newcomers %}
+        <tr>
+          <td>
+            <code>{{ newcomer.name }}</code>
+          </td>
+          <td>
+            <code>{{ newcomer.value }}</code>
+          </td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+{% endfor %}
+
+## Removed variables
+
+<table class="table is-bordered">
+  <thead>
+    <tr>
+      <th>File</th>
+      <th>Removed</th>
+      <th>Replaced with</th>
+    </tr>
+  </thead>
+  <tbody>
+    {% for item in site.data.blog.migratingv070.removed %}
+      <tr>
+        <td>
+          <code>{{ item.file }}</code>
+        </td>
+        <td>
+          <code>{{ item.before }}</code>
+        </td>
+        <td>
+          {% for newcomer in item.after %}
+            <code>{{ newcomer }}</code>
+          {% endfor %}
+        </td>
+      </tr>
+    {% endfor %}
+  </tbody>
+</table>

docs/_sass/specific.sass

@@ -77,6 +77,10 @@
   font-size: 2rem
   width: 1.5em
 
+.bd-link-more
+  font-size: 0.75em
+  opacity: 0.5
+
 +desktop
   .bd-links
     display: flex

docs/blog.html

@@ -39,6 +39,7 @@ breadcrumb:
           <div class="bd-links">
             {% for post in site.posts %}
               {% assign subtitle = post.date | date_to_string %}
+              {% assign more = post.introduction | markdownify | strip_html %}
               {%
                 include elements/link.html
                 url=post.url
@@ -47,7 +48,8 @@ breadcrumb:
                 icon_regular=post.icon_regular
                 icon=post.icon
                 name=post.name
-                subtitle=subtitle
+                subtitle=more
+                more=subtitle
               %}
             {% endfor %}
           </div>