Merge branch 'LIGO-95-layout' into 'LIGO-94-feature-cards'

[LIGO-95] Layout and top section

See merge request ligolang/ligo!92

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,80 @@ 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}
-          </div>
-        </div>
-      </div>
 );
 
-    const Logo = props => (
+const LinkButton = props => (
-      <div className="projectLogo">
+  <a href={props.href} target={props.target}>
-        <img src={props.img_src} alt="Project Logo" />
+    <button className={props.className}>{props.children}</button>
-      </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-container">
+        <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>
       </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 +316,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 +344,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

@@ -41,12 +41,20 @@ body,
   font-family: "Open Sans", sans-serif;
 }
 
-code,
+/** TODO: code font size is currently 85%; designs have it as 1rem (16px);
+this breaks some of the tiny-text in the internal pages, so wait until those
+are fixed to set this to the correct size
+**/
+.landing code,
 .mono {
   font-family: "Source Code Pro", monospace;
   font-size: 1rem;
 }
 
+code {
+  font-family: "Source Code Pro", monospace;
+}
+
 h1 {
   font-size: 2.625rem;
 }
@@ -92,17 +100,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 +120,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 +146,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 +162,32 @@ 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-3);
+}
+
+.home-text {
+  max-width: 40%;
+}
+
+.sample-code-container {
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  max-width: 60%;
+  background: url("/img/geo.svg") top right/140px 140px no-repeat,
+    url("/img/geo.svg") bottom left/200px 200px no-repeat;
+}
+
+.sample-code {
+  width: 80%;
+  padding: 25px;
+  box-shadow: 0px 0px 70px rgba(13, 15, 51, 0.06);
+  background-color: white;
 }
 
 blockquote {
@@ -179,44 +199,13 @@ blockquote {
 blockquote code {
   opacity: 0.5;
 }
-/* 
-blockquote a {
-    color: rgba(255,255,255, 0.8);
-    border-bottom: 1px solid rgba(255,255,255, 0.8);
-}
 
-blockquote a:hover {
+.landing a {
-    color: rgba(255,255,255, 1);
+  color: var(--color-white);
-    border-bottom: 1px solid rgba(255,255,255, 1);
-} */
-/* 
-blockquote {
-    background-color: rgba(252, 214, 0, 0.687);
-    border-left-color: rgba(240, 210, 37, 1);
-    color: rgba(0, 0, 0, 0.632);
-} */
-
-a {
-  color: rgba(178, 33, 12, 0.8);
 }
 
 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 +229,8 @@ a:hover {
   margin-top: -25px;
 }
 
-.features {
+.features,
+.team {
   background: white;
   margin-top: -40px;
   position: relative;
@@ -269,18 +259,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 +267,10 @@ html {
   padding-top: 60px;
 }
 
+.mainContainer > * {
+  padding: var(--padding-level-4) 0;
+}
+
 .tocActive .onPageNav > .toc-headings {
   padding-top: 24px;
 }
@@ -357,6 +339,7 @@ body
   font-weight: normal;
   line-height: 1.375rem;
   text-transform: none;
+  text-align: center;
 }
 
 .button,
@@ -385,7 +368,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);
 }
@@ -473,15 +457,16 @@ body
   color: var(--color-primary-brand);
 }
 
+.profileContainer:hover .profileImage {
+  box-shadow: 12px 12px 0px var(--color-primary-brand);
+}
+
 .profileImage {
   max-height: 195px;
   max-width: 195px;
   width: 100%;
   border: var(--color-gray);
 }
-.profileImage:hover {
-  box-shadow: 12px 12px 0px var(--color-primary-brand);
-}
 
 .flex-inline-container {
   display: flex;
@@ -522,6 +507,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 +559,29 @@ 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) {
+  .home-container {
+    flex-direction: column-reverse;
+    margin-top: var(--padding-level-1);
+  }
+  .home-text {
+    align-content: center;
+    text-align: center;
+    max-width: 90%;
+    padding-top: var(--padding-level-2);
+  }
+  .sample-code-container {
+    max-width: 100%;
+  }
 }
 
-@media only screen and (min-width: 1400px) {
+@media only screen and (min-width: 1280px) {
+}
+
+@media only screen and (min-width: 1440px) {
+  .landing h4.tagline-text {
+    font-size: 2.25rem;
+  }
 }
 
 @media only screen and (min-width: 1500px) {

gitlab-pages/website/static/img/geo.svg

@@ -0,0 +1,11 @@
+<svg width="283" height="293" viewBox="0 0 283 293" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.5493 9.85961L22.8389 40.1643L44.2426 17.8585L14.5493 9.85961Z" fill="#FC683A"/>
+<path d="M256.608 227L215 282.348L282.301 293L256.608 227Z" fill="#EFEFEF"/>
+<circle cx="100" cy="154" r="74" stroke="url(#paint0_linear)" stroke-width="52"/>
+<defs>
+<linearGradient id="paint0_linear" x1="100" y1="54.0002" x2="100" y2="254" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3AA0FF"/>
+<stop offset="1" stop-color="#0072DC"/>
+</linearGradient>
+</defs>
+</svg>