refactor: finish 'Next step' page layout with tachyons.

ipfs · Dec 22, 2017 · 55c9570 · 55c9570
1 parent 994872d
commit 55c9570
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 12 deletions.
diff --git a/add-on/src/landing-pages/next-step.html b/add-on/src/landing-pages/next-step.html
@@ -7,18 +7,23 @@
     <meta name="viewport" content="width=device-width" />
   </head>
 
-  <body>
-    <div id="header">
-      <img class="logo" src="./images/ipfs-logo-on.svg" alt="IPFS Logo">
-      <h1>Almost there!</h1>
-    </div>
-    <div id="content">
-      <div class="main-info">
-        <h2>Thank you for installing IPFS Companion!</h3>
-        <img class="network-image" src="./images/ipfs-illustration-network.svg" alt="IPFS Network">
-        <h3>You still need to install the client application to connect to the IPFS network.</h3>
-        <a class="btn-install-station" href="https://github.com/ipfs-shipyard/station">Install IPFS Station</a>
-        <a href="">Or alternatively download the standalone IPFS client</a>
+  <body id="main">
+    <div class="mw-100 flex justify-center items-center pl5 pt5 pr5 avenir">
+      <div class="w-70 flex flex-column items-start white">
+        <div class="flex">
+          <img class="logo" src="./images/ipfs-logo-on.svg" alt="IPFS Logo">
+          <h2 class="f2 pl3 fw2 light-gray">Almost there!</h2>
+        </div>
+
+        <div class="pa4">
+          <p class="f2 fw5 lh-copy ma0 light-gray">
+            Thank you for installing IPFS Companion!
+          </p>
+          <p class="f3 fw2 lh-copy light-gray">
+            You still need to install the client application to connect to the IPFS network.
+          </p>
+          <a class="f3 link pl4 pt3 pr4 pb3 mb2 mt2 dib white shadow-2" id="btn-install" href="https://github.com/ipfs-shipyard/station">Install IPFS Station</a>
+        </div>
       </div>
     </div>
     <script src="../ipfs-companion-common.js"></script>

diff --git a/add-on/src/landing-pages/style.css b/add-on/src/landing-pages/style.css
@@ -4,6 +4,14 @@
   background: linear-gradient(to top, #041727 0%, #043b55 100%);
 }
 
+#main {
+  background: linear-gradient(to top, #041727 0%, #043b55 100%);
+  height: 100%;
+  margin: 0;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+}
+
 .logo {
   height: 80px;
   width: 80px;
@@ -20,3 +28,12 @@
 .app-item img {
   height: 80px;
 }
+
+#btn-install {
+  background-color: #6ACAD1;
+}
+
+#btn-install:hover {
+  margin-top: -1px;
+}
+