This commit is contained in:
Connor Turland 2017-07-01 21:31:36 +00:00
parent b83f366284
commit 292d31aa1e
17 changed files with 64 additions and 115 deletions

View file

@ -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,77 @@
/* end map wrapper */
/* yield */
.famousYield {
overflow-y:auto;
}
/* homepage */
body.action-home {
background: white;
font-family: 'noto-sans', sans-serif;
font-weight: 200;
}
.homeWrapper.homeText {
margin-top: 5%;
}
.fullWidthWrapper {
width: 100%;
}
.fullWidthWrapper.withVideo {
height: 315px;
background: #757575;
}
.homeWrapper {
color: #6D6D6D;
text-align: center;
}
@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);
border-radius: 3px;
border: 2px solid #a354cd;
margin: 0 auto;
color: #FFFFFF;
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
}
.callToAction .requestInviteCTA {
background-color: #4fc059;
color: #a354cd;
margin-bottom: 12px;
font-family: 'noto-sans-bold', sans-serif;
}
.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;
}
.fullWidthWrapper.withPartners {
background: url(<%= asset_path('homepage_bg_fade.png') %>) no-repeat center -300px;
}
.homeWrapper.homePartners {
padding: 64px 0 280px;
height: 96px;
.requestInviteCTA:hover {
}
/* end home page */

View file

@ -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;

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -9,27 +9,15 @@
<% content_for :mobile_title, "Home" %>
<div id="yield">
<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>
</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>Untangle complex conversations, expand perspectives, and gain insights
about what matter to you and your communities.
</div>
<div class="clearfloat"></div>
</div>
</div>
<div class="fullWidthWrapper withPartners">
<div class="homeWrapper homePartners">
<% # our partners %>
<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>
<a href="/request" class="requestInviteCTA">REQUEST INVITE</a>
</div>
</div>
</div><!-- end yield -->