Merge branch 'develop' into website/blog-module

frontend/website-redesign/pages/docs/index.mdx

@@ -3,6 +3,8 @@ export default Page({title: "Overview"});
 
 # Overview
 
+Here's where you'll find all the documentation for the whole process of getting up and running with Coda.
+
 ## What is Coda?
 
 Coda is the first cryptocurrency protocol with a succinct blockchain. Current cryptocurrencies like Bitcoin and Ethereum store hundreds of gigabytes of data, and as time goes on, their blockchains will only increase in size. With Coda however, no matter how much the usage grows, the blockchain always stays the same size - about ~20 kilobytes (the size of a few tweets). This means Coda can be accessed trustlessly from any device, including phones and browsers, and enables frictionless integration of cryptocurrency into applications for developers.

frontend/website-redesign/src/Theme.re

@@ -13,6 +13,7 @@ module Colors = {
   let digitalGray = `hex("575757");
   let error = `hex("e93939");
   let status = `hex("ffb13b");
+  let codeHighlight = `hex("e9eaf3");
 };
 
 module Typeface = {
@@ -274,8 +275,7 @@ module Type = {
       ),
     ]);
 
-  let sectionSubhead =
-    style([
+  let sectionSubhead_ = [
       Typeface.monumentGrotesk,
       fontSize(`rem(1.)),
       lineHeight(`rem(1.5)),
@@ -286,7 +286,8 @@ module Type = {
         MediaQuery.tablet,
         [fontSize(`rem(1.25)), lineHeight(`rem(1.875))],
       ),
-    ]);
+    ];
+  let sectionSubhead = style(sectionSubhead_);
 
   let paragraph =
     style([
@@ -312,6 +313,17 @@ module Type = {
       ),
     ]);
 
+  let inlineCode_ =[
+      Typeface.monumentGroteskMono,
+      fontSize(`rem(0.9375)),
+      lineHeight(`rem(1.5)),
+      color(Colors.digitalBlack),
+      backgroundColor(Colors.codeHighlight),
+      padding2(~v=`zero, ~h=`rem(0.625)),
+      borderRadius(`px(3))
+    ];
+  let inlineCode = style(inlineCode_);
+
   let paragraphMono =
     style([
       Typeface.monumentGrotesk,

frontend/website-redesign/src/components/Alert.re

@@ -3,13 +3,17 @@ module Styles = {
 
   let main =
     style([
-      border(px(1), `solid, Theme.Colors.digitalBlack),
+      border(px(1), `solid, Theme.Colors.digitalBlackA(0.25)),
       borderRadius(px(4)),
       overflow(`hidden),
     ]);
 
   let inner =
