Combine "Install" and "Implementations"

content/team/index.md

@@ -118,7 +118,7 @@ Where to learn more:
 - **Coordination**: https://github.com/ipfs/docs
 - **Captain**: [Jessica Schilling](https://github.com/jessicaschilling)
 - **Weekly call**
-  - 🕒 Mondays at 15:00 UTC
+  - 🕒 Mondays at 16:00 UTC
   - 📞 Zoom: https://protocol.zoom.us/j/614386160
 
 ## Special Interest Groups

layouts/index.html

@@ -80,6 +80,8 @@ <h5 class="content-center">
 
       {{ partial "get-started.html" . }}
 
+      {{ partial "install.html" . }}
+
 
     <div class="container">
       <section id="how">
@@ -175,8 +177,6 @@ <h5>Curious where it all began?</h5>
       </section>
     </div>
 
-    {{ partial "implementations.html" . }}
-
     <div class="container">
       <section id="uses" class="content-center">
         <div class="content-center mb2">

layouts/partials/footer.html

@@ -12,7 +12,7 @@
         <div class="grid-flex-cell">
           <ul class="sitemap unstyled">
             <li class="sitemap-head">IPFS</li>
-            <li><a href="//docs.ipfs.io/guides/guides/install/">Install</a></li>
+            <li><a href="/#install">Install</a></li>
             <li><a href="//github.com/ipfs/ipfs">GitHub</a></li>
             <li><a href="//docs.ipfs.io/">Docs</a></li>
             <li><a href="//docs.ipfs.io/community/">Community</a></li>

layouts/partials/get-started.html

@@ -2,7 +2,8 @@
   <div class="container">
     <div class="content-center mb2">
       <h2>What do you want to do with IPFS?</h2>
-      <h5>Choose the option below that best fits your goal, or <a href="https://github.com/ipfs-shipyard/ipfs-desktop">install IPFS Desktop</a> now.</h5>
+      <h5>Choose the option below that best fits your goal, or <a href="https://github.com/ipfs-shipyard/ipfs-desktop"
+          target="_blank">install IPFS Desktop</a> now.</h5>
     </div>
     <div class="options">
       <div class="option-blocks">
@@ -155,7 +156,7 @@ <h5>Don't see your goal here? The IPFS open-source community is here to help you
                       guide</a>
                   </li>
                   <li>
-                    Just want to install IPFS? <a href="#implementations">Download here</a>
+                    Just want to install IPFS? <a href="#install">Download here</a>
                   </li>
                 </ul>
               </div>
@@ -165,4 +166,4 @@ <h5>Don't see your goal here? The IPFS open-source community is here to help you
       </div>
     </div>
   </div>
-</section>
+</section>

layouts/partials/header.html

@@ -8,9 +8,7 @@ <h1 class="pull-left">
       <label for="menu-toggle" tabindex="0" class="menu-toggle-acc"></label>
       <ul class="list-unstyled list-inline cf">
         <li><a href="/#why">About</a></li>
-        <li><a href="/#implementations">Implementations</a></li>
-        <li><a href="//docs.ipfs.io/guides/guides/install/"
-            {{ if eq .page.Params.pagename "install" }}class="current-item" {{ end }}>Install</a></li>
+        <li><a href="/#install">Install</a></li>
         <li><a href="//docs.ipfs.io/"
             {{ if and (eq .page.Type "docs") (not (eq .page.Params.pagename "install")) }}class="current-item"
             {{ end }}>Docs</a></li>

layouts/partials/install.html

@@ -0,0 +1,120 @@
+<section id="install">
+  <div class="container">
+
+    <h2 class="content-center">Install IPFS</h2>
+    <h5 class="content-center" style="margin-bottom: 60px;">No matter how you want to use IPFS, there's an install
+      option for you. Unsure which to choose? Start with <a href="https://github.com/ipfs-shipyard/ipfs-desktop"
+        target="_blank"> IPFS Desktop</a>.</h5>
+
+    <div class="grid-flex-container">
+
+      <div class="grid-flex-cell-1of2">
+        <a href="https://github.com/ipfs-shipyard/ipfs-companion" target="_blank">
+          <div class="install-item">
+            <div class="install-item-image">
+              <img src="/images/ipfs-companion-hex.png" />
+            </div>
+            <div class="install-description">
+              <h4>Browser extension</h4>
+              <p>
+                The IPFS Companion browser extension upgrades your favorite web browser to use IPFS, enabling you to
+                open
+                ipfs:// URLs and more.
+              </p>
+            </div>
+          </div>
+        </a>
+      </div>
+
+      <div class="grid-flex-cell-1of2">
+        <a href="https://github.com/ipfs-shipyard/ipfs-desktop" target="_blank">
+          <div class="install-item">
+            <div class="install-item-image">
+              <img src="/images/ipfs-desktop-hex.png" />
+            </div>
+            <div class="install-description">
+              <h4>Desktop app</h4>
+              <p>
+                IPFS Desktop is an easy-to-use app that enables you to run an IPFS node on your computer without having
+                to
+                bother with command-line tools.
+              </p>
+            </div>
+          </div>
+        </a>
+      </div>
+
+      <div class="grid-flex-cell-1of2">
+        <a href="http://docs.ipfs.io/guides/guides/install/" target="_blank">
+          <div class="install-item">
+            <div class="install-item-image">
+              <img src="/images/command-line-hex.png" />
+            </div>
+            <div class="install-description">
+              <h4>Command line</h4>
+              <p>
+                Just want to install IPFS from the command line? Here are step-by-step instructions for getting you up
+                and
+                running quickly and easily.
+              </p>
+            </div>
+          </div>
+        </a>
+      </div>
+
+      <div class="grid-flex-cell-1of2">
+        <a href="https://cluster.ipfs.io/" target="_blank">
+          <div class="install-item">
+            <div class="install-item-image">
+              <img src="/images/ipfs-cluster.png" />
+            </div>
+            <div class="install-description">
+              <h4>IPFS Cluster</h4>
+              <p>
+                Using IPFS for servers or large datasets? Cluster automatically allocates, replicates, and tracks your
+                data as pinsets across multiple IPFS nodes.
+              </p>
+            </div>
+          </div>
+        </a>
+      </div>
+
+      <div class="grid-flex-cell-1of2">
+        <a href="https://github.com/ipfs/go-ipfs" target="_blank">
+          <div class="install-item">
+            <div class="install-item-image">
+              <img src="/images/go-ipfs-hex-logo.png" />
+            </div>
+            <div class="install-description">
+              <h4>Go implementation</h4>
+              <p>
+                If you build on Go, then go-ipfs — the main IPFS implementation — is for you. It includes a core
+                implementation, daemon server, command line tooling, and more.
+              </p>
+            </div>
+          </div>
+        </a>
+      </div>
+
+      <div class="grid-flex-cell-1of2">
+        <a href="https://js.ipfs.io" target="_blank">
+          <div class="install-item">
+            <div class="install-item-image">
+              <img src="/images/js-ipfs-logo.png" />
+            </div>
+            <div class="install-description">
+              <h4>JavaScript implementation</h4>
+              <p>
+                Written entirely in JavaScript, js-ipfs paves the way for the browser implementation of IPFS and opens
+                the
+                door to a world of possibilities.
+              </p>
+            </div>
+          </div>
+        </a>
+      </div>
+
+    </div>
+
+  </div>
+</section>

less/components/section.less

@@ -22,8 +22,8 @@ section {
     margin: 80px auto 0 auto;
   }
 
-  &#implementations:after,
-  &#how:after,
+  &#install:after,
+  &#get-started:after,
   &#latest:after {
     display: none;
   }
