From 52cffcb04837d1c701d795cc4082f1ab966929d6 Mon Sep 17 00:00:00 2001
From: Janne Koivistoinen <janne@sharetribe.com>
Date: Wed, 20 Dec 2017 19:01:48 +0200
Subject: [PATCH] fine-tune the hero

---
 src/components/SectionHero/SectionHero.css | 21 ++++++------------
 src/containers/LandingPage/LandingPage.css | 25 +++++++++++++++++++---
 src/marketplace.css                        | 11 +++++-----
 src/marketplaceFonts.css                   | 18 ++++++++++------
 4 files changed, 45 insertions(+), 30 deletions(-)

diff --git a/src/components/SectionHero/SectionHero.css b/src/components/SectionHero/SectionHero.css
index db5d3154..81d01087 100644
--- a/src/components/SectionHero/SectionHero.css
+++ b/src/components/SectionHero/SectionHero.css
@@ -40,7 +40,11 @@
   /* Text positioning is done with paddings */
   padding: 0 24px 0 24px;
 
-  @media (min-width: 768px) {
+  @media (--viewportMedium) {
+    padding: 0 0 0 7.5vw;
+  }
+
+  @media (--viewportLarge) {
     padding: 0 0 0 15vw;
   }
 }
@@ -55,20 +59,13 @@
   @media (--viewportMedium) {
     max-width: var(--desktopTitleMaxWidth);
   }
-
-  @media (--viewportXLarge) {
-    font-size: 144px;
-    line-height: 144px;
-    max-width: 1000px;
-    margin-bottom: 60px;
-  }
 }
 
 .heroSubTitle {
   @apply --marketplaceBodyFontStyles;
 
   color: var(--matterColorLight);
-  margin: 0 0 63px 0;
+  margin: 0 0 32px 0;
 
   @apply --animationProperties;
   animation-delay: 0.65s;
@@ -77,12 +74,6 @@
     max-width: var(--desktopTitleMaxWidth);
     margin: 0 0 63px 0;
   }
-
-  @media (--viewportXLarge) {
-    font-size: 24px;
-    line-height: 36px;
-    max-width: 1000px;
-  }
 }
 
 .mobileSearchButton {
diff --git a/src/containers/LandingPage/LandingPage.css b/src/containers/LandingPage/LandingPage.css
index eb12d73a..bc466a45 100644
--- a/src/containers/LandingPage/LandingPage.css
+++ b/src/containers/LandingPage/LandingPage.css
@@ -13,10 +13,16 @@
 .heroContainer {
   display: flex;
   flex-direction: column;
-  min-height: calc(100vh - var(--topbarHeight));
+  min-height: 300px;
+  height: 67.5vh;
+  max-height: 600px;
   padding: 0;
 
   @media (--viewportMedium) {
+    min-height: 80vh;
+  }
+
+  @media (--viewportLarge) {
     min-height: calc(100vh - var(--topbarHeightDesktop));
   }
 }
@@ -24,9 +30,13 @@
 .hero {
   flex-grow: 1;
   justify-content: flex-end;
-  padding-bottom: 98px;
+  padding-bottom: 32px;
 
   @media (--viewportMedium) {
+    padding-bottom: 83px;
+  }
+
+  @media (--viewportLarge) {
     justify-content: center;
     padding-top: 60px;
   }
@@ -36,7 +46,11 @@
   margin: 0;
 
   @media (--viewportMedium) {
-    padding: 1px 30px 0 30px;
+    padding: 1px 7.5vw 0 7.5vw;
+  }
+
+  @media (--viewportLarge) {
+    padding: 1px 0px;
   }
 }
 
@@ -63,6 +77,11 @@
   margin: var(--sectionMarginTopMobile) 24px 51px 24px;
 
   @media (--viewportMedium) {
+    max-width: 1052px;
+    margin: 60px auto 60px auto;
+  }
+
+  @media (--viewportLarge) {
     max-width: 1052px;
     margin: var(--sectionMarginTop) auto 93px auto;
   }
diff --git a/src/marketplace.css b/src/marketplace.css
index dbad2ae0..b2b5fce6 100644
--- a/src/marketplace.css
+++ b/src/marketplace.css
@@ -25,11 +25,6 @@
     /* Align the image within the container */
     background-position: center center;
 
-    @media (--viewportMedium) {
-      border-radius: 28px;
-      border: solid 24px var(--matterColorBright);
-    }
-
     @media (--viewportLarge) {
       border-radius: 40px;
       border: solid 36px var(--matterColorBright);
@@ -158,7 +153,7 @@
     /* Dimensions */
     display: block;
     width: 100%;
-    min-height: 65px;
+    min-height: 59px;
     margin: 0;
 
     /* Padding is only for <a> elements where button styles are applied,
@@ -194,6 +189,10 @@
       cursor: not-allowed;
       box-shadow: none;
     }
+
+    @media (--viewportMedium) {
+      min-height: 65px;
+    }
   }
   --marketplaceButtonStylesPrimary {
     @apply --marketplaceButtonStyles;
diff --git a/src/marketplaceFonts.css b/src/marketplaceFonts.css
index 3e17dcf0..69c6e9a9 100644
--- a/src/marketplaceFonts.css
+++ b/src/marketplaceFonts.css
@@ -48,21 +48,27 @@
 
   --marketplaceHeroTitleFontStyles: {
     font-weight: var(--fontWeightBold);
-    font-size: 48px;
-    line-height: 54px;
+    font-size: 42px;
+    line-height: 42px;
     letter-spacing: -1px;
     /* margin-top + n * line-height + margin-bottom => x * 6px */
     margin-top: 25px;
-    margin-bottom: 29px;
+    margin-bottom: 20px;
 
     @media (--viewportMedium) {
-      font-size: 90px;
-      line-height: 96px;
-      letter-spacing: -2px;
+      font-size: 72px;
+      line-height: 72px;
+      letter-spacing: -1.5px;
       /* margin-top + n * line-height + margin-bottom => x * 8px */
       margin-top: 25px;
       margin-bottom: 31px;
     }
+
+    @media (min-width: 1441px) {
+      font-size: 90px;
+      line-height: 96px;
+      letter-spacing: -2px;
+    }
   }
 
   /* ================ Modal title ================ */