new frontpage repo list layout

data/repositories.yml

@@ -18,10 +18,16 @@
     - name: squid-js
     - name: squid-py
     - name: squid-java
-    - name: secret-store-client-js
-    - name: secret-store-client-py
-    - name: secret-store-client-java
+
+- group: OceanDB
+  items:
     - name: oceandb-mongodb-driver
     - name: oceandb-bigchaindb-driver
     - name: oceandb-elasticsearch-driver
     - name: oceandb-driver-interface
+
+- group: Parity Secret Store
+  items:
+    - name: secret-store-client-js
+    - name: secret-store-client-py
+    - name: secret-store-client-java

src/components/Repositories/RepositoryList.jsx

@@ -4,12 +4,12 @@ import Repository from './Repository'
 import styles from './RepositoryList.module.scss'
 
 const RepositoryList = ({ repositories }) => (
-    <div className={styles.repositoryLists}>
+    <div className={styles.repositoryCategory}>
         {repositories.map(({ node }) => (
-            <div key={node.id} className={styles.repositoryList}>
-                <h3 className={styles.repositoryListTitle}>{node.group}</h3>
+            <div key={node.id}>
+                <h3 className={styles.repositoryCategoryTitle}>{node.group}</h3>
 
-                <div className={styles.repositoryWrapper}>
+                <div className={styles.repositoryList}>
                     {node.items.map(item => (
                         <Repository
                             key={item.name}

src/components/Repositories/RepositoryList.module.scss

@@ -1,28 +1,75 @@
 @import 'variables';
 
-.repositoryLists {
-    @media (min-width: $break-point--medium) {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-    }
-}
-
 .repositoryList {
+    white-space: nowrap;
+    overflow-y: hidden;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    margin-left: calc(-50vw + 50%);
+    margin-right: calc(-50vw + 50%);
+    display: flex;
+
     @media (min-width: $break-point--medium) {
-        flex: 0 0 48%;
+        margin-left: $spacer;
+        border-left: 1px solid $brand-grey-lighter;
+        padding-left: $spacer;
+        padding-top: $spacer / 4;
     }
+
+    article {
+        white-space: normal;
+        flex: 0 0 25rem;
+        margin-left: $spacer;
+        margin-bottom: $spacer / 4;
+
+        &:first-child {
+            margin-left: $spacer * 1.4;
+
+            @media (min-width: $break-point--medium) {
+                margin-left: 0;
+            }
+        }
+
+        &:last-child {
+            margin-right: $spacer * 1.4;
+        }
+    }
+
+    // custom scrollbar
+    &::-webkit-scrollbar,
+    &::-moz-scrollbar {
+        display: none;
+    }
+
+    &::-webkit-scrollbar {
+        opacity: 0;
+        width: 3px;
+        height: 3px;
+        transition: opacity .2s ease-out;
+    }
+
+    &:hover {
+        &::-webkit-scrollbar {
+            opacity: 1;
+            width: 3px;
+            height: 3px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background: lighten($brand-grey-light, 30%);
+        }
+
+        &::-webkit-scrollbar-track {
+            background: $brand-white;
+        }
+    }
+
+
 }
 
-.repositoryWrapper {
-    @media (min-width: $break-point--small) {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-    }
-}
-
-.repositoryListTitle {
+.repositoryCategoryTitle {
+    width: 100%;
     font-size: $font-size-h3;
     color: $brand-grey-light;
+    margin-bottom: $spacer / 2;
 }

src/components/Repositories/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StaticQuery, graphql } from 'gatsby'
+import { Link, StaticQuery, graphql } from 'gatsby'
 import RepositoryList from './RepositoryList'
 import QuickRun from './QuickRun'
 import styles from './index.module.scss'
@@ -33,6 +33,24 @@ const Repositories = () => (
             return (
                 <div className={styles.repositories}>
                     <QuickRun name="docker-images" />
+
+                    <header>
+                        <h1 className={styles.repositoriesTitle}>
+                            Repositories
+                        </h1>
+                        <p className={styles.repositoriesText}>
+                            <strong>
+                                Most of our repositories are open source and we
+                                listed the key repositories here. Start with the{' '}
+                                <Link to="/concepts/components/">
+                                    software components
+                                </Link>{' '}
+                                document for an introduction into the components
+                                creating the Ocean network.
+                            </strong>
+                        </p>
+                    </header>
+
                     <RepositoryList repositories={repositories} />
                 </div>
             )

src/components/Repositories/index.module.scss

@@ -2,4 +2,25 @@
 
 .repositories {
     margin-top: $spacer * 2;
+
+    > header {
+        @media (min-width: $break-point--medium) {
+            max-width: 33rem;
+            margin: auto;
+        }
+    }
+}
+
+.repositoriesTitle {
+    text-align: center;
+    display: block;
+    margin-top: 0;
+    margin-bottom: $spacer / 2;
+    font-size: $font-size-h3;
+}
+
+.repositoriesText {
+    text-align: center;
+    margin-bottom: $spacer;
+    color: $brand-grey-light;
 }