-    merge([style([margin(`zero), padding2(~v=`rem(0.), ~h=`rem(1.))])]);
+    merge([style([
+                 margin(`zero),
+                 padding2(~v=`rem(1.), ~h=`rem(1.)),
+                 selector("p", [ margin(`zero) ])
+    ])]);
 
   let title = c =>
     merge([

frontend/website-redesign/src/components/DocsComponents.re

@@ -14,6 +14,40 @@ module Styles = {
       backgroundSize(`cover),
       backgroundImage(url("/static/img/link.svg")),
     ]);
+
+  let h1Spacing = style([
+    marginBottom(`rem(1.))
+  ]);
+
+  let headerSpacing = merge([
+                            h1Spacing,
+                            style([
+    marginTop(`rem(3.))
+  ])]);
+
+  let paragraphSpacing = style([
+    marginBottom(`rem(1.))
+  ]);
+
+  let code = style([
+    Theme.Typeface.monumentGroteskMono,
+    fontSize(`rem(1.)),
+    lineHeight(`rem(1.5))
+  ]);
+
+  let list = style([
+    color(Theme.Colors.digitalBlack),
+    Theme.Typeface.monumentGrotesk,
+    fontSize(`rem(1.125)),
+    lineHeight(`rem(1.6875)),
+    marginTop(`rem(0.5)),
+    marginBottom(`rem(1.)),
+    marginLeft(`rem(2.6875)),
+  ]);
+
+  let link = style([
+    textDecoration(`none)
+  ]);
 };
 
 module type Component = {let element: React.element;};
@@ -52,32 +86,32 @@ open Css;
 
 module H1 =
   WrapHeader({
-    let element = <h1 className=Theme.Type.h1 />;
+    let element = <h1 className=merge([Styles.h1Spacing, Theme.Type.h1]) />;
   });
 
 module H2 =
   WrapHeader({
-    let element = <h2 className=Theme.Type.h2 />;
+    let element = <h2 className=merge([Styles.headerSpacing, Theme.Type.h2]) />;
   });
 
 module H3 =
   WrapHeader({
-    let element = <h3 className=Theme.Type.h3 />;
+    let element = <h3 className=merge([Styles.headerSpacing, Theme.Type.h3]) />;
   });
 
 module H4 =
   WrapHeader({
-    let element = <h4 className=Theme.Type.h4 />;
+    let element = <h4 className=merge([Styles.headerSpacing, Theme.Type.h4]) />;
   });
 
 module P =
   Wrap({
-    let element = <p className=Theme.Type.paragraph />;
+    let element = <p className=merge([Styles.paragraphSpacing, Theme.Type.paragraph]) />;
   });
 
 module A =
   Wrap({
-    let element = <a className=Theme.Type.link />;
+    let element = <a className=merge([Styles.link, Theme.Type.link]) />;
   });
 
 module Strong =
@@ -128,7 +162,7 @@ module Pre = {
           borderRadius(`px(4)),
           padding2(~v=`rem(1.), ~h=`rem(1.)),
           overflow(`scroll),
-          // selector("code", [Theme.Type.paragraphMono]),
+          selector("code", [color(Theme.Colors.white)]),
         ])}>
         children
       </pre>
@@ -138,17 +172,17 @@ module Pre = {
 
 module Code =
   Wrap({
-    let element = <code className=Theme.Type.paragraphMono />;
+    let element = <code className=Styles.code />;
   });
 
 module Ul =
   Wrap({
-    let element = <ul className="" /* TODO */ />;
+    let element = <ul className=Styles.list />;
   });
 
 module Ol =
   Wrap({
-    let element = <ol className="" /* TODO */ />;
+    let element = <ol className=Styles.list />;
   });
 
 module Img =

frontend/website-redesign/src/components/LabelEyebrow.re

@@ -0,0 +1,23 @@
+module Styles = {
+  open Css;
+  let link =
+    style([
+      Theme.Typeface.monumentGrotesk,
+      cursor(`pointer),
+      color(Theme.Colors.orange),
+      display(`flex),
+      marginTop(`rem(1.)),
+    ]);
+
+  let text =
+    style([
+      marginRight(`rem(0.2)),
+      cursor(`pointer),
+      marginBottom(`rem(2.)),
+    ]);
+};
+
+[@react.component]
+let make = (~copy) => {
+  <h4 className=Theme.Type.h4>{React.string(copy)}</h4>
+};

frontend/website-redesign/src/components/SideNav.re

@@ -11,7 +11,7 @@ module Styles = {
         Theme.MediaQuery.notMobile,
         [
           marginRight(rem(2.)),
-          marginTop(rem(2.)),
+          marginTop(`zero),
           position(`sticky),
           top(rem(2.5)),
         ],

frontend/website-redesign/src/pages/Docs.re

@@ -6,16 +6,16 @@ module Style = {
   let content =
     style([
       maxWidth(`rem(53.)),
+      marginBottom(`rem(2.875)),
       media(Theme.MediaQuery.notMobile, [marginLeft(`rem(1.))]),
       selector(
         "p > code, li > code",
-        [
-          boxSizing(`borderBox),
-          padding2(~v=`px(2), ~h=`px(6)),
-          backgroundColor(Theme.Colors.black),
-          borderRadius(`px(4)),
-        ],
+        Theme.Type.inlineCode_,
       ),
+      selector(
+        "h1 + p",
+        Theme.Type.sectionSubhead_
+      )
     ]);
 
   let page =
@@ -29,6 +29,10 @@ module Style = {
       media(Theme.MediaQuery.notMobile, [padding2(~v=`zero, ~h=`rem(3.))]),
     ]);
 
+  let eyebrow = style([
+    marginBottom(`rem(1.))
+  ])
+
   let editLink =
     style([
       media(Theme.MediaQuery.tablet, [position(`relative), float(`right)]),
@@ -91,8 +95,10 @@ let make = (~metadata, ~children) => {
     <div className=Style.page>
       <DocsSideNav currentSlug />
       <div className=Style.content>
+        <div className=Style.eyebrow>
+          <LabelEyebrow copy="Documentation"/>
+        </div>
         <EditLink route={router.route} />
-        // <Next.MDXProvider components={DocsComponents.allComponents()}>
         <Next.MDXProvider components={DocsComponents.allComponents()}>
           children
         </Next.MDXProvider>