Merge pull request #264 from Vizzuality/fix/tpi/home-page-hero-styles

Fix/tpi/home page hero styles
Vizzuality · Mar 13, 2020 · e393d8c · e393d8c
2 parents d0822f8 + df1a2f5
commit e393d8c
Show file tree

Hide file tree

Showing 9 changed files with 1,240 additions and 131 deletions.
diff --git a/app/assets/images/homepage/homepage-dot-pattern.png b/app/assets/images/homepage/homepage-dot-pattern.png
diff --git a/app/assets/images/homepage/homepage_pattern.svg b/app/assets/images/homepage/homepage_pattern.svg
diff --git a/app/assets/stylesheets/tpi.scss b/app/assets/stylesheets/tpi.scss
@@ -43,6 +43,14 @@ html {
   scroll-behavior: smooth;
 }
 
+body {
+  overflow-x: hidden;
+
+  @include desktop {
+    overflow-x: visible;
+  }
+}
+
 :root {
   --fixed-navbar-height: 56px;
 }
@@ -55,4 +63,4 @@ html {
   @include desktop {
     margin-right: -0.75rem;
   }
-}
+}
diff --git a/app/assets/stylesheets/tpi/_hero.scss b/app/assets/stylesheets/tpi/_hero.scss
@@ -1,78 +1,153 @@
 @import "colors";
 @import "typography";
 
