[LIGO-95] layout for top section

gitlab-pages/website/pages/en/index.js

@@ -13,40 +13,7 @@ const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
 const Container = CompLibrary.Container;
 const GridBlock = CompLibrary.GridBlock;
 
-class HomeSplash extends React.Component {
+const PascalLIGOTab = () => (
-  render() {
-    const { siteConfig, language = "" } = this.props;
-    const { baseUrl, docsUrl } = siteConfig;
-    const docsPart = `${docsUrl ? `${docsUrl}/` : ""}`;
-    const langPart = `${language ? `${language}/` : ""}`;
-    const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`;
-
-    const SplashContainer = props => (
-      <div className="homeContainer">
-        <div className="homeSplashFade">
-          <div className="wrapper homeWrapper">
-            <div className="tabs">
-              <div className="nav-tabs">
-                <div
-                  id="tab-group-3-tab-4"
-                  className="nav-link active"
-                  data-group="group_3"
-                  data-tab="tab-group-3-content-4"
-                >
-                  PascaLIGO
-                </div>
-                <div
-                  className="nav-link"
-                  data-group="group_3"
-                  data-tab="tab-group-3-content-5"
-                >
-                  CameLIGO
-                </div>
-                <div className="nav-link">ReasonLIGO (coming soon) </div>
-                {/* <div id="tab-group-3-tab-5" className="nav-link" data-group="group_3"
-                data-tab="tab-group-3-content-5">Camligo</div> */}
-              </div>
-              <div className="tab-content">
   <div
     id="tab-group-3-content-4"
     className="tab-pane active"
@@ -67,17 +34,15 @@ class HomeSplash extends React.Component {
             function add (const a : int ; const b : int) : int is
             <br /> block {"{ skip }"} with a + b<br />
             <br />
-                          function subtract (const a : int ; const b : int) :
+            function subtract (const a : int ; const b : int) : int is
-                          int is
             <br /> block {"{ skip }"} with a - b<br />
             <br />
-                          // real entrypoint that re-routes the flow based on
+            // real entrypoint that re-routes the flow based on the action
-                          the action provided
+            provided
             <br />
-                          function main (const p : action ; const s : int) :
+            function main (const p : action ; const s : int) : (list(operation)
-                          (list(operation) * int) is
+            * int) is
-                          <br /> block {"{ skip }"} with ((nil :
+            <br /> block {"{ skip }"} with ((nil : list(operation)),
-                          list(operation)),
             <br /> case p of
             <br /> | Increment(n) -&gt; add(s, n)
             <br /> | Decrement(n) -&gt; subtract(s, n)
@@ -88,6 +53,9 @@ class HomeSplash extends React.Component {
       </span>
     </div>
   </div>
+);
+
+const CamelLIGOTab = () => (
   <div
     id="tab-group-3-content-5"
     className="tab-pane"
@@ -99,8 +67,7 @@ class HomeSplash extends React.Component {
         <code className="hljs css language-Pascal">
           type storage = int <br />
           <br />
-                        (* variant defining pseudo multi-entrypoint actions *){" "}
+          (* variant defining pseudo multi-entrypoint actions *) <br />
-                        <br />
           <br />
           type action =<br />| Increment of int
           <br />| Decrement of int
@@ -110,78 +77,78 @@ class HomeSplash extends React.Component {
           <br />
           let subtract (a: int) (b: int) : int = a - b<br />
           <br />
-                        (* real entrypoint that re-routes the flow based on the
+          (* real entrypoint that re-routes the flow based on the action
-                        action provided *)
+          provided *)
           <br />
           <br />
-                        let%entry main (p : action) storage =<br /> let storage
+          let%entry main (p : action) storage =<br /> let storage =<br /> match
-                        =<br /> match p with
+          p with
-                        <br /> | Increment n -> add storage n<br /> | Decrement
+          <br /> | Increment n -> add storage n<br /> | Decrement n -> subtract
-                        n -> subtract storage n<br /> in (([] : operation list),
+          storage n<br /> in (([] : operation list), storage)
-                        storage)
           <br />
         </code>
       </pre>
     </div>
   </div>
-              </div>
+);
-            </div>
 
-            {props.children}
+const LinkButton = props => (
-          </div>
+  <a href={props.href} target={props.target}>
-        </div>
+    <button className={props.className}>{props.children}</button>
-      </div>
-    );
-
-    const Logo = props => (
-      <div className="projectLogo">
-        <img src={props.img_src} alt="Project Logo" />
-      </div>
-    );
-
-    const ProjectTitle = () => (
-      <h2 className="projectTitle">
-        <small>{siteConfig.tagline}</small>
-      </h2>
-    );
-
-    const PromoSection = props => (
-      <div className="section promoSection">
-        <div className="promoRow">
-          <div className="pluginRowBlock">{props.children}</div>
-        </div>
-      </div>
-    );
-
-    const Button = props => (
-      <div className="pluginWrapper buttonWrapper">
-        <a className="button" href={props.href} target={props.target}>
-          {props.children}
   </a>
+);
+
+class HomeSplash extends React.Component {
+  render() {
+    const { siteConfig, language = "" } = this.props;
+    const { baseUrl, docsUrl } = siteConfig;
+    const docsPart = `${docsUrl ? `${docsUrl}/` : ""}`;
+    const langPart = `${language ? `${language}/` : ""}`;
+    const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`;
+
+    const SampleCode = props => (
+      <div className="sample-code">
+        <div className="tabs">
+          <div className="nav-tabs">
+            <div
+              id="tab-group-3-tab-4"
+              className="nav-link active"
+              data-group="group_3"
+              data-tab="tab-group-3-content-4"
+            >
+              PascaLIGO
+            </div>
+            <div
+              className="nav-link"
+              data-group="group_3"
+              data-tab="tab-group-3-content-5"
+            >
+              CameLIGO
+            </div>
+            <div className="disabled">ReasonLIGO (coming soon) </div>
+          </div>
+          <div className="tab-content">
+            {PascalLIGOTab()}
+            {CamelLIGOTab()}
+          </div>
+        </div>
       </div>
     );
 
     return (
-      <SplashContainer>
+      <div className="home-container">
-        <div className="inner">
+        <div className="home-text">
-          <ProjectTitle siteConfig={siteConfig} />
+          <h4 className="tagline-text">{siteConfig.tagline}</h4>
-          <PromoSection>
+          <p className="body">{siteConfig.taglineSub}</p>
-            <Button href={docUrl("setup/installation.html")}>
+          <LinkButton
-              Get Started
+            href={docUrl("setup/installation.html")}
-            </Button>
+            className="large-primary-button"
-            <Button
-              href={docUrl(
-                "tutorials/get-started/tezos-taco-shop-smart-contract"
-              )}
           >
-              Tutorials
+            Get Started
-            </Button>
+          </LinkButton>
-            <Button href={docUrl("contributors/origin.html")}>
+        </div>
-              Contribute
+        <SampleCode />
-            </Button>
-          </PromoSection>
       </div>
-      </SplashContainer>
     );
   }
 }
@@ -347,7 +314,6 @@ class Index extends React.Component {
       return (
         <div className="partners-container hide-small">
           {PartnerShowcase}
-          {/* <div className="partners-list"></div> */}
           <div className="partners-text">
             <h3>Our Partners</h3>
             <p className="body">
@@ -376,17 +342,10 @@ class Index extends React.Component {
           </a>
         ));
 
-      const pageUrl = page => baseUrl + (language ? `${language}/` : "") + page;
-
       return (
-        <div className="productShowcaseSection paddingBottom team">
+        <div className="team">
           <h2>Team</h2>
           <div className="flex-inline-container">{showcase}</div>
-          {/* <div className="more-users">
-            <a className="button" href={pageUrl('users.html')}>
-              More {siteConfig.title} Users
-            </a>
-          </div> */}
         </div>
       );
     };

gitlab-pages/website/sidebars.json

@@ -1,11 +1,23 @@
 {
   "docs": {
     "Setup": ["setup/installation", "setup/editor-support"],
-    "Language Basics": ["language-basics/cheat-sheet", "language-basics/types", "language-basics/variables", "language-basics/functions", "language-basics/entrypoints", "language-basics/operators"],
+    "Language Basics": [
+      "language-basics/cheat-sheet",
+      "language-basics/types",
+      "language-basics/variables",
+      "language-basics/functions",
+      "language-basics/entrypoints",
+      "language-basics/operators"
+    ],
     "API": ["api-cli-commands"]
   },
   "contributors-docs": {
-    "Introduction": ["contributors/origin", "contributors/philosophy", "contributors/getting-started", "contributors/documentation-and-releases"],
+    "Introduction": [
+      "contributors/origin",
+      "contributors/philosophy",
+      "contributors/getting-started",
+      "contributors/documentation-and-releases"
+    ],
     "Big Picture": [
       "contributors/big-picture/overview",
       "contributors/big-picture/front-end",
@@ -13,9 +25,15 @@
       "contributors/big-picture/back-end",
       "contributors/big-picture/vendors"
     ],
-    "Road Map": ["contributors/road-map/short-term", "contributors/road-map/long-term"]
+    "Road Map": [
+      "contributors/road-map/short-term",
+      "contributors/road-map/long-term"
+    ]
   },
   "tutorials": {
-    "Get Started": ["tutorials/get-started/tezos-taco-shop-smart-contract", "tutorials/get-started/tezos-taco-shop-payout"]
+    "Get Started": [
+      "tutorials/get-started/tezos-taco-shop-smart-contract",
+      "tutorials/get-started/tezos-taco-shop-payout"
+    ]
   }
 }

gitlab-pages/website/siteConfig.js

@@ -82,7 +82,8 @@ const team = [
 const siteConfig = {
   title: "LIGO", // Title for your website.
   tagline:
-    "LIGO is a statically typed high-level smart-contract language that compiles down to Michelson. It seeks to be easy to use, extensible and safe.",
+    "LIGO is a statically typed high-level smart-contract language that compiles down to Michelson.",
+  taglineSub: "It seeks to be easy to use, extensible and safe.",
   url: "https://your-docusaurus-test-site.com", // Your website URL
   baseUrl: "/", // Base URL for your project */
   // For github.io type URLs, you would set the url and baseUrl like:

gitlab-pages/website/static/css/custom.css

@@ -92,17 +92,11 @@ body,
 .landing .subhead {
   font-size: 1rem;
 }
-.footnote {
+.footnote,
+footnote {
   font-size: 0.75rem;
 }
 
-.projectTitle small {
-  max-width: 700px;
-  text-align: center;
-  margin: 0 auto;
-  margin-top: 0.7em;
-}
-
 .fixedHeaderContainer header .headerTitleWithLogo {
   display: none;
 }
@@ -118,12 +112,7 @@ body,
   background: #1a1a1a;
 }
 
-.homeContainer {
+.hljs {
-  box-shadow: inset 0 -10px 10px -6px rgba(177, 176, 176, 0.2);
-  background: #f6f4f4;
-}
-
-.homeContainer .hljs {
   text-align: left;
   background: transparent;
 }
@@ -149,9 +138,9 @@ body,
   border-bottom: 4px solid #1a1a1a;
 }
 
-.homeContainer .tabs .nav-tabs > div:last-of-type {
+.disabled {
   cursor: default;
-  color: #24292e64;
+  color: #24292e64 !important;
   border-bottom: none;
 }
 
@@ -165,9 +154,20 @@ body,
   top: 4px;
 }
 
-.promoSection .buttonWrapper:first-of-type > a.button {
+/** Top Section **/
-  background: #b2210c;
+.home-container {
-  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--padding-level-4);
+}
+
+.home-text {
+  max-width: 40%;
+}
+
+.code-sample {
+  max-width: 55%;
 }
 
 blockquote {
@@ -197,26 +197,11 @@ blockquote {
 } */
 
 a {
-  color: rgba(178, 33, 12, 0.8);
+  color: var(--color-white);
 }
 
 a:hover {
-  color: rgba(178, 33, 12, 1);
+  font-weight: bold;
-}
-
-.homeContainer .homeWrapper .projectLogo {
-  display: block;
-  position: relative;
-  padding: 0;
-}
-
-.projectTitle {
-  margin-top: 30px;
-  margin-bottom: 0;
-}
-
-.projectTitle small {
-  margin: 0 auto;
 }
 
 .promoSection .promoRow {
@@ -240,7 +225,8 @@ a:hover {
   margin-top: -25px;
 }
 
-.features {
+.features,
+.team {
   background: white;
   margin-top: -40px;
   position: relative;
@@ -269,18 +255,6 @@ html {
   color: #b2210c;
 }
 
-.productShowcaseSection.team .logos img {
-  border-radius: 50%;
-  height: 150px;
-  margin-bottom: 0px;
-  padding-left: 40px;
-  padding-right: 40px;
-}
-
-.productShowcaseSection.team .logos p {
-  padding-top: 0px;
-}
-
 .toc .toggleNav {
   margin-top: 12px;
 }
@@ -289,6 +263,10 @@ html {
   padding-top: 60px;
 }
 
+.mainContainer > * {
+  padding: var(--padding-level-4) 0;
+}
+
 .tocActive .onPageNav > .toc-headings {
   padding-top: 24px;
 }
@@ -357,6 +335,7 @@ body
   font-weight: normal;
   line-height: 1.375rem;
   text-transform: none;
+  text-align: center;
 }
 
 .button,
@@ -385,7 +364,8 @@ body
 .large-secondary-button,
 .large-secondary-button:hover {
   border-radius: 37px;
-  padding: 20px;
+  padding: 5px 20px;
+  min-height: 56px;
   min-width: 132px;
   color: var(--color-white);
 }
@@ -522,6 +502,7 @@ body
   justify-content: space-around;
   align-content: center;
   padding: var(--padding-level-3);
+  margin: var(--padding-level-4) 0;
 }
 
 .partners-container a {
@@ -573,13 +554,16 @@ body
 @media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
 }
 
-@media only screen and (min-width: 1200px) {
-}
-
 @media only screen and (max-width: 1023px) {
 }
 
+@media only screen and (min-width: 1280px) {
+}
+
 @media only screen and (min-width: 1400px) {
+  .landing h4.tagline-text {
+    font-size: 2.25rem;
+  }
 }
 
 @media only screen and (min-width: 1500px) {