Fix global variable name clash, Fix hamburger menu, Fix grid

bulma/components/grid.sass

@@ -33,7 +33,7 @@
     display: flex
   &.is-gapless
     & > .column + .column
-      margin-left: 0
+      margin: 0
   &.is-vcentered
     align-items: center
   &.is-grid

bulma/config/variables.sass

@@ -20,6 +20,7 @@ $primary: $turquoise
 // Typography
 
 $family-sans-serif: "Helvetica Neue", "Helvetica", "Arial", sans-serif
+$family-monospace: "Source Code Pro", "Monaco", "Inconsolata", monospace
 
 $size-1: 48px
 $size-2: 40px

bulma/elements/elements.sass

@@ -6,18 +6,6 @@
 @import messages
 @import notifications
 
-.highlight
-  font-size: 12px
-  font-weight: normal
-  max-width: 100%
-  overflow: hidden
-  padding: 0
-  &:not(:last-child)
-    margin-bottom: 20px
-  pre
-    overflow: auto
-    max-width: 100%
-
 .delete
   background: rgba(black, 0.2)
   border-radius: 290486px
@@ -68,37 +56,38 @@
   cursor: pointer
   display: block
   height: $header-height
-  padding: 19px 17px
   position: relative
   width: $header-height
   span
     background: $text
     display: block
     height: 1px
-    left: 17px
+    left: 50%
+    margin-left: -7px
     position: absolute
+    top: 50%
     transition: none $speed $easing
     transition-property: background, left, opacity, transform
     width: 15px
     &:nth-child(1)
-      top: 19px
+      margin-top: -6px
     &:nth-child(2)
-      top: 24px
+      margin-top: -1px
     &:nth-child(3)
-      bottom: 20px
+      margin-top: 4px
   &:hover
     background: $background
   &.is-active
     span
       background: $link
       &:nth-child(1)
-        left: 20px
+        margin-left: -5px
         transform: rotate(45deg)
         transform-origin: left top
       &:nth-child(2)
         opacity: 0
       &:nth-child(3)
-        left: 20px
+        margin-left: -5px
         transform: rotate(-45deg)
         transform-origin: left bottom
 
@@ -109,6 +98,29 @@
   margin-bottom: 5px
   text-transform: uppercase
 
+.highlight
+  font-size: 12px
+  font-weight: normal
+  max-width: 100%
+  overflow: hidden
+  padding: 0
+  &:not(:last-child)
+    margin-bottom: 20px
+  pre
+    overflow: auto
+    max-width: 100%
+
+.image
+  display: block
+  position: relative
+  vertical-align: top
+  img
+    +overlay
+    display: block
+    width: 100%
+  &.is-3x2
+    padding-top: 66.6666%
+
 .loader
   animation: spin-around 500ms infinite linear
   border: 2px solid $border

bulma/layout/hero.sass

@@ -131,8 +131,8 @@
     align-items: stretch
     display: flex
     flex-direction: column
-    height: 100vh
     justify-content: space-between
+    min-height: 100vh
     .tabs
       a
         padding: 15px 20px

bulma/utilities/functions.sass

@@ -9,8 +9,8 @@
   @return $value
 
 @function colorLuminance($color)
-  $colors: ('red': red($color),'green': green($color),'blue': blue($color))
+  $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
-  @each $name, $value in $colors
+  @each $name, $value in $color-rgb
     $adjusted: 0
     $value: $value / 255
     @if $value < 0.03928
@@ -18,8 +18,8 @@
     @else
       $value: ($value + .055) / 1.055
       $value: powerNumber($value, 2)
-    $colors: map-merge($colors, ($name: $value))
+    $color-rgb: map-merge($color-rgb, ($name: $value))
-  @return (map-get($colors, 'red') * .2126) + (map-get($colors, 'green') * .7152) + (map-get($colors, 'blue') * .0722)
+  @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
 
 @function closestEvenNumber($number)
   @if ($number % 2 == 0px)