Merge branch 'homepage-improvements-2' into 'dev'

Homepage improvements 2

See merge request ligolang/ligo!109

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

@@ -46,6 +46,34 @@ hljs.registerLanguage('pascaligo', pascaligo);
 
 const pre = "```";
 
+const pascaligoExampleSmall = `${pre}pascaligo
+// variant defining pseudo multi-entrypoint 
+// actions
+type action is
+| Increment of int
+| Decrement of int
+
+function add 
+  (const a: int; const b: int): int is 
+  block { skip } with a + b
+
+function subtract 
+  (const a: int; const b: int): int 
+  is block { skip } with a - b
+
+// real entrypoint that re-routes the flow 
+// based on the action provided
+function main 
+  (const p: action; const s: int): 
+  (list(operation) * int) is
+ block { skip } 
+  with ((nil : list(operation)),
+    case p of
+    | Increment(n) -> add(s, n)
+    | Decrement(n) -> subtract(s, n)
+  end)
+${pre}`;
+
 const pascaligoExample = `${pre}pascaligo
 // variant defining pseudo multi-entrypoint actions
 type action is
@@ -68,6 +96,28 @@ function main (const p : action ; const s : int) :
   | Decrement(n) -> subtract(s, n)
  end)
 ${pre}`;
+const cameligoExampleSmall = `${pre}ocaml
+type storage = int
+
+(* variant defining pseudo multi-entrypoint 
+  actions *)
+type action =
+  | Increment of int
+  | Decrement of int
+
+let add (a: int) (b: int): int = a + b
+
+let subtract (a: int) (b: int): int = a - b
+
+(* real entrypoint that re-routes the flow 
+   based on the action provided *)
+let%entry main(p : action) storage =
+  let storage =
+    match p with
+    | Increment n -> add storage n
+    | Decrement n -> subtract storage n
+  in (([] : operation list), storage)
+${pre}`;
 
 const cameligoExample = `${pre}ocaml
 type storage = int
@@ -94,10 +144,11 @@ ${pre}`;
 const PascalLIGOTab = () => (
   <div
     id="tab-group-3-content-4"
-    className="tab-pane active"
+    className="tab-pane active code-snippet"
     data-group="group_3"
     tabIndex="-1"
   >
+    <MarkdownBlock>{pascaligoExampleSmall}</MarkdownBlock>
     <MarkdownBlock>{pascaligoExample}</MarkdownBlock>
   </div>
 );
@@ -105,10 +156,11 @@ const PascalLIGOTab = () => (
 const CamelLIGOTab = () => (
   <div
     id="tab-group-3-content-5"
-    className="tab-pane"
+    className="tab-pane code-snippet"
     data-group="group_3"
     tabIndex="-1"
   >
+    <MarkdownBlock>{cameligoExampleSmall}</MarkdownBlock>
     <MarkdownBlock>{cameligoExample}</MarkdownBlock>
   </div>
 );
@@ -161,6 +213,9 @@ class HomeSplash extends React.Component {
     return (
       <div className="home-container">
         <div className="home-text">
+          <div className="projectTitle">
+            <img alt={siteConfig.title} src={`${siteConfig.baseUrl}img/logo.svg`} />
+          </div>
           <h4 className="tagline-text">{siteConfig.tagline}</h4>
           <p className="body">{siteConfig.taglineSub}</p>
           <LinkButton

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 friendly smart-contract language for Tezos",
+  taglineSub: "Michelson was never so easy",
   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

@@ -191,6 +191,7 @@ footnote {
 }
 
 .home-text {
+  text-align: center;
   flex: 1;
 }
 
@@ -204,9 +205,9 @@ footnote {
 }
 
 .sample-code {
+  border: solid 1px lightgray;
   width: 80%;
-  padding: 25px;
+  padding: 10px;
-  box-shadow: 0px 0px 70px rgba(13, 15, 51, 0.06);
   background-color: white;
 }
 
@@ -259,10 +260,6 @@ blockquote {
   color: rgba(255, 255, 255, 1);
 }
 
-.tab-pane {
-  height: 550px;
-}
-
 blockquote code {
   opacity: 0.5;
 }
@@ -628,7 +625,21 @@ body
   border-left: 5px solid var(--color-primary-brand);
 }
 
+.code-snippet > div:nth-child(2) {
+  display: none;
+}
+
 @media only screen and (min-width: 1024px) {
+  .code-snippet > div:nth-child(2) {
+    display: block;
+  }
+
+  .code-snippet > div:nth-child(1) {
+    display: none;
+  }
+}
+
+@media only screen and (min-width: 768px) {
   .navigationSlider .slidingNav ul li a {
     color: #0D0F33;
   }
@@ -636,6 +647,11 @@ body
   .navigationSlider .slidingNav ul li a:hover {
     color: #3AA0FF;
   }
+
+  .tab-pane {
+    height: 500px;
+  }
+  
 }
 
 @media (min-width: 560px) and (max-width: 768px) {
@@ -701,11 +717,11 @@ body
 
   .home-text {
     text-align: center;
-    padding: var(--padding-level-2) 0;
+    padding: var(--padding-level-2);
   }
 
   .sample-code-container {
-    width: 90%;
+    width: 100%;
   }
   
   .sample-code {
@@ -721,24 +737,22 @@ body
     max-width: 90%;
     padding: var(--padding-level-3);
   }
+
+}
+
 @media only screen and (max-width: 1023px) {
   .reactNavSearchWrapper input#search_input_react {
     background-color: rgba(0, 0, 0, 0.2);
   }
-}
+
+  .landing code {
+    font-size: .8rem;
+  }
 
   .landing h4.tagline-text {
-    font-size: 2.25rem;
+    font-size: 1.5rem;
   }
 
-  .sample-code-container {
-    max-width: 60%;
-  }
-
-  .sample-code {
-    padding: 25px;
-    width: 80%;    
-  }
 }
 
 
@@ -748,7 +762,7 @@ body
   overflow-x:hidden;
   padding:.5em;
   background:white;
-  color:black
+  color:black;
  }
  .hljs-comment,
  .hljs-quote,
@@ -796,4 +810,4 @@ body
  .hljs-strong {
   font-weight:bold
  }
- 
+