mere-blog-theme 0.1.1 → 0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: c83319d6fdf0d1dcba1894428d0514660ad909ae
-  data.tar.gz: b95c795dd9ddd7cc0079ba3fd49205b5c2d77cba
+SHA256:
+  metadata.gz: 2b925584ca8af3d16872215a6838e3fde4b7695bdff0b112e422bc671733ab3c
+  data.tar.gz: 7bc2b1856e67ae9e12eddf2dfd25085242eb0b7870ea9982837963d1d54f6867
 SHA512:
-  metadata.gz: b5fecfc5860f760041b0c6f6a4dda0f4bb6b2c09548d65e57c29bdcbb87c8569b9e16af08bfa5d2b0db672d710fed25c385cbc7f0c85434cf00773387a43e243
-  data.tar.gz: 14e75c9099197279c2e26c219e3a60393aa5ee9569014a84070338ea82e394c4378456c7c01b9e71e7b126286512ac57d7c7567cdd923e700764ea7be916a489
+  metadata.gz: bcb62e6bb016eaa3a10e78a1d152e1e42b9ad2498cb7962d5bfde646eb6f3234ddfba637b6481c95fd7d771d182c670e9265688dc3f369dd2c050e78da8a79e2
+  data.tar.gz: 5620d6add29d2e223b726b6fb96a4a3cdf2bf2af06ba3c11609ad43aa9e0329292fed579b8019a41d88f6674ed20ae53f728f58427571a5bbb63607e9efd29ec

data/README.md

@@ -1,9 +1,14 @@
 # mere-blog-theme
 
