Updated Bulma!

12 files changed, 136 insertions, 678 deletions

diff --git a/public/css/_sass/elements/_all.sass b/public/css/_sass/elements/_all.sass
index 2234322..7490c00 100644
--- a/public/css/_sass/elements/_all.sass
+++ b/public/css/_sass/elements/_all.sass
@@ -4,7 +4,6 @@
 @import "button.sass"
 @import "container.sass"
 @import "content.sass"
-@import "form.sass"
 @import "icon.sass"
 @import "image.sass"
 @import "notification.sass"
diff --git a/public/css/_sass/elements/box.sass b/public/css/_sass/elements/box.sass
index d58f405..2fd18d4 100644
--- a/public/css/_sass/elements/box.sass
+++ b/public/css/_sass/elements/box.sass
@@ -1,11 +1,11 @@
 $box-color: $text !default
-$box-background-color: $white !default
+$box-background-color: $scheme-main !default
 $box-radius: $radius-large !default
-$box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+$box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
 $box-padding: 1.25rem !default
 
-$box-link-hover-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link !default
-$box-link-active-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link !default
+$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link !default
+$box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link !default
 
 .box
   @extend %block
diff --git a/public/css/_sass/elements/button.sass b/public/css/_sass/elements/button.sass
index e75cd2f..22078ae 100644
--- a/public/css/_sass/elements/button.sass
+++ b/public/css/_sass/elements/button.sass
@@ -1,11 +1,12 @@
-$button-color: $grey-darker !default
-$button-background-color: $white !default
+$button-color: $text-strong !default
+$button-background-color: $scheme-main !default
+$button-family: false !default
 
-$button-border-color: $grey-lighter !default
+$button-border-color: $border !default
 $button-border-width: $control-border-width !default
 