+$home-background: image-url("homepage/homepage-bg@2x.jpg");
+
 .tpi-home__hero {
   color: $white;
   position: relative;
-  overflow: hidden;
-  min-height: 500px;
   display: flex;
-  align-items: center;
+  overflow: hidden;
 
   &.is-primary {
-    background: $blue-dark;
-  }
+    padding: 0;
+    background: $blue-ribbon;
+
+    @include from($tablet) {
+      min-height: 500px;
+    }
+
+    @include mobile {
+      height: 340px;
+      max-height: 340px;
+
+      & > .container > .columns {
+        z-index: 1;
+        position: relative;
+      }
+    }
 
-  .hero__body {
-    .hero__content {
-      align-items: center;
+    .mobile-background {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      width: 100%;
+      height: 100%;
+      background-image: $home-background;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: cover;
+      opacity: .2;
+      filter: grayscale(100%);
+      z-index: 0;
+    }
 
-      .title {
-        color: $white;
+    .left-size {
+      @include mobile {
+        margin: 26px 15px 43px;
       }
 
-      .description {
-        line-height: $size-4;
-        display: flex;
-        justify-content: center;
-        width: 60%;
+      @include from($tablet) {
+        margin: 80px 0;
+      }
 
-        @media #{$tablet-portrait} {
-          justify-content: left;
-          width: 100%;
-        }
+      @include tablet {
+        margin-left: 20px;
       }
     }
-  }
 
-  .button__container {
-    display: flex;
-    margin-top: 50px;
-    justify-content: center;
+    .title {
+      color: $white;
+    }
+
+    .description {
+      display: flex;
+      justify-content: center;
+      line-height: $size-4;
 
-    @media #{$tablet-portrait} {
-      justify-content: left;
+      @media #{$tablet-portrait} {
+        justify-content: left;
+        width: 100%;
+      }
     }
 
-    .button__hero {
-      @extend .is-medium;
+    .button__container {
+      display: flex;
+      justify-content: center;
+
+      @include mobile {
+        margin-top: 20px;
+      }
+
+      @include from($tablet) {
+        margin-top: 50px;
+        justify-content: left;
+      }
+
+      .button__hero {
+        @extend .is-medium, .is-fullwidth;
 
-      height: 5rem;
-      background-color: $blue-darker;
+        height: 3.125rem;
+        width: 100%;
 
-      &:focus, &.is-focused {
+        @include from($tablet) {
+          height: 5rem;
+          width: 280px;
+          max-width: 280px;
+          margin: 0;
+        }
 
-        $padding: calc(4.125rem - #{$button-border-width});
-        padding-left: $padding;
-        padding-right: $padding;
+        background-color: $blue-darker;
       }
     }
   }
 
   .hero__splash {
-    position: absolute;
-    top: 0;
-    left: 45%;
+    & > .background {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background: $home-background;
+      background-size: cover;
+      background-position: center;
+      background-repeat: no-repeat;
+      overflow: hidden;
+      max-width: 720px;
+
+      &::after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        content: " ";
+        height: 50%;
+        background-image: image-url("homepage/homepage_pattern.svg");
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-position-x: right;
+        background-position-y: -10px;
+      }
+    }
   }
 
-
   &.is-secondary {
     background: $blue;
-    background-image: image-url('hero_background_dark.svg');
-    background-position: -50px -100px;
+    background-image: image-url('homepage/homepage-dot-pattern.png');
+    background-position: -60px -60px;
     background-repeat: no-repeat;
     background-size: contain;
 
+    @include until($desktop) {
+      padding-top: 1.5rem;
+    }
+
+    @include from($tablet) {
+      padding-top: 80px;
+      padding-bottom: 80px;
+    }
 
     .button__icon {
       background: $blue-darker;
@@ -81,6 +156,18 @@
 }
 
 .section-clickable {
+  margin: 20px 0 30px;
+
+  @include until($desktop) {
+    margin: 0;
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
   &:hover {
     .subsection-button__container {
       .section-button {
@@ -93,6 +180,11 @@
       }
     }
   }
+
+  .subsection-content__container {
+    display: flex;
+    flex-direction: column;
+  }
 }
 
 .section-title {
@@ -103,10 +195,6 @@
 .section-description {
   margin-bottom: 20px;
   color: $white;
-
-  @media #{$tablet-portrait} {
-    margin-bottom: 64px;
-  }  
 }
 
 .section-button {
@@ -130,12 +218,7 @@
   display: flex;
   align-items: center;
   color: $white;
-  position: unset;
-
-  @media #{$tablet-portrait} {
-    position: absolute;
-    bottom: 0;
-  }
+  bottom: 20px;
 }
 
 .button__title {
@@ -144,77 +227,44 @@
   color: $white;
 }
 
-.section-separator {
-  border-right: none;
-  margin-bottom: 30px;
-
-  @media #{$tablet-portrait} {
-    border-right: 1px solid rgba($white, 0.5);
-    margin-bottom: 0;
-  }
-}
-
-.right-column {
-  padding: 0.75rem;
-
-  @media #{$tablet-portrait} {
-    padding: 0.75rem 2.75rem;
-  }  
-}
-
-.first-tpi-section {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  max-height: 950px;
-  background-color: $blue-ribbon;
-  color: $white;
-  overflow: hidden;
-  min-height: 500px;
-
-  &.is-primary {
-    background: $blue-dark;
-  }
+.separator {
+  opacity: 0.5;
 
-  .button__hero {
-    @extend .is-medium;
-
-    height: 5rem;
-    width: 280px;
-    background-color: $blue-darker;
+  @include from($tablet) {
+    width: 1px;
+    height: 100%;
+    border-left: 1px solid $white;
   }
 
-  .title {
-    color: $white;
+  @include mobile {
+    width: 85%;
+    height: 2px;
+    border-top: 1px solid $white;
   }
 
-  .description {
-    line-height: $size-4;
-    margin-bottom: 50px;
+  &__container {
     display: flex;
+    align-items: center;
     justify-content: center;
-
-    width: 60%;
-
-    @media #{$tablet-portrait} {
-      justify-content: left;
-      width: 100%;
-    }
   }
+}
+
+.right-column {
+  padding: 0.75rem;
 
   @media #{$tablet-portrait} {
-    flex-direction: row;
+    padding: 0.75rem 2.75rem;
   }
 }
 
 .column-left {
   flex: 50%;
   margin-bottom: 70px;
+  margin-top: 50px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin-top: 50px;
 
   @media #{$tablet-portrait} {
     margin-bottom: 0;

diff --git a/app/assets/stylesheets/tpi/_typography.scss b/app/assets/stylesheets/tpi/_typography.scss
@@ -1,3 +1,5 @@
+@import "bulma/sass/utilities/all";
+
 @font-face {
   font-family: "BrownTT Regular";
   src: font-url("BrownTT-Regular.ttf") format("truetype");
@@ -50,4 +52,4 @@ h5, h6 {
 
 small {
   @extend .is-size-7;
-}
+}
diff --git a/app/assets/stylesheets/tpi/buttons.scss b/app/assets/stylesheets/tpi/buttons.scss
@@ -45,6 +45,7 @@ $button-border-width: 4px;
     justify-content: center;
     align-items: center;
     height: $button-height;
+    background-color: $primary;
 
     &.is-small {
       border-radius: 0;