]> git.ipfire.org Git - thirdparty/bulma.git/commitdiff
Use em for controls
authorJeremy Thomas <bbxdesign@gmail.com>
Sat, 29 Oct 2016 17:53:30 +0000 (18:53 +0100)
committerJeremy Thomas <bbxdesign@gmail.com>
Sat, 29 Oct 2016 17:53:30 +0000 (18:53 +0100)
16 files changed:
docs/_includes/carbon.html
docs/_includes/head.html
docs/css/bulma-docs.css
docs/documentation/overview/variables.html
sass/base/generic.sass
sass/components/media.sass
sass/components/message.sass
sass/elements/box.sass
sass/elements/button.sass
sass/elements/content.sass
sass/elements/form.sass
sass/elements/other.sass
sass/elements/title.sass
sass/utilities/controls.sass
sass/utilities/mixins.sass
sass/utilities/variables.sass

index e11acc06ac46894828bb36611ae6ea3b26ab1390..04364d76b1e16bcba8df062573b961ddc1723a62 100644 (file)
@@ -1,3 +1,4 @@
-<div id="carbon" class="box">
+<!-- <div id="carbon" class="box">
   <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js"></script>
 </div>
+ -->
index 108030af4da908a484052cbdb48cc80da2006ff0..ef14384ea57284b80170ddace5f45c56948291c8 100644 (file)
@@ -6,7 +6,7 @@
 
   <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
 
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
+  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> -->
   <link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css">
 
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">
index 95d104250ac65feb70746f9d403965c428663243..2466c0c85daf8f12f9d21c0242153dcf93163df0 100644 (file)
@@ -1,22 +1,10 @@
 /*! bulma.io v0.2.3 | MIT License | github.com/jgthms/bulma */
-@-webkit-keyframes spinAround {
-  from {
-    -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
-  }
-  to {
-    -webkit-transform: rotate(359deg);
-            transform: rotate(359deg);
-  }
-}
 @keyframes spinAround {
   from {
-    -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
+    transform: rotate(0deg);
   }
   to {
-    -webkit-transform: rotate(359deg);
-            transform: rotate(359deg);
+    transform: rotate(359deg);
   }
 }
 
