added brand animation. improved desktop fold view.

uptownhr · Oct 5, 2016 · 31f208e · 31f208e
1 parent c39fa64
commit 31f208e
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 28 deletions.
diff --git a/views/index.jade b/views/index.jade
@@ -4,10 +4,10 @@ block content
   section.hero.is-fullheight.fold
       .hero-body
         .container.has-text-centered
-          h1.title Schedule the perfect social media campaign
-          p Decide when and who sends out what message
+          h1.title Schedule The Perfect Social Media Campaign
+          p Create conversations by deciding when and who publishes your message
           br
-          a.button.is-primary.is-large.is-expanded CHECK OUR PRICES
+          a.button.is-primary.is-large.is-expanded.check-prices CHECK OUR PRICES
           br
           br
           a Watch the video
diff --git a/views/layout.jade b/views/layout.jade
@@ -11,8 +11,12 @@ html(lang='en')
         span
         span
         span
-      div#nav-menu.nav-left
-        a.nav-item.is-brand(href="/") YoshiMoshi
+      div.nav-menu.nav-left
+        a.nav-item Home
+      div.nav-center
+        a.nav-item.is-brand(href="/") SimpleHedron
+      div.nav-right
+
     block content
 
     script(src="//webpack.simple.docker/static/bundle.js")
diff --git a/webpack/src/index.scss b/webpack/src/index.scss
@@ -13,18 +13,25 @@ h1, h2, h3, h4 {
   font-size: 1.5rem;
 }
 
-.nav-item.is-brand {
-  font-family: 'Berkshire Swash';
-  font-weight: 700;
-  font-size: 1.75rem;
-  color: #555;
-}
-
 .nav {
   position: fixed;
   top: 0;
   width: 100%;
 
+  .nav-center {
+    min-width: 200px;
+  }
+
+  .nav-item.is-brand {
+    position: absolute;
+    top: 0;
+    transition: top 0.2s;
+    font-family: 'Berkshire Swash';
+    font-weight: 700;
+    font-size: 1.75rem;
+    color: #555;
+  }
+
   .nav-toggle {
     position: absolute;
   }
@@ -34,22 +41,10 @@ h1, h2, h3, h4 {
   padding-top: 35px;
 }
 
-
-#nav-menu {
-
-  &.nav-left {
-    justify-content: center;
-  }
-
-
-  &.is-active {
-    display: flex;
-
-  }
-}
 .hero.fold {
-
-  height: 100%;
+  position: relative;
+  min-height: 540px;
+  height: 100vh;
   background-image: url("http://lemonade.com/assets/home/index/bg-skyline-combined-ac9ca47514e7fafd574df7dcf40f78a7d146e321751f4cfb7399b078d86bcdd5.svg");
   background-position: right bottom 0px;
   background-size: auto 35%;
@@ -67,8 +62,19 @@ h1, h2, h3, h4 {
 }
 
 @include tablet {
+  .nav {
+    .nav-item.is-brand {
+      position: absolute;
+      top: 50px;
+      &.has-scrolled {
+        top: 55px;
+      }
+    }
+  }
+
+
   .hero.fold {
-    padding-top: 50px;
+    padding-top: 100px;
     background-image: none;
     h1 {
       font-size: 2rem;
@@ -99,4 +105,27 @@ h1, h2, h3, h4 {
     background-image: url("http://lemonade.com/assets/home/index/bg-skyline-combined-ac9ca47514e7fafd574df7dcf40f78a7d146e321751f4cfb7399b078d86bcdd5.svg");
     background-position: right bottom;
   }
+}
+
+@include desktop {
+  .hero.fold {
+    height: 90vh;
+
+    .hero-body {
+      align-items: center;
+    }
+
+    h1 {
+      font-size: 4rem;
+    }
+
+    p {
+      font-size: 1.75rem;
+    }
+
+    .check-prices {
+      margin-top: 30px;
+    }
+  }
+
 }