Add column gap variable, Fix hamburger

bulma/components/grid.sass

@@ -1,11 +1,12 @@
 .column
+  overflow: hidden
   +mobile
     & + .column
-      margin-top: 20px
+      margin-top: $column-gap
   +tablet
     flex: 1
     & + .column
-      margin-left: 20px
+      margin-left: $column-gap
     &.is-double
       flex: 2
     &.is-triple
@@ -28,7 +29,7 @@
 
 .columns
   &:not(:last-child)
-    margin-bottom: 20px
+    margin-bottom: $column-gap
   +tablet
     display: flex
   &.is-gapless

bulma/components/media.sass

@@ -25,13 +25,27 @@
   +tablet
     margin-right: 10px
 
+.media-left
+  +mobile
+    margin-bottom: 20px
+  +tablet
+    margin-right: 20px
+
+.media-right
+  +mobile
+    margin-top: 20px
+  +tablet
+    margin-left: 20px
+
 .media-content
   flex: 1
+  text-align: left
   .textarea
     min-height: 60px
 
 .media
   align-items: flex-start
+  text-align: left
   .content:not(:last-child)
     margin-bottom: 10px
   .media

bulma/config/variables.sass

@@ -33,6 +33,8 @@ $size-7: 11px
 
 // Dimensions
 
+$column-gap: 20px
+
 $header-height: 50px
 
 // Miscellaneous

bulma/elements/elements.sass

@@ -55,9 +55,9 @@
 .hamburger
   cursor: pointer
   display: block
-  height: $header-height
+  height: 50px
   position: relative
-  width: $header-height
+  width: 50px
   span
     background: $text
     display: block
@@ -90,6 +90,9 @@
         margin-left: -5px
         transform: rotate(-45deg)
         transform-origin: left bottom
+  +tablet
+    height: $header-height
+    width: $header-height
 
 .heading
   display: block

bulma/layout/header.sass

@@ -3,7 +3,7 @@
   background: white
   box-shadow: 0 1px 2px rgba(black, 0.1)
   display: flex
-  height: $header-height
+  height: 50px
   line-height: 24px
   position: relative
   text-align: center
@@ -13,6 +13,8 @@
     box-shadow: 0 1px 0 rgba($border, 0.3)
     display: flex
     width: 100%
+  +tablet
+    height: $header-height
 
 .header-toggle
   @extend .hamburger
@@ -109,9 +111,10 @@
     background: white
     box-shadow: 0 4px 7px rgba(black, 0.1)
     display: none
+    min-width: 120px
     position: absolute
     right: 0
-    top: $header-height
+    top: 50px
     z-index: 100
     .header-item
       border-top: 1px solid rgba($border, 0.5)

css/bulma.css

@@ -758,7 +758,7 @@ table th {
   resize: vertical;
 }
 
