header and footer changes except hamburger menu

.gitignore

@@ -5,10 +5,5 @@ dune-project
 cache/*
 Version.ml
 /_opam/
-<<<<<<< HEAD
 /*.pp.ligo
-<<<<<<< HEAD
 **/.DS_Store
-=======
-**/.DS_Store
->>>>>>> [LIGO-93] redesign profile pics

gitlab-pages/website/core/Footer.js

@@ -24,57 +24,53 @@ class Footer extends React.Component {
   render() {
     return (
       <footer className="nav-footer" id="footer">
-        <section className="sitemap">
+        <section className="footer-wrapper">
-          <a className="nav-home"></a>
+          <div className="sitemap">
-          <div>
+            <a className="nav-home"></a>
-            <h5>Docs</h5>
+            <div>
-            <a href={this.docUrl('setup-installation.html', this.props.language)}>
+              <h5>Docs</h5>
-              Installation
+              <a href={this.docUrl('setup-installation.html', this.props.language)}>
-            </a>
+                Installation
-            <a href={this.docUrl('api-cli-commands.html', this.props.language)}>
+              </a>
-              CLI Commands
+              <a href={this.docUrl('api-cli-commands.html', this.props.language)}>
-            </a>
+                CLI Commands
-            <a href={this.docUrl('contributors/origin.html', this.props.language)}>
+              </a>
-              Contribute
+              <a href={this.docUrl('contributors/origin.html', this.props.language)}>
-            </a>
+                Contribute
-            <a href="/odoc">
+              </a>
-              Api Documentation
+              <a href="/odoc">
-            </a>
+                Api Documentation
+              </a>
+            </div>
+            <div>
+              <h5>Community</h5>
+              <a
+                href="https://tezos.stackexchange.com/questions/tagged/ligo"
+                target="_blank"
+                rel="noreferrer noopener">
+                Tezos Stack Exchange
+              </a>
+              <a
+                href="https://discord.gg/9rhYaEt"
+                target="_blank"
+                rel="noreferrer noopener">
+                Discord
+              </a>
+            </div>
+            <div>
+              <h5>More</h5>
+              <a href={`${this.props.config.baseUrl}blog`}>Blog</a>
+              <a href={this.docUrl('tutorials/get-started/tezos-taco-shop-smart-contract.html', this.props.language)}>Tutorials</a>
+              <a href={`${this.props.config.repoUrl}`}>Gitlab</a>
+            </div>
           </div>
-          <div>
+
-            <h5>Community</h5>
+          <div className="copyright">
-            <a
+            {this.props.config.copyright}
-              href="https://tezos.stackexchange.com/questions/tagged/ligo"
-              target="_blank"
-              rel="noreferrer noopener">
-              Tezos Stack Exchange
-            </a>
-            <a
-              href="https://discord.gg/9rhYaEt"
-              target="_blank"
-              rel="noreferrer noopener">
-              Discord
-            </a>
-          </div>
-          <div>
-            <h5>More</h5>
-            <a href={`${this.props.config.baseUrl}blog`}>Blog</a>
-            <a href={this.docUrl('tutorials/get-started/tezos-taco-shop-smart-contract.html', this.props.language)}>Tutorials</a>
-            <a href={`${this.props.config.repoUrl}`}>Gitlab</a>
           </div>
         </section>
       
         
-        <section className="copyright">
-          Website built with <a
-            href="https://docusaurus.io/"
-            target="_blank"
-            rel="noreferrer noopener">
-            Docusaurus
-          </a> by Facebook.
-          <div>Icons made by <a href="https://www.freepik.com/" title="Freepik">Freepik</a> & <a href="https://www.flaticon.com/authors/lucy-g" title="Lucy G">Lucy G</a> from <a href="https://www.flaticon.com/" 			    title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" 			    title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
-          {this.props.config.copyright}
-        </section>
       </footer>
     );
   }

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

@@ -106,109 +106,25 @@ class HomeSplash extends React.Component {
     const langPart = `${language ? `${language}/` : ""}`;
     const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`;
 
-    const SplashContainer = props => (
+    const SampleCode = props => (
-      <div className="homeContainer">
+      <div className="sample-code-container">
-        <div className="homeSplashFade">
+        <div className="sample-code">
-          <div className="wrapper homeWrapper">
+          <div className="tabs">
-            <div className="tabs">
+            <div className="nav-tabs">
-              <div className="nav-tabs">
+              <div
-                <div
+                id="tab-group-3-tab-4"
-                  id="tab-group-3-tab-4"
+                className="nav-link active"
-                  className="nav-link active"
+                data-group="group_3"
-                  data-group="group_3"
+                data-tab="tab-group-3-content-4"
-                  data-tab="tab-group-3-content-4"
+              >
-                >
+                PascaLIGO
-                  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
-                <div
+                className="nav-link"
-                  id="tab-group-3-content-4"
+                data-group="group_3"
-                  className="tab-pane active"
+                data-tab="tab-group-3-content-5"
-                  data-group="group_3"
+              >
-                  tabIndex="-1"
+                CameLIGO
-                >
-                  <div>
-                    <span>
-                      <pre>
-                        <code className="hljs css language-Pascal">
-                          // variant defining pseudo multi-entrypoint actions
-                          <br />
-                          type action is
-                          <br />| Increment of int
-                          <br />| Decrement of int
-                          <br />
-                          <br />
-                          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) :
-                          int is
-                          <br /> block {"{ skip }"} with a - b<br />
-                          <br />
-                          // real entrypoint that re-routes the flow based on
-                          the action provided
-                          <br />
-                          function main (const p : action ; const s : int) :
-                          (list(operation) * int) is
-                          <br /> block {"{ skip }"} with ((nil :
-                          list(operation)),
-                          <br /> case p of
-                          <br /> | Increment(n) -&gt; add(s, n)
-                          <br /> | Decrement(n) -&gt; subtract(s, n)
-                          <br /> end)
-                          <br />
-                        </code>
-                      </pre>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  id="tab-group-3-content-5"
-                  className="tab-pane"
-                  data-group="group_3"
-                  tabIndex="-1"
-                >
-                  <div>
-                    <pre>
-                      <code className="hljs css language-Pascal">
-                        type storage = int <br />
-                        <br />
-                        (* variant defining pseudo multi-entrypoint actions *){" "}
-                        <br />
-                        <br />
-                        type action =<br />| Increment of int
-                        <br />| Decrement of int
-                        <br />
-                        <br />
-                        let add (a: int) (b: int) : int = a + b<br />
-                        <br />
-                        let subtract (a: int) (b: int) : int = a - b<br />
-                        <br />
-                        (* real entrypoint that re-routes the flow based on the
-                        action provided *)
-                        <br />
-                        <br />
-                        let%entry main (p : action) storage =<br /> let storage
-                        =<br /> match p with
-                        <br /> | Increment n -> add storage n<br /> | Decrement
-                        n -> subtract storage n<br /> in (([] : operation list),
-                        storage)
-                        <br />
-                      </code>
-                    </pre>
-                  </div>
-                </div>
               </div>
               <div className="disabled">ReasonLIGO (coming soon) </div>
             </div>
@@ -216,32 +132,22 @@ class HomeSplash extends React.Component {
               {PascalLIGOTab()}
               {CamelLIGOTab()}
             </div>
-
-            {props.children}
           </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(
+            Get Started
-                "tutorials/get-started/tezos-taco-shop-smart-contract"
+          </LinkButton>
-              )}
-            >
-              Tutorials
-            </Button>
-            <Button href={docUrl("contributors/origin.html")}>
-              Contribute
-            </Button>
-          </PromoSection>
         </div>
         <SampleCode />
       </div>
@@ -340,23 +246,20 @@ class Index extends React.Component {
           {[
             {
               content:
-                "Write in PascaLIGO (pascal-like syntax) or CameLIGO (caml-like syntax). If you know OCaml, you can also add your own syntax.",
+                "Write types, then code, and benefit from the safety coming from type systems.",
-              image: `${baseUrl}img/edit.svg`,
+              image: `${baseUrl}img/strong-type-system.svg`,
-              imageAlign: "top",
+              title: "Strong Type System"
-              title: "Syntax Agnostic"
             },
             {
               content:
-                "Write types, then code, and benefit from the safety coming from type systems.",
+                "Write in PascaLIGO (pascal-like syntax) or CameLIGO (caml-like syntax). If you know OCaml, you can also add your own syntax.",
-              image: `${baseUrl}img/lightning.svg`,
+              image: `${baseUrl}img/syntax-agnostic.svg`,
-              imageAlign: "top",
+              title: "Syntax Agnostic"
-              title: "Strong Type System"
             },
 
             {
               content: "With Granary, you can use LIGO as a lib from NodeJS.",
-              image: `${baseUrl}img/puzzle.svg`,
+              image: `${baseUrl}img/easy-integration.svg`,
-              imageAlign: "top",
               title: "Easy Integration"
             }
           ].map(FeatureCard)}
@@ -410,8 +313,6 @@ class Index extends React.Component {
           </a>
         ));
 
-      const pageUrl = page => baseUrl + (language ? `${language}/` : "") + page;
-
       return (
         <div className="partners-container hide-small">
           {PartnerShowcase}
@@ -443,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">
-          <h1 className="sectionTitle">Team</h1>
+          <h2>Team</h2>
-          <div className="team-container">{showcase}</div>
+          <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/siteConfig.js

@@ -115,7 +115,6 @@ const siteConfig = {
   team,
 
   /* path to images for header/footer */
-  headerIcon: "img/logo.svg",
   footerIcon: "img/logo.svg",
   favicon: "img/logo.svg",
 
@@ -140,7 +139,7 @@ const siteConfig = {
   */
 
   // This copyright info is used in /core/Footer.js and blog RSS/Atom feeds.
-  copyright: `Copyright © ${new Date().getFullYear()} Marigold`,
+  copyright: `© ${new Date().getFullYear()} LIGO. All rights reserved.`,
 
   highlight: {
     // Highlight.js theme to use for syntax highlighting in code blocks.

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

@@ -105,6 +105,36 @@ footnote {
   font-size: 0.75rem;
 }
 
+.projectTitle small {
+  max-width: 700px;
+  text-align: center;
+  margin: 0 auto;
+  margin-top: 0.7em;
+}
+
+.fixedHeaderContainer {
+  background-color: #ffffff;
+  color: var(--color-primary-text);
+}
+
+.fixedHeaderContainer a {
+  color: var(--color-primary-text);
+}
+
+.fixedHeaderContainer .headerWrapper header a:nth-child(2) {
+  background-color: #EFEFEF;
+  margin-left: 50px;
+  padding: 4px 7px;
+  font-weight: normal;
+}
+
+.fixedHeaderContainer .headerWrapper header h3 {
+  margin: 0;
+  color: var(--color-primary-text);
+  text-decoration: none;
+}
+
+
 .fixedHeaderContainer header .headerTitleWithLogo {
   display: none;
 }
@@ -113,8 +143,40 @@ footnote {
   background: var(--color-primary-text);
 }
 
+.nav-footer .copyright {
+  text-align: left;
+  margin-left: 92px;
+  margin-top: 3em;
+
+  border-top: 1px solid white;
+  padding-top: 3em;
+  margin-right: 92px;
+}
+
+.nav-footer .footer-wrapper {
+  margin: 0 auto 3em;
+  max-width: 1080px;
+}
+
+.nav-footer .sitemap {
+  margin: 0;
+}
+
 .navigationSlider .slidingNav {
-  background: #1a1a1a;
+  background: white;
+}
+
+.navigationSlider .slidingNav ul {
+  background: white;
+  color: var(--color-primary-text) !important;
+}
+
+.navigationSlider .slidingNav ul li > a:focus,
+.navigationSlider .slidingNav ul li > a:hover,
+.navigationSlider .slidingNav ul li.siteNavItemActive > a,
+.navigationSlider .slidingNav ul li.siteNavGroupActive > a {
+  background-color: white;
+  color: var(--color-primary-brand) !important;
 }
 
 /** Top Section **/
@@ -459,6 +521,10 @@ body
   padding: 0 var(--padding-level-1);
 }
 
+.profileContainer a {
+  color: var(--color-primary-text);
+}
+
 .profileContainer:hover {
   color: var(--color-primary-brand);
 }
@@ -524,10 +590,6 @@ body
   background-color: var(--color-light-gray);
 }
 
-.card:hover {
-  background-color: var(--color-light-blue);
-}
-
 .card-text {
   text-align: center;
 }
@@ -554,6 +616,16 @@ body
   border-left: 5px solid var(--color-primary-brand);
 }
 
+@media only screen and (min-width: 1024px) {
+  .navigationSlider .slidingNav ul li a {
+    color: #0D0F33;
+  }
+
+  .navigationSlider .slidingNav ul li a:hover {
+    color: #3AA0FF;
+  }
+}
+
 @media (min-width: 560px) and (max-width: 768px) {
   /** Special rules to reorient feature cards at only one screen size**/
   .card {
@@ -572,6 +644,10 @@ body
   .profileContainer {
     max-width: 30%;
   }
+
+  .headerWrapper header a:nth-child(2) {
+    display: none;
+  }
 }
 
 @media (max-width: 560px) {
@@ -588,7 +664,21 @@ body
   }
 }
 
+@media (max-width: 735px) {
+  .nav-footer .sitemap {
+    max-width: 90%;
+    margin: 0 auto;
+  }
+
+  .nav-footer .copyright {
+    max-width: 90%;
+    text-align: left;
+    margin: 3em auto;
+  }
+}
+
 @media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
+
 }
 
 @media only screen and (max-width: 1023px) {
@@ -607,7 +697,10 @@ body
   }
 }
 
-@media only screen and (min-width: 1280px) {
+@media only screen and (max-width: 1023px) {
+  .reactNavSearchWrapper input#search_input_react {
+    background-color: rgba(0, 0, 0, 0.2);
+  }
 }
 
 @media only screen and (min-width: 1440px) {