Rename bulma folder to sass

sass/layout/footer.sass

@@ -0,0 +1,11 @@
+.footer
+  background: $background
+  padding: 40px 20px 80px
+  a
+    color: $text
+    &:hover
+      color: $text-strong
+    &:not(.icon)
+      border-bottom: 1px solid $border
+      &:hover
+        border-bottom-color: $link

sass/layout/header.sass

@@ -0,0 +1,161 @@
+.header
+  +clearfix
+  background: white
+  display: flex
+  line-height: 24px
+  position: relative
+  text-align: center
+  z-index: 2
+  .container
+    align-items: stretch
+    display: flex
+    width: 100%
+  // Modifiers
+  &.has-shadow
+    box-shadow: 0 1px 2px rgba(black, 0.1)
+  // Responsiveness
+  +mobile
+    .container
+      flex-direction: column
+  +tablet
+    height: $header-height
+
+.header-toggle
+  @extend .hamburger
+  position: absolute
+  right: 0
+  top: 0
+  // Responsiveness
+  +tablet
+    display: none
+
+// Elements
+
+.header-item
+  align-items: center
+  display: flex
+  padding: 10px
+  a
+    flex-grow: 1
+  img
+    max-height: 24px
+  .button + .button
+    margin-left: 10px
+  .fa
+    font-size: 21px
+    line-height: 24px
+  .tag
+    &:first-child
+      margin-right: 5px
+    &:last-child
+      margin-left: 5px
+  // Responsiveness
+  +mobile
+    text-align: left
+
+.header-item a,
+a.header-item
+  color: $text
+  &:hover
+    color: $link-hover
+  // Modifiers
+  &.is-active
+    color: $link-active
+
+.header-icon
+  +fa(14px, 24px)
+  color: $text
+  margin: 0 5px
+  &:hover
+    color: $link-hover
+
+.header-tab
+  align-items: center
+  border-bottom: 1px solid transparent
+  color: $text
+  display: block
+  height: $header-height
+  line-height: 24px
+  padding: 13px 15px
+  &:hover
+    border-bottom: 1px solid $link
+  // Modifiers
+  &.is-active
+    border-bottom: 3px solid $link
+    color: $link
+
+// Containers
+
+.header-left
+  align-items: stretch
+  display: flex
+  flex: 1
+  overflow: hidden
+  overflow-x: auto
+  white-space: nowrap
+  // Responsiveness
+  +mobile
+    height: $header-height
+  +desktop
+    margin-left: -10px
+
+.header-right
+  align-items: stretch
+  // Responsiveness
+  +tablet
+    display: flex
+  +desktop
+    margin-right: -10px
+
+.header-full
+  align-items: stretch
+  display: flex
+  justify-content: center
+  text-align: center
+  width: 100%
+  & > .header-item
+    align-items: stretch
+    display: flex
+    flex: 1
+    justify-content: center
+    padding: 0
+    & > a
+      align-items: center
+      display: flex
+      justify-content: center
+      width: 100%
+
+.header-menu
+  // Responsiveness
+  +mobile
+    box-shadow: 0 4px 7px rgba(black, 0.1)
+    display: none
+    .header-item
+      border-top: 1px solid rgba($border, 0.5)
+      padding: 10px
+    // Modifiers
+    &.is-active
+      display: block
+
+// States
+
+.header.is-centered
+  justify-content: center
+  .header-left,
+  .header-right
+    justify-content: center
+
+.header.is-small
+  background: $background
+  box-shadow: none
+  height: 40px
+  z-index: 1
+  .container
+    height: 40px
+  .header-tab
+    font-size: 13px
+    height: 40px
+    padding: 8px 10px
+    &:hover,
+    &.is-active
+      border-bottom-width: 2px

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

sass/layout/layout.sass

@@ -0,0 +1,6 @@
+@charset "utf-8"
+
+@import "header"
+@import "hero"
+@import "section"
+@import "footer"

sass/layout/section.sass

@@ -0,0 +1,13 @@
+.section
+  background: white
+  padding: 40px 20px
+  & + .section
+    border-top: 1px solid rgba($border, 0.5)
+  // Responsiveness
+  +desktop
+    padding: 40px 0
+    // Sizes
+    &.is-medium
+      padding: 120px 0
+    &.is-large
+      padding: 240px 0