@@ -77,6 +77,45 @@ section {
   }
 }
 
+// install options
+
+.install-item a {
+  cursor: pointer;
+}
+
+.install-description h4 {
+  color: @color-teal;
+}
+
+.install-item {
+  margin-bottom: 1rem;
+  padding: 1rem;
+  text-align: center;
+}
+.install-item img {
+  max-height: 100px;
+}
+
+
+@media screen and (min-width: (@breakpoint-mid-mobile)) {
+  .install-item {
+    width: 100%;
+    margin: 1rem 0;
+    display: flex;
+    align-items: center;
+    text-align: left;
+  }
+  .install-item-image {
+    width: 400px;
+    img {
+      max-height: inherit;
+    }
+  }
+  .install-description {
+    margin-left: 1rem;
+  }
+}
+
 @media screen and (max-width: @breakpoint-tablet) {
   section:first-of-type {
     padding-top: 20px;

less/globals/_variables.less

@@ -27,4 +27,4 @@
 @color-teal: #6acad1;
 @color-teal-light: #e0f2f3;
 @color-white: #fff;
-@color-grey: rgba(255, 255, 255, 0.6);
+@color-grey: rgba(255, 255, 255, 0.8);

less/pages/home.less

@@ -4,27 +4,32 @@
 *
 --------------------------------------------------------------------*/
 
-#implementations {
+#install {
   margin-top: 80px;
   padding-bottom: 40px;
   background: fade(@blue-space, 100%);
-  background-image: url("../images/stars.png"),
-    linear-gradient(to bottom, fade(@blue-space, 100%) 0%, #062b3f 100%);
-  background-repeat: repeat;
 
   h2,
-  h3,
-  h5 {
+  h3, {
     color: @color-white;
   }
 
+  h5 {
+    color: @color-grey;
+  }
+
   p {
     color: @color-grey;
   }
 
+  a {
+    color: @color-teal;
+  }
+
   & a:hover {
+    h4,
     h5 {
-      color: @color-teal;
+      text-decoration: underline;
     }
   }
 
@@ -52,12 +57,9 @@
   }
 
   .app-ss {
-    margin-bottom: 20px;
 
     & img {
-      width: 250px;
-      height: 160px;
-      border: 1px solid @color-grey;
+      max-height: 100px;
     }
   }
 }