-.checkbox, .menu-checkbox, .radio {
+.checkbox, .radio {
   cursor: pointer;
   display: inline-block;
   line-height: 16px;
@@ -767,7 +767,7 @@ table th {
   vertical-align: top;
 }
 
-.checkbox input, .menu-checkbox input, .radio input {
+.checkbox input, .radio input {
   -moz-appearance: none;
   -webkit-appearance: none;
   background: white;
@@ -794,37 +794,37 @@ table th {
   width: 14px;
 }
 
-.checkbox input:hover, .menu-checkbox input:hover, .radio input:hover {
+.checkbox input:hover, .radio input:hover {
   border-color: #aeb1b5;
 }
 
-.checkbox input:active, .menu-checkbox input:active, .radio input:active, .checkbox input:focus, .menu-checkbox input:focus, .radio input:focus {
+.checkbox input:active, .radio input:active, .checkbox input:focus, .radio input:focus {
   border-color: #1fc8db;
   outline: none;
 }
 
-.checkbox input[disabled], .menu-checkbox input[disabled], .radio input[disabled], .checkbox input[disabled]:hover, .menu-checkbox input[disabled]:hover, .radio input[disabled]:hover {
+.checkbox input[disabled], .radio input[disabled], .checkbox input[disabled]:hover, .radio input[disabled]:hover {
   background: #f5f7fa;
   border-color: #d3d6db;
 }
 
-.checkbox input[disabled]::-moz-placeholder, .menu-checkbox input[disabled]::-moz-placeholder, .radio input[disabled]::-moz-placeholder, .checkbox input[disabled]:hover::-moz-placeholder, .menu-checkbox input[disabled]:hover::-moz-placeholder, .radio input[disabled]:hover::-moz-placeholder {
+.checkbox input[disabled]::-moz-placeholder, .radio input[disabled]::-moz-placeholder, .checkbox input[disabled]:hover::-moz-placeholder, .radio input[disabled]:hover::-moz-placeholder {
   color: rgba(34, 35, 36, 0.3);
 }
 
-.checkbox input[disabled]::-webkit-input-placeholder, .menu-checkbox input[disabled]::-webkit-input-placeholder, .radio input[disabled]::-webkit-input-placeholder, .checkbox input[disabled]:hover::-webkit-input-placeholder, .menu-checkbox input[disabled]:hover::-webkit-input-placeholder, .radio input[disabled]:hover::-webkit-input-placeholder {
+.checkbox input[disabled]::-webkit-input-placeholder, .radio input[disabled]::-webkit-input-placeholder, .checkbox input[disabled]:hover::-webkit-input-placeholder, .radio input[disabled]:hover::-webkit-input-placeholder {
   color: rgba(34, 35, 36, 0.3);
 }
 
-.checkbox input[disabled]:-moz-placeholder, .menu-checkbox input[disabled]:-moz-placeholder, .radio input[disabled]:-moz-placeholder, .checkbox input[disabled]:hover:-moz-placeholder, .menu-checkbox input[disabled]:hover:-moz-placeholder, .radio input[disabled]:hover:-moz-placeholder {
+.checkbox input[disabled]:-moz-placeholder, .radio input[disabled]:-moz-placeholder, .checkbox input[disabled]:hover:-moz-placeholder, .radio input[disabled]:hover:-moz-placeholder {
   color: rgba(34, 35, 36, 0.3);
 }
 
-.checkbox input[disabled]:-ms-input-placeholder, .menu-checkbox input[disabled]:-ms-input-placeholder, .radio input[disabled]:-ms-input-placeholder, .checkbox input[disabled]:hover:-ms-input-placeholder, .menu-checkbox input[disabled]:hover:-ms-input-placeholder, .radio input[disabled]:hover:-ms-input-placeholder {
+.checkbox input[disabled]:-ms-input-placeholder, .radio input[disabled]:-ms-input-placeholder, .checkbox input[disabled]:hover:-ms-input-placeholder, .radio input[disabled]:hover:-ms-input-placeholder {
   color: rgba(34, 35, 36, 0.3);
 }
 
-.checkbox input:after, .menu-checkbox input:after, .radio input:after {
+.checkbox input:after, .radio input:after {
   border: 1px solid white;
   border-right: 0;
   border-top: 0;
@@ -843,29 +843,29 @@ table th {
   transform: rotate(-45deg) scale(1);
 }
 
-.checkbox input:checked, .menu-checkbox input:checked, .radio input:checked {
+.checkbox input:checked, .radio input:checked {
   background: #1fc8db;
   border-color: #1fc8db;
   box-shadow: none;
 }
 
-.checkbox input:checked:after, .menu-checkbox input:checked:after, .radio input:checked:after {
+.checkbox input:checked:after, .radio input:checked:after {
   opacity: 1;
 }
 
-.checkbox:hover, .menu-checkbox:hover, .radio:hover {
+.checkbox:hover, .radio:hover {
   color: #222324;
 }
 
-.checkbox:hover input, .menu-checkbox:hover input, .radio:hover input {
+.checkbox:hover input, .radio:hover input {
   border-color: #aeb1b5;
 }
 
-.checkbox:hover input:checked, .menu-checkbox:hover input:checked, .radio:hover input:checked {
+.checkbox:hover input:checked, .radio:hover input:checked {
   border-color: #1fc8db;
 }
 
-.is-disabled.checkbox, .is-disabled.menu-checkbox, .is-disabled.radio, .is-disabled.checkbox:hover, .is-disabled.menu-checkbox:hover, .is-disabled.radio:hover {
+.is-disabled.checkbox, .is-disabled.radio, .is-disabled.checkbox:hover, .is-disabled.radio:hover {
   color: #aeb1b5;
 }
 
@@ -1855,6 +1855,23 @@ table th {
   margin: -16px -20px 0 20px;
 }
 
+.highlight {
+  font-size: 12px;
+  font-weight: normal;
+  max-width: 100%;
+  overflow: hidden;
+  padding: 0;
+}
+
+.highlight:not(:last-child) {
+  margin-bottom: 20px;
+}
+
+.highlight pre {
+  overflow: auto;
+  max-width: 100%;
+}
+
 .delete {
   background: rgba(0, 0, 0, 0.2);
   border-radius: 290486px;
@@ -1949,6 +1966,7 @@ table th {
   cursor: pointer;
   display: block;
   height: 50px;
+  padding: 19px 17px;
   position: relative;
   width: 50px;
 }
@@ -1957,25 +1975,23 @@ table th {
   background: #69707a;
   display: block;
   height: 1px;
-  left: 50%;
+  left: 17px;
-  margin-left: -7px;
   position: absolute;
-  top: 50%;
   transition: none 86ms ease-out;
   transition-property: background, left, opacity, transform;
   width: 15px;
 }
 
 .hamburger span:nth-child(1), .header-toggle span:nth-child(1) {
-  margin-top: -6px;
+  top: 19px;
 }
 
 .hamburger span:nth-child(2), .header-toggle span:nth-child(2) {
-  margin-top: -1px;
+  top: 24px;
 }
 
 .hamburger span:nth-child(3), .header-toggle span:nth-child(3) {
-  margin-top: 4px;
+  bottom: 20px;
 }
 
 .hamburger:hover, .header-toggle:hover {
@@ -1987,7 +2003,7 @@ table th {
 }
 
 .hamburger.is-active span:nth-child(1), .is-active.header-toggle span:nth-child(1) {
-  margin-left: -5px;
+  left: 20px;
   transform: rotate(45deg);
   transform-origin: left top;
 }
@@ -1997,7 +2013,7 @@ table th {
 }
 
 .hamburger.is-active span:nth-child(3), .is-active.header-toggle span:nth-child(3) {
-  margin-left: -5px;
+  left: 20px;
   transform: rotate(-45deg);
   transform-origin: left bottom;
 }
@@ -2010,43 +2026,6 @@ table th {
   text-transform: uppercase;
 }
 
-.highlight {
-  font-size: 12px;
-  font-weight: normal;
-  max-width: 100%;
-  overflow: hidden;
-  padding: 0;
-}
-
-.highlight:not(:last-child) {
-  margin-bottom: 20px;
-}
-
-.highlight pre {
-  overflow: auto;
-  max-width: 100%;
-}
-
-.image {
-  display: block;
-  position: relative;
-  vertical-align: top;
-}
-
-.image img {
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  display: block;
-  width: 100%;
-}
-
-.image.is-3x2 {
-  padding-top: 66.6666%;
-}
-
 .loader, .control.is-loading:after, .button.is-loading:after {
   animation: spin-around 500ms infinite linear;
   border: 2px solid #d3d6db;
@@ -2237,7 +2216,7 @@ table th {
 }
 
 .columns.is-gapless > .column + .column {
-  margin: 0;
+  margin-left: 0;
 }
 
 .columns.is-vcentered {
@@ -2784,119 +2763,6 @@ table th {
   }
 }
 
-.menu-icon {
-  display: inline-block;
-  font-size: 14px;
-  height: 16px;
-  line-height: 16px;
-  text-align: center;
-  vertical-align: top;
-  width: 16px;
-  color: #aeb1b5;
-  float: left;
-  margin: 0 4px 0 -2px;
-}
-
-.menu-icon .fa {
-  font-size: inherit;
-  line-height: inherit;
-}
-
-.menu-heading {
-  background: #f5f7fa;
-  border-bottom: 1px solid #d3d6db;
-  border-radius: 4px 4px 0 0;
-  color: #222324;
-  font-size: 18px;
-  font-weight: 300;
-  padding: 10px;
-}
-
-.menu-list a {
-  color: #69707a;
-}
-
-.menu-list a:hover {
-  color: #1fc8db;
-}
-
-.menu-tabs {
-  display: flex;
-  font-size: 11px;
-  padding: 5px 10px 0;
-  justify-content: center;
-}
-
-.menu-tabs:not(:last-child) {
-  border-bottom: 1px solid #d3d6db;
-}
-
-.menu-tabs a {
-  border-bottom: 1px solid #d3d6db;
-  margin-bottom: -1px;
-  padding: 5px;
-}
-
-.menu-tabs a.is-active {
-  border-bottom-color: #222324;
-  color: #222324;
-}
-
-.menu-block {
-  color: #222324;
-  display: block;
-  line-height: 16px;
-  padding: 10px;
-}
-
-.menu-block:not(:last-child) {
-  border-bottom: 1px solid #d3d6db;
-}
-
-.menu-block .checkbox, .menu-block .menu-checkbox {
-  border: 1px solid transparent;
-  border-radius: 3px;
-  display: block;
-  padding: 8px;
-  padding-left: 32px;
-}
-
-.menu-block .checkbox input, .menu-block .menu-checkbox input {
-  left: 9px;
-  top: 9px;
-}
-
-.menu-block .checkbox:hover, .menu-block .menu-checkbox:hover {
-  border-color: #1fc8db;
-}
-
-a.menu-block:hover {
-  background: #f5f7fa;
-}
-
-.menu-checkbox {
-  display: block;
-  padding: 9px 10px 9px 30px;
-}
-
-.menu-checkbox:not(:last-child) {
-  border-bottom: 1px solid #d3d6db;
-}
-
-.menu-checkbox input {
-  left: 8px;
-  top: 10px;
-}
-
-.menu {
-  border: 1px solid #d3d6db;
-  border-radius: 5px;
-}
-
-.menu:not(:last-child) {
-  margin-bottom: 20px;
-}
-
 .block:not(:last-child) {
   margin-bottom: 20px;
 }
@@ -3743,8 +3609,8 @@ a.menu-block:hover {
   align-items: stretch;
   display: flex;
   flex-direction: column;
+  height: 100vh;
   justify-content: space-between;
-  min-height: 100vh;
 }
 
 .hero.is-fullheight .tabs a {