Fix button docs

docs/_data/blog/migratingv070.json

@@ -32,7 +32,7 @@
       "changes": [
         {
           "variable": "$hr-background-color",
-          "from": "border",
+          "from": "$border",
           "to": "$background"
         },
         {
@@ -42,6 +42,16 @@
         }
       ]
     },
+    {
+      "file": "sass/elements/content.sass",
+      "changes": [
+        {
+          "variable": "$content-heading-weight",
+          "from": "$weight-normal",
+          "to": "$weight-semibold"
+        }
+      ]
+    },
     {
       "file": "sass/components/message.sass",
       "changes": [

docs/_includes/elements/link.html

@@ -1,4 +1,9 @@
 <a class="bd-link" href="{{ include.url }}">
+  {% if include.surtitle %}
+    <p class="bd-link-surtitle">
+      {{ include.surtitle }}
+    </p>
+  {% endif %}
   <h2 class="bd-link-name">
     <figure class="bd-link-figure">
       {% if include.icon %}

docs/_includes/elements/snippet.html

@@ -19,7 +19,13 @@
     {% if include.fullwidth %}bd-is-fullwidth{% endif %}
     ">
     <div class="bd-snippet-preview {% if include.paddingless %}is-paddingless{% endif %}">
-      {{ include.content }}
+      {% if include.wrapper %}
+        <div class="{{ include.wrapper }}">
+          {{ include.content }}
+        </div>
+      {% else %}
+        {{ include.content }}
+      {% endif %}
     </div>
     <div class="bd-snippet-code {% unless include.clipped %}highlight-full{% endunless %} {% if include.more %}bd-is-more bd-is-more-clipped{% endif %}">
       {% highlight html %}{{ include.content }}{% endhighlight %}

docs/_layouts/post.html

@@ -73,7 +73,7 @@ breadcrumb:
         <div class="bd-content">
           <div class="columns">
             <div class="column is-offset-2 is-8">
-              <div class="content is-medium">
+              <div class="bd-post content is-medium">
                 {{ content }}
               </div>
             </div>

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

@@ -7,7 +7,13 @@ name: "Migrating to v0.7.0"
 icon: "sync-alt"
 ---
 
-## Updated default values
+A new major Bulma update is out: [v0.7.0](#)!
+
+While this update is mainly focused on a massive [website redesign](#), it also includes a few bug fixes, some new features, and some variable changes.
+
+These variable changes are documented here, so you can edit or revert them if needed.
+
+{% include elements/anchor.html name="Updated default values" %}
 
 {% for item in site.data.blog.migratingv070.updated %}
   <table class="table is-bordered">
@@ -40,7 +46,7 @@ icon: "sync-alt"
   </table>
 {% endfor %}
 
-## New variables
+{% include elements/anchor.html name="New variables" %}
 
 {% for item in site.data.blog.migratingv070.new %}
   <table class="table is-bordered">
@@ -69,7 +75,7 @@ icon: "sync-alt"
   </table>
 {% endfor %}
 
-## Removed variables
+{% include elements/anchor.html name="Removed variables" %}
 
 <table class="table is-bordered">
   <thead>

docs/_sass/example.sass

@@ -59,6 +59,7 @@
 
 .bd-snippet-code
   background-color: $pre-background
+  border-radius: $radius-large
 
 .bd-snippet-code.bd-is-more.bd-is-more-clipped
   .highlight

docs/_sass/highlight.sass

@@ -1,7 +1,9 @@
 .highlight
-  background-color: #f5f5f5
+  background-color: $pre-background
+  border-radius: $radius-large
   color: #586e75
   pre
+    background-color: transparent
     font-size: 0.875em
     line-height: 1.375
   .c

docs/_sass/specific.sass

@@ -2,6 +2,12 @@
   background-color: $primary
   color: $primary-invert
 
+.bd-post
+  .table
+    font-size: 1rem
+  .bd-anchor-title
+    margin-top: 0 !important
+
 .bd-has-drawing
   position: relative
 
@@ -52,6 +58,14 @@
   &:hover
     background-color: $white-bis
 
+.bd-link-surtitle
+  float: right
+  font-size: 0.75em
+  margin-bottom: 1em
+  margin-left: 2em
+  opacity: 0.5
+  padding-top: 0.25em
+
 .bd-link-name
   line-height: 1.25
   margin-bottom: 0.25em

docs/blog.html

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

docs/css/bulma-docs.css

@@ -2655,7 +2655,7 @@ a.box:active {
 .content h5,
 .content h6 {
   color: #363636;
-  font-weight: 400;
+  font-weight: 600;
   line-height: 1.125;
 }
 
@@ -9897,11 +9897,13 @@ label.panel-block:hover {
 }
 
 .highlight {
-  background-color: #f5f5f5;
+  background-color: whitesmoke;
+  border-radius: 6px;
   color: #586e75;
 }
 
 .highlight pre {
+  background-color: transparent;
   font-size: 0.875em;
   line-height: 1.375;
 }
@@ -11183,6 +11185,14 @@ svg {
   color: #fff;
 }
 
+.bd-post .table {
+  font-size: 1rem;
+}
+
+.bd-post .bd-anchor-title {
+  margin-top: 0 !important;
+}
+
 .bd-has-drawing {
   position: relative;
 }
@@ -11257,6 +11267,15 @@ svg {
   background-color: #fafafa;
 }
 
+.bd-link-surtitle {
+  float: right;
+  font-size: 0.75em;
+  margin-bottom: 1em;
+  margin-left: 2em;
+  opacity: 0.5;
+  padding-top: 0.25em;
+}
+
 .bd-link-name {
   line-height: 1.25;
   margin-bottom: 0.25em;
@@ -11667,6 +11686,7 @@ svg {
 
 .bd-snippet-code {
   background-color: whitesmoke;
+  border-radius: 6px;
 }
 
 .bd-snippet-code.bd-is-more.bd-is-more-clipped .highlight {

docs/documentation/elements/button.html

@@ -148,7 +148,7 @@ meta:
 {% endcapture %}
 
 {% capture button_fa_example %}
-<p class="field">
+<p class="buttons">
   <a class="button">
     <span class="icon is-small">
       <i class="fas fa-bold"></i>
@@ -165,7 +165,7 @@ meta:
     </span>
   </a>
 </p>
-<p class="field">
+<p class="buttons">
   <a class="button">
     <span class="icon">
       <i class="fab fa-github"></i>
@@ -191,7 +191,7 @@ meta:
     </span>
   </a>
 </p>
-<p class="field">
+<p class="buttons">
   <a class="button is-small">
     <span class="icon is-small">
       <i class="fab fa-github"></i>
@@ -220,14 +220,14 @@ meta:
 {% endcapture %}
 
 {% capture button_only_icon_example %}
-<p class="field">
+<p class="buttons">
   <a class="button is-small">
     <span class="icon is-small">
       <i class="fas fa-heading"></i>
     </span>
   </a>
 </p>
-<p class="field">
+<p class="buttons">
   <a class="button">
     <span class="icon is-small">
       <i class="fas fa-heading"></i>
@@ -239,7 +239,7 @@ meta:
   </span>
   </a>
 </p>
-<p class="field">
+<p class="buttons">
   <a class="button is-medium">
     <span class="icon is-small">
       <i class="fas fa-heading"></i>
@@ -256,7 +256,7 @@ meta:
     </span>
   </a>
 </p>
-<p class="field">
+<p class="buttons">
   <a class="button is-large">
     <span class="icon is-small">
       <i class="fas fa-heading"></i>
@@ -380,7 +380,7 @@ meta:
 </div>
 {% endcapture %}
 
-{% capture buttons %}
+{% capture buttons_list %}
 <div class="buttons">
   <span class="button is-success">Save changes</span>
   <span class="button is-info">Save and continue</span>
@@ -463,7 +463,7 @@ meta:
   </p>
 </div>
 
-{% include elements/snippet.html content=button_example %}
+{% include elements/snippet.html wrapper="buttons" content=button_example %}
 
 <div class="content">
   <p>
@@ -485,30 +485,32 @@ meta:
   </ul>
 </div>
 
-{% include elements/snippet.html content=button_tags_example %}
+{% include elements/snippet.html wrapper="buttons" content=button_tags_example %}
 
 {% include elements/anchor.html name="Colors" %}
 
-{% include elements/snippet.html content=button_colors_a_example %}
+{% include elements/snippet.html wrapper="buttons" content=button_colors_a_example %}
 
-{% include elements/snippet.html content=button_colors_b_example %}
+{% include elements/snippet.html wrapper="buttons" content=button_colors_b_example %}
 
 {% include elements/anchor.html name="Sizes" %}
 
-{% include elements/snippet.html content=button_sizes_example %}
+{% include elements/snippet.html wrapper="buttons" content=button_sizes_example %}
 
 {% include elements/anchor.html name="Styles" %}
 
 <h4 class="subtitle">Outlined</h4>
 
-{% include elements/snippet.html content=button_outlined_example %}
+{% include elements/snippet.html wrapper="buttons" content=button_outlined_example %}
 
 <h4 class="subtitle">Inverted (the text color becomes the background color, and vice-versa)</h4>
 
 <div class="columns">
   <div class="column">
     <div class="bd-callout is-primary">
-      {{button_inverted_example}}
+      <div class="buttons">
+        {{ button_inverted_example }}
+      </div>
     </div>
   </div>
   <div class="column">
@@ -521,11 +523,13 @@ meta:
 <div class="columns">
   <div class="column">
     <div class="bd-callout is-primary">
-      {{button_inverted_outlined_example}}
+      <div class="buttons">
+        {{ button_inverted_outlined_example }}
+      </div>
     </div>
   </div>
   <div class="column">
-    {% highlight html %}{{button_inverted_outlined_example}}{% endhighlight %}
+    {% highlight html %}{{ button_inverted_outlined_example }}{% endhighlight %}
   </div>
 </div>
 
@@ -534,7 +538,9 @@ meta:
 <div class="columns">
   <div class="column">
     {% include elements/new-tag.html version="0.6.2" %}
-    {{ button_rounded_example }}
+    <div class="buttons">
+      {{ button_rounded_example }}
+    </div>
   </div>
   <div class="column">
     {% highlight html %}{{ button_rounded_example }}{% endhighlight %}
@@ -545,26 +551,26 @@ meta:
 
 <h4 class="subtitle">Normal</h4>
 
-{% include elements/snippet.html content=button_normal_example %}
+{% include elements/snippet.html wrapper="buttons" content=button_normal_example %}
 
 <h4 class="subtitle">Hover</h4>
 
-{% include elements/snippet.html content=button_hover_example %}
+{% include elements/snippet.html wrapper="buttons" content=button_hover_example %}
 
 <h4 class="subtitle">Focus</h4>
 
-{% include elements/snippet.html content=button_focus_example %}
+{% include elements/snippet.html wrapper="buttons" content=button_focus_example %}
 
 <h4 class="subtitle">Active</h4>
 
-{% include elements/snippet.html content=button_active_example %}
+{% include elements/snippet.html wrapper="buttons" content=button_active_example %}
 
 <h4 class="subtitle">Loading</h4>
 
 <div class="columns">
   <div class="column">
-    <div class="block">
+    <div class="buttons">
-      {{button_loading_example}}
+      {{ button_loading_example }}
     </div>
     <div class="message is-info">
       <div class="message-body">
@@ -590,10 +596,10 @@ meta:
         You can create a <strong>non-interactive button</strong> by using the <code>is-static</code> modifier. This is useful to align a text label with an input, for example when using <a href="{{site.url}}/documentation/form/general#form-addons">form addons</a>.
       </p>
     </div>
-    {{button_static_example}}
+    {{ button_static_example }}
   </div>
   <div class="column">
-    {% highlight html %}{{button_static_example}}{% endhighlight %}
+    {% highlight html %}{{ button_static_example }}{% endhighlight %}
   </div>
 </div>
 
@@ -601,8 +607,8 @@ meta:
 
 <div class="columns">
   <div class="column">
-    <div class="block">
+    <div class="buttons">
-      {{button_disabled_example}}
+      {{ button_disabled_example }}
     </div>
     <div class="message is-danger">
       <div class="message-body">
@@ -626,10 +632,10 @@ meta:
         If the button only contains an icon, Bulma will make sure the button remains <strong>square</strong>, no matter the size of the button <em>or</em> of the icon.
       </p>
     </div>
-    {{button_only_icon_example}}
+    {{ button_only_icon_example }}
   </div>
   <div class="column">
-    {% highlight html %}{{button_only_icon_example}}{% endhighlight %}
+    {% highlight html %}{{ button_only_icon_example }}{% endhighlight %}
   </div>
 </div>
 
@@ -669,11 +675,11 @@ meta:
       </p>
     </div>
     <div class="bd-example">
-      {{ buttons }}
+      {{ buttons_list }}
     </div>
   </div>
   <div class="column">
-    {% highlight html %}{{ buttons }}{% endhighlight %}
+    {% highlight html %}{{ buttons_list }}{% endhighlight %}
   </div>
 </div>
 

sass/elements/content.sass

@@ -1,5 +1,5 @@
 $content-heading-color: $text-strong !default
-$content-heading-weight: $weight-normal !default
+$content-heading-weight: $weight-semibold !default
 $content-heading-line-height: 1.125 !default
 
 $content-blockquote-background-color: $background !default