-$button-padding-vertical: calc(0.375em - #{$button-border-width}) !default
-$button-padding-horizontal: 0.75em !default
+$button-padding-vertical: calc(0.5em - #{$button-border-width}) !default
+$button-padding-horizontal: 1em !default
 
 $button-hover-color: $link-hover !default
 $button-hover-border-color: $link-hover-border !default
@@ -22,14 +23,14 @@ $button-text-color: $text !default
 $button-text-hover-background-color: $background !default
 $button-text-hover-color: $text-strong !default
 
-$button-disabled-background-color: $white !default
-$button-disabled-border-color: $grey-lighter !default
+$button-disabled-background-color: $scheme-main !default
+$button-disabled-border-color: $border !default
 $button-disabled-shadow: none !default
 $button-disabled-opacity: 0.5 !default
 
-$button-static-color: $grey !default
-$button-static-background-color: $white-ter !default
-$button-static-border-color: $grey-lighter !default
+$button-static-color: $text-light !default
+$button-static-background-color: $scheme-main-ter !default
+$button-static-border-color: $border !default
 
 // The button sizes use mixins so they can be used at different breakpoints
 =button-small
@@ -50,6 +51,8 @@ $button-static-border-color: $grey-lighter !default
   border-width: $button-border-width
   color: $button-color
   cursor: pointer
+  @if $button-family
+    font-family: $button-family
   justify-content: center
   padding-bottom: $button-padding-vertical
   padding-left: $button-padding-horizontal
@@ -67,14 +70,14 @@ $button-static-border-color: $grey-lighter !default
       height: 1.5em
       width: 1.5em
     &:first-child:not(:last-child)
-      margin-left: calc(-0.375em - #{$button-border-width})
-      margin-right: 0.1875em
+      margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
+      margin-right: $button-padding-horizontal / 4
     &:last-child:not(:first-child)
-      margin-left: 0.1875em
-      margin-right: calc(-0.375em - #{$button-border-width})
+      margin-left: $button-padding-horizontal / 4
+      margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
     &:first-child:last-child
-      margin-left: calc(-0.375em - #{$button-border-width})
-      margin-right: calc(-0.375em - #{$button-border-width})
+      margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
+      margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
   // States
   &:hover,
   &.is-hovered
@@ -142,7 +145,8 @@ $button-static-border-color: $grey-lighter !default
       &.is-inverted
         background-color: $color-invert
         color: $color
-        &:hover
+        &:hover,
+        &.is-hovered
           background-color: darken($color-invert, 5%)
         &[disabled],
         fieldset[disabled] &
@@ -158,13 +162,21 @@ $button-static-border-color: $grey-lighter !default
         border-color: $color
         color: $color
         &:hover,
-        &:focus
+        &.is-hovered,
+        &:focus,
+        &.is-focused
           background-color: $color
           border-color: $color
           color: $color-invert
         &.is-loading
           &::after
             border-color: transparent transparent $color $color !important
+          &:hover,
+          &.is-hovered,
+          &:focus,
+          &.is-focused
+            &::after
+              border-color: transparent transparent $color-invert $color-invert !important
         &[disabled],
         fieldset[disabled] &
           background-color: transparent
@@ -176,15 +188,41 @@ $button-static-border-color: $grey-lighter !default
         border-color: $color-invert
         color: $color-invert
         &:hover,
-        &:focus
+        &.is-hovered,
+        &:focus,
+        &.is-focused
           background-color: $color-invert
           color: $color
+        &.is-loading
+          &:hover,
+          &.is-hovered,
+          &:focus,
+          &.is-focused
+            &::after
+              border-color: transparent transparent $color $color !important
         &[disabled],
         fieldset[disabled] &
           background-color: transparent
           border-color: $color-invert
           box-shadow: none
           color: $color-invert
+      // If light and dark colors are provided
+      @if length($pair) >= 4
+        $color-light: nth($pair, 3)
+        $color-dark: nth($pair, 4)
+        &.is-light
+          background-color: $color-light
+          color: $color-dark
+          &:hover,
+          &.is-hovered
+            background-color: darken($color-light, 2.5%)
+            border-color: transparent
+            color: $color-dark
+          &:active,
+          &.is-active
+            background-color: darken($color-light, 5%)
+            border-color: transparent
+            color: $color-dark
   // Sizes
   &.is-small
     +button-small
@@ -219,8 +257,8 @@ $button-static-border-color: $grey-lighter !default
     pointer-events: none
   &.is-rounded
     border-radius: $radius-rounded
-    padding-left: 1em
-    padding-right: 1em
+    padding-left: calc(#{$button-padding-horizontal} + 0.25em)
+    padding-right: calc(#{$button-padding-horizontal} + 0.25em)
 
 .buttons
   align-items: center
@@ -269,7 +307,16 @@ $button-static-border-color: $grey-lighter !default
           z-index: 4
       &.is-expanded
         flex-grow: 1
+        flex-shrink: 1
   &.is-centered
     justify-content: center
+    &:not(.has-addons)
+      .button:not(.is-fullwidth)
+        margin-left: 0.25rem
+        margin-right: 0.25rem
   &.is-right
     justify-content: flex-end
+    &:not(.has-addons)
+      .button:not(.is-fullwidth)
+        margin-left: 0.25rem
+        margin-right: 0.25rem
diff --git a/public/css/_sass/elements/container.sass b/public/css/_sass/elements/container.sass
index 2aaf591..d88eb94 100644
--- a/public/css/_sass/elements/container.sass
+++ b/public/css/_sass/elements/container.sass
@@ -1,25 +1,24 @@
+$container-offset: (2 * $gap) !default
+
 .container
+  flex-grow: 1
   margin: 0 auto
   position: relative
+  width: auto
+  &.is-fluid
+    max-width: none
+    padding-left: $gap
+    padding-right: $gap
+    width: 100%
   +desktop
-    max-width: $desktop - (2 * $gap)
-    width: $desktop - (2 * $gap)
-    &.is-fluid
-      margin-left: $gap
-      margin-right: $gap
-      max-width: none
-      width: auto
+    max-width: $desktop - $container-offset
   +until-widescreen
     &.is-widescreen
-      max-width: $widescreen - (2 * $gap)
-      width: auto
+      max-width: $widescreen - $container-offset
   +until-fullhd
     &.is-fullhd
-      max-width: $fullhd - (2 * $gap)
-      width: auto
+      max-width: $fullhd - $container-offset
   +widescreen
-    max-width: $widescreen - (2 * $gap)
-    width: $widescreen - (2 * $gap)
+    max-width: $widescreen - $container-offset
   +fullhd
-    max-width: $fullhd - (2 * $gap)
-    width: $fullhd - (2 * $gap)
+    max-width: $fullhd - $container-offset
diff --git a/public/css/_sass/elements/content.sass b/public/css/_sass/elements/content.sass
index 3f5530e..001419a 100644
--- a/public/css/_sass/elements/content.sass
+++ b/public/css/_sass/elements/content.sass
@@ -125,7 +125,8 @@ $content-table-foot-cell-color: $text-strong !default
       vertical-align: top
     th
       color: $content-table-cell-heading-color
-      text-align: left
+      &:not([align])
+        text-align: left
     thead
       td,
       th
@@ -142,6 +143,9 @@ $content-table-foot-cell-color: $text-strong !default
           td,
           th
             border-bottom-width: 0
+  .tabs
+    li + li
+      margin-top: 0
   // Sizes
   &.is-small
     font-size: $size-small
diff --git a/public/css/_sass/elements/form.sass b/public/css/_sass/elements/form.sass
index c944b75..3122dc4 100644
--- a/public/css/_sass/elements/form.sass
+++ b/public/css/_sass/elements/form.sass
@@ -1,602 +1 @@
-$input-color: $grey-darker !default
-$input-background-color: $white !default
-$input-border-color: $grey-lighter !default
-$input-height: $control-height !default
-$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default
-$input-placeholder-color: rgba($input-color, 0.3) !default
-
-$input-hover-color: $grey-darker !default
-$input-hover-border-color: $grey-light !default
-
-$input-focus-color: $grey-darker !default
-$input-focus-border-color: $link !default
-$input-focus-box-shadow-size: 0 0 0 0.125em !default
-$input-focus-box-shadow-color: rgba($link, 0.25) !default
-
-$input-disabled-color: $text-light !default
-$input-disabled-background-color: $background !default
-$input-disabled-border-color: $background !default
-$input-disabled-placeholder-color: rgba($input-disabled-color, 0.3) !default
-
-$input-arrow: $link !default
-
-$input-icon-color: $grey-lighter !default
-$input-icon-active-color: $grey !default
-
-$input-radius: $radius !default
-
-$file-border-color: $border !default
-$file-radius: $radius !default
-
-$file-cta-background-color: $white-ter !default
-$file-cta-color: $grey-dark !default
-$file-cta-hover-color: $grey-darker !default
-$file-cta-active-color: $grey-darker !default
-
-$file-name-border-color: $border !default
-$file-name-border-style: solid !default
-$file-name-border-width: 1px 1px 1px 0 !default
-$file-name-max-width: 16em !default
-
-$label-color: $grey-darker !default
-$label-weight: $weight-bold !default
-
-$help-size: $size-small !default
-
-=input
-  @extend %control
-  background-color: $input-background-color
-  border-color: $input-border-color
-  color: $input-color
-  +placeholder
-    color: $input-placeholder-color
-  &:hover,
-  &.is-hovered
-    border-color: $input-hover-border-color
-  &:focus,
-  &.is-focused,
-  &:active,
-  &.is-active
-    border-color: $input-focus-border-color
-    box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
-  &[disabled],
-  fieldset[disabled] &
-    background-color: $input-disabled-background-color
-    border-color: $input-disabled-border-color
-    box-shadow: none
-    color: $input-disabled-color
-    +placeholder
-      color: $input-disabled-placeholder-color
-
-.input,
-.textarea
-  +input
-  box-shadow: $input-shadow
-  max-width: 100%
-  width: 100%
-  &[readonly]
-    box-shadow: none
-  // Colors
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    &.is-#{$name}
-      border-color: $color
-      &:focus,
-      &.is-focused,
-      &:active,
-      &.is-active
-        box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
-  // Sizes
-  &.is-small
-    +control-small
-  &.is-medium
-    +control-medium
-  &.is-large
-    +control-large
-  // Modifiers
-  &.is-fullwidth
-    display: block
-    width: 100%
-  &.is-inline
-    display: inline
-    width: auto
-
-.input
-  &.is-rounded
-    border-radius: $radius-rounded
-    padding-left: 1em
-    padding-right: 1em
-  &.is-static
-    background-color: transparent
-    border-color: transparent
-    box-shadow: none
-    padding-left: 0
-    padding-right: 0
-
-.textarea
-  display: block
-  max-width: 100%
-  min-width: 100%
-  padding: 0.625em
-  resize: vertical
-  &:not([rows])
-    max-height: 600px
-    min-height: 120px
-  &[rows]
-    height: initial
-  // Modifiers
-  &.has-fixed-size
-    resize: none
-
-.checkbox,
-.radio
-  cursor: pointer
-  display: inline-block
-  line-height: 1.25
-  position: relative
-  input
-    cursor: pointer
-  &:hover
-    color: $input-hover-color
-  &[disabled],
-  fieldset[disabled] &
-    color: $input-disabled-color
-    cursor: not-allowed
-
-.radio
-  & + .radio
-    margin-left: 0.5em
-
-.select
-  display: inline-block
-  max-width: 100%
-  position: relative
-  vertical-align: top
-  &:not(.is-multiple)
-    height: $input-height
-  &:not(.is-multiple):not(.is-loading)
-    &::after
-      @extend %arrow
-      border-color: $input-arrow
-      right: 1.125em
-      z-index: 4
-  &.is-rounded
-    select
-      border-radius: $radius-rounded
-      padding-left: 1em
-  select
-    +input
-    cursor: pointer
-    display: block
-    font-size: 1em
-    max-width: 100%
-    outline: none
-    &::-ms-expand
-      display: none
-    &[disabled]:hover,
-    fieldset[disabled] &:hover
-      border-color: $input-disabled-border-color
-    &:not([multiple])
-      padding-right: 2.5em
-    &[multiple]
-      height: auto
-      padding: 0
-      option
-        padding: 0.5em 1em
-  // States
-  &:not(.is-multiple):not(.is-loading):hover
-    &::after
-      border-color: $input-hover-color
-  // Colors
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    &.is-#{$name}
-      &:not(:hover)::after
-        border-color: $color
-      select
-        border-color: $color
-        &:hover,
-        &.is-hovered
-          border-color: darken($color, 5%)
-        &:focus,
-        &.is-focused,
-        &:active,
-        &.is-active
-          box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
-  // Sizes
-  &.is-small
-    +control-small
-  &.is-medium
-    +control-medium
-  &.is-large
-    +control-large
-  // Modifiers
-  &.is-disabled
-    &::after
-      border-color: $input-disabled-color
-  &.is-fullwidth
-    width: 100%
-    select
-      width: 100%
-  &.is-loading
-    &::after
-      @extend %loader
-      margin-top: 0
-      position: absolute
-      right: 0.625em
-      top: 0.625em
-      transform: none
-    &.is-small:after
-      font-size: $size-small
-    &.is-medium:after
-      font-size: $size-medium
-    &.is-large:after
-      font-size: $size-large
-
-.file
-  @extend %unselectable
-  align-items: stretch
-  display: flex
-  justify-content: flex-start
-  position: relative
-  // Colors
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    $color-invert: nth($pair, 2)
-    &.is-#{$name}
-      .file-cta
-        background-color: $color
-        border-color: transparent
-        color: $color-invert
-      &:hover,
-      &.is-hovered
-        .file-cta
-          background-color: darken($color, 2.5%)
-          border-color: transparent
-          color: $color-invert
-      &:focus,
-      &.is-focused
-        .file-cta
-          border-color: transparent
-          box-shadow: 0 0 0.5em rgba($color, 0.25)
-          color: $color-invert
-      &:active,
-      &.is-active
-        .file-cta
-          background-color: darken($color, 5%)
-          border-color: transparent
-          color: $color-invert
-  // Sizes
-  &.is-small
-    font-size: $size-small
-  &.is-medium
-    font-size: $size-medium
-    .file-icon
-      .fa
-        font-size: 21px
-  &.is-large
-    font-size: $size-large
-    .file-icon
-      .fa
-        font-size: 28px
-  // Modifiers
-  &.has-name
-    .file-cta
-      border-bottom-right-radius: 0
-      border-top-right-radius: 0
-    .file-name
-      border-bottom-left-radius: 0
-      border-top-left-radius: 0
-    &.is-empty
-      .file-cta
-        border-radius: $file-radius
-      .file-name
-        display: none
-  &.is-boxed
-    .file-label
-      flex-direction: column
-    .file-cta
-      flex-direction: column
-      height: auto
-      padding: 1em 3em
-    .file-name
-      border-width: 0 1px 1px
-    .file-icon
-      height: 1.5em
-      width: 1.5em
-      .fa
-        font-size: 21px
-    &.is-small
-      .file-icon .fa
-        font-size: 14px
-    &.is-medium
-      .file-icon .fa
-        font-size: 28px
-    &.is-large
-      .file-icon .fa
-        font-size: 35px
-    &.has-name
-      .file-cta
-        border-radius: $file-radius $file-radius 0 0
-      .file-name
-        border-radius: 0 0 $file-radius $file-radius
-        border-width: 0 1px 1px
-  &.is-centered
-    justify-content: center
-  &.is-fullwidth
-    .file-label
-      width: 100%
-    .file-name
-      flex-grow: 1
-      max-width: none
-  &.is-right
-    justify-content: flex-end
-    .file-cta
-      border-radius: 0 $file-radius $file-radius 0
-    .file-name
-      border-radius: $file-radius 0 0 $file-radius
-      border-width: 1px 0 1px 1px
-      order: -1
-
-.file-label
-  align-items: stretch
-  display: flex
-  cursor: pointer
-  justify-content: flex-start
-  overflow: hidden
-  position: relative
-  &:hover
-    .file-cta
-      background-color: darken($file-cta-background-color, 2.5%)
-      color: $file-cta-hover-color
-    .file-name
-      border-color: darken($file-name-border-color, 2.5%)
-  &:active
-    .file-cta
-      background-color: darken($file-cta-background-color, 5%)
-      color: $file-cta-active-color
-    .file-name
-      border-color: darken($file-name-border-color, 5%)
-
-.file-input
-  height: 100%
-  left: 0
-  opacity: 0
-  outline: none
-  position: absolute
-  top: 0
-  width: 100%
-
-.file-cta,
-.file-name
-  @extend %control
-  border-color: $file-border-color
-  border-radius: $file-radius
-  font-size: 1em
-  padding-left: 1em
-  padding-right: 1em
-  white-space: nowrap
-
-.file-cta
-  background-color: $file-cta-background-color
-  color: $file-cta-color
-
-.file-name
-  border-color: $file-name-border-color
-  border-style: $file-name-border-style
-  border-width: $file-name-border-width
-  display: block
-  max-width: $file-name-max-width
-  overflow: hidden
-  text-align: left
-  text-overflow: ellipsis
-
-.file-icon
-  align-items: center
-  display: flex
-  height: 1em
-  justify-content: center
-  margin-right: 0.5em
-  width: 1em
-  .fa
-    font-size: 14px
-
-.label
-  color: $label-color
-  display: block
-  font-size: $size-normal
-  font-weight: $label-weight
-  &:not(:last-child)
-    margin-bottom: 0.5em
-  // Sizes
-  &.is-small
-    font-size: $size-small
-  &.is-medium
-    font-size: $size-medium
-  &.is-large
-    font-size: $size-large
-
-.help
-  display: block
-  font-size: $help-size
-  margin-top: 0.25rem
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    &.is-#{$name}
-      color: $color
-
-// Containers
-
-.field
-  &:not(:last-child)
-    margin-bottom: 0.75rem
-  // Modifiers
-  &.has-addons
-    display: flex
-    justify-content: flex-start
-    .control
-      &:not(:last-child)
-        margin-right: -1px
-      &:not(:first-child):not(:last-child)
-        .button,
-        .input,
-        .select select
-          border-radius: 0
-      &:first-child:not(:only-child)
-        .button,
-        .input,
-        .select select
-          border-bottom-right-radius: 0
-          border-top-right-radius: 0
-      &:last-child:not(:only-child)
-        .button,
-        .input,
-        .select select
-          border-bottom-left-radius: 0
-          border-top-left-radius: 0
-      .button,
-      .input,
-      .select select
-        &:not([disabled])
-          &:hover,
-          &.is-hovered
-            z-index: 2
-          &:focus,
-          &.is-focused,
-          &:active,
-          &.is-active
-            z-index: 3
-            &:hover
-              z-index: 4
-      &.is-expanded
-        flex-grow: 1
-    &.has-addons-centered
-      justify-content: center
-    &.has-addons-right
-      justify-content: flex-end
-    &.has-addons-fullwidth
-      .control
-        flex-grow: 1
-        flex-shrink: 0
-  &.is-grouped
-    display: flex
-    justify-content: flex-start
-    & > .control
-      flex-shrink: 0
-      &:not(:last-child)
-        margin-bottom: 0
-        margin-right: 0.75rem
-      &.is-expanded
-        flex-grow: 1
-        flex-shrink: 1
-    &.is-grouped-centered
-      justify-content: center
-    &.is-grouped-right
-      justify-content: flex-end
-    &.is-grouped-multiline
-      flex-wrap: wrap
-      & > .control
-        &:last-child,
-        &:not(:last-child)
-          margin-bottom: 0.75rem
-      &:last-child
-        margin-bottom: -0.75rem
-      &:not(:last-child)
-        margin-bottom: 0
-  &.is-horizontal
-    +tablet
-      display: flex
-
-.field-label
-  .label
-    font-size: inherit
-  +mobile
-    margin-bottom: 0.5rem
-  +tablet
-    flex-basis: 0
-    flex-grow: 1
-    flex-shrink: 0
-    margin-right: 1.5rem
-    text-align: right
-    &.is-small
-      font-size: $size-small
-      padding-top: 0.375em
-    &.is-normal
-      padding-top: 0.375em
-    &.is-medium
-      font-size: $size-medium
-      padding-top: 0.375em
-    &.is-large
-      font-size: $size-large
-      padding-top: 0.375em
-
-.field-body
-  .field .field
-    margin-bottom: 0
-  +tablet
-    display: flex
-    flex-basis: 0
-    flex-grow: 5
-    flex-shrink: 1
-    .field
-      margin-bottom: 0
-    & > .field
-      flex-shrink: 1
-      &:not(.is-narrow)
-        flex-grow: 1
-      &:not(:last-child)
-        margin-right: 0.75rem
-
-.control
-  box-sizing: border-box
-  clear: both //fixes the icon floating out of the input when help text is floated right
-  font-size: $size-normal
-  position: relative
-  text-align: left
-  // Modifiers
-  &.has-icons-left,
-  &.has-icons-right
-    .input,
-    .select
-      &:focus
-        & ~ .icon
-          color: $input-icon-active-color
-      &.is-small ~ .icon
-        font-size: $size-small
-      &.is-medium ~ .icon
-        font-size: $size-medium
-      &.is-large ~ .icon
-        font-size: $size-large
-    .icon
-      color: $input-icon-color
-      height: $input-height
-      pointer-events: none
-      position: absolute
-      top: 0
-      width: $input-height
-      z-index: 4
-  &.has-icons-left
-    .input,
-    .select select
-      padding-left: $input-height
-    .icon.is-left
-      left: 0
-  &.has-icons-right
-    .input,
-    .select select
-      padding-right: $input-height
-    .icon.is-right
-      right: 0
-  &.is-loading
-    &::after
-      @extend %loader
-      position: absolute !important
-      right: 0.625em
-      top: 0.625em
-      z-index: 4
-    &.is-small:after
-      font-size: $size-small
-    &.is-medium:after
-      font-size: $size-medium
-    &.is-large:after
-      font-size: $size-large
+@warn "The form.sass file is DEPRECATED. It has moved into its own /form folder. Please import sass/form/_all instead."
diff --git a/public/css/_sass/elements/image.sass b/public/css/_sass/elements/image.sass
index cfa64fe..7547abc 100644
--- a/public/css/_sass/elements/image.sass
+++ b/public/css/_sass/elements/image.sass
@@ -9,6 +9,8 @@ $dimensions: 16 24 32 48 64 96 128 !default
     width: 100%
     &.is-rounded
       border-radius: $radius-rounded
+  &.is-fullwidth
+    width: 100%
   // Ratio
   &.is-square,
   &.is-1by1,
diff --git a/public/css/_sass/elements/notification.sass b/public/css/_sass/elements/notification.sass
index 2bda414..24122e7 100644
--- a/public/css/_sass/elements/notification.sass
+++ b/public/css/_sass/elements/notification.sass
@@ -1,4 +1,5 @@
 $notification-background-color: $background !default
+$notification-code-background-color: $scheme-main !default
 $notification-radius: $radius !default
 $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
 
@@ -15,7 +16,7 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
     color: currentColor
   code,
   pre
-    background: $white
+    background: $notification-code-background-color
   pre code
     background: transparent
   & > .delete
diff --git a/public/css/_sass/elements/progress.sass b/public/css/_sass/elements/progress.sass
index b263eeb..bb43bb6 100644
--- a/public/css/_sass/elements/progress.sass
+++ b/public/css/_sass/elements/progress.sass
@@ -1,5 +1,6 @@
-$progress-bar-background-color: $border !default
+$progress-bar-background-color: $border-light !default
 $progress-value-background-color: $text !default
+$progress-border-radius: $radius-rounded !default
 
 $progress-indeterminate-duration: 1.5s !default
 
@@ -8,7 +9,7 @@ $progress-indeterminate-duration: 1.5s !default
   -moz-appearance: none
   -webkit-appearance: none
   border: none
-  border-radius: $radius-rounded
+  border-radius: $progress-border-radius
   display: block
   height: $size-normal
   overflow: hidden
@@ -23,6 +24,19 @@ $progress-indeterminate-duration: 1.5s !default
   &::-ms-fill
     background-color: $progress-value-background-color
     border: none
+  // Colors
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    &.is-#{$name}
+      &::-webkit-progress-value
+        background-color: $color
+      &::-moz-progress-bar
+        background-color: $color
+      &::-ms-fill
+        background-color: $color
+      &:indeterminate
+        background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%)
+
   &:indeterminate
     animation-duration: $progress-indeterminate-duration
     animation-iteration-count: infinite
@@ -37,18 +51,6 @@ $progress-indeterminate-duration: 1.5s !default
       background-color: transparent
     &::-moz-progress-bar
       background-color: transparent
-  // Colors
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    &.is-#{$name}
-      &::-webkit-progress-value
-        background-color: $color
-      &::-moz-progress-bar
-        background-color: $color
-      &::-ms-fill
-        background-color: $color
-      &:indeterminate
-        background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%)
 
   // Sizes
   &.is-small
diff --git a/public/css/_sass/elements/table.sass b/public/css/_sass/elements/table.sass
index a1cf936..2e6036a 100644
--- a/public/css/_sass/elements/table.sass
+++ b/public/css/_sass/elements/table.sass
@@ -1,7 +1,7 @@
-$table-color: $grey-darker !default
-$table-background-color: $white !default
+$table-color: $text-strong !default
+$table-background-color: $scheme-main !default
 
-$table-cell-border: 1px solid $grey-lighter !default
+$table-cell-border: 1px solid $border !default
 $table-cell-border-width: 0 0 1px !default
 $table-cell-padding: 0.5em 0.75em !default
 $table-cell-heading-color: $text-strong !default
@@ -15,13 +15,13 @@ $table-head-background-color: transparent !default
 $table-body-background-color: transparent !default
 $table-foot-background-color: transparent !default
 
-$table-row-hover-background-color: $white-bis !default
+$table-row-hover-background-color: $scheme-main-bis !default
 
 $table-row-active-background-color: $primary !default
 $table-row-active-color: $primary-invert !default
 
-$table-striped-row-even-background-color: $white-bis !default
-$table-striped-row-even-hover-background-color: $white-ter !default
+$table-striped-row-even-background-color: $scheme-main-bis !default
+$table-striped-row-even-hover-background-color: $scheme-main-ter !default
 
 .table
   @extend %block
@@ -53,7 +53,8 @@ $table-striped-row-even-hover-background-color: $white-ter !default
         color: currentColor
   th
     color: $table-cell-heading-color
-    text-align: left
+    &:not([align])
+      text-align: left
   tr
     &.is-selected
       background-color: $table-row-active-background-color
diff --git a/public/css/_sass/elements/tag.sass b/public/css/_sass/elements/tag.sass
index a5fb3c4..e0fb89e 100644
--- a/public/css/_sass/elements/tag.sass
+++ b/public/css/_sass/elements/tag.sass
@@ -23,15 +23,6 @@ $tag-delete-margin: 1px !default
   &.are-large
     .tag:not(.is-normal):not(.is-medium)
       font-size: $size-medium
-  &.has-addons
-    .tag
-      margin-right: 0
-      &:not(:first-child)
-        border-bottom-left-radius: 0
-        border-top-left-radius: 0
-      &:not(:last-child)
-        border-bottom-right-radius: 0
-        border-top-right-radius: 0
   &.is-centered
     justify-content: center
     .tag
@@ -78,6 +69,13 @@ $tag-delete-margin: 1px !default
     &.is-#{$name}
       background-color: $color
       color: $color-invert
+      // If a light and dark colors are provided
+      @if length($pair) > 3
+        $color-light: nth($pair, 3)
+        $color-dark: nth($pair, 4)
+        &.is-light
+          background-color: $color-light
+          color: $color-dark
   // Sizes
   &.is-normal
     font-size: $size-small
diff --git a/public/css/_sass/elements/title.sass b/public/css/_sass/elements/title.sass
index febe2fc..fa9947d 100644
--- a/public/css/_sass/elements/title.sass
+++ b/public/css/_sass/elements/title.sass
@@ -1,4 +1,5 @@
-$title-color: $grey-darker !default
+$title-color: $text-strong !default
+$title-family: false !default
 $title-size: $size-3 !default
 $title-weight: $weight-semibold !default
 $title-line-height: 1.125 !default
@@ -7,11 +8,12 @@ $title-strong-weight: inherit !default
 $title-sub-size: 0.75em !default
 $title-sup-size: 0.75em !default
 
-$subtitle-color: $grey-dark !default
+$subtitle-color: $text !default
+$subtitle-family: false !default
 $subtitle-size: $size-5 !default
 $subtitle-weight: $weight-normal !default
 $subtitle-line-height: 1.25 !default
-$subtitle-strong-color: $grey-darker !default
+$subtitle-strong-color: $text-strong !default
 $subtitle-strong-weight: $weight-semibold !default
 $subtitle-negative-margin: -1.25rem !default
 
@@ -31,6 +33,8 @@ $subtitle-negative-margin: -1.25rem !default
 
 .title
   color: $title-color
+  @if $title-family
+    font-family: $title-family
   font-size: $title-size
   font-weight: $title-weight
   line-height: $title-line-height
@@ -49,6 +53,8 @@ $subtitle-negative-margin: -1.25rem !default
 
 .subtitle
   color: $subtitle-color
+  @if $subtitle-family
+    font-family: $subtitle-family
   font-size: $subtitle-size
   font-weight: $subtitle-weight
   line-height: $subtitle-line-height