first draft

.gitignore

@@ -4,5 +4,6 @@ resources
 .netlify
 .hugo_build.lock
 .DS_Store
+*.DS_Store*
 ./content
 ./config

README.md

@@ -1,27 +1,3 @@
-# Docs starter
-
-This repository contains the base platform to build a docs site from. This platform is built using Hugo and started life in the [Doks repo by H-enk](https://github.com/h-enk/doks). This repo is designed to be used as a template and submodule. Follow through the [Create your project](#create-your-project) guide to set up everything properly.
-
-![A screenshot of one of the docs pages within this repo.](./static/images/site-screenshot.png)
-
-## Create your project
-
-You can create your project quicking by following these steps.
-
-1. Clone this repo:
-
-    ```shell
-    git clone https://github.com/protocol/docs-starter
-    ```
-
-1. Move into the `docs-starter` directory and install the dependencies:
-
-    ```shell
-    cd docs-starter && npm install
-    ```
-
-1. Done!
-
 ## Run locally
 
 Once you have set up your project, you can start a local server by running the following steps.
@@ -117,12 +93,3 @@ npm run create -- --kind page basics/install/windows
 
 - [Doks](https://getdoks.org/) by [Henk Verlinde](https://henkverlinde.com/)
 - [CSS Tooltip](https://github.com/alterebro/css-tooltip) by [alterebro](https://github.com/alterebro)
-
-## Project todos
-
-This is the stuff we're still working on.
-
-- [ ] Add in better pictures of dogs.
-- [ ] Automate favicon creation.
-- [ ] Automate adding item to topbar using `npm run create ...` commands.
-- [ ] Add setting to use image or text for topbar nav logo.

assets/js/partner.cjs

@@ -0,0 +1,98 @@
+import React from "react";
+import Slider from "react-slick";
+
+export function partners(){
+    const settings = {
+        dots: true,
+        infinite: true,
+        autoplay: true,
+        autoplaySpeed: 2000,
+        speed: 500,
+        slidesToShow: 4,
+        slidesToScroll: 1,
+        responsive: [
+            {
+                breakpoint: 1024,
+                settings: {
+                    slidesToShow: 3,
+                    slidesToScroll: 3,
+                    infinite: true,
+                    dots: true
+                }
+            },
+            {
+                breakpoint: 600,
+                settings: {
+                    slidesToShow: 2,
+                    slidesToScroll: 2,
+                    initialSlide: 2
+                }
+            },
+            {
+                breakpoint: 480,
+                settings: {
+                    slidesToShow: 1,
+                    slidesToScroll: 1
+                }
+            }
+        ]
+    };
+    return (
+        <div>
+            <h2> Single Item</h2>
+            <Slider {...settings}>
+                <a
+                    href="assets/js/partner.cjs"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    <img src="/images/partners/kenLabs.svg" alt="Ken Labs Logo" />
+                </a>
+                <a
+                    href="assets/js/partner.cjs"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    <img src="/images/partners/LeewayHertz.svg" alt="Leeway Hertz Logo" />
+                </a>
+                <a
+                    href="assets/js/partner.cjs"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    <img src="/images/partners/PiKNiK.svg" alt="PiKNiK Logo" />
+                </a>
+                <a
+                    href="assets/js/partner.cjs"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    <img src="/images/partners/FilSwan-logo.svg" alt="FilSwan Logo" />
+                </a>
+                <a
+                    href="assets/js/partner.cjs"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    <img
+                        src="/images/partners/SanXiaXingFutureData.svg"
+                        alt="San Xia Xing Future Data Logo"
+                    />
+                </a>
+                <a href="assets/js/partner.cjs" target="_blank" rel="noreferrer">
+                    <img src="/images/partners/Infura.svg" alt="Infura Logo" />
+                </a>
+                <a
+                    href="assets/js/partner.cjs"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    <img src="/images/partners/Cloudflare.svg" alt="Cloudflare Logo" />
+                </a>
+            </Slider>
+        </div>
+    );
+}
+
+ReactDOM.render(React.createElement(partners),
+    document.getElementById("partners"));

assets/js/progressbar.js

@@ -2,7 +2,6 @@
 window.onscroll = function() {move_progressbar()};
 
 function move_progressbar() {
-    console.log("thingy");
   var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
   var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
   var scrolled = (winScroll / height) * 100;

assets/scss/layouts/_pages.scss

@@ -62,3 +62,188 @@ p.meta {
 .page-link:hover {
   text-decoration: none;
 }
+
+.home {
+  .fold {
+    position: relative;
+    background-image: url("/images/IPNI_Header_large.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+    width: 100%;
+    height: fit-content;
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background-color: #1d2d35;
+      opacity: 0.6;
+      z-index: 3;
+    }
+    .heading, .subheading {
+      position: relative;
+      z-index: 10;
+      color: white;
+    }
+    .heading {
+      padding: 10rem 0 3rem;
+      font-size: 6rem;
+      @media only screen and (max-width: 480px){
+        font-size: 4rem;
+      }
+    }
+  }
+  .why-ipni {
+    background-color: #fbf7f0;
+    color: #1d2d35;
+    .content {
+      padding-top: 6rem;
+    }
+    h2 {
+      opacity: 0.8;
+    }
+    a {
+      color: #5d2f86;
+    }
+  }
+  .partners {
+    background-color: #C5E6F1;
+    color: #1d2d35;
+    padding: 5rem 0;
+    .section-heading {
+      font-size: 2.5rem;
+      font-weight: 400;
+      text-transform: uppercase;
+      padding-bottom: 2rem;
+    }
+    .row {
+      padding-bottom: 2rem;
+      @media only screen and (max-width: 767px){
+        padding-bottom: 0;
+      }
+    }
+  }
+
+  .features {
+    background-color: #ffffff;
+    color: #1d2d35;
+    // padding: 5rem 0;
+    .section-heading {
+      font-size: 2.5rem;
+      font-weight: 400;
+      text-transform: uppercase;
+      padding-bottom: 2rem;
+    }
+    .row {
+      padding-bottom: 2rem;
+      @media only screen and (max-width: 767px){
+        padding-bottom: 0;
+      }
+    }
+  }
+
+  .implementations {
+    background-color: #fbf7f0;
+    color: #1d2d35;
+    .content {
+      padding-top: 2rem;
+    }
+    h2 {
+      opacity: 0.8;
+    }
+    a {
+      color: royalblue;
+    }
+    .table {
+      border: none;
+      background-color: #fbf7f0;
+    }
+    td {
+      border: none;
+      background-color: #fbf7f0;
+    }
+  }
+
+  .media_new {
+    padding-left: 5rem;
+    padding-right: 5rem;
+    padding-bottom: 0.05rem;
+    .section-heading {
+      font-size: 2.5rem;
+      font-weight: 400;
+      text-transform: uppercase;
+      padding-bottom: 2rem;
+    }
+    .row {
+      padding-bottom: 2rem;
+    }
+  }
+
+  .media {
+    position: relative;
+    background-color: #fbf7f0;
+    color: #1d2d35;
+    padding: 7rem 2rem;
+    overflow: hidden;
+    .section-heading {
+      font-size: 4rem;
+    }
+    .main-video {
+      p {
+        width: 80%;
+      }
+    }
+    .content {
+      position: relative;
+      z-index: 10;
+    }
+    .image-container-1,.image-container-2, .image-container-3 {
+      position: absolute;
+      z-index: 4;
+    }
+    .image-container-1 {
+      top: -6rem;
+      left: 10rem;
+      width: 27rem;
+      height: auto;
+      transform: rotate(200deg);
+    }
+    .image-container-2 {
+      top: -4rem;
+      right: 0;
+      width: 16rem;
+      height: auto;
+      transform: rotate(45deg);
+    }
+    .image-container-3 {
+      bottom: -5rem;
+      left: 45%;
+      width: 30rem;
+      height: auto;
+      transform: rotate(25deg);
+    }
+  }
+}
+
+.ipni-gray {
+  color: #5A626E;
+}
+
+.ipni-light-gray {
+  color: #97A1AF;
+}
+
+.f-30 {
+  font-size: 30px;
+}
+
+.f-18 {
+  font-size: 18px;
+}
+
+.ipni-table-text {
+  color: black;
+}

config/_default/config.toml

@@ -108,3 +108,7 @@ rel  = "sitemap"
   [[module.mounts]]
     source = "node_modules/@hyas/images/layouts"
     target = "layouts"
+
+#[security]
+#  [security.exec]
+#    allow = ['^go$', '^npx$', '^postcss$', '^babel$']