fixup after rebase

app/assets/stylesheets/clean.css.erb

@@ -18,10 +18,26 @@
     font-weight: normal;
     font-style: normal;
 }
-
-.backface-visible {
-	-webkit-backface-visibility: visible !important;
-    backface-visibility: visible !important;
+@font-face {
+    font-family: 'noto-sans-regular';
+    src: url(<%= asset_path 'Fonts/notosansui-regular-webfont.woff2' %>) format('woff2'),
+         url(<%= asset_path 'Fonts/notosansui-regular-webfont.woff' %>) format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'noto-sans-bold';
+    src: url(<%= asset_path 'Fonts/notosansui-bold-webfont.woff2' %>) format('woff2'),
+         url(<%= asset_path 'Fonts/notosansui-bold-webfont.woff' %>) format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'noto-sans-bold-italic';
+    src: url(<%= asset_path 'Fonts/notosansui-bolditalic-webfont.woff2' %>) format('woff2'),
+         url(<%= asset_path 'Fonts/notosansui-bolditalic-webfont.woff' %>) format('woff');
+    font-weight: normal;
+    font-style: normal;
 }
 
 #yield {
@@ -227,119 +243,106 @@
 
 /* end map wrapper */
 
-/* yield */
+/* homepage */
 
-.famousYield {
-    overflow-y:auto;
+body.unauthenticated.action-home {
+  background: white;
+  font-family: 'noto-sans', sans-serif;
+  font-weight: 200;
 }
 
-/* homepage */
+.home {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.homeLogo {
+  position: fixed;
+  top: 10px;
+  left: 20px;
+  font-family: 'noto-sans-bold-italic', sans-serif;
+  font-size: 22px;
+  color: #6D6D6D;
+  z-index: 1;
+}
+
+#particles-bg {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
 
 .homeWrapper.homeText {
     margin-top: 5%;
 }
 
-.fullWidthWrapper {
-    width: 100%;
+.homeWrapper {
+    box-sizing: border-box;
+    position: relative;
+    z-index: 1;
+    border-radius: 3px;
+    color: #6D6D6D;
+    text-align: center;
+    padding: 30px;
+    background: white;
+    opacity: 0.8;
 }
-.fullWidthWrapper.withVideo {
-    height: 315px;
-    background: #757575;
+@media only screen and (max-width : 800px) {
+  .homeWrapper {
+    width: 90%;
+    margin: 0 5%;
   }
-
+}
+@media only screen and (min-width : 801px) {
   .homeWrapper {
     width: 800px;
     margin: 0 auto;
-    color: #424242;
+  }
 }
 
 .homeTitle {
     font-size: 64px;
-    line-height: 48px;
-    text-align: center;
+    line-height: 70px;
     margin-bottom: 20px;
+    font-family: 'noto-sans-bold', sans-serif;
 }
 
 .homeIntro {
     font-size: 22px;
     line-height: 26px;
-    text-align: justify;
     margin: 32px 0 20px;
-    font-family: 'din-regular', helvetica, sans-serif;
+}
+
+.homeIntro div {
+  margin: 20px 0;
 }
 
 .homeWrapper .green {
     color: #4fc059;
 }
-
-.homeWrapper .din-medium {
-    font-family: 'din-medium', helvetica, sans-serif;
+.homeWrapper .purple {
+    color: #a354cd;
+}
+.homeWrapper .yellow {
+    color: #dab539;
 }
 
-.homeVideo {
-    margin-bottom: 20px;
-    float: left;
-}
-
-.homeWrapper .callToAction {
-    float: left;
-    width: 216px;
-    padding: 8px 0 8px 24px;
-    color: #F5F5F5;
-}
-.callToAction h3 {
-    font-size: 24px;
-}
-.callToAction p {
-    margin: 8px 0 16px;
-    font-size: 13px;
-    line-height: 16px;
-    font-family: 'din-regular', helvetica, sans-serif;
-    text-align: left;
-}
-.callToAction a, .callToAction button {
+.requestInviteCTA {
     display: block;
     width: 220px;
-    height: 12px;
+    font-size: 20px;
     padding: 16px 0;
     text-align: center;
-    border-radius: 2px;
-    font-size: 12px;
-    box-shadow: 0px 1px 1.5px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
-    margin: 0 auto;
-    color: #FFFFFF;
-    box-sizing: content-box;
-    -moz-box-sizing: content-box;
-    -webkit-box-sizing: content-box;
-}
-.callToAction .requestInviteCTA {
-    background-color: #4fc059;
-    margin-bottom: 12px;
-}
-.callToAction .requestInviteCTA:hover {
-    background-color: #49ad4e;
-}
-.callToAction .exploreFeaturedCTA {
-    background-color: #a354cd;
-    margin-bottom: 12px;
-}
-.callToAction .exploreFeaturedCTA:hover {
-    background-color: #9150bc;
-}
-.callToAction .learnMoreCTA {
-    background-color: #4fb5c0;
-    margin-bottom: 12px;
-}
-.callToAction .learnMoreCTA:hover {
-    background-color: #419599;
+    border-radius: 3px;
+    border: 2px solid #a354cd;
+    margin: 12px auto;
+    color: #a354cd;
+    font-family: 'noto-sans-bold', sans-serif;
 }
+.requestInviteCTA:hover {
 
-.fullWidthWrapper.withPartners {
-    background: url(<%= asset_path('homepage_bg_fade.png') %>) no-repeat center -300px;
-}
-.homeWrapper.homePartners {
-    padding: 64px 0 280px;
-    height: 96px;
 }
 
 /* end home page */

app/assets/stylesheets/mobile.scss.erb

@@ -60,19 +60,6 @@
   .homeIntro {
     text-align: left;
   }
-  .fullWidthWrapper.withVideo {
-    height: auto;
-  }
-  .homeVideo {
-    width: 100% !important;
-    height: auto;
-  }
-  .fullWidthWrapper.withPartners {
-    display: none;
-  }
-  .learnMoreCTA {
-    display: none !important;
-  }
 
   #yield {
     padding-top: 50px;

app/views/main/home.html.erb

@@ -7,33 +7,24 @@
 
 <% content_for :title, "Home | Metamaps" %>
 <% content_for :mobile_title, "Home" %>
-<div id="yield">
+<div class="home">
+  <div class="homeLogo">METAMAPS</div>
+  <div id="particles-bg"></div>
   <div class="homeWrapper homeText">
-    <div class="homeTitle">Make Sense with Metamaps</div>
+    <div class="homeTitle">Make sense, together.</div>
     <div class="homeIntro">
-    <span class="green din-medium">METAMAPS.CC</span> is a free and open source platform that supports real-time sense-making, distributed collaboration, and the creative intelligence of individuals, organizations and communities. We are currently in an <span class="din-medium">invite-only beta.</span>
+      <div>Untangle complex conversations, expand perspectives, and gain insights
+      about what matter to you and your communities.
       </div>
+      <div>Metamaps enables individual and collaborative sensemaking through
+        <span class="purple">concept mapping</span>, <span class="green">live video + text chat</span>, and a <span class="yellow">shared knowledge graph</span>.
       </div>
-  <div class="fullWidthWrapper withVideo">
-    <div class="homeWrapper">
-      <iframe class="homeVideo" src="https://player.vimeo.com/video/113154814" width="560" height="315" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
-      <div class="callToAction">
-        <h3>Who finds it useful?</h3>
-        <p>Designers, inventors, artists, educators, strategists, consultants, facilitators, entrepreneurs, systems thinkers, changemakers, analysts, students, researchers... maybe you!</p>
-        <button type="button" class="button learnMoreCTA" onclick="Metamaps.GlobalUI.openLightbox('about');">LEARN MORE</button>
-        <a href="/explore/featured" data-router="true" class="exploreFeaturedCTA">EXPLORE FEATURED MAPS</a>
       <a href="/request" class="requestInviteCTA">REQUEST INVITE</a>
     </div>
-      <div class="clearfloat"></div>
-    </div>
-  </div>
-  <div class="fullWidthWrapper withPartners">
-    <div class="homeWrapper homePartners">
-      <% # our partners %>
-    </div>
   </div>
 </div><!-- end yield -->
 
+<%= javascript_include_tag "particles-bg" %>
 <script>
   Metamaps.currentSection = ''
   Metamaps.currentPage = ''

config/initializers/assets.rb

@@ -9,5 +9,5 @@ Rails.application.configure do
 
   # Precompile additional assets.
   # application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
-  config.assets.precompile += %w( application-secret.css application-secret.js webpacked/metamaps.bundle.js )
+  config.assets.precompile += %w( application-secret.css application-secret.js particles-bg.js webpacked/metamaps.bundle.js )
 end