Add hero parts

diff --git a/bulma/layout/hero.sass b/bulma/layout/hero.sass
index 40a9a75e44d4062f0ecbe4cd191d5a89e1dcd311..920cc178bbc9e4bcb46288a819e31724f8d2231a 100644 (file)
--- a/bulma/layout/hero.sass
+++ b/bulma/layout/hero.sass
@@ -1,8 +1,24 @@
+.hero-content
+  padding: 40px 20px
+  +desktop
+    padding: 40px 0
+
+.hero-buttons
+  margin-top: 20px
+  +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
   text-align: center
-  & > .container
-    padding: 40px 20px
   a
     color: inherit
   .header
@@ -19,9 +35,6 @@
       a
         border: none
         padding: 6px 12px
-  +desktop
-    & > .container
-      padding: 40px 0
   &.is-alt
     background: $background
     color: $text-light
@@ -98,15 +111,9 @@
         &.is-boxed
           a
             padding: 12px 16px
-  &.is-fullheight
-    align-items: center
-    display: flex
-    height: 100vh
-    .tabs
-      white-space: normal
   &.is-medium
     +tablet
-      & > .container
+      .hero-content
         padding: 120px 20px
       .title
         font-size: 40px
@@ -115,29 +122,27 @@
       .tabs
         font-size: 16px
     +desktop
-      & > .container
+      .hero-content
         padding: 120px 0
   &.is-large
     +tablet
-      & > .container
+      .hero-content
         padding: 240px 20px
     +desktop
-      & > .container
+      .hero-content
         padding: 240px 0
+  &.is-fullheight
+    align-items: stretch
+    display: flex
+    flex-direction: column
+    height: 100vh
+    justify-content: space-between
+    .hero-content
+      display: flex
+      flex: 1
+      flex-direction: column
+      justify-content: center
   &.is-left
     text-align: left
   &.is-right
     text-align: right
-
-.hero-buttons
-  margin-top: 20px
-  +mobile
-    .button
-      display: block
-      &:not(:last-child)
-        margin-bottom: 10px
-  +tablet
-    display: flex
-    justify-content: center
-    .button:not(:last-child)
-      margin-right: 20px