Rename bulma folder to sass

sass/layout/hero.sass

@@ -0,0 +1,155 @@
+.hero-video
+  +overlay
+  overflow: hidden
+  video
+    left: 50%
+    min-height: 100%
+    min-width: 100%
+    position: absolute
+    top: 50%
+    transform: translate3d(-50%, -50%, 0)
+  // Modifiers
+  &.is-transparent
+    opacity: 0.3
+  // Responsiveness
+  +mobile
+    display: none
+
+.hero-content
+  padding: 40px 20px
+  // Responsiveness
+  +desktop
+    padding: 40px 0
+
+.hero-buttons
+  margin-top: 20px
+  // Responsiveness
+  +mobile
+    .button
+      display: block
+      &:not(:last-child)
+        margin-bottom: 10px
+  +tablet
+    display: flex
+    justify-content: center
+    .button:not(:last-child)
+      margin-right: 20px
+
+.hero
+  background: white
+  .header
+    background: none
+    .container
+      box-shadow: 0 1px 0 rgba($border, 0.3)
+  .tabs
+    a
+      border: none
+    ul
+      border-bottom: none
+    // Modifiers
+    &.is-boxed
+      a
+        padding: 8px 15px
+  // Colors
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      background: $color
+      color: $color-invert
+      .title
+        color: $color-invert
+        a,
+        strong
+          color: inherit
+      .subtitle
+        color: rgba($color-invert, 0.7)
+        a,
+        strong
+          color: $color-invert
+      .header .container
+        box-shadow: 0 1px 0 rgba($color-invert, 0.2)
+      .header-icon,
+      a.header-item,
+      .header-item > a:not(.button)
+        color: rgba($color-invert, 0.5)
+        &:hover,
+        &.is-active
+          color: $color-invert
+      .tabs
+        a
+          color: $color-invert
+          opacity: 0.5
+          &:hover
+            opacity: 1
+        li.is-active a
+          opacity: 1
+        &.is-boxed,
+        &.is-toggle
+          a
+            color: $color-invert
+            &:hover
+              background: rgba(black, 0.1)
+          li.is-active a
+            &,
+            &:hover
+              background: $color-invert
+              color: $color
+      // Modifiers
+      &.is-bold
+        $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
+        $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
+        background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
+      // Responsiveness
+      +mobile
+        .header-toggle
+          span
+            background: $color-invert
+          &:hover
+            background: rgba(black, 0.1)
+          &.is-active
+            span
+              background: $color-invert
+        .header-menu
+          .header-item
+            border-top-color: rgba($color-invert, 0.2)
+  // Sizes
+  &.is-fullheight,
+  &.is-large
+    // Responsiveness
+    +tablet
+      .tabs
+        font-size: $size-medium
+  &.is-medium
+    // Responsiveness
+    +tablet
+      .hero-content
+        padding: 120px 20px
+    +desktop
+      .hero-content
+        padding: 120px 0
+  &.is-fullheight
+    align-items: stretch
+    display: flex
+    flex-direction: column
+    justify-content: space-between
+    min-height: 100vh
+    .tabs
+      a
+        padding: 15px 20px
+    .hero-content
+      display: flex
+      flex: 1
+      flex-direction: column
+      justify-content: center
+  &.is-large
+    .tabs
+      a
+        padding: 10px 15px
+    // Responsiveness
+    +tablet
+      .hero-content
+        padding: 240px 20px
+    +desktop
+      .hero-content
+        padding: 240px 0