+[![Gem Version](https://badge.fury.io/rb/mere-blog-theme.svg)](https://badge.fury.io/rb/mere-blog-theme) 
+![Gem](https://img.shields.io/gem/dt/mere-blog-theme)
+
 Mere is a minimal and simple blog theme, and nothing more, for use with Jekyll and GitHub Pages. It has been built with the Bulma frontend framework.
 
 It has a homepage which displays the latest 6 posts and a paginated blog page used to list out all blog posts. 
 
+**Mere Blog Theme uses Jekyll 3.9 for compatibility with GitHub Pages**
+
 
 ## Installation
 
@@ -31,28 +36,27 @@ Or install it yourself as:
 
 * [Blog Setup](#blog-setup)
 * [Posts](#posts)
+    * [Post Intro](#post-intro)
 * [Homepage](#homepage)
+* [Authors](#authors)
 * [Google Analytics](#google-analytics)
 
 ### Blog Setup
 
-Create a `blog` directory with an `index.html` file inside it. Set the front matter of the `blog/index.html` page with the layout of blog. 
+As of 0.4, the blog posts will be displayed on the homepage including pagination, instead of in a separate blog page. 
 
-```yaml
-layout: blog
-title: Blog
-```
+**The homepage page needs to be called index.html for the blog pagination**
 
 Set the paginator up in the `_config.yml` file with the posts per page and the path to the blog.
 
 ```yaml
-paginate: 5
-paginate_path: "/blog/page:num"
+paginate: 6
+paginate_path: "/page:num"
 ```
 
 ### Posts
 
-Posts should be created in the _posts directory as per standard Jekyll usage. The frontmatter should contain the layout of post, the image to use in the header and the homepage / blog page, the title of the post and the author of the post. You can also set a subtitle for the post if you want to.
+Posts should be created in the _posts directory as per standard Jekyll usage. The front matter should contain the layout of post, the image to use in the header and the homepage / blog page, the title of the post and the author of the post. You can also set a subtitle for the post if you want to.
 
 ```yaml
 layout: post
@@ -63,6 +67,21 @@ author: C.S. Rhymes
 
 Wide images will work best, with a minimum width of 1400px. 
 
+#### Post Intro
+
+Version 0.3 allows you to provide a intro and an intro image in your frontmatter. When creating your post add a short `intro` text an `intro_image` as a path to an image and then specify the `intro_image_ratio` which should be a [Bulma image](https://bulma.io/documentation/elements/image/) class. 
+
+```yaml
+layout: post
+title: Post with Intro
+author: Guest Author
+intro: This is the introduction text for this post. It appears large and bold at the top of the post
+intro_image: /img/home.jpg
+intro_image_ratio: is-16by9
+```
+
+Only the intro is required if you want to display it. If you don't want an image then don't specify one and just the intro text will display.
+
 ### Homepage
 
 Finally, configure the homepage by creating an `index.html` page and configure the frontmatter with the layout of homepage, the title, subtitle (optional) and the image. You can set the hero_height to is-large if you want to make the homepage header a bit larger. 
@@ -75,6 +94,61 @@ image: /img/home.jpg
 hero_height: is-large
 ```
 
+### Authors
+
+To enable the authors section, create a directory named `_authors` and create a page for each author within it. The author pages should have front matter in the following format. 
+
+**NOTE** The author name should match the author name in their posts exactly. 
+
+```yaml
+layout: author
+title: The authors page title
+name: Author Name
+position: Web Designer
+description: The short description of the author
+avatar: /img/avatar.png
+website: https://www.csrhymes.com
+```
+
+The website and avatar are optional, but if you are stuck for author images, why not try [https://getavataaars.com](https://getavataaars.com). Square images work best. You can then write about the author in the page content. 
+ 
+Next, create an `authors.md` page in the root of your site and set the layout to authors.
+
+```yaml
+layout: authors
+title: Authors
+description: The authors page
+```
+
+Add authors as a collection in your _config.yml file with output set to true so the pages are generated. 
+
+```yaml
+collections:
+  authors:
+    output: true
+```
+
+When you build your site, the authors link will appear in the navbar. The authors page will display the authors you have added. You can then click on their name or image to view the author page, along with a list of their 4 latest posts. 
+
+There will also be a link back to the authors page at the bottom of the post. 
+
+#### Author Social Profiles
+
+**New in 0.2.1 **
+
+You can add links to an author's social profile pages by adding the profile name and link to the front matter in the author's page (such as _authors/chris.md). The below social profiles are available.
+
+```yaml
+facebook: https://www.facebook.com/
+twitter: https://www.twitter.com/
+github: https://www.github.com/
+gitlab: https://www.gitlab.com
+instagram: https://www.instagram.com
+linkedin: https://www.linkedin.com/
+medium: https://www.medium.com/
+stack_overflow: https://stackoverflow.com/
+```
+
 ### Google Analytics
 
 To enable Google Analytics add `google_analytics: UA-xxxxxxxx` to your `_config.yml` replacing the UA-xxxxxxxx with your Google Analytics property.

data/_includes/author-media.html

@@ -0,0 +1,24 @@
+<div class="author-media">
+    <div class="media">
+        <figure class="media-left">
+            <a href="{{ author.url | prepend: site.baseurl }}">
+                <p class="image is-64x64">
+                    {% if author.avatar %}
+                    <img src="{{ author.avatar | prepend: site.baseurl }}" alt="{{ author.name }}" />
+                    {% else %}
+                    <i class="fas fa-user fa-4x"></i>
+                    {% endif %}
+                </p>
+            </a>
+        </figure>
+        <div class="media-content">
+            <a href="{{ author.url | prepend: site.baseurl }}">
+                <p class="title is-5">{{ author.name }}</p>
+            </a>
+            <p class="subtitle is-5">{{ author.position }}</p>
+            <div class="content">
+                <p>{{ author.description }}</p>
+            </div>
+        </div>
+    </div>
+</div>

data/_includes/navbar.html

@@ -12,7 +12,9 @@
         </div>
         <div class="navbar-menu" id="navMenu">
             <div class="navbar-end">
-                <a class="navbar-item" href="{{ site.baseurl }}/blog/">Blog</a>
+                {% if site.authors %}
+                <a class="navbar-item" href="{{ site.baseurl }}/authors/">Authors</a>
+                {% endif %}
             </div>
         </div>
     </div>

data/_includes/social-buttons.html

@@ -0,0 +1,50 @@
+<div class="buttons">
+    {% if page.facebook %}
+    <a href="{{ page.facebook }}" class="button is-dark" target="_blank">
+        <i class="fab fa-facebook-f"></i>
+    </a>
+    {% endif %}
+
+    {% if page.twitter %}
+    <a href="{{ page.twitter }}" class="button is-dark" target="_blank">
+        <i class="fab fa-twitter"></i>
+    </a>
+    {% endif %}
+
+    {% if page.github %}
+    <a href="{{ page.github }}" class="button is-dark" target="_blank">
+        <i class="fab fa-github"></i>
+    </a>
+    {% endif %}
+
+    {% if page.gitlab %}
+    <a href="{{ page.gitlab }}" class="button is-dark" target="_blank">
+        <i class="fab fa-gitlab"></i>
+    </a>
+    {% endif %}
+
+    {% if page.instagram %}
+    <a href="{{ page.instagram }}" class="button is-dark" target="_blank">
+        <i class="fab fa-instagram"></i>
+    </a>
+    {% endif %}
+
+    {% if page.linkedin %}
+    <a href="{{ page.linkedin }}" class="button is-dark" target="_blank">
+        <i class="fab fa-linkedin-in"></i>
+    </a>
+    {% endif %}
+
+    {% if page.medium %}
+    <a href="{{ page.medium }}" class="button is-dark" target="_blank">
+        <i class="fab fa-medium-m"></i>
+    </a>
+    {% endif %}
+
+    {% if page.stack_overflow %}
+    <a href="{{ page.stack_overflow }}" class="button is-dark" target="_blank">
+        <i class="fab fa-stack-overflow"></i>
+    </a>
+    {% endif %}
+
+</div>

data/_layouts/author.html

@@ -0,0 +1,55 @@
+---
+layout: default
+---
+{% assign page.title = page.name %}
+
+<div class="columns is-multiline">
+    <div class="column is-3">
+        {% if page.avatar %}
+        <p class="image is-square">
+            <img src="{{ page.avatar | prepend: site.baseurl }}" alt="{{ page.name }}" />
+        </p>
+        {% else %}
+        <div class="has-text-centered">
+            <i class="fas fa-user fa-4x"></i>
+        </div>
+        {% endif %}
+    </div>
+    <div class="column">
+        <p class="title is-4">{{ page.name }}</p>
+        <p class="subtitle is-4 is-gapless">{{ page.position }}</p>
+
+        {% if page.website %}
+        <p class="subtitle is-6"><a href="{{ page.website }}" title="Author Website">{{ page.website }}</a></p>
+        {% endif %}
+
+        {% include social-buttons.html %}
+
+        <div class="content">
+            {{ content }}
+        </div>
+
+        <p class="title is-5">Latest Posts</p>
+        <div class="columns is-multiline">
+            {% assign filtered_posts = site.posts | where: 'author', page.name %}
+            {% for post in filtered_posts limit: 4 %}
+                <div class="column is-12">
+                    <div class="card">
+                        <div class="card-content">
+                            <p class="title is-5">{{ post.title }}</p>
+                            <p class="subtitle is-6">Published {{ post.date | date: "%b %-d, %Y" }} by {{ post.author }}</p>
+
+                            <div class="content">
+                                {{ post.excerpt | strip_html | strip_newlines | truncate: 100 }}
+                            </div>
+                            <a href="{{ post.url | prepend: site.baseurl }}" class="button is-dark is-fullwidth">Read more</a>
+                        </div>
+                    </div>
+                    <p class="title"></p>
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+</div>
+
+

data/_layouts/authors.html

@@ -0,0 +1,15 @@
+---
+layout: default
+---
+
+<div class="content">
+    {{ content }}
+</div>
+
+<div class="columns is-multiline">
+    {% for author in site.authors %}
+        <div class="column is-12">
+            {% include author-media.html %}
+        </div>
+    {% endfor %}
+</div>

data/_layouts/default.html

@@ -3,7 +3,9 @@
 {% include head.html %}
 <body>
 {% include navbar.html %}
-{% include hero.html %}
+{% unless page.hide_hero %}
+    {% include hero.html %}
+{% endunless %}
 <section class="section">
     <div class="container">
         {{ content }}

data/_layouts/homepage.html

@@ -8,18 +8,14 @@ layout: default
 
 <div class="columns is-multiline">
     {% assign post_width = "6|6|12|4|4|4" | split: "|" %}
-    {% for post in site.posts limit:6 %}
+    {% for post in paginator.posts limit:6 %}
     <div class="column is-{{ post_width[forloop.index0] }}">
         {% include post-item.html %}
     </div>
     {% endfor %}
 
     <div class="column is-12">
-        <div class="columns is-centered">
-            <div class="column is-3">
-                <a class="button is-dark is-fullwidth" href="{{ site.baseurl }}/blog/">More</a>
-            </div>
-        </div>
+        {% include pagination.html %}
     </div>
 </div>
 

data/_layouts/post.html

@@ -2,13 +2,40 @@
 layout: default
 ---
 
-<div class="content">
-    <p>Published: {{ page.date | date: "%b %-d, %Y" }} by {{ page.author }}</p>
-    {{ content }}
+{% if page.intro %}
+<div class="intro">
+    <div class="columns is-centered">
+        {% if page.intro_image %}
+        <div class="column is-8-desktop is-6-tablet">
+            <figure class="image {% if page.intro_image_ratio %} {{ page.intro_image_ratio }} {% else %} is-16by9 {% endif %}">
+                <img src="{{ page.intro_image | prepend: site.baseurl }}" alt="{{ page.title }}" />
+            </figure>
+        </div>
+        {% endif %}
+        <div class="column is-4-desktop is-6-tablet">
+            <p class="title is-1">{{ page.intro }}</p>
+        </div>
+    </div>
 </div>
+{% endif %}
 
-<div class="tags">
-    {% for tag in page.tags %}
-    <span class="tag is-primary">{{ tag }}</span>
-    {% endfor %}
+<div class="columns is-centered">
+    <div class="column is-8-desktop is-10-tablet">
+        <div class="content">
+            <p><strong>Published: {{ page.date | date: "%b %-d, %Y" }} by {{ page.author }}</strong></p>
+            {{ content }}
+        </div>
+
+        <div class="tags">
+            {% for tag in page.tags %}
+            <span class="tag is-primary">{{ tag }}</span>
+            {% endfor %}
+        </div>
+
+        {% assign author = site.authors | where: 'name', page.author | first %}
+        {% if author %}
+        {% include author-media.html %}
+        {% endif %}
+    </div>
 </div>
+

data/_sass/_intro.scss

@@ -0,0 +1,5 @@
+.intro {
+    padding: $gap;
+    background: $light;
+    margin-bottom: 3rem;
+}

data/_sass/_layout.scss

@@ -23,3 +23,8 @@ div.highlight {
         }
     }
 }
+
+.author-media {
+    padding: 1.5rem;
+    background: $light;
+}

data/_sass/_main.scss

@@ -35,4 +35,5 @@ $radius-small: 0;
 
 @import "../node_modules/bulma/bulma.sass";
 @import "layout";
-@import "syntax";
+@import "syntax";
+@import "intro";

data/node_modules/.package-lock.json

@@ -0,0 +1,13 @@
+{
+  "name": "artemis-blog-theme",
+  "version": "1.0.0",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "node_modules/bulma": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.2.tgz",
+      "integrity": "sha512-e14EF+3VSZ488yL/lJH0tR8mFWiEQVCMi/BQUMi2TGMBOk+zrDg4wryuwm/+dRSHJw0gMawp2tsW7X1JYUCE3A=="
+    }
+  }
+}

data/node_modules/bulma/CHANGELOG.md

@@ -1,11 +1,296 @@
 # Bulma Changelog
 
-## Upcoming release
+## 0.9.2
+
+### Breaking change
+
+To fix duplicate imports, all Sass placeholders have moved from the `utilities/mixins` file to its own `utilities/extends` file.
+
+The Sass placeholders are:
+
+- `%control`
+- `%unselectable`
+- `%arrow`
+- `%block`
+- `%delete`
+- `%loader`
+- `%overlay`
+
+If you were importing them directly from `utilities/mixins`, you'll need to import `utilities/extends` instead.  
+If you were importing `utilities/_all` or even `bulma.sass` directly, no change is required.
+
+### New features
+
+- Fix #1583 New `is-ghost` button that behaves / looks like a regular link
+- New `icon-text` component, to combine an icon with text on its side
+
+### Bug fixes
+
+- #3005 Fix `column` offsets in RTL
+- Fix #3145 Dropdown content is bounded by a parent card
+- Fix #3089 Sub columns of a variable columns have weird gap
+- Fix #2937 Add `width: unset` for narrow columns
+- #3208 Fix #3163 Do not override is-rounded with button-small
+- #3216 Removed duplicate `mixins` imports, created a single `extends` file
+- #3216 Removed all references to the `.sass` file extension have been removed, since they're unnecessary when there's no ambiguity between a `.sass` file or a `.scss` file
+
+### Improvements
+
+- Fix #3012 Add `$media-*` variables, set to `!default`
+- Fix #2797 Import dependencies individually for each component
+- Remove list style from pagination list
+
+## 0.9.1
+
+### New features
+
+- #3047 Flexbox helpers
+- #3085 Add `is-clickable` helper
+- #3086 Allow each component to have its own colors and default to global ones
+- New variables `$navbar-colors`, `$button-colors`, `$notification-colors`, `$progress-colors`, `$table-colors`, `$tag-colors`, `$file-colors`, `$textarea-colors`, `$select-colors`, `$form-colors`, `$label-colors` and `$hero-colors`
+
+### Improvements
+
+- #2630 Fixes #2598 -> Add `$card-radius` variable
+- Add `$card-overflow` variable
+- #2540 Fixes #2539 -> Fix indeterminate progress styling in IE11
+- #3057 Make the default text color of `$code` listings more accessible
+- #3088 Adds not allowed cursor to missing inputs
+- #3101 Add `$modal-breakpoint` variable for modal breakpoint
+- #3107 Add `optgroup` to `generic.sass`
+
+## 0.9.0
+
+### Deprecation warning
+
+The `base/helpers.sass` file is **deprecated**. It has moved into its own `/helpers` folder. If you were importing `base/helpers.sass` or `base/_all.sass`, please import `sass/helpers/_all.sass` now.
+If you were simply importing the whole of Bulma with `@import "~/bulma/bulma.sass"` or similar, you won't have to change anything, and everything will work as before.
+
+The `list` component is also **deprecated**: the `components/list.sass` file has been deleted. It was never officialy supported as it was too similar to `panel` component. Use that one instead.
+
+### RTL support
+
+Bulma now has **RTL support**.
+
+By setting the Sass flag `$rtl` to `true`, you can create an RTL version of Bulma, thanks to 4 new Sass mixins:
+
+- `=ltr`
+- `=rtl`
+- `=ltr-property($property, $spacing, $right: true)`
+- `=ltr-position($spacing, $right: true)`
+
+The Bulma package now also comes with a `bulma-rtl.css` and `bulma-rtl.min.css` file to be used straight away.
+
+### Spacing helpers
+
+Bulma now has **spacing helpers**: https://bulma.io/documentation/helpers/spacing-helpers/
+
+<p>Bulma provides <strong>margin</strong> <code>m*</code> and <strong>padding</strong> <code>p*</code> helpers in all <strong>directions</strong>:</p>
+
+<ul>
+  <li>
+    <code>*t</code> for <strong>top</strong>
+  </li>
+  <li>
+    <code>*r</code> for <strong>right</strong>
+  </li>
+  <li>
+    <code>*b</code> for <strong>bottom</strong>
+  </li>
+  <li>
+    <code>*l</code> for <strong>left</strong>
+  </li>
+  <li>
+    <code>*x</code> horizontally for both <strong>left</strong> and <strong>right</strong>
+  </li>
+  <li>
+    <code>*y</code> vertically for both <strong>top</strong> and <strong>bottom</strong>
+  </li>
+</ul>
+
+<p>
+  You need to <strong>combine</strong> a margin/padding prefix with a direciton suffix. For example:
+</p>
+
+<ul>
+  <li>for a <code>margin-top</code>, use <code>mt-*</code></li>
+  <li>for a <code>padding-bottom</code>, use <code>pb-*</code></li>
+  <li>for both <code>margin-left</code> and <code>margin-right</code>, use <code>mx-*</code></li>
+</ul>
+
+<p>
+  Each of these <code>property-direction</code> <strong>combinations</strong> needs to be appended with one of <strong>6 value suffixes</strong>
+</p>
+
+This release also includes the following helpers:
+
+- light and dark color helpers
+- light and dark background color helpers
+
+### Improvements
+
+- #2925 Center table cell content vertically with `is-vcentered`
+
+### Bug fixes
+
+- #2955 Fix issue when there's only one `is-toggle` tag
+
+## 0.8.2
+
+### Bug fixes
+
+- Fix #2885 -> Revert `$input-color: $text-strong`
+
+## 0.8.1
+
+### Improvements
+
+- #2709 Add light colors to the `notification` element
+- #2740 Fixes #2739 -> Add variables size for layout `hero`
+- Fix #2741 -> Create `bulmaRgba()` function to support `inherit` value
+- #2756 Add `$button-text-decoration` variable
+
+### Bug fixes
+
+- #2664 Fixes #2671 -> Add `$panel-colors` variable
+
+## 0.8.0
+
+### Big update
+
+#### Larger form controls
+
+Controls and buttons are now `2.5em` high. You can revert this resizing by setting these previous values:
+
+```sass
+$control-height: 2.25em
+$control-padding-vertical: calc(0.375em - #{$control-border-width})
+$control-padding-horizontal: calc(0.625em - #{$control-border-width})
+$button-padding-vertical: calc(0.375em - #{$button-border-width})
+$button-padding-horizontal: 0.75em
+```
+
+#### Light and dark colors
+
+Each main color (`"primary"`, `"info"`, `"success"`, `"warning"`, `"danger"`) now has a `*-light` and `*-dark` version. They are calculated using 2 new color functions:
+
+- `findLightColor()` which finds the light version of a color
+- `findDarkolor()` which finds the dark version of a color
+
+The light colors are used by the `button` element, while the light and dark colors are used by the `message` component.
+
+#### Panel colors
+
+The `panel` component is now available in all the different colors.
+
+#### 4-value color map
+
+The `$colors` Sass map now accepts, for each of its values, a map of up to **4** values. For example: the key `"info"` now has the `($info, $info-invert, $info-light, $info-dark)` map.
+
+If you provide a `$custom-colors` map, you can decide to provide a map of 1, 2, 3 or 4 values for each value. If fewer than 4 are provided, Bulma will calculate the remaining ones:
+
+```scss
+$custom-colors: (
+  'lime': (
+    lime,
+  ),
+  'tomato': (
+    tomato,
+    white,
+  ),
+  'orange': (
+    $orange,
+    $orange-invert,
+    $orange-light,
+  ),
+  'lavender': (
+    $lavender,
+    $lavender-invert,
+    $lavender-light,
+    $lavender-dark,
+  ),
+);
+```
+
+This is processed by the updated `mergeColorMaps()` Sass function.
+
+#### Scheme variables
+
+There are 6 new `$scheme` derived variables: `$scheme-main` `$scheme-main-bis` `$scheme-main-ter` `$scheme-invert` `$scheme-invert-bis` `$scheme-invert-ter`
+They replace the `$white` and `$black` occurences in the codebase. This makes it easy to create a "Dark mode" simply by swapping the values:
+
+```sass
+$scheme-main: $black
+$scheme-invert: $white
+// etc.
+```
+
+That is also why most of the codebase now references **derived** variables (`$text`, `$background`, `$border` etc.) instead of **initial** ones (`$grey`, `$grey-lighter`, `$grey-darker` etc.): updating the derived variables will affect all elements and components directly.
+
+#### Initial variables
+
+- `$green: hsl(141, 53%, 53%)`
+- `$cyan: hsl(204, 71%, 53%)`
+- `$red: hsl(348, 86%, 61%)`
+
+#### Derived variables
+
+- `$primary-invert: findColorInvert($primary)`
+- `$primary-light: findLightColor($primary)`
+- `$primary-dark: findDarkColor($primary)`
+- `$info-invert: findColorInvert($info)`
+- `$info-light: findLightColor($info)`
+- `$info-dark: findDarkColor($info)`
+- `$success-invert: findColorInvert($success)`
+- `$success-light: findLightColor($success)`
+- `$success-dark: findDarkColor($success)`
+- `$warning-invert: findColorInvert($warning)`
+- `$warning-light: findLightColor($warning)`
+- `$warning-dark: findDarkColor($warning)`
+- `$danger-invert: findColorInvert($danger)`
+- `$danger-light: findLightColor($danger)`
+- `$danger-dark: findDarkColor($danger)`
+- `$light-invert: findColorInvert($light)`
+- `$dark-invert: findColorInvert($dark)`
+
+- `$scheme-main: $white`
+- `$scheme-main-bis: $white-bis`
+- `$scheme-main-ter: $white-ter`
+- `$scheme-invert: $black`
+- `$scheme-invert-bis: $black-bis`
+- `$scheme-invert-ter: $black-ter`
+
+### Other variables
+
+- `$control-height: 2.5em`
+- `$control-padding-vertical: calc(0.5em - #{$control-border-width})`
+- `$control-padding-horizontal: calc(0.75em - #{$control-border-width})`
+- `$media-border-color: rgba($border, 0.5)`
+- `$notification-code-background-color: $scheme-main`
+- `$panel-radius: $radius-large`
+- `$panel-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)`
+- `$textarea-padding: $control-padding-horizontal`
+- `$textarea-max-height: 40em`
+- `$textarea-min-height: 8em`
+
+### Bug fixes
+
+- Fix #2647 -> Missing meta tags in snippet
+- Fix #2031, Fix #2483 -> Invalid output when declaring a custom shade map
+- Fix #2060 -> `height: auto` on HTML `audio` element breaks height of element
+- Fix #706 -> Derive `-invert` variables using `findColorInvert()`
+- #1608 Fix #1552 -> `.container.is-fluid` margins
+
+### New features
+
+- #2563 `.image` has a new `.is-fullwidth` modifier
+
+## 0.7.5
 
 ### Deprecation warning
 
 The `form.sass` file is **deprecated**. It has moved into its own `/form` folder. If you were importing `form.sass`, please import `sass/form/_all.sass` now.
-If you were simply importing the whole of Bulma with `@import "~/bulma/bulma.sass"` or similar, you won't have to change anything, and everything will work as bbefore.
+If you were simply importing the whole of Bulma with `@import "~/bulma/bulma.sass"` or similar, you won't have to change anything, and everything will work as before.
 
 ### New features
 
@@ -16,177 +301,177 @@ You can now specify a different `font-family` for the `.title`, `.subtitle` and
 Simply set a value when importing Bulma:
 
 ```scss
-$title-family: "Georgia", serif;
+$title-family: 'Georgia', serif;
 ```
 
-* #2375 Add `.is-relative` helper
-* #2321 Make `.navbar` focus behave like hover for the navigation
-* #2290 Fix #1186 -> Reset the offset on columns
-* #2231 Add `.has-text-weight-medium` helper
-* #2224 Add customizable border radius to progress bar
-* #2480 Add `$footer-color` variable
+- #2375 Add `.is-relative` helper
+- #2321 Make `.navbar` focus behave like hover for the navigation
+- #2290 Fix #1186 -> Reset the offset on columns
+- #2231 Add `.has-text-weight-medium` helper
+- #2224 Add customizable border radius to progress bar
+- #2480 Add `$footer-color` variable
 
 ### Improvements
 
-* #2396 Update docs with webpack 4 example
-* #2381 Make centered buttons have equal margin
-* Fix #2297 -> Remove `.container` fixed width values, use `flex-grow`
-* #2478 Move form.sass into its own folder
+- #2396 Update docs with webpack 4 example
+- #2381 Make centered buttons have equal margin
+- Fix #2297 -> Remove `.container` fixed width values, use `flex-grow`
+- #2478 Move form.sass into its own folder
 
 ### Bug fixes
 
-* #2420 Fix #2414 -> Fix `align` attribute in `td/th` being ignored
-* #2463 Remove duplicate `.has-addons` in `tag.sass`
-* #2253 Fix `$gap` variable default value
-* #2273 Fix #2258 -> Fix Indeterminate Progress Bar animation in Firefox
-* #2175 Proper aligning for `.tabs` within `.content`
-* #2476 Fix #2441 -> Correct active pagination link text colour on hero
+- #2420 Fix #2414 -> Fix `align` attribute in `td/th` being ignored
+- #2463 Remove duplicate `.has-addons` in `tag.sass`
+- #2253 Fix `$gap` variable default value
+- #2273 Fix #2258 -> Fix Indeterminate Progress Bar animation in Firefox
+- #2175 Proper aligning for `.tabs` within `.content`
+- #2476 Fix #2441 -> Correct active pagination link text colour on hero
 
 Fix #1979 -> Correct loading spinner color when a button is:
 
-* outlined and hovered/focused
-* outlined, inverted and hovered/focused
+- outlined and hovered/focused
+- outlined, inverted and hovered/focused
 
 ### New variables
 
 #### Initial variables
 
-* `$block-spacing`
+- `$block-spacing`
 
 #### Base
 
-* `$body-font-size`
-* `$small-font-size`
-* `$pre-font-size`
-* `$pre-padding`
-* `$pre-code-font-size`
+- `$body-font-size`
+- `$small-font-size`
+- `$pre-font-size`
+- `$pre-padding`
+- `$pre-code-font-size`
 
 #### Components
 
-* `$card-header-padding`
-* `$card-content-padding`
-* `$card-media-margin`
-* `$dropdown-menu-min-width`
-* `$dropdown-content-padding-bottom`
-* `$dropdown-content-padding-top`
-* `$level-item-spacing`
-* `$menu-list-line-height`
-* `$menu-list-link-padding`
-* `$menu-nested-list-margin`
-* `$menu-nested-list-padding-left`
-* `$menu-label-font-size`
-* `$menu-label-letter-spacing`
-* `$menu-label-spacing`
-* `$pagination-item-font-size`
-* `$pagination-item-margin`
-* `$pagination-item-padding-left`
-* `$pagination-item-padding-right`
-* `$panel-margin`
-* `$panel-tabs-font-size`
+- `$card-header-padding`
+- `$card-content-padding`
+- `$card-media-margin`
+- `$dropdown-menu-min-width`
+- `$dropdown-content-padding-bottom`
+- `$dropdown-content-padding-top`
+- `$level-item-spacing`
+- `$menu-list-line-height`
+- `$menu-list-link-padding`
+- `$menu-nested-list-margin`
+- `$menu-nested-list-padding-left`
+- `$menu-label-font-size`
+- `$menu-label-letter-spacing`
+- `$menu-label-spacing`
+- `$pagination-item-font-size`
+- `$pagination-item-margin`
+- `$pagination-item-padding-left`
+- `$pagination-item-padding-right`
+- `$panel-margin`
+- `$panel-tabs-font-size`
 
 #### Elements
 
-* `$container-offset`
+- `$container-offset`
 
 #### Grid
 
-* `$tile-spacing`
+- `$tile-spacing`
 
 ## 0.7.3
 
 ### New features
 
-* #2145 Fix #372 -> New indeterminate progress bars
-* #2206 Fix #2046 -> New variables `$table-head-background-color`, `$table-body-background-color` and `$table-foot-background-color` for the `.table` element
-* #592 -> Give arbitrary elements access to the image/ratio classes
-* #1682 Fix #1681 -> Adds disabled styles for `<fieldset disabled>`
-* #2201 Fix #1875 -> `.buttons` and `.tags` group sizing (`.are-small`, `.are-medium`, `.are-large`)
+- #2145 Fix #372 -> New indeterminate progress bars
+- #2206 Fix #2046 -> New variables `$table-head-background-color`, `$table-body-background-color` and `$table-foot-background-color` for the `.table` element
+- #592 -> Give arbitrary elements access to the image/ratio classes
+- #1682 Fix #1681 -> Adds disabled styles for `<fieldset disabled>`
+- #2201 Fix #1875 -> `.buttons` and `.tags` group sizing (`.are-small`, `.are-medium`, `.are-large`)
 
 ### Improvements
 
-* #1978 Fix #1696 -> Force `box-sizing: border-box` on `details` element
-* #2167 Fix #1878 -> New `$footer-padding` variable
-* #2168 -> New `$input-placeholder-color` and `$input-disabled-placeholder-color` variables
+- #1978 Fix #1696 -> Force `box-sizing: border-box` on `details` element
+- #2167 Fix #1878 -> New `$footer-padding` variable
+- #2168 -> New `$input-placeholder-color` and `$input-disabled-placeholder-color` variables
 
 ### Bug fixes
 
-* #2157 Fix #1656 -> Allow border radius if only one `.control` in `.field`
-* #2091 Fix #2091 -> Remove CSS rule which causes `.tag.has-addons` to not work correctly
-* #2186 Fix #1130 -> Prevent `.dropdown` links underlining in `.message` component
-* Fix #2154 -> Move `.hero.is-fullheight-with-navbar` to `navbar.sass` file
+- #2157 Fix #1656 -> Allow border radius if only one `.control` in `.field`
+- #2091 Fix #2091 -> Remove CSS rule which causes `.tag.has-addons` to not work correctly
+- #2186 Fix #1130 -> Prevent `.dropdown` links underlining in `.message` component
+- Fix #2154 -> Move `.hero.is-fullheight-with-navbar` to `navbar.sass` file
 
 ### Deprecation
 
-* `.control.has-icon` deprecated in favor of `.control.has-icons`
+- `.control.has-icon` deprecated in favor of `.control.has-icons`
 
 ## 0.7.2
 
 ### New features
 
-* #1884 New `$navbar-burger-color` variable
-* #1679 Add breakpoint based column gaps
-* #1905 Fix `modal` for IE11 #1902
-* #1919 New `is-arrowless` class for navbar items
-* #1949 New `is-fullheight-with-navbar` class for heros
-* #1764 New `.is-sr-only` helper
-* #2109 Add and use `$navbar-breakpoint` variable
-* New variables `$control-height`, `$control-line-height`, `$pagination-min-width`, `$input-height`
-* #1720 Add list element feature
-* #2123 Add `.content ol` types: `.is-lower-roman`, `.is-upper-roman`, `.is-lower-alpha`, `.is-upper-alpha`, and support for the `type=` HTML attribute
+- #1884 New `$navbar-burger-color` variable
+- #1679 Add breakpoint based column gaps
+- #1905 Fix `modal` for IE11 #1902
+- #1919 New `is-arrowless` class for navbar items
+- #1949 New `is-fullheight-with-navbar` class for heros
+- #1764 New `.is-sr-only` helper
+- #2109 Add and use `$navbar-breakpoint` variable
+- New variables `$control-height`, `$control-line-height`, `$pagination-min-width`, `$input-height`
+- #1720 Add list element feature
+- #2123 Add `.content ol` types: `.is-lower-roman`, `.is-upper-roman`, `.is-lower-alpha`, `.is-upper-alpha`, and support for the `type=` HTML attribute
 
 ### Improvements
 
-* #1964 Allow `.notification` to have a `.dropdown-item`
-* #1999 Change `$border` to `$grey-lighter` in mixins
-* #2085 `.media-content` will allow scrolling horizontally if the content is too wide
-* #1744 Fix #1710 by using `$table-striped-row-even-hover-background-color` only for even rows
-* #2074 Allow `<button>` as `.dropdown-item`
+- #1964 Allow `.notification` to have a `.dropdown-item`
+- #1999 Change `$border` to `$grey-lighter` in mixins
+- #2085 `.media-content` will allow scrolling horizontally if the content is too wide
+- #1744 Fix #1710 by using `$table-striped-row-even-hover-background-color` only for even rows
+- #2074 Allow `<button>` as `.dropdown-item`
 
 ### Bug fixes
 
-* #1749 Fix icons floating out of input area
-* #1993 Fixes #1992 Prevent disabled form elements hover state from overlapping, if control has add-ons elements
-* #1909 Fix Modal card in IE11
-* #1908 Fix IE11 when textarea doesn't listen to `size=""`
-* Fix #1991 The last button in list of full-width buttons has longer width
-* #1982 Fix navbar-burger color when color modifier is used
-* #1819 Fix #1137 error message for required file
-* Fix #1904 and #1969: hide native file input in Chrome
-* #2059 Remove unnecessary right margin from last level-item (level.is-mobile)
+- #1749 Fix icons floating out of input area
+- #1993 Fixes #1992 Prevent disabled form elements hover state from overlapping, if control has add-ons elements
+- #1909 Fix Modal card in IE11
+- #1908 Fix IE11 when textarea doesn't listen to `size=""`
+- Fix #1991 The last button in list of full-width buttons has longer width
+- #1982 Fix navbar-burger color when color modifier is used
+- #1819 Fix #1137 error message for required file
+- Fix #1904 and #1969: hide native file input in Chrome
+- #2059 Remove unnecessary right margin from last level-item (level.is-mobile)
 
 ## 0.7.1
 
 ### Improvements
 
-* #1789 Add all shades to `has-background-*` helpers
+- #1789 Add all shades to `has-background-*` helpers
 
 ### Bug fixes
 
-* #1796 #1806 Remove navbar `box-shadow` by default
+- #1796 #1806 Remove navbar `box-shadow` by default
 
 ## 0.7.0
 
 ### New features
 
-* New variables `$widescreen-enabled` and `$fullhd-enabled`: you can set them to `false` to disable each breakpoint
-* New variables `$control-border-width` and `$button-border-width`
-* 🎉 #1624 Add some common photography aspect ratios and portrait ratios
-* 🎉 #1747 New `$custom-colors` and `$custom-shades` variable for adding your own colors and shades to Bulma's `$colors` and `$shades` maps respectively
+- New variables `$widescreen-enabled` and `$fullhd-enabled`: you can set them to `false` to disable each breakpoint
+- New variables `$control-border-width` and `$button-border-width`
+- 🎉 #1624 Add some common photography aspect ratios and portrait ratios
+- 🎉 #1747 New `$custom-colors` and `$custom-shades` variable for adding your own colors and shades to Bulma's `$colors` and `$shades` maps respectively
 
 ### Improvements
 
-* #1619 Add `$card-header-background-color`, `$card-content-background-color` and `$card-footer-background-color` to allow different background customization for card elements
-* #1669 Add `.is-expanded` modifier to `.buttons.has-addons`
-* #1628 Add `.has-background` helpers for block background colors, like `.has-text`
-* #1767 Added minified bundle with cleancss
+- #1619 Add `$card-header-background-color`, `$card-content-background-color` and `$card-footer-background-color` to allow different background customization for card elements
+- #1669 Add `.is-expanded` modifier to `.buttons.has-addons`
+- #1628 Add `.has-background` helpers for block background colors, like `.has-text`
+- #1767 Added minified bundle with cleancss
 
 ### Bug fixes
 
-* #1778 Fix `is-text-right` precedence over `is-text-left-mobile`
-* #1571 Fix position of delete button on `.tag`
-* #1549 Implementing a simple version of the native sass percentage function
-* #1707 Disable table hover in `.content` by default
-* #1428 Fix `media-content` overflow
+- #1778 Fix `is-text-right` precedence over `is-text-left-mobile`
+- #1571 Fix position of delete button on `.tag`
+- #1549 Implementing a simple version of the native sass percentage function
+- #1707 Disable table hover in `.content` by default
+- #1428 Fix `media-content` overflow
 
 ### Variable changes
 
@@ -623,63 +908,63 @@ Fix #1979 -> Correct loading spinner color when a button is:
 
 ### New features
 
-* 🎉 Rounded buttons, inputs, pagination and toggle tabs
+- 🎉 Rounded buttons, inputs, pagination and toggle tabs
 
 ### Improvements
 
-* #1343 Add `sub` and `sup` title sizes
-* #1452 New `.is-italic` helper
+- #1343 Add `sub` and `sup` title sizes
+- #1452 New `.is-italic` helper
 
 ### Bug fixes
 
-* #935 Bug dropdown in `hero` (primary) menu items not visible
-* #1456 Fix customize documentation
-* #1190 Add `$variable-columns` to disable `--columnGap`
-* #1518 Fix spacing of the delete button in notification element
-* #1569 Fix missing use of `$pagination-color` variable
+- #935 Bug dropdown in `hero` (primary) menu items not visible
+- #1456 Fix customize documentation
+- #1190 Add `$variable-columns` to disable `--columnGap`
+- #1518 Fix spacing of the delete button in notification element
+- #1569 Fix missing use of `$pagination-color` variable
 
 ## 0.6.1
 
 ### New features
 
-* 🎉 [List of buttons](https://bulma.io/documentation/elements/button/#list-of-buttons)
-* 🎉 #1235 Support for five column grid: `.is-one-fifth, .is-two-fifths, .is-three-fifths, .is-four-fifths`
-* 🎉 #1287 New `.is-invisible` helper
-* 🎉 #1255 New `.is-expanded` modifier for `navbar-item`
-* 🎉 #1384 New `.is-centered` and `.is-right` modifiers for `tags`
-* 🎉 #1383 New `.is-empty` modifier for `file`
-* 🎉 #1380 Allow `.is-selected` class on `<td>` and `<th>` tags
+- 🎉 [List of buttons](https://bulma.io/documentation/elements/button/#list-of-buttons)
+- 🎉 #1235 Support for five column grid: `.is-one-fifth, .is-two-fifths, .is-three-fifths, .is-four-fifths`
+- 🎉 #1287 New `.is-invisible` helper
+- 🎉 #1255 New `.is-expanded` modifier for `navbar-item`
+- 🎉 #1384 New `.is-centered` and `.is-right` modifiers for `tags`
+- 🎉 #1383 New `.is-empty` modifier for `file`
+- 🎉 #1380 Allow `.is-selected` class on `<td>` and `<th>` tags
 
 ### Improvements
 
-* #987 Improve `tag > icon` spacing
-* Improve `hamburger` alignment
+- #987 Improve `tag > icon` spacing
+- Improve `hamburger` alignment
 
 ### Bug fixes
 
-* #1358 Fix indentation bug for .is-one-fifth
-* #1356 SASS 3.5+ variable parsing compatibility allows only #{}
-* #1342 Remove black line from progress bar in IE
-* #1334 Fix progress bar colors in IE
-* #1313 Fix Table `is-selected` and `is-hoverable` styling issue
-* #963 Fix Delete Button Bug in iOS Safari
+- #1358 Fix indentation bug for .is-one-fifth
+- #1356 SASS 3.5+ variable parsing compatibility allows only #{}
+- #1342 Remove black line from progress bar in IE
+- #1334 Fix progress bar colors in IE
+- #1313 Fix Table `is-selected` and `is-hoverable` styling issue
+- #963 Fix Delete Button Bug in iOS Safari
 
 ## 0.6.0
 
 ### Breaking changes
 
-* The new `$link` color is part of the `$colors` map. As a result, `.button.is-link` is a colored button now. Use `.button.is-text` if you want the underlined button.
-* The deprecated `variables.sass` file has been removed.
-* The deprecated `nav.sass` file has been removed.
+- The new `$link` color is part of the `$colors` map. As a result, `.button.is-link` is a colored button now. Use `.button.is-text` if you want the underlined button.
+- The deprecated `variables.sass` file has been removed.
+- The deprecated `nav.sass` file has been removed.
 
 ### New features
 
-* #1236 `.table` hover effect is opt-in, by using the `.is-hoverable` modifier class
-* #1254 `.dropdown` now supports `.is-up` modifier
+- #1236 `.table` hover effect is opt-in, by using the `.is-hoverable` modifier class
+- #1254 `.dropdown` now supports `.is-up` modifier
 
 ### Improvements
 
-* #1257 Include placeholder mixin in `=input`
+- #1257 Include placeholder mixin in `=input`
 
 The `$link` color is used instead of `$primary` in the following components:
 
@@ -748,70 +1033,70 @@ The `$link` color is used instead of `$primary` in the following components:
 
 ### Issues closed
 
-* #708 Import variables in mixins
+- #708 Import variables in mixins
 
 ## 0.5.3
 
 ### New features
 
-* #1101 `.card-header-title` can be centered with `.is-centered`
-* #1189 `.input` readonly and `.is-static`
-* #1189 `.textarea` readonly
+- #1101 `.card-header-title` can be centered with `.is-centered`
+- #1189 `.input` readonly and `.is-static`
+- #1189 `.textarea` readonly
 
 ### Issues closed
 
-* #1177 Fix `.message .tag` combination
-* #1167 Fix `pre code`
-* #1207 Fix `.breadcrumb` alignment
+- #1177 Fix `.message .tag` combination
+- #1167 Fix `pre code`
+- #1207 Fix `.breadcrumb` alignment
 
 ## 0.5.2
 
 ### New features
 
-* #842 `navbar` color modifiers
-* #331 Support for third party icons
-* Added `$button-focus-box-shadow-size` and `$button-focus-box-shadow-color` for customization
-* Added `$input-focus-box-shadow-size` and `$input-focus-box-shadow-color` for customization
-* Navbar tabs
+- #842 `navbar` color modifiers
+- #331 Support for third party icons
+- Added `$button-focus-box-shadow-size` and `$button-focus-box-shadow-color` for customization
+- Added `$input-focus-box-shadow-size` and `$input-focus-box-shadow-color` for customization
+- Navbar tabs
 
 ### Issues closed
 
-* #1168 Undefined variable: `$navbar-item`
-* #930 Remove `vertical-align: top` for icons
-* #735 Font awesome custom `font-size`
-* #395 Font awesome stacked icons
-* #1152 Level-items not centered horizontally on mobile
-* #1147 Add `text-size-adjust: 100%` to `html`
-* #1106 `pagination` docs
-* #1063 `$family-primary` customization
+- #1168 Undefined variable: `$navbar-item`
+- #930 Remove `vertical-align: top` for icons
+- #735 Font awesome custom `font-size`
+- #395 Font awesome stacked icons
+- #1152 Level-items not centered horizontally on mobile
+- #1147 Add `text-size-adjust: 100%` to `html`
+- #1106 `pagination` docs
+- #1063 `$family-primary` customization
 
 ## 0.5.1
 
 ### New features
 
-* 🎉 #280 [File upload element](https://bulma.io/documentation/form/file/)
-* `$container-offset` variable to determine the `.container` breakpoints
-* #1001 Text case helpers
+- 🎉 #280 [File upload element](https://bulma.io/documentation/form/file/)
+- `$container-offset` variable to determine the `.container` breakpoints
+- #1001 Text case helpers
 
 ### Issues closed
 
-* #1030 Add `!important` to non responsive display helpers
-* #1020 Customizing `.navbar-item img` max height
-* #998 `.navbar-dropdown` with **right** alignment
-* #877 `.pagination` isn't using `$pagination-background`
-* #989 `navbar-brand` overflowing on mobile
-* #975 Variable `$table-head-color` isn't used
-* #964 Tabs sass file throwing error with `!important`
-* #949 `.is-size-7` helper is missing
+- #1030 Add `!important` to non responsive display helpers
+- #1020 Customizing `.navbar-item img` max height
+- #998 `.navbar-dropdown` with **right** alignment
+- #877 `.pagination` isn't using `$pagination-background`
+- #989 `navbar-brand` overflowing on mobile
+- #975 Variable `$table-head-color` isn't used
+- #964 Tabs sass file throwing error with `!important`
+- #949 `.is-size-7` helper is missing
 
 ## 0.5.0
 
 ### New features
 
-* 🎉 [List of tags](https://bulma.io/documentation/elements/tag/#list-of-tags)
-* New **variable naming system**: `component`-`subcomponent`-`state`-`property`
-* Improved **customization** thanks to new set of variables
-* #934 New `.is-shadowless` helper
+- 🎉 [List of tags](https://bulma.io/documentation/elements/tag/#list-of-tags)
+- New **variable naming system**: `component`-`subcomponent`-`state`-`property`
+- Improved **customization** thanks to new set of variables
+- #934 New `.is-shadowless` helper
 
 Variable name changes (mostly appending `-color`):
 
@@ -902,353 +1187,353 @@ Variable name changes (mostly appending `-color`):
 
 ### Improved documentation
 
-* [Starter template](https://bulma.io/documentation/overview/start/#starter-template)
-* [Colors page](https://bulma.io/documentation/overview/colors/)
-* [Typography helpers](https://bulma.io/documentation/modifiers/typography-helpers/)
-* **Meta** information for all elements and components
-* **Variables** information for most elements and components
+- [Starter template](https://bulma.io/documentation/overview/start/#starter-template)
+- [Colors page](https://bulma.io/documentation/overview/colors/)
+- [Typography helpers](https://bulma.io/documentation/modifiers/typography-helpers/)
+- **Meta** information for all elements and components
+- **Variables** information for most elements and components
 
 ### Issues closed
 
-* #909 `.dropdown` wrapping
-* #938 `.is-fullwidth` removed from docs
-* #900 Variable `.navbar-item` for hover+active background/color
-* #902 `.navbar-item` color overrides
+- #909 `.dropdown` wrapping
+- #938 `.is-fullwidth` removed from docs
+- #900 Variable `.navbar-item` for hover+active background/color
+- #902 `.navbar-item` color overrides
 
 ## 0.4.4
 
 ### New features
 
-* New [dropdown button](https://bulma.io/documentation/components/dropdown/)!
-* The breakpoints and `.container` **gap** can be customized with the new `$gap` variable
-* The `.container` has 2 new modifiers: `.is-widescreen` and `.is-fullhd`
+- New [dropdown button](https://bulma.io/documentation/components/dropdown/)!
+- The breakpoints and `.container` **gap** can be customized with the new `$gap` variable
+- The `.container` has 2 new modifiers: `.is-widescreen` and `.is-fullhd`
 
 ### Issues closed
 
-* Fix #26 `.textarea` element will honors `[rows]` attribute
-* Fix #887 `body` scrollbar
-* Fix #715 `.help` class behaviour in horizontal form `is-grouped` field
-* Fix #842 Adding modifiers in `navbar`
-* Fix #841 `.container` as direct child of `.navbar` moves `.navbar-menu` below `.navbar-brand`
-* Fix #861 Box in hero as text and background white
-* Fix #852 charset and version number
-* Fix #856 JavaScript `.nav-burger` example
-* Fix #821 Notification strong color
+- Fix #26 `.textarea` element will honors `[rows]` attribute
+- Fix #887 `body` scrollbar
+- Fix #715 `.help` class behaviour in horizontal form `is-grouped` field
+- Fix #842 Adding modifiers in `navbar`
+- Fix #841 `.container` as direct child of `.navbar` moves `.navbar-menu` below `.navbar-brand`
+- Fix #861 Box in hero as text and background white
+- Fix #852 charset and version number
+- Fix #856 JavaScript `.nav-burger` example
+- Fix #821 Notification strong color
 
 ## 0.4.3
 
 ### New features
 
-* New navbar with dropdown support
-* Add new feature: Breadcrumb component (#632) @vinialbano
-* Add Bloomer to README.md (#787) @AlgusDark
-* Add responsive is-*-touch tags for .column sizes (#780) @tom-rb
-* Adding 'is-hidden' to helpers in docs (#798) @aheuermann
-* Add figure/figcaption as content element (#807) @werthen
-* Add <sup> and <sub> support to content (#808) @werthen
-* Add re-bulma and react-bulma (#809) @kulakowka
-* Add is-halfheight to hero (#783) @felipeas
-* Added a related project with Golang backend (#784) @Caiyeon
+- New navbar with dropdown support
+- Add new feature: Breadcrumb component (#632) @vinialbano
+- Add Bloomer to README.md (#787) @AlgusDark
+- Add responsive is-\*-touch tags for .column sizes (#780) @tom-rb
+- Adding 'is-hidden' to helpers in docs (#798) @aheuermann
+- Add figure/figcaption as content element (#807) @werthen
+- Add <sup> and <sub> support to content (#808) @werthen
+- Add re-bulma and react-bulma (#809) @kulakowka
+- Add is-halfheight to hero (#783) @felipeas
+- Added a related project with Golang backend (#784) @Caiyeon
 
 ### Issues closed
 
-* Fix #827 Breadcrumb and Navbar in docs
-* Fix #824 Code examples broken because of `text-align: center`
-* Fix #820 Loading spinner resizes with controls
-* Fix #819 Remove `height: auto` from media elements
-* Fix #790 Documentation typo
-* Fix #814 Make use of +fullhd mixin for columns @Saboteur777
-* Fix #781 Add min/max height/width to delete class size modifiers @ZackWard
-* Fix #391 Section docs update
+- Fix #827 Breadcrumb and Navbar in docs
+- Fix #824 Code examples broken because of `text-align: center`
+- Fix #820 Loading spinner resizes with controls
+- Fix #819 Remove `height: auto` from media elements
+- Fix #790 Documentation typo
+- Fix #814 Make use of +fullhd mixin for columns @Saboteur777
+- Fix #781 Add min/max height/width to delete class size modifiers @ZackWard
+- Fix #391 Section docs update
 
 ## 0.4.2
 
-* Fix #728 selected row on striped table
-* Fix #747 remove flex-shrink for is-expanded
-* Fix #702 add icons support for select dropdown
-* Fix #712 delete button as flexbox item
-* Fix #759 static button
+- Fix #728 selected row on striped table
+- Fix #747 remove flex-shrink for is-expanded
+- Fix #702 add icons support for select dropdown
+- Fix #712 delete button as flexbox item
+- Fix #759 static button
 
 ## 0.4.1
 
-* Fix #568 max-width container
-* Fix #589 notification delete
-* Fix #272 nav-right without nav-menu
-* Fix #616 hero and notification buttons
-* Fix #607 has-addons z-index
-* Feature #586 select color modifiers
-* Fix #537 -ms-expand
-* Fix #578 better `+center` mixin
-* Fix #565 `dl` styles
-* Fix #389 `pre` `margin-bottom`
-* Fix #484 icon alignment
-* Fix #506 bold nav menu
-* Fix #581 nav container
-* Fix #512 nav grouped buttons
-* Fix #605 container example
-* Fix #458 select expanded
-* Fix #403 separate animations
-* Fix #637 customize Bulma
-* Fix #584 loading select
-* Fix #571 control height
-* Fix #634 is-grouped control
-* Fix #676 checkbox/radio wrapping
-* Feature #479 has-icons placement
-* Fix #442 selected table row
-* Fix #187 add customize page
-* Fix #449 columns negative horizontal margin
-* Fix #399 pagination wrapping
-* Fix #227 color keys as strings
+- Fix #568 max-width container
+- Fix #589 notification delete
+- Fix #272 nav-right without nav-menu
+- Fix #616 hero and notification buttons
+- Fix #607 has-addons z-index
+- Feature #586 select color modifiers
+- Fix #537 -ms-expand
+- Fix #578 better `+center` mixin
+- Fix #565 `dl` styles
+- Fix #389 `pre` `margin-bottom`
+- Fix #484 icon alignment
+- Fix #506 bold nav menu
+- Fix #581 nav container
+- Fix #512 nav grouped buttons
+- Fix #605 container example
+- Fix #458 select expanded
+- Fix #403 separate animations
+- Fix #637 customize Bulma
+- Fix #584 loading select
+- Fix #571 control height
+- Fix #634 is-grouped control
+- Fix #676 checkbox/radio wrapping
+- Feature #479 has-icons placement
+- Fix #442 selected table row
+- Fix #187 add customize page
+- Fix #449 columns negative horizontal margin
+- Fix #399 pagination wrapping
+- Fix #227 color keys as strings
 
 ## 0.4.0
 
-* **Default font-size is 16px**
-* **New `.field` element ; `.control` repurposed**
-* **New `.pagination` sizes**
-* **New `$fullhd` breakpoint (1344px)**
-
-* Remove monospace named fonts
-* Remove icon spacing logic
-* Split icon container dimensions and icon size
-* Fix delete button by using pixels instead of (r)em
-* Fix level on mobile
-* Add new `.is-spaced` modifier for titles and subtitles
-
-* Fix #487
-* Fix #489
-* Fix #502
-* Fix #514
-* Fix #524
-* Fix #536
+- **Default font-size is 16px**
+- **New `.field` element ; `.control` repurposed**
+- **New `.pagination` sizes**
+- **New `$fullhd` breakpoint (1344px)**
+
+- Remove monospace named fonts
+- Remove icon spacing logic
+- Split icon container dimensions and icon size
+- Fix delete button by using pixels instead of (r)em
+- Fix level on mobile
+- Add new `.is-spaced` modifier for titles and subtitles
+
+- Fix #487
+- Fix #489
+- Fix #502
+- Fix #514
+- Fix #524
+- Fix #536
 
 ## 0.3.2
 
-* Fix #478
+- Fix #478
 
 ## 0.3.1
 
-* Fix #441
-* Fix #443
+- Fix #441
+- Fix #443
 
 ## 0.3.0
 
-* Use `rem` and `em` (!)
-* Fix Font Awesome icons in buttons (!)
-* Fix message colors (!)
-* Use `{% capture %}` to ensure same display as code snippet (!)
-
-* Move variables to their own file
-* Remove small tag
-* Add `:focus` state
-* Fix table
-* Remove table `.is-icon` and `.is-link`
-* Add `.content` table
-* Fix inputs with icons
-* Input icons require the `.icon` container
-* Deprecate `.media-number`
-* Fix `.level-item` height
-* Fix `.menu` spacing
-* Deprecate `.menu-nav`
-* Add invert outlined buttons
-* Fix `.nav`
-* Fix `.pagination`
-* Fix `.tabs`
-* Fix `.panel`
-* Fix `.delete`
-* Add mixins documentation
-* Add functions documentation
+- Use `rem` and `em` (!)
+- Fix Font Awesome icons in buttons (!)
+- Fix message colors (!)
+- Use `{% capture %}` to ensure same display as code snippet (!)
+
+- Move variables to their own file
+- Remove small tag
+- Add `:focus` state
+- Fix table
+- Remove table `.is-icon` and `.is-link`
+- Add `.content` table
+- Fix inputs with icons
+- Input icons require the `.icon` container
+- Deprecate `.media-number`
+- Fix `.level-item` height
+- Fix `.menu` spacing
+- Deprecate `.menu-nav`
+- Add invert outlined buttons
+- Fix `.nav`
+- Fix `.pagination`
+- Fix `.tabs`
+- Fix `.panel`
+- Fix `.delete`
+- Add mixins documentation
+- Add functions documentation
 
 ## 0.2.2
 
-* Fix: remove multiple imports
+- Fix: remove multiple imports
 
 ## 0.2.1
 
-* Fix: container flex
-* Fix: nav-item flex
-* Fix: media-number flex
-* Fix: new brand colors
+- Fix: container flex
+- Fix: nav-item flex
+- Fix: media-number flex
+- Fix: new brand colors
 
 ## 0.2.0
 
-* Added: new branding
-* Added: modularity
-* Added: grid folder
-* Added: .github folder
+- Added: new branding
+- Added: modularity
+- Added: grid folder
+- Added: .github folder
 
 ## 0.1.1
 
-* Remove `flex: 1` shorthand
+- Remove `flex: 1` shorthand
 
 ## 0.1.0
 
-* Fix #227
-* Fix #232
-* Fix #242
-* Fix #243
-* Fix #228
-* Fix #245
-* Fix #246
+- Fix #227
+- Fix #232
+- Fix #242
+- Fix #243
+- Fix #228
+- Fix #245
+- Fix #246
 
 ## 0.0.28
 
-* BREAKING: `.control.is-grouped` now uses `.control` elements as direct children
-* Fix #220
-* Fix #214
-* Fix #210
-* Fix #206
-* Fix #122
+- BREAKING: `.control.is-grouped` now uses `.control` elements as direct children
+- Fix #220
+- Fix #214
+- Fix #210
+- Fix #206
+- Fix #122
 
 ## 0.0.27
 
-* Fix: #217
-* Fix: #213
-* Fix: #209
-* Fix: #205
-* Fix: #204
-* Fix: #81
+- Fix: #217
+- Fix: #213
+- Fix: #209
+- Fix: #205
+- Fix: #204
+- Fix: #81
 
 ## 0.0.26
 
-* Added: `.modal-card`
-* Added: display responsive utilities
-* Added: `.nav-center`
-* Added: `.tabs ul` left center right
-* Changed: `.navbar` renamed to `.level`
-* Changed: `.header` renamed to `.nav`
-* Deprecated: `.header`
-* Deprecated: `.navbar`
-* Fixed: `.hero` layout
+- Added: `.modal-card`
+- Added: display responsive utilities
+- Added: `.nav-center`
+- Added: `.tabs ul` left center right
+- Changed: `.navbar` renamed to `.level`
+- Changed: `.header` renamed to `.nav`
+- Deprecated: `.header`
+- Deprecated: `.navbar`
+- Fixed: `.hero` layout
 
 ## 0.0.25
 
-* Added: `utilities/controls.sass` and `elements/form.sass`
-* Added: new responsive classes
-* Added: white/black and light/dark colors
-* Changed: `.tabs` need `.icon` now
-* Changed: cdnjs link doesn't include version
+- Added: `utilities/controls.sass` and `elements/form.sass`
+- Added: new responsive classes
+- Added: white/black and light/dark colors
+- Changed: `.tabs` need `.icon` now
+- Changed: cdnjs link doesn't include version
 
 ## 0.0.24
 
 ### Added
 
-* `is-mobile` for the navbar
+- `is-mobile` for the navbar
 
 ### Removed
 
-* removed border between sections. Use `<hr class="is-marginless">` now
+- removed border between sections. Use `<hr class="is-marginless">` now
 
 ### Updated
 
-* restructured files
-* added back `inline-flex` for controls and tags
+- restructured files
+- added back `inline-flex` for controls and tags
 
 ### Removed
 
-* test tiles
+- test tiles
 
 ## 0.0.23
 
 ### BREAKING
 
-* `bulma` folder renamed to `sass` to avoid the redundant `bulma/bulma` path
-* `variables.sass` moved to `/utilities`
-* almost everything is singular now
-* **elements** only have one class
-* **components** have at least one sub-class
-* `.content` moved to elements
-* `.table` moved to elements
-* `.message` moved to components
-* `.table-icon`, `.table-link`, `.table-narrow` are now called `.is-icon`, `.is-link`, `.is-narrow`
+- `bulma` folder renamed to `sass` to avoid the redundant `bulma/bulma` path
+- `variables.sass` moved to `/utilities`
+- almost everything is singular now
+- **elements** only have one class
+- **components** have at least one sub-class
+- `.content` moved to elements
+- `.table` moved to elements
+- `.message` moved to components
+- `.table-icon`, `.table-link`, `.table-narrow` are now called `.is-icon`, `.is-link`, `.is-narrow`
 
 ### Added
 
-* all variables are now `!default` so you can set your custom variables before importing Bulma
+- all variables are now `!default` so you can set your custom variables before importing Bulma
 
 ## 0.0.22
 
 ### Fixed
 
-* links in hero subtitle
+- links in hero subtitle
 
 ## 0.0.21
 
 ### Added
 
-* `.column.is-narrow` to make a column `flex: none`
+- `.column.is-narrow` to make a column `flex: none`
 
 ## 0.0.20
 
 ### Added
 
-* `.has-icon` support for different `.input` sizes
+- `.has-icon` support for different `.input` sizes
 
 ## 0.0.19
 
 ### NEW!!!
 
-* `.tile`
+- `.tile`
 
 ### BREAKING
 
-* `.is-third` renamed to `.is-one-third`
-* `.is-quarter` renamed to `.is-one-quarter`
+- `.is-third` renamed to `.is-one-third`
+- `.is-quarter` renamed to `.is-one-quarter`
 
 ### Added
 
-* `.is-two-thirds`
-* `.is-three-quarters`
+- `.is-two-thirds`
+- `.is-three-quarters`
 
 ### Changed
 
-* `.delete` in `.tag` has no red
+- `.delete` in `.tag` has no red
 
 ## 0.0.18
 
 ### BREAKING
 
-* `.is-text-*` renamed to `.has-text-*`
-* removed `.is-fullwidth` helper
+- `.is-text-*` renamed to `.has-text-*`
+- removed `.is-fullwidth` helper
 
 ### Added
 
-* **small tag**: `.tag.is-small`
-* 12th column classes
-* `*-full` column classes
-* `$family-code`
+- **small tag**: `.tag.is-small`
+- 12th column classes
+- `*-full` column classes
+- `$family-code`
 
 ### Fixed
 
-* disabled input with element
-* `.table` last row with `th`
-* `.card` color in `.hero`
-* `.columns.is-gapless`
+- disabled input with element
+- `.table` last row with `th`
+- `.card` color in `.hero`
+- `.columns.is-gapless`
 
 ### Removed
 
-* removed `box-shadow` from `.tag`
-* custom checkboxes and radio buttons
+- removed `box-shadow` from `.tag`
+- custom checkboxes and radio buttons
 
 ### Updated
 
-* `.tag` uses `display: inline-flex` now
+- `.tag` uses `display: inline-flex` now
 
 ## 0.0.17
 
 ### Added
 
-* **pagination**: `.pagination`
-* **horizontal forms**: `.control.is-horizontal`
-* **help** text for form controls: `.help`
-* **progress bars**: `.progress`
+- **pagination**: `.pagination`
+- **horizontal forms**: `.control.is-horizontal`
+- **help** text for form controls: `.help`
+- **progress bars**: `.progress`
 
 ### Updated
 
-* `.button` uses `display: inline-flex` now
-* `.button` needs an `.icon` now
-* `.control.is-grouped` renamed to `.control.has-addons`
-* `.control.is-inline` renamed to `.control.is-grouped`
+- `.button` uses `display: inline-flex` now
+- `.button` needs an `.icon` now
+- `.control.is-grouped` renamed to `.control.has-addons`
+- `.control.is-inline` renamed to `.control.is-grouped`
 
 ### Removed
 
-* **helpers** `.is-inline` and `.is-block`
+- **helpers** `.is-inline` and `.is-block`