@@ -107,7 +95,7 @@ th {
 
 html {
   background-color: whitesmoke;
-  font-size: 14px;
+  font-size: 16px;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   min-width: 300px;
@@ -139,21 +127,19 @@ pre {
   -moz-osx-font-smoothing: auto;
   -webkit-font-smoothing: auto;
   font-family: "Inconsolata", "Consolas", "Monaco", monospace;
-  line-height: 1.25;
 }
 
 body {
   color: #4a4a4a;
   font-size: 1rem;
   font-weight: 400;
-  line-height: 1.428571428571429;
+  line-height: 1.5;
 }
 
 a {
   color: #00d1b2;
   cursor: pointer;
   text-decoration: none;
-  -webkit-transition: none 86ms ease-out;
   transition: none 86ms ease-out;
 }
 
@@ -164,9 +150,9 @@ a:hover {
 code {
   background-color: whitesmoke;
   color: #ff3860;
-  font-size: 12px;
+  font-size: 0.75em;
   font-weight: normal;
-  padding: 1px 2px 2px;
+  padding: 0.25em 0.5em 0.25em;
 }
 
 hr {
@@ -174,7 +160,7 @@ hr {
   border: none;
   display: block;
   height: 1px;
-  margin: 20px 0;
+  margin: 1.5rem 0;
 }
 
 img {
@@ -187,7 +173,7 @@ input[type="radio"] {
 }
 
 small {
-  font-size: 11px;
+  font-size: 0.875rem;
 }
 
 span {
@@ -203,6 +189,7 @@ strong {
 pre {
   background-color: whitesmoke;
   color: #4a4a4a;
+  font-size: 0.8em;
   white-space: pre;
   word-wrap: normal;
 }
@@ -211,8 +198,9 @@ pre code {
   background-color: whitesmoke;
   color: #4a4a4a;
   display: block;
+  font-size: 1em;
   overflow-x: auto;
-  padding: 16px 20px;
+  padding: 1.25rem 1.5rem;
 }
 
 table {
@@ -276,63 +264,47 @@ table th {
 }
 
 .is-flex {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
 }
 
 @media screen and (max-width: 768px) {
   .is-flex-mobile {
-    display: -webkit-box !important;
-    display: -ms-flexbox !important;
     display: flex !important;
   }
 }
 
 @media screen and (min-width: 769px) {
   .is-flex-tablet {
-    display: -webkit-box !important;
-    display: -ms-flexbox !important;
     display: flex !important;
   }
 }
 
 @media screen and (min-width: 769px) and (max-width: 979px) {
   .is-flex-tablet-only {
-    display: -webkit-box !important;
-    display: -ms-flexbox !important;
     display: flex !important;
   }
 }
 
 @media screen and (max-width: 979px) {
   .is-flex-touch {
-    display: -webkit-box !important;
-    display: -ms-flexbox !important;
     display: flex !important;
   }
 }
 
 @media screen and (min-width: 980px) {
   .is-flex-desktop {
-    display: -webkit-box !important;
-    display: -ms-flexbox !important;
     display: flex !important;
   }
 }
 
 @media screen and (min-width: 980px) and (max-width: 1179px) {
   .is-flex-desktop-only {
-    display: -webkit-box !important;
-    display: -ms-flexbox !important;
     display: flex !important;
   }
 }
 
 @media screen and (min-width: 1180px) {
   .is-flex-widescreen {
-    display: -webkit-box !important;
-    display: -ms-flexbox !important;
     display: flex !important;
   }
 }
@@ -430,63 +402,47 @@ table th {
 }
 
 .is-inline-flex {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
   display: inline-flex;
 }
 
 @media screen and (max-width: 768px) {
   .is-inline-flex-mobile {
-    display: -webkit-inline-box !important;
-    display: -ms-inline-flexbox !important;
     display: inline-flex !important;
   }
 }
 
 @media screen and (min-width: 769px) {
   .is-inline-flex-tablet {
-    display: -webkit-inline-box !important;
-    display: -ms-inline-flexbox !important;
     display: inline-flex !important;
   }
 }
 
 @media screen and (min-width: 769px) and (max-width: 979px) {
   .is-inline-flex-tablet-only {
-    display: -webkit-inline-box !important;
-    display: -ms-inline-flexbox !important;
     display: inline-flex !important;
   }
 }
 
 @media screen and (max-width: 979px) {
   .is-inline-flex-touch {
-    display: -webkit-inline-box !important;
-    display: -ms-inline-flexbox !important;
     display: inline-flex !important;
   }
 }
 
 @media screen and (min-width: 980px) {
   .is-inline-flex-desktop {
-    display: -webkit-inline-box !important;
-    display: -ms-inline-flexbox !important;
     display: inline-flex !important;
   }
 }
 
 @media screen and (min-width: 980px) and (max-width: 1179px) {
   .is-inline-flex-desktop-only {
-    display: -webkit-inline-box !important;
-    display: -ms-inline-flexbox !important;
     display: inline-flex !important;
   }
 }
 
 @media screen and (min-width: 1180px) {
   .is-inline-flex-widescreen {
-    display: -webkit-inline-box !important;
-    display: -ms-inline-flexbox !important;
     display: inline-flex !important;
   }
 }
@@ -600,11 +556,11 @@ table th {
   border-radius: 5px;
   box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
   display: block;
-  padding: 20px;
+  padding: 1.25rem;
 }
 
 .box:not(:last-child) {
-  margin-bottom: 20px;
+  margin-bottom: 1.5rem;
 }
 
 a.box:hover, a.box:focus {
@@ -618,24 +574,19 @@ a.box:active {
 .button {
   -moz-appearance: none;
   -webkit-appearance: none;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   background-color: white;
   border: 1px solid #dbdbdb;
   border-radius: 3px;
+  box-shadow: none;
   color: #363636;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
   display: inline-flex;
-  font-size: 14px;
-  height: 32px;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
-  line-height: 24px;
-  padding-left: 8px;
-  padding-right: 8px;
+  font-size: 16px;
+  height: 2.5em;
+  justify-content: flex-start;
+  line-height: 1.5;
+  padding-left: 0.75em;
+  padding-right: 0.75em;
   position: relative;
   vertical-align: top;
   -webkit-touch-callout: none;
@@ -644,11 +595,9 @@ a.box:active {
   -ms-user-select: none;
   user-select: none;
   cursor: pointer;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  padding-left: 10px;
-  padding-right: 10px;
+  justify-content: center;
+  padding-left: 1em;
+  padding-right: 1em;
   text-align: center;
   white-space: nowrap;
 }
@@ -689,13 +638,6 @@ a.box:active {
   color: inherit;
 }
 
-.button small {
-  display: block;
-  font-size: 11px;
-  line-height: 1;
-  margin-top: 5px;
-}
-
 .button .icon:first-child,
 .button .tag:first-child {
   margin-left: -2px;
@@ -1072,25 +1014,15 @@ a.box:active {
 
 .button.is-small {
   border-radius: 2px;
-  font-size: 11px;
-  height: 24px;
-  line-height: 16px;
-  padding-left: 6px;
-  padding-right: 6px;
+  font-size: 0.875rem;
 }
 
 .button.is-medium {
-  font-size: 18px;
-  height: 40px;
-  padding-left: 14px;
-  padding-right: 14px;
+  font-size: 1.25rem;
 }
 
 .button.is-large {
-  font-size: 22px;
-  height: 48px;
-  padding-left: 20px;
-  padding-right: 20px;
+  font-size: 1.5rem;
 }
 
 .button[disabled], .button.is-disabled {
@@ -1098,8 +1030,6 @@ a.box:active {
 }
 
 .button.is-fullwidth {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   width: 100%;
 }
@@ -1110,8 +1040,7 @@ a.box:active {
 }
 
 .button.is-loading:after {
-  -webkit-animation: spinAround 500ms infinite linear;
-          animation: spinAround 500ms infinite linear;
+  animation: spinAround 500ms infinite linear;
   border: 2px solid #dbdbdb;
   border-radius: 290486px;
   border-right-color: transparent;
@@ -1134,7 +1063,7 @@ a.box:active {
 }
 
 .content:not(:last-child) {
-  margin-bottom: 20px;
+  margin-bottom: 1.5rem;
 }
 
 .content a:not(.button) {
@@ -1169,43 +1098,54 @@ a.box:active {
   color: #363636;
   font-weight: 300;
   line-height: 1.125;
-  margin-bottom: 20px;
-}
-
-.content h1:not(:first-child),
-.content h2:not(:first-child),
-.content h3:not(:first-child) {
-  margin-top: 40px;
-}
-
-.content blockquote {
-  background-color: whitesmoke;
-  border-left: 5px solid #dbdbdb;
-  padding: 1.5em;
 }
 
 .content h1 {
   font-size: 2em;
+  margin-bottom: 0.5em;
+}
+
+.content h1:not(:first-child) {
+  margin-top: 1em;
 }
 
 .content h2 {
   font-size: 1.75em;
+  margin-bottom: 0.5714em;
+}
+
+.content h2:not(:first-child) {
+  margin-top: 1.1428em;
 }
 
 .content h3 {
   font-size: 1.5em;
+  margin-bottom: 0.6666em;
+}
+
+.content h3:not(:first-child) {
+  margin-top: 1.3333em;
 }
 
 .content h4 {
   font-size: 1.25em;
+  margin-bottom: 0.8em;
 }
 
 .content h5 {
   font-size: 1.125em;
+  margin-bottom: 0.8888em;
 }
 
 .content h6 {
   font-size: 1em;
+  margin-bottom: 1em;
+}
+
+.content blockquote {
+  background-color: whitesmoke;
+  border-left: 5px solid #dbdbdb;
+  padding: 1.25em 1.5em;
 }
 
 .content ol {
@@ -1231,44 +1171,35 @@ a.box:active {
   list-style-type: square;
 }
 
-.content.is-medium {
-  font-size: 18px;
+.content.is-small {
+  font-size: 0.875rem;
 }
 
-.content.is-medium code {
-  font-size: 14px;
+.content.is-medium {
+  font-size: 1.25rem;
 }
 
 .content.is-large {
-  font-size: 24px;
-}
-
-.content.is-large code {
-  font-size: 18px;
+  font-size: 1.5rem;
 }
 
 .input,
 .textarea {
   -moz-appearance: none;
   -webkit-appearance: none;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   background-color: white;
   border: 1px solid #dbdbdb;
   border-radius: 3px;
+  box-shadow: none;
   color: #363636;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
   display: inline-flex;
-  font-size: 14px;
-  height: 32px;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
-  line-height: 24px;
-  padding-left: 8px;
-  padding-right: 8px;
+  font-size: 16px;
+  height: 2.5em;
+  justify-content: flex-start;
+  line-height: 1.5;
+  padding-left: 0.75em;
+  padding-right: 0.75em;
   position: relative;
   vertical-align: top;
   box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
@@ -1375,29 +1306,17 @@ a.box:active {
 .input.is-small,
 .textarea.is-small {
   border-radius: 2px;
-  font-size: 11px;
-  height: 24px;
-  line-height: 16px;
-  padding-left: 6px;
-  padding-right: 6px;
+  font-size: 0.875rem;
 }
 
 .input.is-medium,
 .textarea.is-medium {
-  font-size: 18px;
-  height: 40px;
-  line-height: 32px;
-  padding-left: 10px;
-  padding-right: 10px;
+  font-size: 1.25rem;
 }
 
 .input.is-large,
 .textarea.is-large {
-  font-size: 24px;
-  height: 48px;
-  line-height: 40px;
-  padding-left: 12px;
-  padding-right: 12px;
+  font-size: 1.5rem;
 }
 
 .input.is-fullwidth,
@@ -1427,7 +1346,7 @@ a.box:active {
 .radio {
   cursor: pointer;
   display: inline-block;
-  line-height: 16px;
+  line-height: 1em;
   position: relative;
   vertical-align: top;
 }
@@ -1454,12 +1373,12 @@ a.box:active {
 }
 
 .radio + .radio {
-  margin-left: 10px;
+  margin-left: 0.5em;
 }
 
 .select {
   display: inline-block;
-  height: 32px;
+  height: 2.5em;
   position: relative;
   vertical-align: top;
 }
@@ -1467,30 +1386,25 @@ a.box:active {
 .select select {
   -moz-appearance: none;
   -webkit-appearance: none;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   background-color: white;
   border: 1px solid #dbdbdb;
   border-radius: 3px;
+  box-shadow: none;
   color: #363636;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
   display: inline-flex;
-  font-size: 14px;
-  height: 32px;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
-  line-height: 24px;
-  padding-left: 8px;
-  padding-right: 8px;
+  font-size: 16px;
+  height: 2.5em;
+  justify-content: flex-start;
+  line-height: 1.5;
+  padding-left: 0.75em;
+  padding-right: 0.75em;
   position: relative;
   vertical-align: top;
   cursor: pointer;
   display: block;
   outline: none;
-  padding-right: 36px;
+  padding-right: 2.5em;
 }
 
 .select select:hover {
@@ -1586,10 +1500,9 @@ a.box:active {
   height: 7px;
   pointer-events: none;
   position: absolute;
-  -webkit-transform: rotate(-45deg);
-          transform: rotate(-45deg);
+  transform: rotate(-45deg);
   width: 7px;
-  margin-top: -6px;
+  margin-top: -4px;
   right: 16px;
   top: 50%;
 }
@@ -1598,46 +1511,6 @@ a.box:active {
   border-color: #363636;
 }
 
-.select.is-small {
-  height: 24px;
-}
-
-.select.is-small select {
-  border-radius: 2px;
-  font-size: 11px;
-  height: 24px;
-  line-height: 16px;
-  padding-left: 6px;
-  padding-right: 6px;
-  padding-right: 28px;
-}
-
-.select.is-medium {
-  height: 40px;
-}
-
-.select.is-medium select {
-  font-size: 18px;
-  height: 40px;
-  line-height: 32px;
-  padding-left: 10px;
-  padding-right: 10px;
-  padding-right: 44px;
-}
-
-.select.is-large {
-  height: 48px;
-}
-
-.select.is-large select {
-  font-size: 24px;
-  height: 48px;
-  line-height: 40px;
-  padding-left: 12px;
-  padding-right: 12px;
-  padding-right: 52px;
-}
-
 .label {
   color: #363636;
   display: block;
@@ -1645,12 +1518,12 @@ a.box:active {
 }
 
 .label:not(:last-child) {
-  margin-bottom: 5px;
+  margin-bottom: 0.5em;
 }
 
 .help {
   display: block;
-  font-size: 11px;
+  font-size: 0.875rem;
   margin-top: 5px;
 }
 
@@ -1692,21 +1565,17 @@ a.box:active {
 
 @media screen and (max-width: 768px) {
   .control-label {
-    margin-bottom: 5px;
+    margin-bottom: 0.5em;
   }
 }
 
 @media screen and (min-width: 769px) {
   .control-label {
-    -ms-flex-preferred-size: 0;
-        flex-basis: 0;
-    -webkit-box-flex: 1;
-        -ms-flex-positive: 1;
-            flex-grow: 1;
-    -ms-flex-negative: 0;
-        flex-shrink: 0;
-    margin-right: 20px;
-    padding-top: 7px;
+    flex-basis: 0;
+    flex-grow: 1;
+    flex-shrink: 0;
+    margin-right: 1.5em;
+    padding-top: 0.5em;
     text-align: right;
   }
 }
@@ -1721,12 +1590,8 @@ a.box:active {
 }
 
 .control.has-addons {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  justify-content: flex-start;
 }
 
 .control.has-addons .button,
@@ -1778,33 +1643,23 @@ a.box:active {
 .control.has-addons .button.is-expanded,
 .control.has-addons .input.is-expanded,
 .control.has-addons .select.is-expanded {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+  flex-grow: 1;
+  flex-shrink: 0;
 }
 
 .control.has-addons.has-addons-centered {
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
 }
 
 .control.has-addons.has-addons-right {
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
+  justify-content: flex-end;
 }
 
 .control.has-addons.has-addons-fullwidth .button,
 .control.has-addons.has-addons-fullwidth .input,
 .control.has-addons.has-addons-fullwidth .select {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+  flex-grow: 1;
+  flex-shrink: 0;
 }
 
 .control.has-icon > .fa {
@@ -1906,12 +1761,8 @@ a.box:active {
 }
 
 .control.is-grouped {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  justify-content: flex-start;
 }
 
 .control.is-grouped > .control:not(:last-child) {
@@ -1920,48 +1771,32 @@ a.box:active {
 }
 
 .control.is-grouped > .control.is-expanded {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 1;
-      flex-shrink: 1;
+  flex-grow: 1;
+  flex-shrink: 1;
 }
 
 .control.is-grouped.is-grouped-centered {
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
 }
 
 .control.is-grouped.is-grouped-right {
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
+  justify-content: flex-end;
 }
 
 @media screen and (min-width: 769px) {
   .control.is-horizontal {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
   }
   .control.is-horizontal > .control {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
-    -ms-flex-preferred-size: 0;
-        flex-basis: 0;
-    -webkit-box-flex: 5;
-        -ms-flex-positive: 5;
-            flex-grow: 5;
-    -ms-flex-negative: 1;
-        flex-shrink: 1;
+    flex-basis: 0;
+    flex-grow: 5;
+    flex-shrink: 1;
   }
 }
 
 .control.is-loading:after {
-  -webkit-animation: spinAround 500ms infinite linear;
-          animation: spinAround 500ms infinite linear;
+  animation: spinAround 500ms infinite linear;
   border: 2px solid #dbdbdb;
   border-radius: 290486px;
   border-right-color: transparent;
@@ -2060,7 +1895,7 @@ a.box:active {
 }
 
 .notification:not(:last-child) {
-  margin-bottom: 20px;
+  margin-bottom: 1.5rem;
 }
 
 .notification:after {
@@ -2139,7 +1974,7 @@ a.box:active {
 }
 
 .progress:not(:last-child) {
-  margin-bottom: 20px;
+  margin-bottom: 1.5rem;
 }
 
 .progress::-webkit-progress-bar {
@@ -2387,7 +2222,7 @@ a.box:active {
 
 .title:not(:last-child),
 .subtitle:not(:last-child) {
-  margin-bottom: 20px;
+  margin-bottom: 1.5rem;
 }
 
 .title em,
@@ -2414,13 +2249,8 @@ a.box:active {
 
 .title {
   color: #363636;
-  font-size: 28px;
-  line-height: 1;
-}
-
-.title code {
-  display: inline-block;
-  font-size: 28px;
+  font-size: 1.5rem;
+  line-height: 1.125;
 }
 
 .title strong {
@@ -2428,59 +2258,35 @@ a.box:active {
 }
 
 .title + .highlight {
-  margin-top: -10px;
+  margin-top: -0.75rem;
 }
 
 .title + .subtitle {
-  margin-top: -10px;
+  margin-top: -1.25rem;
 }
 
 .title.is-1 {
-  font-size: 48px;
-}
-
-.title.is-1 code {
-  font-size: 40px;
+  font-size: 3.5rem;
 }
 
 .title.is-2 {
-  font-size: 40px;
-}
-
-.title.is-2 code {
-  font-size: 28px;
+  font-size: 2.5rem;
 }
 
 .title.is-3 {
-  font-size: 28px;
-}
-
-.title.is-3 code {
-  font-size: 24px;
+  font-size: 1.75rem;
 }
 
 .title.is-4 {
-  font-size: 24px;
-}
-
-.title.is-4 code {
-  font-size: 18px;
+  font-size: 1.5rem;
 }
 
 .title.is-5 {
-  font-size: 18px;
-}
-
-.title.is-5 code {
-  font-size: 14px;
+  font-size: 1.25rem;
 }
 
 .title.is-6 {
-  font-size: 14px;
-}
-
-.title.is-6 code {
-  font-size: 14px;
+  font-size: 16px;
 }
 
 .title.is-normal {
@@ -2491,24 +2297,10 @@ a.box:active {
   font-weight: 700;
 }
 
-@media screen and (min-width: 769px) {
-  .title + .subtitle {
-    margin-top: -15px;
-  }
-}
-
 .subtitle {
   color: #4a4a4a;
-  font-size: 18px;
-  line-height: 1.125;
-}
-
-.subtitle code {
-  border-radius: 3px;
-  display: inline-block;
-  font-size: 14px;
-  padding: 2px 3px;
-  vertical-align: top;
+  font-size: 1.25rem;
+  line-height: 1.25;
 }
 
 .subtitle strong {
@@ -2516,55 +2308,31 @@ a.box:active {
 }
 
 .subtitle + .title {
-  margin-top: -20px;
+  margin-top: -1.4rem;
 }
 
 .subtitle.is-1 {
-  font-size: 48px;
-}
-
-.subtitle.is-1 code {
-  font-size: 40px;
+  font-size: 3.5rem;
 }
 
 .subtitle.is-2 {
-  font-size: 40px;
-}
-
-.subtitle.is-2 code {
-  font-size: 28px;
+  font-size: 2.5rem;
 }
 
 .subtitle.is-3 {
-  font-size: 28px;
-}
-
-.subtitle.is-3 code {
-  font-size: 24px;
+  font-size: 1.75rem;
 }
 
 .subtitle.is-4 {
-  font-size: 24px;
-}
-
-.subtitle.is-4 code {
-  font-size: 18px;
+  font-size: 1.5rem;
 }
 
 .subtitle.is-5 {
-  font-size: 18px;
-}
-
-.subtitle.is-5 code {
-  font-size: 14px;
+  font-size: 1.25rem;
 }
 
 .subtitle.is-6 {
-  font-size: 14px;
-}
-
-.subtitle.is-6 code {
-  font-size: 14px;
+  font-size: 16px;
 }
 
 .subtitle.is-normal {
@@ -2576,7 +2344,7 @@ a.box:active {
 }
 
 .block:not(:last-child) {
-  margin-bottom: 20px;
+  margin-bottom: 1.5rem;
 }
 
 .container {
@@ -2634,13 +2402,11 @@ a.box:active {
 }
 
 .delete:before {
-  -webkit-transform: rotate(45deg);
-          transform: rotate(45deg);
+  transform: rotate(45deg);
 }
 
 .delete:after {
-  -webkit-transform: rotate(-45deg);
-          transform: rotate(-45deg);
+  transform: rotate(-45deg);
 }
 
 .delete:hover {
@@ -2722,15 +2488,14 @@ a.box:active {
 }
 
 .highlight {
-  font-size: 12px;
-  font-weight: normal;
+  font-weight: 400;
   max-width: 100%;
   overflow: hidden;
   padding: 0;
 }
 
 .highlight:not(:last-child) {
-  margin-bottom: 20px;
+  margin-bottom: 1.5rem;
 }
 
 .highlight pre {
@@ -2739,8 +2504,7 @@ a.box:active {
 }
 
 .loader {
-  -webkit-animation: spinAround 500ms infinite linear;
-          animation: spinAround 500ms infinite linear;
+  animation: spinAround 500ms infinite linear;
   border: 2px solid #dbdbdb;
   border-radius: 290486px;
   border-right-color: transparent;
@@ -2756,25 +2520,19 @@ a.box:active {
   background-color: whitesmoke;
   border-radius: 290486px;
   display: inline-block;
-  font-size: 18px;
+  font-size: 1.25rem;
   vertical-align: top;
 }
 
 .tag {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   background-color: whitesmoke;
   border-radius: 290486px;
   color: #4a4a4a;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
   display: inline-flex;
   font-size: 12px;
   height: 24px;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
   line-height: 16px;
   padding-left: 10px;
   padding-right: 10px;
@@ -2833,21 +2591,21 @@ a.box:active {
 }
 
 .tag.is-small {
-  font-size: 11px;
+  font-size: 0.875rem;
   height: 20px;
   padding-left: 8px;
   padding-right: 8px;
 }
 
 .tag.is-medium {
-  font-size: 14px;
+  font-size: 16px;
   height: 32px;
   padding-left: 14px;
   padding-right: 14px;
 }
 
 .tag.is-large {
-  font-size: 18px;
+  font-size: 1.25rem;
   height: 40px;
   line-height: 24px;
   padding-left: 18px;
@@ -2860,42 +2618,26 @@ a.box:active {
 }
 
 .card-header {
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
+  align-items: stretch;
   box-shadow: 0 1px 2px rgba(10, 10, 10, 0.1);
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   min-height: 40px;
 }
 
 .card-header-title {
-  -webkit-box-align: start;
-      -ms-flex-align: start;
-          align-items: flex-start;
+  align-items: flex-start;
   color: #363636;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
+  flex-grow: 1;
   font-weight: bold;
   padding: 10px;
 }
 
 .card-header-icon {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   cursor: pointer;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
   width: 40px;
 }
 
@@ -2914,27 +2656,15 @@ a.box:active {
 
 .card-footer {
   border-top: 1px solid #dbdbdb;
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: stretch;
   display: flex;
 }
 
 .card-footer-item {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: center;
   display: flex;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  flex-grow: 1;
+  justify-content: center;
   padding: 10px;
 }
 
@@ -3206,9 +2936,7 @@ a.box:active {
 
 .level-left .level-item.is-flexible,
 .level-right .level-item.is-flexible {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
+  flex-grow: 1;
 }
 
 @media screen and (max-width: 768px) {
@@ -3219,41 +2947,26 @@ a.box:active {
 
 @media screen and (min-width: 769px) {
   .level-left {
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-    display: -webkit-box;
-    display: -ms-flexbox;
+    align-items: center;
     display: flex;
   }
 }
 
 @media screen and (min-width: 769px) {
   .level-right {
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-    display: -webkit-box;
-    display: -ms-flexbox;
+    align-items: center;
     display: flex;
-    -webkit-box-pack: end;
-        -ms-flex-pack: end;
-            justify-content: flex-end;
+    justify-content: flex-end;
   }
 }
 
 .level {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-              -ms-grid-row-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .level:not(:last-child) {
-  margin-bottom: 20px;
+  margin-bottom: 1.5rem;
 }
 
 .level code {
@@ -3266,8 +2979,6 @@ a.box:active {
 }
 
 .level.is-mobile {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -3276,42 +2987,33 @@ a.box:active {
 }
 
 .level.is-mobile > .level-item:not(.is-narrow) {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
+  flex-grow: 1;
 }
 
 @media screen and (min-width: 769px) {
   .level {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
   }
   .level > .level-item:not(.is-narrow) {
-    -webkit-box-flex: 1;
-        -ms-flex-positive: 1;
-            flex-grow: 1;
+    flex-grow: 1;
   }
 }
 
 .media-number,
 .media-left,
 .media-right {
-  -webkit-box-flex: 0;
-      -ms-flex-positive: 0;
-          flex-grow: 0;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+  flex-grow: 0;
+  flex-shrink: 0;
 }
 
 .media-number {
   background-color: whitesmoke;
   border-radius: 290486px;
   display: inline-block;
-  font-size: 18px;
+  font-size: 1.25rem;
   height: 32px;
   line-height: 24px;
-  margin-right: 10px;
+  margin-right: 1rem;
   min-width: 32px;
   padding: 4px 8px;
   text-align: center;
@@ -3319,71 +3021,62 @@ a.box:active {
 }
 
 .media-left {
-  margin-right: 10px;
+  margin-right: 1rem;
 }
 
 .media-right {
-  margin-left: 10px;
+  margin-left: 1rem;
 }
 
 .media-content {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 1;
-      flex-shrink: 1;
+  flex-grow: 1;
+  flex-shrink: 1;
   text-align: left;
 }
 
 .media {
-  -webkit-box-align: start;
-      -ms-flex-align: start;
-          align-items: flex-start;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: flex-start;
   display: flex;
   text-align: left;
 }
 
 .media .content:not(:last-child) {
-  margin-bottom: 10px;
+  margin-bottom: 1rem;
 }
 
 .media .media {
   border-top: 1px solid rgba(219, 219, 219, 0.5);
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   padding-top: 10px;
 }
 
 .media .media .content:not(:last-child),
 .media .media .control:not(:last-child) {
-  margin-bottom: 5px;
+  margin-bottom: 0.5rem;
 }
 
 .media .media .media {
-  padding-top: 5px;
+  padding-top: 0.5rem;
 }
 
 .media .media .media + .media {
-  margin-top: 5px;
+  margin-top: 0.5rem;
 }
 
 .media + .media {
   border-top: 1px solid rgba(219, 219, 219, 0.5);
-  margin-top: 10px;
-  padding-top: 10px;
+  margin-top: 1rem;
+  padding-top: 1rem;
 }
 
 .media.is-large + .media {
-  margin-top: 20px;
-  padding-top: 20px;
+  margin-top: 1.4rem;
+  padding-top: 1.4rem;
 }
 
 @media screen and (min-width: 769px) {
   .media.is-large .media-number {
-    margin-right: 20px;
+    margin-right: 1.4rem;
   }
 }
 
@@ -3417,7 +3110,7 @@ a.box:active {
 
 .menu-label {
   color: #7a7a7a;
-  font-size: 11px;
+  font-size: 0.875rem;
   letter-spacing: 1px;
   margin-bottom: 5px;
   text-transform: uppercase;
@@ -3430,7 +3123,7 @@ a.box:active {
 .message-body {
   border: 1px solid #dbdbdb;
   border-radius: 3px;
-  padding: 12px 15px;
+  padding: 0.8rem 1rem;
 }
 
 .message-body strong {
@@ -3441,7 +3134,7 @@ a.box:active {
   background-color: #4a4a4a;
   border-radius: 3px 3px 0 0;
   color: white;
-  padding: 7px 10px;
+  padding: 0.4rem 0.8rem;
 }
 
 .message-header strong {
@@ -3459,7 +3152,7 @@ a.box:active {
 }
 
 .message:not(:last-child) {
-  margin-bottom: 20px;
+  margin-bottom: 1.5rem;
 }
 
 .message.is-white {
@@ -3655,13 +3348,11 @@ a.box:active {
 }
 
 .modal-close:before {
-  -webkit-transform: rotate(45deg);
-          transform: rotate(45deg);
+  transform: rotate(45deg);
 }
 
 .modal-close:after {
-  -webkit-transform: rotate(-45deg);
-          transform: rotate(-45deg);
+  transform: rotate(-45deg);
 }
 
 .modal-close:hover {
@@ -3684,31 +3375,19 @@ a.box:active {
 }
 
 .modal-card {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
   max-height: calc(100vh - 40px);
   overflow: hidden;
 }
 
 .modal-card-head,
 .modal-card-foot {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   background-color: whitesmoke;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  flex-shrink: 0;
+  justify-content: flex-start;
   padding: 20px;
   position: relative;
 }
@@ -3721,12 +3400,9 @@ a.box:active {
 
 .modal-card-title {
   color: #363636;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-  font-size: 24px;
+  flex-grow: 1;
+  flex-shrink: 0;
+  font-size: 1.5rem;
   line-height: 1;
 }
 
@@ -3742,11 +3418,8 @@ a.box:active {
 
 .modal-card-body {
   background-color: white;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 1;
-      flex-shrink: 1;
+  flex-grow: 1;
+  flex-shrink: 1;
   overflow: auto;
   padding: 20px;
 }
@@ -3757,22 +3430,15 @@ a.box:active {
   position: absolute;
   right: 0;
   top: 0;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-              -ms-grid-row-align: center;
-          align-items: center;
+  align-items: center;
   display: none;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
   overflow: hidden;
   position: fixed;
   z-index: 1986;
 }
 
 .modal.is-active {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -3792,12 +3458,8 @@ a.box:active {
   margin-left: -7px;
   position: absolute;
   top: 50%;
-  -webkit-transition: none 86ms ease-out;
   transition: none 86ms ease-out;
-  -webkit-transition-property: background, left, opacity, -webkit-transform;
-  transition-property: background, left, opacity, -webkit-transform;
   transition-property: background, left, opacity, transform;
-  transition-property: background, left, opacity, transform, -webkit-transform;
   width: 15px;
 }
 
@@ -3823,10 +3485,8 @@ a.box:active {
 
 .nav-toggle.is-active span:nth-child(1) {
   margin-left: -5px;
-  -webkit-transform: rotate(45deg);
-          transform: rotate(45deg);
-  -webkit-transform-origin: left top;
-          transform-origin: left top;
+  transform: rotate(45deg);
+  transform-origin: left top;
 }
 
 .nav-toggle.is-active span:nth-child(2) {
@@ -3835,10 +3495,8 @@ a.box:active {
 
 .nav-toggle.is-active span:nth-child(3) {
   margin-left: -5px;
-  -webkit-transform: rotate(-45deg);
-          transform: rotate(-45deg);
-  -webkit-transform-origin: left bottom;
-          transform-origin: left bottom;
+  transform: rotate(-45deg);
+  transform-origin: left bottom;
 }
 
 @media screen and (min-width: 769px) {
@@ -3848,29 +3506,17 @@ a.box:active {
 }
 
 .nav-item {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: center;
   display: flex;
-  -webkit-box-flex: 0;
-      -ms-flex-positive: 0;
-          flex-grow: 0;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  flex-grow: 0;
+  flex-shrink: 0;
+  justify-content: center;
   padding: 10px;
 }
 
 .nav-item a {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+  flex-grow: 1;
+  flex-shrink: 0;
 }
 
 .nav-item img {
@@ -3891,9 +3537,7 @@ a.box:active {
 
 @media screen and (max-width: 768px) {
   .nav-item {
-    -webkit-box-pack: start;
-        -ms-flex-pack: start;
-            justify-content: flex-start;
+    justify-content: flex-start;
   }
 }
 
@@ -3959,69 +3603,39 @@ a.nav-item.is-tab.is-active {
 }
 
 .nav-left {
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: stretch;
   display: flex;
-  -ms-flex-preferred-size: 0;
-      flex-basis: 0;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 0;
+  justify-content: flex-start;
   overflow: hidden;
   overflow-x: auto;
   white-space: nowrap;
 }
 
 .nav-center {
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: stretch;
   display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
   margin-left: auto;
   margin-right: auto;
 }
 
 @media screen and (min-width: 769px) {
   .nav-right {
-    -webkit-box-align: stretch;
-        -ms-flex-align: stretch;
-            align-items: stretch;
-    display: -webkit-box;
-    display: -ms-flexbox;
+    align-items: stretch;
     display: flex;
-    -ms-flex-preferred-size: 0;
-        flex-basis: 0;
-    -webkit-box-flex: 1;
-        -ms-flex-positive: 1;
-            flex-grow: 1;
-    -ms-flex-negative: 0;
-        flex-shrink: 0;
-    -webkit-box-pack: end;
-        -ms-flex-pack: end;
-            justify-content: flex-end;
+    flex-basis: 0;
+    flex-grow: 1;
+    flex-shrink: 0;
+    justify-content: flex-end;
   }
 }
 
 .nav {
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
+  align-items: stretch;
   background-color: white;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   min-height: 50px;
   position: relative;
@@ -4030,11 +3644,7 @@ a.nav-item.is-tab.is-active {
 }
 
 .nav > .container {
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: stretch;
   display: flex;
   min-height: 50px;
   width: 100%;
@@ -4068,15 +3678,9 @@ a.nav-item.is-tab.is-active {
 }
 
 .pagination {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: center;
   display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
   text-align: center;
 }
 
@@ -4097,26 +3701,16 @@ a.nav-item.is-tab.is-active {
 }
 
 .pagination ul {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: center;
   display: flex;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  flex-grow: 1;
+  flex-shrink: 0;
+  justify-content: center;
 }
 
 @media screen and (max-width: 768px) {
   .pagination {
-    -ms-flex-wrap: wrap;
-        flex-wrap: wrap;
+    flex-wrap: wrap;
   }
   .pagination > a {
     width: calc(50% - 5px);
@@ -4125,11 +3719,8 @@ a.nav-item.is-tab.is-active {
     margin-left: 10px;
   }
   .pagination li {
-    -webkit-box-flex: 1;
-        -ms-flex-positive: 1;
-            flex-grow: 1;
-    -ms-flex-negative: 0;
-        flex-shrink: 0;
+    flex-grow: 1;
+    flex-shrink: 0;
   }
   .pagination ul {
     margin-top: 10px;
@@ -4138,9 +3729,7 @@ a.nav-item.is-tab.is-active {
 
 @media screen and (min-width: 769px) {
   .pagination > a:not(:first-child) {
-    -webkit-box-ordinal-group: 2;
-        -ms-flex-order: 1;
-            order: 1;
+    order: 1;
   }
 }
 
@@ -4167,7 +3756,7 @@ a.nav-item.is-tab.is-active {
   border-bottom: 1px solid #dbdbdb;
   border-radius: 4px 4px 0 0;
   color: #363636;
-  font-size: 18px;
+  font-size: 1.25rem;
   font-weight: 300;
   padding: 10px;
 }
@@ -4181,14 +3770,10 @@ a.nav-item.is-tab.is-active {
 }
 
 .panel-tabs {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  font-size: 11px;
+  font-size: 0.875rem;
   padding: 5px 10px 0;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
 }
 
 .panel-tabs a {
@@ -4236,15 +3821,9 @@ a.panel-block:hover {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: stretch;
   display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  justify-content: space-between;
   line-height: 24px;
   overflow: hidden;
   overflow-x: auto;
@@ -4252,21 +3831,15 @@ a.panel-block:hover {
 }
 
 .tabs:not(:last-child) {
-  margin-bottom: 20px;
+  margin-bottom: 1.5rem;
 }
 
 .tabs a {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   border-bottom: 1px solid #dbdbdb;
   color: #4a4a4a;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
   margin-bottom: -1px;
   padding: 6px 12px;
   vertical-align: top;
@@ -4287,21 +3860,12 @@ a.panel-block:hover {
 }
 
 .tabs ul {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   border-bottom: 1px solid #dbdbdb;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  flex-grow: 1;
+  flex-shrink: 0;
+  justify-content: flex-start;
 }
 
 .tabs ul.is-left {
@@ -4309,20 +3873,14 @@ a.panel-block:hover {
 }
 
 .tabs ul.is-center {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  flex: none;
+  justify-content: center;
   padding-left: 10px;
   padding-right: 10px;
 }
 
 .tabs ul.is-right {
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
+  justify-content: flex-end;
   padding-left: 10px;
 }
 
@@ -4335,15 +3893,11 @@ a.panel-block:hover {
 }
 
 .tabs.is-centered ul {
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
 }
 
 .tabs.is-right ul {
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
+  justify-content: flex-end;
 }
 
 .tabs.is-boxed a {
@@ -4365,11 +3919,8 @@ a.panel-block:hover {
 }
 
 .tabs.is-fullwidth li {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+  flex-grow: 1;
+  flex-shrink: 0;
 }
 
 .tabs.is-toggle a {
@@ -4410,7 +3961,7 @@ a.panel-block:hover {
 }
 
 .tabs.is-small {
-  font-size: 11px;
+  font-size: 0.875rem;
 }
 
 .tabs.is-small a {
@@ -4423,7 +3974,7 @@ a.panel-block:hover {
 }
 
 .tabs.is-medium {
-  font-size: 18px;
+  font-size: 1.25rem;
 }
 
 .tabs.is-medium a {
@@ -4436,7 +3987,7 @@ a.panel-block:hover {
 }
 
 .tabs.is-large {
-  font-size: 28px;
+  font-size: 1.5rem;
 }
 
 .tabs.is-large a {
@@ -4450,61 +4001,43 @@ a.panel-block:hover {
 
 .column {
   display: block;
-  -ms-flex-preferred-size: 0;
-      flex-basis: 0;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 1;
-      flex-shrink: 1;
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
   padding: 10px;
 }
 
 .columns.is-mobile > .column.is-narrow {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
 }
 
 .columns.is-mobile > .column.is-full {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 100%;
 }
 
 .columns.is-mobile > .column.is-three-quarters {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 75%;
 }
 
 .columns.is-mobile > .column.is-two-thirds {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 66.6666%;
 }
 
 .columns.is-mobile > .column.is-half {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 50%;
 }
 
 .columns.is-mobile > .column.is-one-third {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 33.3333%;
 }
 
 .columns.is-mobile > .column.is-one-quarter {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 25%;
 }
 
@@ -4529,9 +4062,7 @@ a.panel-block:hover {
 }
 
 .columns.is-mobile > .column.is-1 {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 8.33333%;
 }
 
@@ -4540,9 +4071,7 @@ a.panel-block:hover {
 }
 
 .columns.is-mobile > .column.is-2 {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 16.66667%;
 }
 
@@ -4551,9 +4080,7 @@ a.panel-block:hover {
 }
 
 .columns.is-mobile > .column.is-3 {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 25%;
 }
 
@@ -4562,9 +4089,7 @@ a.panel-block:hover {
 }
 
 .columns.is-mobile > .column.is-4 {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 33.33333%;
 }
 
@@ -4573,9 +4098,7 @@ a.panel-block:hover {
 }
 
 .columns.is-mobile > .column.is-5 {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 41.66667%;
 }
 
@@ -4584,9 +4107,7 @@ a.panel-block:hover {
 }
 
 .columns.is-mobile > .column.is-6 {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 50%;
 }
 
@@ -4595,9 +4116,7 @@ a.panel-block:hover {
 }
 
 .columns.is-mobile > .column.is-7 {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 58.33333%;
 }
 
@@ -4606,9 +4125,7 @@ a.panel-block:hover {
 }
 
 .columns.is-mobile > .column.is-8 {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 66.66667%;
 }
 
@@ -4617,9 +4134,7 @@ a.panel-block:hover {
 }
 
 .columns.is-mobile > .column.is-9 {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 75%;
 }
 
@@ -4628,9 +4143,7 @@ a.panel-block:hover {
 }
 
 .columns.is-mobile > .column.is-10 {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 83.33333%;
 }
 
@@ -4639,9 +4152,7 @@ a.panel-block:hover {
 }
 
 .columns.is-mobile > .column.is-11 {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 91.66667%;
 }
 
@@ -4650,9 +4161,7 @@ a.panel-block:hover {
 }
 
 .columns.is-mobile > .column.is-12 {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 100%;
 }
 
@@ -4662,44 +4171,30 @@ a.panel-block:hover {
 
 @media screen and (max-width: 768px) {
   .column.is-narrow-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
   }
   .column.is-full-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 100%;
   }
   .column.is-three-quarters-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 75%;
   }
   .column.is-two-thirds-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 66.6666%;
   }
   .column.is-half-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 50%;
   }
   .column.is-one-third-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 33.3333%;
   }
   .column.is-one-quarter-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 25%;
   }
   .column.is-offset-three-quarters-mobile {
@@ -4718,108 +4213,84 @@ a.panel-block:hover {
     margin-left: 25%;
   }
   .column.is-1-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 8.33333%;
   }
   .column.is-offset-1-mobile {
     margin-left: 8.33333%;
   }
   .column.is-2-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 16.66667%;
   }
   .column.is-offset-2-mobile {
     margin-left: 16.66667%;
   }
   .column.is-3-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 25%;
   }
   .column.is-offset-3-mobile {
     margin-left: 25%;
   }
   .column.is-4-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 33.33333%;
   }
   .column.is-offset-4-mobile {
     margin-left: 33.33333%;
   }
   .column.is-5-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 41.66667%;
   }
   .column.is-offset-5-mobile {
     margin-left: 41.66667%;
   }
   .column.is-6-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 50%;
   }
   .column.is-offset-6-mobile {
     margin-left: 50%;
   }
   .column.is-7-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 58.33333%;
   }
   .column.is-offset-7-mobile {
     margin-left: 58.33333%;
   }
   .column.is-8-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 66.66667%;
   }
   .column.is-offset-8-mobile {
     margin-left: 66.66667%;
   }
   .column.is-9-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 75%;
   }
   .column.is-offset-9-mobile {
     margin-left: 75%;
   }
   .column.is-10-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 83.33333%;
   }
   .column.is-offset-10-mobile {
     margin-left: 83.33333%;
   }
   .column.is-11-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 91.66667%;
   }
   .column.is-offset-11-mobile {
     margin-left: 91.66667%;
   }
   .column.is-12-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 100%;
   }
   .column.is-offset-12-mobile {
@@ -4829,44 +4300,30 @@ a.panel-block:hover {
 
 @media screen and (min-width: 769px) {
   .column.is-narrow, .column.is-narrow-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
   }
   .column.is-full, .column.is-full-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 100%;
   }
   .column.is-three-quarters, .column.is-three-quarters-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 75%;
   }
   .column.is-two-thirds, .column.is-two-thirds-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 66.6666%;
   }
   .column.is-half, .column.is-half-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 50%;
   }
   .column.is-one-third, .column.is-one-third-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 33.3333%;
   }
   .column.is-one-quarter, .column.is-one-quarter-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 25%;
   }
   .column.is-offset-three-quarters, .column.is-offset-three-quarters-tablet {
@@ -4885,108 +4342,84 @@ a.panel-block:hover {
     margin-left: 25%;
   }
   .column.is-1, .column.is-1-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 8.33333%;
   }
   .column.is-offset-1, .column.is-offset-1-tablet {
     margin-left: 8.33333%;
   }
   .column.is-2, .column.is-2-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 16.66667%;
   }
   .column.is-offset-2, .column.is-offset-2-tablet {
     margin-left: 16.66667%;
   }
   .column.is-3, .column.is-3-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 25%;
   }
   .column.is-offset-3, .column.is-offset-3-tablet {
     margin-left: 25%;
   }
   .column.is-4, .column.is-4-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 33.33333%;
   }
   .column.is-offset-4, .column.is-offset-4-tablet {
     margin-left: 33.33333%;
   }
   .column.is-5, .column.is-5-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 41.66667%;
   }
   .column.is-offset-5, .column.is-offset-5-tablet {
     margin-left: 41.66667%;
   }
   .column.is-6, .column.is-6-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 50%;
   }
   .column.is-offset-6, .column.is-offset-6-tablet {
     margin-left: 50%;
   }
   .column.is-7, .column.is-7-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 58.33333%;
   }
   .column.is-offset-7, .column.is-offset-7-tablet {
     margin-left: 58.33333%;
   }
   .column.is-8, .column.is-8-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 66.66667%;
   }
   .column.is-offset-8, .column.is-offset-8-tablet {
     margin-left: 66.66667%;
   }
   .column.is-9, .column.is-9-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 75%;
   }
   .column.is-offset-9, .column.is-offset-9-tablet {
     margin-left: 75%;
   }
   .column.is-10, .column.is-10-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 83.33333%;
   }
   .column.is-offset-10, .column.is-offset-10-tablet {
     margin-left: 83.33333%;
   }
   .column.is-11, .column.is-11-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 91.66667%;
   }
   .column.is-offset-11, .column.is-offset-11-tablet {
     margin-left: 91.66667%;
   }
   .column.is-12, .column.is-12-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 100%;
   }
   .column.is-offset-12, .column.is-offset-12-tablet {
@@ -4996,44 +4429,30 @@ a.panel-block:hover {
 
 @media screen and (min-width: 980px) {
   .column.is-narrow-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
   }
   .column.is-full-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 100%;
   }
   .column.is-three-quarters-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 75%;
   }
   .column.is-two-thirds-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 66.6666%;
   }
   .column.is-half-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 50%;
   }
   .column.is-one-third-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 33.3333%;
   }
   .column.is-one-quarter-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 25%;
   }
   .column.is-offset-three-quarters-desktop {
@@ -5052,108 +4471,84 @@ a.panel-block:hover {
     margin-left: 25%;
   }
   .column.is-1-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 8.33333%;
   }
   .column.is-offset-1-desktop {
     margin-left: 8.33333%;
   }
   .column.is-2-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 16.66667%;
   }
   .column.is-offset-2-desktop {
     margin-left: 16.66667%;
   }
   .column.is-3-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 25%;
   }
   .column.is-offset-3-desktop {
     margin-left: 25%;
   }
   .column.is-4-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 33.33333%;
   }
   .column.is-offset-4-desktop {
     margin-left: 33.33333%;
   }
   .column.is-5-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 41.66667%;
   }
   .column.is-offset-5-desktop {
     margin-left: 41.66667%;
   }
   .column.is-6-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 50%;
   }
   .column.is-offset-6-desktop {
     margin-left: 50%;
   }
   .column.is-7-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 58.33333%;
   }
   .column.is-offset-7-desktop {
     margin-left: 58.33333%;
   }
   .column.is-8-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 66.66667%;
   }
   .column.is-offset-8-desktop {
     margin-left: 66.66667%;
   }
   .column.is-9-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 75%;
   }
   .column.is-offset-9-desktop {
     margin-left: 75%;
   }
   .column.is-10-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 83.33333%;
   }
   .column.is-offset-10-desktop {
     margin-left: 83.33333%;
   }
   .column.is-11-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 91.66667%;
   }
   .column.is-offset-11-desktop {
     margin-left: 91.66667%;
   }
   .column.is-12-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 100%;
   }
   .column.is-offset-12-desktop {
@@ -5163,44 +4558,30 @@ a.panel-block:hover {
 
 @media screen and (min-width: 1180px) {
   .column.is-narrow-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
   }
   .column.is-full-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 100%;
   }
   .column.is-three-quarters-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 75%;
   }
   .column.is-two-thirds-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 66.6666%;
   }
   .column.is-half-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 50%;
   }
   .column.is-one-third-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 33.3333%;
   }
   .column.is-one-quarter-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 25%;
   }
   .column.is-offset-three-quarters-widescreen {
@@ -5219,108 +4600,84 @@ a.panel-block:hover {
     margin-left: 25%;
   }
   .column.is-1-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 8.33333%;
   }
   .column.is-offset-1-widescreen {
     margin-left: 8.33333%;
   }
   .column.is-2-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 16.66667%;
   }
   .column.is-offset-2-widescreen {
     margin-left: 16.66667%;
   }
   .column.is-3-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 25%;
   }
   .column.is-offset-3-widescreen {
     margin-left: 25%;
   }
   .column.is-4-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 33.33333%;
   }
   .column.is-offset-4-widescreen {
     margin-left: 33.33333%;
   }
   .column.is-5-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 41.66667%;
   }
   .column.is-offset-5-widescreen {
     margin-left: 41.66667%;
   }
   .column.is-6-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 50%;
   }
   .column.is-offset-6-widescreen {
     margin-left: 50%;
   }
   .column.is-7-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 58.33333%;
   }
   .column.is-offset-7-widescreen {
     margin-left: 58.33333%;
   }
   .column.is-8-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 66.66667%;
   }
   .column.is-offset-8-widescreen {
     margin-left: 66.66667%;
   }
   .column.is-9-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 75%;
   }
   .column.is-offset-9-widescreen {
     margin-left: 75%;
   }
   .column.is-10-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 83.33333%;
   }
   .column.is-offset-10-widescreen {
     margin-left: 83.33333%;
   }
   .column.is-11-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 91.66667%;
   }
   .column.is-offset-11-widescreen {
     margin-left: 91.66667%;
   }
   .column.is-12-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 100%;
   }
   .column.is-offset-12-widescreen {
@@ -5343,9 +4700,7 @@ a.panel-block:hover {
 }
 
 .columns.is-centered {
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
 }
 
 .columns.is-gapless {
@@ -5369,8 +4724,7 @@ a.panel-block:hover {
 
 @media screen and (min-width: 769px) {
   .columns.is-grid {
-    -ms-flex-wrap: wrap;
-        flex-wrap: wrap;
+    flex-wrap: wrap;
   }
   .columns.is-grid > .column {
     max-width: 33.3333%;
@@ -5383,54 +4737,35 @@ a.panel-block:hover {
 }
 
 .columns.is-mobile {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
 }
 
 .columns.is-multiline {
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
 .columns.is-vcentered {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-              -ms-grid-row-align: center;
-          align-items: center;
+  align-items: center;
 }
 
 @media screen and (min-width: 769px) {
   .columns:not(.is-desktop) {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
   }
 }
 
 @media screen and (min-width: 980px) {
   .columns.is-desktop {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
   }
 }
 
 .tile {
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-              -ms-grid-row-align: stretch;
-          align-items: stretch;
+  align-items: stretch;
   display: block;
-  -ms-flex-preferred-size: auto;
-      flex-basis: auto;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 1;
-      flex-shrink: 1;
-  min-height: -webkit-min-content;
-  min-height: -moz-min-content;
+  flex-basis: auto;
+  flex-grow: 1;
+  flex-shrink: 1;
   min-height: min-content;
 }
 
@@ -5457,10 +4792,7 @@ a.panel-block:hover {
 }
 
 .tile.is-vertical {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
 }
 
 .tile.is-vertical > .tile.is-child:not(:last-child) {
@@ -5469,80 +4801,54 @@ a.panel-block:hover {
 
 @media screen and (min-width: 769px) {
   .tile:not(.is-child) {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
   }
   .tile.is-1 {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 8.33333%;
   }
   .tile.is-2 {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 16.66667%;
   }
   .tile.is-3 {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 25%;
   }
   .tile.is-4 {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 33.33333%;
   }
   .tile.is-5 {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 41.66667%;
   }
   .tile.is-6 {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 50%;
   }
   .tile.is-7 {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 58.33333%;
   }
   .tile.is-8 {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 66.66667%;
   }
   .tile.is-9 {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 75%;
   }
   .tile.is-10 {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 83.33333%;
   }
   .tile.is-11 {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 91.66667%;
   }
   .tile.is-12 {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 100%;
   }
 }
@@ -5562,8 +4868,7 @@ a.panel-block:hover {
   min-width: 100%;
   position: absolute;
   top: 50%;
-  -webkit-transform: translate3d(-50%, -50%, 0);
-          transform: translate3d(-50%, -50%, 0);
+  transform: translate3d(-50%, -50%, 0);
 }
 
 .hero-video.is-transparent {
@@ -5582,8 +4887,6 @@ a.panel-block:hover {
 
 @media screen and (max-width: 768px) {
   .hero-buttons .button {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
   }
   .hero-buttons .button:not(:last-child) {
@@ -5593,12 +4896,8 @@ a.panel-block:hover {
 
 @media screen and (min-width: 769px) {
   .hero-buttons {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
-    -webkit-box-pack: center;
-        -ms-flex-pack: center;
-            justify-content: center;
+    justify-content: center;
   }
   .hero-buttons .button:not(:last-child) {
     margin-right: 20px;
@@ -5607,16 +4906,12 @@ a.panel-block:hover {
 
 .hero-head,
 .hero-foot {
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+  flex-shrink: 0;
 }
 
 .hero-body {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+  flex-grow: 1;
+  flex-shrink: 0;
   padding: 40px 20px;
 }
 
@@ -5628,20 +4923,11 @@ a.panel-block:hover {
 }
 
 .hero {
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
+  align-items: stretch;
   background-color: white;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 .hero .nav {
@@ -5725,7 +5011,6 @@ a.panel-block:hover {
 }
 
 .hero.is-white.is-bold {
-  background-image: -webkit-linear-gradient(309deg, #e6e6e6 0%, white 71%, white 100%);
   background-image: linear-gradient(141deg, #e6e6e6 0%, white 71%, white 100%);
 }
 
@@ -5816,7 +5101,6 @@ a.panel-block:hover {
 }
 
 .hero.is-black.is-bold {
-  background-image: -webkit-linear-gradient(309deg, black 0%, #0a0a0a 71%, #181616 100%);
   background-image: linear-gradient(141deg, black 0%, #0a0a0a 71%, #181616 100%);
 }
 
@@ -5907,7 +5191,6 @@ a.panel-block:hover {
 }
 
 .hero.is-light.is-bold {
-  background-image: -webkit-linear-gradient(309deg, #dfd8d8 0%, whitesmoke 71%, white 100%);
   background-image: linear-gradient(141deg, #dfd8d8 0%, whitesmoke 71%, white 100%);
 }
 
@@ -5998,7 +5281,6 @@ a.panel-block:hover {
 }
 
 .hero.is-dark.is-bold {
-  background-image: -webkit-linear-gradient(309deg, #1f1919 0%, #363636 71%, #463f3f 100%);
   background-image: linear-gradient(141deg, #1f1919 0%, #363636 71%, #463f3f 100%);
 }
 
@@ -6089,7 +5371,6 @@ a.panel-block:hover {
 }
 
 .hero.is-primary.is-bold {
-  background-image: -webkit-linear-gradient(309deg, #009e6c 0%, #00d1b2 71%, #00e7eb 100%);
   background-image: linear-gradient(141deg, #009e6c 0%, #00d1b2 71%, #00e7eb 100%);
 }
 
@@ -6180,7 +5461,6 @@ a.panel-block:hover {
 }
 
 .hero.is-info.is-bold {
-  background-image: -webkit-linear-gradient(309deg, #1577c6 0%, #3273dc 71%, #4366e5 100%);
   background-image: linear-gradient(141deg, #1577c6 0%, #3273dc 71%, #4366e5 100%);
 }
 
@@ -6271,7 +5551,6 @@ a.panel-block:hover {
 }
 
 .hero.is-success.is-bold {
-  background-image: -webkit-linear-gradient(309deg, #12af2f 0%, #23d160 71%, #2ce28a 100%);
   background-image: linear-gradient(141deg, #12af2f 0%, #23d160 71%, #2ce28a 100%);
 }
 
@@ -6362,7 +5641,6 @@ a.panel-block:hover {
 }
 
 .hero.is-warning.is-bold {
-  background-image: -webkit-linear-gradient(309deg, #ffaf24 0%, #ffdd57 71%, #fffa70 100%);
   background-image: linear-gradient(141deg, #ffaf24 0%, #ffdd57 71%, #fffa70 100%);
 }
 
@@ -6453,7 +5731,6 @@ a.panel-block:hover {
 }
 
 .hero.is-danger.is-bold {
-  background-image: -webkit-linear-gradient(309deg, #ff0561 0%, #ff3860 71%, #ff5257 100%);
   background-image: linear-gradient(141deg, #ff0561 0%, #ff3860 71%, #ff5257 100%);
 }
 
@@ -6491,20 +5768,13 @@ a.panel-block:hover {
 }
 
 .hero.is-fullheight .hero-body {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: center;
   display: flex;
 }
 
 .hero.is-fullheight .hero-body > .container {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 1;
-      flex-shrink: 1;
+  flex-grow: 1;
+  flex-shrink: 1;
 }
 
 .section {
@@ -6613,7 +5883,7 @@ svg {
 }
 
 #carbonads .carbon-poweredby {
-  font-size: 11px;
+  font-size: 0.875rem;
   margin-left: 15px;
 }
 
@@ -6639,48 +5909,18 @@ svg {
   color: white;
 }
 
-@-webkit-keyframes floatUp {
-  0% {
-    box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0);
-    -webkit-transform: scale(0.86);
-            transform: scale(0.86);
-  }
-  67% {
-    box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
-    -webkit-transform: scale(1);
-            transform: scale(1);
-  }
-  100% {
-    box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
-    -webkit-transform: scale(1);
-            transform: scale(1);
-  }
-}
-
 @keyframes floatUp {
   0% {
     box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0);
-    -webkit-transform: scale(0.86);
-            transform: scale(0.86);
+    transform: scale(0.86);
   }
   67% {
     box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
-    -webkit-transform: scale(1);
-            transform: scale(1);
+    transform: scale(1);
   }
   100% {
     box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
-    -webkit-transform: scale(1);
-            transform: scale(1);
-  }
-}
-
-@-webkit-keyframes strokePath {
-  from {
-    stroke-dashoffset: 880;
-  }
-  to {
-    stroke-dashoffset: 0;
+    transform: scale(1);
   }
 }
 
@@ -6693,131 +5933,60 @@ svg {
   }
 }
 
-@-webkit-keyframes fadeIn {
-  from {
-    opacity: 0;
-    -webkit-transform: scale(0.86);
-            transform: scale(0.86);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: scale(1);
-            transform: scale(1);
-  }
-}
-
 @keyframes fadeIn {
   from {
     opacity: 0;
-    -webkit-transform: scale(0.86);
-            transform: scale(0.86);
+    transform: scale(0.86);
   }
   to {
     opacity: 1;
-    -webkit-transform: scale(1);
-            transform: scale(1);
-  }
-}
-
-@-webkit-keyframes fadeOut {
-  0% {
-    opacity: 1;
-    -webkit-transform: scale(0.86);
-            transform: scale(0.86);
-  }
-  67% {
-    opacity: 1;
-    -webkit-transform: scale(0.86);
-            transform: scale(0.86);
-  }
-  100% {
-    opacity: 0;
-    -webkit-transform: scale(1);
-            transform: scale(1);
+    transform: scale(1);
   }
 }
 
 @keyframes fadeOut {
   0% {
     opacity: 1;
-    -webkit-transform: scale(0.86);
-            transform: scale(0.86);
+    transform: scale(0.86);
   }
   67% {
     opacity: 1;
-    -webkit-transform: scale(0.86);
-            transform: scale(0.86);
+    transform: scale(0.86);
   }
   100% {
     opacity: 0;
-    -webkit-transform: scale(1);
-            transform: scale(1);
-  }
-}
-
-@-webkit-keyframes slideDown {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateY(-10px);
-            transform: translateY(-10px);
-  }
-  100% {
-    opacity: 1;
-    -webkit-transform: translateY(0);
-            transform: translateY(0);
+    transform: scale(1);
   }
 }
 
 @keyframes slideDown {
   0% {
     opacity: 0;
-    -webkit-transform: translateY(-10px);
-            transform: translateY(-10px);
-  }
-  100% {
-    opacity: 1;
-    -webkit-transform: translateY(0);
-            transform: translateY(0);
-  }
-}
-
-@-webkit-keyframes slideUp {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateY(10px);
-            transform: translateY(10px);
+    transform: translateY(-10px);
   }
   100% {
     opacity: 1;
-    -webkit-transform: translateY(0);
-            transform: translateY(0);
+    transform: translateY(0);
   }
 }
 
 @keyframes slideUp {
   0% {
     opacity: 0;
-    -webkit-transform: translateY(10px);
-            transform: translateY(10px);
+    transform: translateY(10px);
   }
   100% {
     opacity: 1;
-    -webkit-transform: translateY(0);
-            transform: translateY(0);
+    transform: translateY(0);
   }
 }
 
 #b {
-  -webkit-animation-delay: 1s;
-          animation-delay: 1s;
-  -webkit-animation-duration: 1.5s;
-          animation-duration: 1.5s;
-  -webkit-animation-fill-mode: both;
-          animation-fill-mode: both;
-  -webkit-animation-name: floatUp;
-          animation-name: floatUp;
-  -webkit-animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
-          animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
+  animation-delay: 1s;
+  animation-duration: 1.5s;
+  animation-fill-mode: both;
+  animation-name: floatUp;
+  animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
   border-radius: 24px;
   display: inline-block;
   height: 240px;
@@ -6839,25 +6008,17 @@ svg {
 }
 
 #b svg:first-child {
-  -webkit-animation-duration: 1.5s;
-          animation-duration: 1.5s;
-  -webkit-animation-fill-mode: both;
-          animation-fill-mode: both;
-  -webkit-animation-name: fadeOut;
-          animation-name: fadeOut;
-  -webkit-animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
-          animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
+  animation-duration: 1.5s;
+  animation-fill-mode: both;
+  animation-name: fadeOut;
+  animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
 }
 
 #b svg:first-child g {
-  -webkit-animation-duration: 1s;
-          animation-duration: 1s;
-  -webkit-animation-fill-mode: both;
-          animation-fill-mode: both;
-  -webkit-animation-name: strokePath;
-          animation-name: strokePath;
-  -webkit-animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
-          animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
+  animation-duration: 1s;
+  animation-fill-mode: both;
+  animation-name: strokePath;
+  animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
   fill: none;
   stroke: #00d1b2;
   stroke-dasharray: 880;
@@ -6865,16 +6026,11 @@ svg {
 }
 
 #b svg:last-child {
-  -webkit-animation-delay: 1s;
-          animation-delay: 1s;
-  -webkit-animation-duration: 1s;
-          animation-duration: 1s;
-  -webkit-animation-fill-mode: both;
-          animation-fill-mode: both;
-  -webkit-animation-name: fadeIn;
-          animation-name: fadeIn;
-  -webkit-animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
-          animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
+  animation-delay: 1s;
+  animation-duration: 1s;
+  animation-fill-mode: both;
+  animation-name: fadeIn;
+  animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
 }
 
 #b svg:last-child g {
@@ -6890,24 +6046,18 @@ svg {
 }
 
 #bulma {
-  -webkit-animation: slideDown 500ms both;
-          animation: slideDown 500ms both;
-  -webkit-animation-delay: 1s;
-          animation-delay: 1s;
+  animation: slideDown 500ms both;
+  animation-delay: 1s;
 }
 
 #modern-framework {
-  -webkit-animation: slideUp 500ms both;
-          animation: slideUp 500ms both;
-  -webkit-animation-delay: 1.2s;
-          animation-delay: 1.2s;
+  animation: slideUp 500ms both;
+  animation-delay: 1.2s;
 }
 
 #npm {
-  -webkit-animation: fadeIn 500ms both;
-          animation: fadeIn 500ms both;
-  -webkit-animation-delay: 1.4s;
-          animation-delay: 1.4s;
+  animation: fadeIn 500ms both;
+  animation-delay: 1.4s;
   background: none;
   margin: -10px 0 20px;
 }
@@ -6921,24 +6071,18 @@ svg {
 }
 
 #ghbtns {
-  -webkit-animation: slideDown 500ms both;
-          animation: slideDown 500ms both;
-  -webkit-animation-delay: 1.6s;
-          animation-delay: 1.6s;
+  animation: slideDown 500ms both;
+  animation-delay: 1.6s;
 }
 
 html.route-index #carbon {
-  -webkit-animation: slideUp 500ms both;
-          animation: slideUp 500ms both;
-  -webkit-animation-delay: 1.8s;
-          animation-delay: 1.8s;
+  animation: slideUp 500ms both;
+  animation-delay: 1.8s;
 }
 
 #download {
-  -webkit-animation: fadeIn 500ms both;
-          animation: fadeIn 500ms both;
-  -webkit-animation-delay: 2s;
-          animation-delay: 2s;
+  animation: fadeIn 500ms both;
+  animation-delay: 2s;
 }
 
 #grid .notification {
@@ -6966,18 +6110,11 @@ html.route-index #carbon {
 }
 
 #social {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: center;
   display: flex;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex-wrap: wrap;
   margin-bottom: 1em;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
 }
 
 #social a {
@@ -7100,18 +6237,12 @@ html.route-index #carbon {
   position: absolute;
   right: 0;
   top: 0;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   content: attr(title);
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   font-family: "Inconsolata", "Consolas", "Monaco", monospace;
   font-size: 11px;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
   padding: 3px 5px;
   z-index: 2;
 }
@@ -7121,13 +6252,8 @@ html.route-index #carbon {
 }
 
 .structure-item.is-structure-container:after {
-  -webkit-box-align: start;
-      -ms-flex-align: start;
-              -ms-grid-row-align: flex-start;
-          align-items: flex-start;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  align-items: flex-start;
+  justify-content: flex-start;
   padding: 5px 10px;
 }
 
index 73bebe8b2cee3b18ba4cbb2a91357d1e2b80667c..fea681cf5f2f6f3160e48c310d625f146723cdcd 100644 (file)
@@ -458,10 +458,6 @@ doc-subtab: variables
         <td><code>$size-large</code></td>
         <td>$size-3</td>
       </tr>
-      <tr>
-        <td><code>$size-huge</code></td>
-        <td>$size-1</td>
-      </tr>
 
       <tr><th colspan="2">4. Lists and maps</th></tr>
       <tr>
index 52ac6f25d92ef60f04dcd88ba1b2f6bec6904597..34264e0f7cb0c87c2cb48f9098f162e08310c926 100644 (file)
@@ -31,13 +31,12 @@ pre
   -moz-osx-font-smoothing: auto
   -webkit-font-smoothing: auto
   font-family: $family-code
-  line-height: 1.25
 
 body
   color: $text
   font-size: 1rem
   font-weight: $weight-normal
-  line-height: 1.428571428571429
+  line-height: 1.5
 
 // Inline
 
@@ -52,16 +51,16 @@ a
 code
   background-color: $code-background
   color: $code
-  font-size: 12px
+  font-size: 0.75em
   font-weight: normal
-  padding: 1px 2px 2px
+  padding: 0.25em 0.5em 0.25em
 
 hr
   background-color: $border
   border: none
   display: block
   height: 1px
-  margin: 20px 0
+  margin: 1.5rem 0
 
 img
   max-width: 100%
@@ -86,14 +85,16 @@ strong
 pre
   background-color: $pre-background
   color: $pre
+  font-size: 0.8em
   white-space: pre
   word-wrap: normal
   code
     background-color: $pre-background
     color: $pre
     display: block
+    font-size: 1em
     overflow-x: auto
-    padding: 16px 20px
+    padding: 1.25rem 1.5rem
 
 table
   width: 100%
index db48068f16c526220b5e3e0c88f1701206750a6e..a62b39866f4b8dbce63bd1ea708a0213691ecc5b 100644 (file)
   font-size: $size-medium
   height: 32px
   line-height: 24px
-  margin-right: 10px
+  margin-right: 1rem
   min-width: 32px
   padding: 4px 8px
   text-align: center
   vertical-align: top
 
 .media-left
-  margin-right: 10px
+  margin-right: 1rem
 
 .media-right
-  margin-left: 10px
+  margin-left: 1rem
 
 .media-content
   flex-grow: 1
   display: flex
   text-align: left
   .content:not(:last-child)
-    margin-bottom: 10px
+    margin-bottom: 1rem
   .media
     border-top: 1px solid rgba($border, 0.5)
     display: flex
     padding-top: 10px
     .content:not(:last-child),
     .control:not(:last-child)
-      margin-bottom: 5px
+      margin-bottom: 0.5rem
     .media
-      padding-top: 5px
+      padding-top: 0.5rem
       & + .media
-        margin-top: 5px
+        margin-top: 0.5rem
   & + .media
     border-top: 1px solid rgba($border, 0.5)
-    margin-top: 10px
-    padding-top: 10px
+    margin-top: 1rem
+    padding-top: 1rem
   // Sizes
   &.is-large
     & + .media
-      margin-top: 20px
-      padding-top: 20px
+      margin-top: 1.4rem
+      padding-top: 1.4rem
   // Responsiveness
   +tablet
     &.is-large
       .media-number
-        margin-right: 20px
+        margin-right: 1.4rem
index 743eaf25a22167999c3cb26aca659492bc563350..1de82daf8741373c76a72ee0faef736c7390342d 100644 (file)
@@ -1,7 +1,7 @@
 .message-body
   border: 1px solid $border
   border-radius: $radius
-  padding: 12px 15px
+  padding: 0.8rem 1rem
   strong
     color: inherit
 
@@ -9,7 +9,7 @@
   background-color: $text
   border-radius: $radius $radius 0 0
   color: $text-invert
-  padding: 7px 10px
+  padding: 0.4rem 0.8rem
   strong
     color: inherit
   & + .message-body
index 276ad4082d007b2ab6bccb3cc4b1d786db743acd..8c528fec949ee62fa8a10a5e42143381eaf3a1ca 100644 (file)
@@ -4,7 +4,7 @@
   border-radius: $radius-large
   box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
   display: block
-  padding: 20px
+  padding: 1.25rem
 
 a.box
   &:hover,
index 88ad81132fc1880a21bed81c90f17652c39fa0ca..3926c961028a0fc78907414a2c808785cb5aee1c 100644 (file)
@@ -1,37 +1,22 @@
 =button-small
   border-radius: $radius-small
-  font-size: 11px
-  height: 24px
-  line-height: 16px
-  padding-left: 6px
-  padding-right: 6px
+  font-size: $size-small
 =button-medium
-  font-size: 18px
-  height: 40px
-  padding-left: 14px
-  padding-right: 14px
+  font-size: $size-medium
 =button-large
-  font-size: 22px
-  height: 48px
-  padding-left: 20px
-  padding-right: 20px
+  font-size: $size-large
 
 .button
   +control
   +unselectable
   cursor: pointer
   justify-content: center
-  padding-left: 10px
-  padding-right: 10px
+  padding-left: 1em
+  padding-right: 1em
   text-align: center
   white-space: nowrap
   strong
     color: inherit
-  small
-    display: block
-    font-size: $size-small
-    line-height: 1
-    margin-top: 5px
   .icon,
   .tag
     &:first-child
index 1973c89a3b31fa2fcff3cd989f4332fc95b80f66..c0bf997224f423dbed305069cc32328f2632004f 100644 (file)
   h5,
   h6
     color: $text-strong
-    font-weight: 300
+    font-weight: $weight-title-normal
     line-height: 1.125
-    margin-bottom: 20px
-  h1,
-  h2,
-  h3
-    &:not(:first-child)
-      margin-top: 40px
-  blockquote
-    background-color: $background
-    border-left: 5px solid $border
-    padding: 1.5em
   h1
     font-size: 2em
+    margin-bottom: 0.5em
+    &:not(:first-child)
+      margin-top: 1em
   h2
     font-size: 1.75em
+    margin-bottom: 0.5714em
+    &:not(:first-child)
+      margin-top: 1.1428em
   h3
     font-size: 1.5em
+    margin-bottom: 0.6666em
+    &:not(:first-child)
+      margin-top: 1.3333em
   h4
     font-size: 1.25em
+    margin-bottom: 0.8em
   h5
     font-size: 1.125em
+    margin-bottom: 0.8888em
   h6
     font-size: 1em
+    margin-bottom: 1em
+  blockquote
+    background-color: $background
+    border-left: 5px solid $border
+    padding: 1.25em 1.5em
   ol
     list-style: decimal outside
     margin-left: 2em
       ul
         list-style-type: square
   // Sizes
+  &.is-small
+    font-size: $size-small
   &.is-medium
-    font-size: $size-5
-    code
-      font-size: $size-6
+    font-size: $size-medium
   &.is-large
-    font-size: $size-4
-    code
-      font-size: $size-5
+    font-size: $size-large
index a480178fbc4a4f8854a60dae59a107d15413985a..a2ad0e0ec816dae765399b3f0fccb953a24d6d58 100644 (file)
@@ -42,7 +42,7 @@
 .radio
   cursor: pointer
   display: inline-block
-  line-height: 16px
+  line-height: 1em
   position: relative
   vertical-align: top
   input
 
 .radio
   & + .radio
-    margin-left: 10px
+    margin-left: 0.5em
 
 .select
   display: inline-block
-  height: 32px
+  height: 2.5em
   position: relative
   vertical-align: top
   select
@@ -69,7 +69,7 @@
     cursor: pointer
     display: block
     outline: none
-    padding-right: 36px
+    padding-right: 2.5em
     &:hover
       border-color: $control-hover-border
     &::ms-expand
       width: 100%
   &:after
     +arrow($control-active)
-    margin-top: -6px
+    margin-top: -4px
     right: 16px
     top: 50%
   &:hover
     &:after
       border-color: $control-hover
-  &.is-small
-    height: 24px
-    select
-      +control-small
-      padding-right: 28px
-  &.is-medium
-    height: 40px
-    select
-      +control-medium
-      padding-right: 44px
-  &.is-large
-    height: 48px
-    select
-      +control-large
-      padding-right: 52px
 
 .label
   color: $control
   display: block
   font-weight: bold
   &:not(:last-child)
-    margin-bottom: 5px
+    margin-bottom: 0.5em
 
 .help
   display: block
 
 .control-label
   +mobile
-    margin-bottom: 5px
+    margin-bottom: 0.5em
   +tablet
     flex-basis: 0
     flex-grow: 1
     flex-shrink: 0
-    margin-right: 20px
-    padding-top: 7px
+    margin-right: 1.5em
+    padding-top: 0.5em
     text-align: right
 
 .control
index 952b79b7ec6a55b1ce97e5d8c990d6ecc5f2b878..91fe93c73ab0404d2745384a3a394043e70b1760 100644 (file)
@@ -43,8 +43,7 @@
 
 .highlight
   +block
-  font-size: 12px
-  font-weight: normal
+  font-weight: $weight-normal
   max-width: 100%
   overflow: hidden
   padding: 0
index 9e615ebc9d498077863f944be4a96bd9cedd73c6..dae80ab0e9cd3dad9ce1b5890eb3efd8221273b1 100644 (file)
 .title
   color: $text-strong
   font-size: $size-large
-  line-height: 1
-  code
-    display: inline-block
-    font-size: $size-large
+  line-height: 1.125
   strong
     color: inherit
   & + .highlight
-    margin-top: -10px
+    margin-top: -0.75rem
   & + .subtitle
-    margin-top: -10px
+    margin-top: -1.25rem
   // Colors
   @each $size in $sizes
     $i: index($sizes, $size)
     &.is-#{$i}
       font-size: $size
-      code
-        font-size: nth($sizes, min($i + 1, 6))
   // Modifiers
   &.is-normal
-    font-weight: 400
+    font-weight: $weight-normal
     strong
-      font-weight: 700
-  // Responsiveness
-  +tablet
-    & + .subtitle
-      margin-top: -15px
+      font-weight: $weight-bold
 
 .subtitle
   color: $text
   font-size: $size-medium
-  line-height: 1.125
-  code
-    border-radius: $radius
-    display: inline-block
-    font-size: $size-normal
-    padding: 2px 3px
-    vertical-align: top
+  line-height: 1.25
   strong
     color: $text-strong
   & + .title
-    margin-top: -20px
+    margin-top: -1.4rem
   // Colors
   @each $size in $sizes
     $i: index($sizes, $size)
     &.is-#{$i}
       font-size: $size
-      code
-        font-size: nth($sizes, min($i + 1, 6))
   // Modifiers
   &.is-normal
-    font-weight: 400
+    font-weight: $weight-normal
     strong
-      font-weight: 700
+      font-weight: $weight-bold
index 02cf8deac1560d46011ac3c5390446d66ca12860..528233b42c714491ecdce7c49fe2d5755972f10d 100644 (file)
@@ -28,14 +28,15 @@ $control-icon-active: $grey-light !default
   background-color: $control-background
   border: 1px solid $control-border
   border-radius: $control-radius
+  box-shadow: none
   color: $control
   display: inline-flex
   font-size: $control-size
-  height: 32px
+  height: 2.5em
   justify-content: flex-start
-  line-height: 24px
-  padding-left: 8px
-  padding-right: 8px
+  line-height: 1.5
+  padding-left: 0.75em
+  padding-right: 0.75em
   position: relative
   vertical-align: top
   &:hover
@@ -56,20 +57,8 @@ $control-icon-active: $grey-light !default
 
 =control-small
   border-radius: $control-radius-small
-  font-size: 11px
-  height: 24px
-  line-height: 16px
-  padding-left: 6px
-  padding-right: 6px
+  font-size: $size-small
 =control-medium
-  font-size: 18px
-  height: 40px
-  line-height: 32px
-  padding-left: 10px
-  padding-right: 10px
+  font-size: $size-medium
 =control-large
-  font-size: 24px
-  height: 48px
-  line-height: 40px
-  padding-left: 12px
-  padding-right: 12px
+  font-size: $size-large
index feca388a6f3e22459e51258ee323a1502ecac0f2..d9737990c76fbc0ce3d3c90568ec95cd17c0aaed 100644 (file)
@@ -12,7 +12,7 @@
 
 =block
   &:not(:last-child)
-    margin-bottom: 20px
+    margin-bottom: 1.5rem
 
 =clearfix
   &:after
index 3d5b43740b2be2ed52ad848364d83106618f320b..59aafef4573883c802ecbdeaecbd633cc84de0dc 100644 (file)
@@ -29,14 +29,14 @@ $red:          hsl(348, 100%, 61%) !default
 $family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
 $family-monospace: "Inconsolata", "Consolas", "Monaco", monospace !default
 
-$size-1: 48px !default
-$size-2: 40px !default
-$size-3: 28px !default
-$size-4: 24px !default
-$size-5: 18px !default
-$size-6: 14px !default
+$size-1: 3.5rem !default
+$size-2: 2.5rem !default
+$size-3: 1.75rem !default
+$size-4: 1.5rem !default
+$size-5: 1.25rem !default
+$size-6: 16px !default
 
-$size-7: 11px !default
+$size-7: 0.875rem !default
 
 $weight-normal: 400 !default
 $weight-bold: 700 !default
@@ -70,12 +70,10 @@ $dark: $grey-darker !default
 
 // Invert colors
 $primary-invert: findColorInvert($primary) !default
-
 $info-invert: findColorInvert($info) !default
 $success-invert: findColorInvert($success) !default
 $warning-invert: findColorInvert($warning) !default
 $danger-invert: findColorInvert($danger) !default
-
 $light-invert: $dark !default
 $dark-invert: $light !default
 
@@ -119,8 +117,7 @@ $family-code: $family-monospace !default
 $size-small: $size-7 !default
 $size-normal: $size-6 !default
 $size-medium: $size-5 !default
-$size-large: $size-3 !default
-$size-huge: $size-1 !default
+$size-large: $size-4 !default
 
 ////////////////////////////////////////////////
 ////////////////////////////////////////////////