Update navigation / logo / layout paddings

Author: ryyppy

public/static/[email protected]

@@ -418,13 +418,14 @@ let make = (~fixed=true, ~overlayState: (bool, (bool => bool) => unit)) => {
     ref={ReactDOM.Ref.domRef(outerRef)}
     id="header"
     style={ReactDOMStyle.make(~minWidth, ())}
-    className={fixedNav ++ " flex xs:justify-center w-full h-18 bg-gray-95 shadow text-white-80 text-base"}>
+    className={fixedNav ++ " flex xs:justify-center w-full h-16 bg-gray-95 shadow text-white-80 text-base"}>
     <div className="flex justify-between mx-4 md:mx-8 items-center h-full w-full max-w-1280">
-      <div className="h-8 w-8">
+      <div className="h-8 w-8 lg:h-10 lg:w-32">
         <a
           href="/"
           className="block hover:cursor-pointer w-full h-full flex justify-center items-center font-bold">
-          <img src="/static/[email protected]" />
+          <img src="/static/[email protected]" className="lg:hidden" />
+          <img src="/static/[email protected]" className="hidden lg:block" />
         </a>
       </div>
       /* Desktop horizontal navigation */
@@ -468,7 +469,7 @@ let make = (~fixed=true, ~overlayState: (bool, (bool => bool) => unit)) => {
             </a>
           </Link>
         </div>
-        <div className="hidden sm:flex items-center">
+        <div className="hidden md:flex items-center">
           <a
             href=githubHref
             rel="noopener noreferrer"
@@ -509,7 +510,7 @@ let make = (~fixed=true, ~overlayState: (bool, (bool => bool) => unit)) => {
     </button>
     /* Mobile overlay */
     <div
-      style={ReactDOMStyle.make(~minWidth, ~top="4.5rem", ())}
+      style={ReactDOMStyle.make(~minWidth, ~top="4rem", ())}
       className={(
         isOverlayOpen ? "flex" : "hidden"
       ) ++ " sm:hidden flex-col fixed top-0 left-0 h-full w-full z-30 sm:w-9/12 bg-gray-100 sm:h-auto sm:flex sm:relative sm:flex-row sm:justify-between"}>

src/components/Navigation.js

@@ -27,7 +27,7 @@ let make = (~components=Markdown.default, ~children) => {
     <div className="mt-4 xs:mt-16">
       <div className="text-gray-80 text-lg">
         <Navigation overlayState />
-        <div className="absolute top-18 w-full">
+        <div className="absolute top-16 w-full">
           <div
             className="flex justify-center overflow-hidden"
             style={ReactDOM.Style.make(~backgroundColor="#0E1529", ())}>

src/components/Navigation.res

@@ -7,7 +7,7 @@ let make = (~components=Markdown.default, ~children) => {
       <div className="text-gray-80">
         <Navigation overlayState />
         <div className="flex xs:justify-center overflow-hidden pb-48">
-          <main className="mt-32 min-w-320 lg:align-center w-full px-4 md:px-8 max-w-1280 ">
+          <main className="mt-16 min-w-320 lg:align-center w-full px-4 md:px-8 max-w-1280 ">
             <Mdx.Provider components> children </Mdx.Provider>
           </main>
         </div>

src/layouts/LandingPageLayout.js

@@ -142,7 +142,7 @@ module Sidebar = {
         ) ++ " md:block md:w-48 md:-ml-4 lg:w-1/5 md:h-auto md:relative overflow-y-visible bg-white md:relative"}>
         <aside
           id="sidebar-content"
-          className="relative top-0 px-4 w-full block md:top-18 md:pt-24 md:sticky border-r border-gray-5 overflow-y-auto scrolling-touch pb-24"
+          className="relative top-0 px-4 w-full block md:top-16 md:pt-16 md:sticky border-r border-gray-5 overflow-y-auto scrolling-touch pb-24"
           style={ReactDOMStyle.make(~height="calc(100vh - 4.5rem", ())}>
           <div className="flex justify-between">
             <div className="w-3/4 md:w-full"> toplevelNav </div>
@@ -270,10 +270,10 @@ let make = (
           <div className="flex w-full max-w-1280 md:mx-8">
             sidebar
             <main
-              className="px-4 w-full pt-16 md:ml-12 lg:mr-8 md:mt-2 md:pt-24 mb-32 md:max-w-576 lg:max-w-740">
+              className="px-4 w-full pt-16 md:ml-12 lg:mr-8 mb-32 md:max-w-576 lg:max-w-740">
               //width of the right content part
               <div
-                className="z-10 fixed border-b shadow top-18 left-0 pl-4 bg-white w-full py-4 md:relative md:border-none md:shadow-none md:p-0 md:top-auto flex items-center">
+                className="z-10 fixed border-b shadow top-16 left-0 pl-4 bg-white w-full py-4 md:relative md:border-none md:shadow-none md:p-0 md:top-auto flex items-center">
                 <MobileDrawerButton
                   hidden=isNavOpen
                   onClick={evt => {

src/layouts/LandingPageLayout.res

@@ -104,6 +104,7 @@ module.exports = {
         "320": "20rem"
       },
       inset: {
+        "16": "4rem",
         "18": "4.5rem"
       },
       spacing: {