update landing, footer, style fixes

Author: joehand

client/js/components/header.js

@@ -23,12 +23,12 @@ module.exports = function (state, emit) {
   return html`
     <header>
       ${message(state.message)}
-      <nav class="bg-white bb b--neutral-10 dt w-100 w-100 border-box pa2 ph4-l">
+      <nav class="bg-white bb b--neutral-10 dt w-100 border-box pa2 ph4-l">
         <div class="dtc v-mid w-75">
           <a class="${logoCss} v-mid dib link dim mr2 w2 h2" href="/" title="DatBase">
             <img src="/public/img/dat-hexagon.svg" alt="Dat Logo">
           </a>
-          <a class="mr3 v-mid link dim color-neutral hover-color-neutral b f5 f3-ns dib-ns dn" href="/" title="DatBase">Dat<span class="color-neutral-60">Base</span></a>
+          <a class="mr3 v-mid link dim color-neutral hover-color-neutral b f5 f3-ns dib-ns dn" href="/" title="datBase">dat<span class="color-neutral-60">Base</span></a>
           ${importButton(emit)}
           <a href="http://docs.datproject.org" class="ml3 link dim color-neutral ttu tracked f6 f5-ns dib">Docs</a>
           <a href="http://chat.datproject.org" class="ml3 link dim color-neutral ttu tracked f6 f5-ns dib-l dn">Chat</a>

client/js/elements/footer/index.js

@@ -2,79 +2,43 @@ const html = require('choo/html')
 const css = require('sheetify')
 
 module.exports = function () {
-  const rule = css`
-    :host {
-      &:after {
-        content: '';
-        display: block;
-        width: 2rem;
-        height: 4px;
-        background-color: var(--color-neutral-70);
-        margin-top: .75rem;
-        margin-bottom: 1.5rem;
-      }
-    }
-  `
-
-  const datList = css`
-    :host {
-      text-indent: -20px;
-      margin-left: -20px;
-    }
-
-    :host li:before {
-      content: '';
-      display: inline-block;
-      position: relative;
-      top: -0.125rem;
-      width: .5rem;
-      height: .5rem;
-      margin-right: .75rem;
-      background-image: url(/public/img/dat-hexagon.svg);
-      background-size: 100%;
-      background-repeat: no-repeat;
-    }
-  `
-
   return html`
-  <footer class="pv2 bg-neutral white absolute bottom-0 w-100">
-    <section class="pa2 ph4-m mw8-ns center-ns">
-      <div class="pt2 cf">
-        <div class="fl w-third">
-          <h4 class="f4 ${rule}">Explore</h4>
-          <ul class="${datList} p0 list lh-copy">
-            ${liLink('/explore', 'Explore Datasets')}
-            ${liLink('https://blog.datproject.org', 'Dat Blog')}
-          </ul>
-        </div>
-        <div class="fl w-third">
-          <h4 class="f4 ${rule}">Learn</h4>
-          <ul class="${datList} p0 list lh-copy">
-            ${liLink('/about', 'About Dat')}
-            ${liLink('http://docs.datproject.org', 'Docs')}
-          </ul>
+  <footer class="pv2 bg-neutral white w-100">
+    <section class="ph2 ph4-m mw8-ns center-ns">
+      <div class="pt3">
+        <div class="mb2 lh-copy">
+          <a class="f4 b white dib dim link hover-color-white mr3 mt1" href="/" title="Dat Project">
+            <img src="/public/img/dat-hexagon.svg" class="dib w2 h2 mr2 v-mid mb1" alt="Dat Project">
+            datBase
+          </a>
+          <a class="f4 link white hover-color-neutral-40 b dib mr3 mb3" href="http://blog.datproject.org" title="Blog - Dat Project">
+            Blog
+          </a>
         </div>
-        <div class="fl w-third">
-          <h4 class="f4 ${rule}">Connect</h4>
-          <ul class="${datList} list p0 lh-copy">
-            ${liLink('https://twitter.com/dat_project', 'Twitter')}
-            ${liLink('https://github.com/datproject', 'Github')}
-            ${liLink('https://www.stickermule.com/en/marketplace/9709-dat-data-v3', 'Get Stickers')}
-          </ul>
+        <div class="mt3">
+          <a class="white hover-color-white ba b--green no-underline grow b inline-flex items-center mr3 mb3 pv2 ph3" href="https://datproject.org" title="Dat Project Home">
+            <div class="color-green dib mr2"><svg class="w2 h2"><use xlink:href="#daticon-happy-dat"/></svg></div>
+            <span>Dat Project Home</span>
+          </a>
+          <a class="white hover-color-white ba b--green no-underline grow b inline-flex items-center mr3 mb3 pv2 ph3" href="http://chat.datproject.org" title="Join our Chat">
+            <div class="color-green dib mr2"><svg class="w2 h2"><use xlink:href="#daticon-question"/></svg></div>
+            <span>
+              Curious? Join Our Chat
+            </span>
+          </a>
+          <a class="white hover-color-white ba b--green no-underline grow b inline-flex items-center mb3 pv2 ph3" href="https://donate.datproject.org" title="Donate to Code for Science & Society">
+            <div class="color-green dib mr2"><svg class="w2 h2"><use xlink:href="#daticon-star-dat"/></svg></div>
+            <span>Donate to Support Public Data</span>
+          </a>
         </div>
+        <p class="f6 measure copy lh-copy">
+          Have questions? Join our chat or ask on <a href="http://twitter.com/dat_project" class="color-blue no-underline underline-hover">Twitter</a> or <a href="http://github.com/datproject" class="color-pink no-underline underline-hover color-green">Github</a>.
+        </p>
       </div>
-      <p class="bt b--dat-neutral-80 color-neutral-50 tc f7 pv3">
-        <strong>Dat</strong> 2017 • Page source on <a class="color-neutral-50 hover-color-pink" href="https://github.com/datproject/datproject.org">github</a>
+      <p class="bt b--dat-neutral-80 color-neutral-50 tc f7 pv2">
+        <strong>Dat</strong> 2017 • Page source on <a class="color-neutral-50 hover-color-pink" href="https://github.com/datproject/datbase.org">github</a>
       </p>
     </section>
   </footer>
   `
-
-  function liLink (url, text) {
-    return html`
-      <li>
-        <a class="f5 fw6 link color-neutral-20 hover-color-pink" href="${url}">${text}</a>
-      </li>
-    `
-  }
 }

client/js/elements/home-section/index.js

@@ -41,7 +41,7 @@ module.exports = function (props) {
   subtitle.innerHTML = props.subtitle
 
   return html`
-    <section class="pt4 ${props.bgColor} ${props.color ? props.color : ''}">
+    <section class="pv4 ${props.bgColor} ${props.color ? props.color : ''}">
       <div class="pv2 ph3 pa4-m mw8-ns center-ns">
         <header>
           <h2 class="f2 mb0">${props.title}</h2>
@@ -60,7 +60,7 @@ module.exports = function (props) {
   function cta () {
     if (!props.cta) return
     return html`
-      <p class="pv4">
+      <p class="pt4">
         <a href="${props.cta.link}" class="f5 white bg-animate hover-color-white bg-green hover-bg-dark-green pa3 link">${props.cta.text}</a>
       </p>
     `

client/js/pages/landing/index.js

@@ -2,6 +2,7 @@ const html = require('choo/html')
 const css = require('sheetify')
 const footer = require('../../elements/footer')
 const datIcon = require('../../elements/icon')
+const importButton = require('../../elements/import-button')
 const homeSection = require('../../elements/home-section')
 const panel = require('../../components/auth/user-panel')
 const loginButton = require('../../components/login-button')
@@ -10,100 +11,110 @@ const message = require('../../elements/message')
 module.exports = function (state, emit) {
   const splash = css`
     :host {
-      background-repeat: repeat-y;
-      background-position: center -75px;
+      background-repeat: no-repeat;
+      background-position: center -50px;
+      background-size:100%;
 
       @media screen and (min-width: 30em) {
         /* ns - not small breakpoint from tachyons */
-        background-position: center -175px;
+        background-position: center -200px;
       }
     }
   `
   const backgroundImageUrl = '/public/img/bg-landing-page.svg'
-  const hex = datIcon('hexagon-up', {class: 'color-green-darker'})
+  const hex = datIcon('hexagon-up', {class: 'color-green-disabled'})
   return html`
-    <div class="min-vh-100 pb7">
-      <div class="absolute w-100">
+    <div class="home">
+      <div class="absolute dt w-100">
         ${message(state.message)}
-        <div class="tr pa2 ph4-l">
+        <div class="dtc v-mid w-75 pa2 ph4-l">
+          ${importButton(emit)}
+        </div>
+        <div class="dtc v-mid w-25 tr pa2 ph4-l">
           ${loginButton(state, emit)}
           ${panel(state, emit)}
         </div>
       </div>
-      <div class="${splash} pb6-ns pb4 w-100 center" style="background-image: url(${backgroundImageUrl})">
-        <section class="tc pa3 pt5-ns">
-          <h1 class="f3 f2-m f1-l fw2 black-90 mv3 tracked">
+      <div class="bg-neutral color-white ${splash} pb4 w-100 center" style="background-image: url(${backgroundImageUrl})">
+        <section class="tc pa3 pt6">
+          <h1 class="f3 f2-m f1-l fw2 mv3 tracked">
             <span class="dib grow w2 h2 hex-title-icon">
               ${hex}
             </span>datBase
           </h1>
-          <h2 class="f5 fw2 color-neutral-60 mb4 lh-copy">
-            Search for data preprints on DatBase!
+          <h2 class="f4 fw3 color-neutral-10 mb4 lh-copy">
+            Open data powered by Dat<br>
+            Future-friendly apps for your research data pipeline
           </h2>
-          <div class="w-90 w-50-l center">
-            ${search()}
-          </div>
-        </section>
-        <section class="bg-white mt4 mt3-ns mw7-ns center pa3 ph5-ns">
-          <p class="f4 lh-copy measure-wide">
-            Research papers are becoming increasingly accessible through open access and preprint servers.
-            Research data is still behind locked custom APIs, confusing interfaces, or slow HTTP servers.
-            We dream of world when all this data can be accessed as easy as the web.
-            <a href="#"> Imagine with us</a>.
-          </p>
-          <p class="f3 lh-copy measure-wide">
-            DatBase is distributed preprints for data!
-            Built by <a href="http://datproject.org">Dat Project</a>.
-          </p>
         </section>
       </div>
-      <section class="pa3 w-100 bg-neutral-04">
-        <div class="mw7 center">
-          <div class="pa4-l">
-            <form class="mb0 pa4 br2-ns ba b--green">
-              <fieldset class="cf bn ma0 pa0">
-                <legend class="pa0 f5 f4-ns mb3 black-80">Get updates! We promise to only send the very exciting stuff.</legend>
-                <div class="cf">
-                  <label class="clip" for="email-address">Email Address</label>
-                  <input class="f6 f5-l input-reset bn fl black-80 bg-white pa3 lh-solid w-100 w-75-m w-80-l br2-ns br--left-ns" placeholder="Your Email Address" type="text" name="email-address" value="" id="email-address">
-                  <input class="f6 f5-l button-reset fl pv3 tc bn bg-animate bg-black-70 hover-bg-black white pointer w-100 w-25-m w-20-l br2-ns br--right-ns" type="submit" value="Subscribe">
-                </div>
-              </fieldset>
-            </form>
-          </div>
-        </div>
-      </section>
       ${homeSection({
-        'title': 'What are Data Preprints?',
-        'subtitle': 'With data preprints you can make data public & shareable before you are ready to publish.',
+        'title': 'Coming to a computer near you...',
+        'subtitle': 'Built on the Dat Protocol, we imagine existing research tools enhanced with data-first infrastructure.',
         'sections': [
           {
-            'title': 'User Friendly',
+            'title': 'Try Dat',
             'text': `
-              Dat's simple to use command line tool works alognside apps like Dropbox or Google Drive.
-              Keep data private until you are ready to prepublish without changing your data management software.
+            See what it is like to use Dat!
+              The Try Dat workshop will walk you through sharing and downloading data.
+              It showcases unique properties of the Dat Protocol.
+              <br>
+              <a class="f5 b w-auto dib mt3 color-green hover-color-green-hover ba b--green pv2 ph3 link" href="http://try-dat.com">
+                Try Dat Now!
+              </a>
             `
           },
           {
-            'title': 'Reproducible History',
+            'title': 'Dat in the Lab',
             'text': `
-              Dat uses cryptographic registers to certify data ownership and track changes over time.
-              A history of changes improves data reproducibility and transparency.
+              A collaboration with the California Digitial Library, funded by the Moore Foundation.
+              Learn more about our pilot to integrate Dat into research data workflows.
+              <br>
+              <a class="f5 b w-auto dib mt3 color-green hover-color-green-hover ba b--green pv2 ph3 link" href="http://blog.datproject.org/tag/science">
+                Follow on our Blog
+              </a>
             `
           },
           {
-            'title': 'One-Click Publish',
+            'title': 'About Dat Project',
             'text': `
-              In the future, DatBase will have one-click publishing to data repositories such as Zenodo or Dataverse.
-              Dat's innovative storage makes it the perfect intermediate between files on your computer and data publishing sites.
+              Dat is a nonprofit-backed community & open protocol for building apps of the future.
+              We set out to improve access to public data and created the Dat Protocol along the way.
+              <br>
+              <a class="f5 b w-auto dib mt3 color-green hover-color-green-hover ba b--green pv2 ph3 link" href="http://datproject.org">
+                Learn About Dat
+              </a>
             `
           }
-        ],
-        'cta': {
-          'link': 'http://datproject.org',
-          'text': 'Learn more about Dat Project'
-        }
+        ]
       })}
+      <section class="pa3 w-100 bg-neutral-04">
+        <div class="mw7 center">
+          <div class="pa4-l">
+            <!-- Begin MailChimp Signup Form -->
+            <div id="mc_embed_signup">
+              <form action="//datproject.us16.list-manage.com/subscribe/post?u=993df3c1e35c9b224b64ccf72&amp;id=128a796b8e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="mb0 pa4 br2-ns ba b--green validate" target="_blank" novalidate>
+                <div class="cf bn ma0 pa0">
+                  <legend class="pa0 f5 f4-ns mb3 color-neutral-90">Get updates! Join our newsletter to receive annoucements.</legend>
+                  <div>
+                    <label class="clip" for="mce-EMAIL">Email Address </label>
+                    <input class="f6 f5-l input-reset bn fl black-80 bg-white pa3 lh-solid w-100 w-75-m w-80-l br2-ns br--left-ns" placeholder="Your Email Address"  type="email" value="" name="EMAIL" id="mce-EMAIL">
+                  </div>
+                  <div id="mce-responses" class="clear">
+                    <div class="response" id="mce-error-response" style="display:none"></div>
+                    <div class="response" id="mce-success-response" style="display:none"></div>
+                  </div>
+                  <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_993df3c1e35c9b224b64ccf72_128a796b8e" tabindex="-1" value=""></div>
+                  <div class="clear">
+                    <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="f6 f5-l button-reset fl pv3 tc bn bg-animate bg-green hover-bg-green-hover white pointer w-100 w-25-m w-20-l br2-ns br--right-ns" >
+                  </div>
+                </div>
+              </form>
+            </div>
+            <!--End mc_embed_signup-->
+          </div>
+        </div>
+      </section>
       ${footer()}
     </div>
   `

client/js/pages/wrapper.js

@@ -5,7 +5,7 @@ const footer = require('../elements/footer')
 module.exports = function (view, opts) {
   return function (state, emit) {
     return html`
-      <div class="min-vh-100 pb7">
+      <div class="">
         ${header(state, emit)}
         ${view(state, emit)}
         ${footer()}