Footer and menu in order

cfaec46b · Agathe · aeb6efdc · cfaec46b · cfaec46b · cfaec46b
Commit cfaec46b authored 3 years ago by Agathe
--- a/src/about.md
+++ b/src/about.md
@@ -3,6 +3,7 @@ title: About
 menu: True
 class: about
 layout: single.njk
+order: 4
 heading: We build better for the community 
 chapeau: At Coko, collaboration is the means and the end.
 ---

--- a/src/articles-index.md
+++ b/src/articles-index.md
@@ -5,6 +5,7 @@ permalink: /articles/index.html
 menu: true
 menutitle: Articles
 class: articles
+order: 2
 heading: We explain.
 chapeau:
 ---

--- a/src/blog/blog-index.md
+++ b/src/blog/blog-index.md
@@ -5,6 +5,7 @@ permalink: /blog/index.html
 menu: true
 menutitle: News
 class: news
+order: 1
 ---

 The latest news from Aperture!
\ No newline at end of file
--- a/src/contact.md
+++ b/src/contact.md
@@ -3,6 +3,7 @@ title: Contact
 menu: true
 class: contact
 layout: single.njk
+order: 6
 heading: Get in touch
 chapeau:
 ---

--- a/src/data/site.json
+++ b/src/data/site.json
@@ -7,7 +7,7 @@
    "locale": "en_GB",
    "url": "/",
    "admin": "adam@coko.foundation",
-    "adress": "Coko Foundation<br/>2973 16th St., Suite 300</br>San Francisco, CA 94103",
+    "adress": "COKO FOUNDATION<br/>2973 16th St., Suite 300</br>San Francisco, CA 94103",
    "browser-theme-color": "#000",
    "books": [
        {
@@ -33,22 +33,22 @@
        {
            "name": "twitter",
            "url": "https://twitter.com/cokofoundation",
-            "icon": "<svg width=\"60\" height=\"50\" viewBox=\"0 0 60 50\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M53.8889 12.3932V14.0313C53.8889 30.698 41.5278 50 18.8889 50C11.9444 50 5.41667 48.4331 0 44.8718C0.972222 45.0142 1.94444 45.0855 2.91667 45.0855C8.68056 45.0855 14.0278 42.5214 18.1944 39.1026C12.8472 39.0313 8.26389 35.3276 6.73611 30.3419C7.5 30.4843 8.26389 30.5556 9.02778 30.5556C10.1389 30.5556 11.25 30.4131 12.2917 30.1282C6.66667 28.9886 2.43056 23.8604 2.43056 17.735V17.5926C4.09722 18.5185 5.97222 19.0883 7.98611 19.1595C4.65278 16.8803 2.5 13.0342 2.5 8.68946C2.5 6.33903 3.125 4.41595 4.16667 2.5641C10.2778 10.1852 19.3056 14.9573 29.5139 15.5271C29.3056 14.6011 29.2361 13.604 29.2361 12.6068C29.2361 5.62678 34.7222 0 41.5278 0C45.0694 0 48.2639 1.56695 50.5556 3.9886C53.3333 3.4188 55.9722 2.35043 58.3333 0.925925C57.4306 3.84615 55.4861 6.33903 52.9167 7.90598C55.4167 7.62108 57.7778 6.90883 60 5.91168C58.3333 8.40456 56.25 10.6125 53.8889 12.3932Z\" fill=\"black\"/></svg>"
+            "icon": "<svg width=\"60\" height=\"50\" viewBox=\"0 0 60 50\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M53.8889 12.3932V14.0313C53.8889 30.698 41.5278 50 18.8889 50C11.9444 50 5.41667 48.4331 0 44.8718C0.972222 45.0142 1.94444 45.0855 2.91667 45.0855C8.68056 45.0855 14.0278 42.5214 18.1944 39.1026C12.8472 39.0313 8.26389 35.3276 6.73611 30.3419C7.5 30.4843 8.26389 30.5556 9.02778 30.5556C10.1389 30.5556 11.25 30.4131 12.2917 30.1282C6.66667 28.9886 2.43056 23.8604 2.43056 17.735V17.5926C4.09722 18.5185 5.97222 19.0883 7.98611 19.1595C4.65278 16.8803 2.5 13.0342 2.5 8.68946C2.5 6.33903 3.125 4.41595 4.16667 2.5641C10.2778 10.1852 19.3056 14.9573 29.5139 15.5271C29.3056 14.6011 29.2361 13.604 29.2361 12.6068C29.2361 5.62678 34.7222 0 41.5278 0C45.0694 0 48.2639 1.56695 50.5556 3.9886C53.3333 3.4188 55.9722 2.35043 58.3333 0.925925C57.4306 3.84615 55.4861 6.33903 52.9167 7.90598C55.4167 7.62108 57.7778 6.90883 60 5.91168C58.3333 8.40456 56.25 10.6125 53.8889 12.3932Z\" /></svg>"
        },
        {
            "name": "linkedin",
            "url": "https://www.linkedin.com/company/coko",
-            "icon": "<svg width=\"56\" height=\"55\" viewBox=\"0 0 56 55\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.95958 12.7518H6.89247C2.79848 12.7518 0.0467834 9.93295 0.0467834 6.37588C0.0467834 2.7517 2.79848 0 7.09381 0C11.322 0 13.9395 2.7517 14.0066 6.37588C14.0066 9.93295 11.2549 12.7518 6.95958 12.7518ZM12.8657 18.5907V54.6984H1.18773V18.5907H12.8657ZM31.4564 54.6312H19.8456V26.7116C19.8456 26.7116 19.6442 19.7988 19.6442 18.5907H31.1208L31.5235 23.5572C33.8725 20.0673 37.3625 17.4498 41.9934 17.4498C50.1142 17.4498 55.9532 23.2888 55.9532 33.7586V54.6984H44.2753V34.8996C44.2753 29.0606 41.4565 26.7787 37.9665 26.7787C34.4766 26.7787 31.5235 29.1277 31.5235 33.7586V54.6312H31.4564Z\" fill=\"black\"/></svg>"
+            "icon": "<svg width=\"56\" height=\"55\" viewBox=\"0 0 56 55\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.95958 12.7518H6.89247C2.79848 12.7518 0.0467834 9.93295 0.0467834 6.37588C0.0467834 2.7517 2.79848 0 7.09381 0C11.322 0 13.9395 2.7517 14.0066 6.37588C14.0066 9.93295 11.2549 12.7518 6.95958 12.7518ZM12.8657 18.5907V54.6984H1.18773V18.5907H12.8657ZM31.4564 54.6312H19.8456V26.7116C19.8456 26.7116 19.6442 19.7988 19.6442 18.5907H31.1208L31.5235 23.5572C33.8725 20.0673 37.3625 17.4498 41.9934 17.4498C50.1142 17.4498 55.9532 23.2888 55.9532 33.7586V54.6984H44.2753V34.8996C44.2753 29.0606 41.4565 26.7787 37.9665 26.7787C34.4766 26.7787 31.5235 29.1277 31.5235 33.7586V54.6312H31.4564Z\" /></svg>"
        },
        {
            "name": "mattermost",
            "url": "https://mattermost.coko.foundation",
-            "icon": "<svg width=\"54\" height=\"54\" viewBox=\"0 0 54 54\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M42.8862 5.23002C43.017 6.92978 43.0823 8.69492 43.2131 10.1332C46.4165 13.6634 48.3777 18.3705 48.3777 23.4697C48.3777 34.4528 39.4213 43.4092 28.4383 43.4092C17.4552 43.4092 8.49879 34.4528 8.49879 23.4697C8.49879 13.8596 15.4286 5.75303 24.5157 3.92252L27.523 0C27.3269 0 27.1961 0 27 0C12.1598 0 0 12.1598 0 27C0 41.8402 12.1598 54 27 54C41.8402 54 54 41.8402 54 27C54 18.109 49.6199 10.1332 42.8862 5.23002Z\" fill=\"black\"/> <path d=\"M35.6295 2.94336C34.4528 2.94336 22.3583 16.8029 21.0508 20.4639C19.7433 24.125 21.9661 28.309 26.0847 29.7472C30.138 31.1855 34.5181 29.355 35.8256 25.694C37.1331 22.0983 36.6101 3.33561 35.6295 2.94336Z\" fill=\"black\"/> </svg>"
+            "icon": "<svg width=\"54\" height=\"54\" viewBox=\"0 0 54 54\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M42.8862 5.23002C43.017 6.92978 43.0823 8.69492 43.2131 10.1332C46.4165 13.6634 48.3777 18.3705 48.3777 23.4697C48.3777 34.4528 39.4213 43.4092 28.4383 43.4092C17.4552 43.4092 8.49879 34.4528 8.49879 23.4697C8.49879 13.8596 15.4286 5.75303 24.5157 3.92252L27.523 0C27.3269 0 27.1961 0 27 0C12.1598 0 0 12.1598 0 27C0 41.8402 12.1598 54 27 54C41.8402 54 54 41.8402 54 27C54 18.109 49.6199 10.1332 42.8862 5.23002Z\" /> <path d=\"M35.6295 2.94336C34.4528 2.94336 22.3583 16.8029 21.0508 20.4639C19.7433 24.125 21.9661 28.309 26.0847 29.7472C30.138 31.1855 34.5181 29.355 35.8256 25.694C37.1331 22.0983 36.6101 3.33561 35.6295 2.94336Z\" /> </svg>"
        },
        {
            "name": "gitlab",
            "url": "https://gitlab.coko.foundation",
-            "icon": "<svg width=\"60\" height=\"56\" viewBox=\"0 0 60 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M59.568 31.8934L56.268 21.6634L49.668 1.40138C49.338 0.345375 47.886 0.345375 47.49 1.40138L40.89 21.6634H19.044L12.444 1.40138C12.114 0.345375 10.662 0.345375 10.266 1.40138L3.66599 21.6634L0.365985 31.8934C0.0359847 32.8174 0.365985 33.8734 1.15798 34.4014L30 55.3894L58.776 34.4674C59.568 33.8734 59.898 32.8834 59.568 31.8934Z\" fill=\"black\"/></svg>"
+            "icon": "<svg width=\"60\" height=\"56\" viewBox=\"0 0 60 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M59.568 31.8934L56.268 21.6634L49.668 1.40138C49.338 0.345375 47.886 0.345375 47.49 1.40138L40.89 21.6634H19.044L12.444 1.40138C12.114 0.345375 10.662 0.345375 10.266 1.40138L3.66599 21.6634L0.365985 31.8934C0.0359847 32.8174 0.365985 33.8734 1.15798 34.4014L30 55.3894L58.776 34.4674C59.568 33.8734 59.898 32.8834 59.568 31.8934Z\" /></svg>"
        }
    ]
 }
\ No newline at end of file
--- a/src/layouts/_partials/contact.njk
+++ b/src/layouts/_partials/contact.njk
-<form id="requestDemo" action="" method="post">
+{# <form id="requestDemo" action="" method="post">
        <fieldset>
-            <legend>Do you want to chat?</legend>
-
+            <legend>STAY UP TO DATE</legend>
            <label for="name">Name</label>
-            <input type="text" id="name" name="name" required="" placeholder="Nina Simone">
-
-
+            <input type="text" id="name" name="name" required="" placeholder="Name">
            <label for="mail">Email</label>
-            <input id="mail" name="mail" placeholder="nina@rock.sl" type="email" required="" onchange="checkMail(this.value)">
+            <input id="mail" name="mail" placeholder="Email" type="email" required="" onchange="checkMail(this.value)">
            <input type="submit" value="Submit">
-            <input type="text" id="gotcha" name="_gotcha">
+            <input type="text" id="gotcha" placeholder="Email" name="_gotcha">

        </fieldset>
-    </form>
\ No newline at end of file
+</form> #}
+<div id="mc_embed_signup">
+  <form
+    action="https://foundation.us6.list-manage.com/subscribe/post?u=66d7a0d094af81044257abe87&id=a640a65dc9"
+    method="post"
+    id="mc-embedded-subscribe-form"
+    name="mc-embedded-subscribe-form"
+    class="validate"
+    target="_blank"
+    novalidate
+  >
+    <div id="mc_embed_signup_scroll">
+      <h3>STAY UP TO DATE</h3>
+
+      <div class="mc-field-group">
+        <!-- <label for="mce-EMAIL"
+          >Email Address <span class="asterisk">*</span>
+        </label> -->
+        <input
+          type="email"
+          value=""
+          placeholder="Email Address*"
+          name="EMAIL"
+          class="required email"
+          id="mce-EMAIL"
+        />
+      </div>
+
+      <div class="mc-field-group">
+        <!-- <label for="mce-FNAME">First Name </label> -->
+        <input type="text" value="" placeholder="First Name" name="FNAME" class="" id="mce-FNAME" />
+      </div>
+
+      <div class="mc-field-group">
+        <!-- <label for="mce-LNAME">Last Name </label> -->
+        <input type="text" value="" placeholder="Last Name" name="LNAME" class="" id="mce-LNAME" />
+      </div>
+      <div id="mce-responses" class="clear">
+        <div
+          class="response"
+          id="mce-error-response"
+          style="display: none"
+        ></div>
+        <div
+          class="response"
+          id="mce-success-response"
+          style="display: none"
+        ></div>
+      </div>
+      <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
+      <div style="position: absolute; left: -5000px" aria-hidden="true">
+        <input
+          type="text"
+          name="b_66d7a0d094af81044257abe87_a640a65dc9"
+          tabindex="-1"
+          value=""
+        />
+      </div>
+      <div class="clear">
+        <input
+          type="submit"
+          value="Subscribe"
+          name="subscribe"
+          id="mc-embedded-subscribe"
+          class="button"
+        />
+      </div>
+    </div>
+  </form>
+</div>
+
+<script
+  type="text/javascript"
+  src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"
+></script>
+<script type="text/javascript">
+  (function ($) {
+    window.fnames = new Array();
+    window.ftypes = new Array();
+    fnames[0] = "EMAIL";
+    ftypes[0] = "email";
+    fnames[1] = "FNAME";
+    ftypes[1] = "text";
+    fnames[2] = "LNAME";
+    ftypes[2] = "text";
+  })(jQuery);
+  var $mcj = jQuery.noConflict(true);
+</script>
--- a/src/layouts/_partials/footer.njk
+++ b/src/layouts/_partials/footer.njk
@@ -2,16 +2,18 @@

    <section class="logo">
        {% include "_partials/logo.njk" %}
-    </section>
-    <section class="links">
+
+        <section class="links">
        {% include "_partials/socialMedia.njk" %}
        </section>
-        <section class="contact">
-
+    </section>
+    
+    <section class="contact">
        {% include "_partials/contact.njk" %}
-        </section>
-        <section class="infos">
-        {% include "_partials/footerInfosSupp.njk" %}
-        </section>
+    </section>
+        
+    <section class="infos">
+    {% include "_partials/footerInfosSupp.njk" %}
+    </section>

-    </footer>
\ No newline at end of file
+    </footer>
--- a/src/layouts/_partials/footerInfosSupp.njk
+++ b/src/layouts/_partials/footerInfosSupp.njk
-<section class="adress">
 <div class="adress">{{site.adress | safe}}</div>
 <a href="mailto:{{site.admin}}">{{site.admin}}</a>
-</section>
\ No newline at end of file
--- a/src/layouts/_partials/socialMedia.njk
+++ b/src/layouts/_partials/socialMedia.njk
@@ -2,7 +2,7 @@
    {% for item in site.socialMedia %}
        <li>
            <a href="{{item.url}}">
-                <span class="name">{{item.name}}</span>
+                {# <span class="name">{{item.name}}</span> #}
                {{item.icon | safe}}
            </a>
        </li>

--- a/src/products.md
+++ b/src/products.md
@@ -4,6 +4,7 @@ permalink: /products.html
 menu: true
 layout: products.njk
 class: products
+order: 3
 heading: We use open source to create the perfect platform for you.
 chapeau: 
 ---
--- a/src/services.md
+++ b/src/services.md
@@ -3,6 +3,7 @@ title: Services
 menu: true
 class: services
 layout: services.njk
+order: 3
 heading: We build better publishing technology.
 ---


--- a/src/team.md
+++ b/src/team.md
@@ -3,6 +3,7 @@ title: Team
 menu: true
 layout: team.njk
 class: team
+order: 5
 heading: We build better publishing platforms, with you or for you.
 ---


--- a/static/css/theme-coko/main.css
+++ b/static/css/theme-coko/main.css
@@ -132,11 +132,7 @@ a:hover {
  .topbar a.logo svg {
    max-width: 280px;
    padding-right: 1.5rem;
-  }
-  .topbar nav {
-    /* margin-top: -3.9em; */
-  }
-  
+  }  
  .topbar nav a.active {
    border-bottom: solid 2px var(--color-gris);
  }
@@ -302,19 +298,127 @@ a:hover {
  }
 
  
+  /* Footer ----------------------- */
+footer {
+  background-color: var(--color-primary);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 10%;
+  align-items: center;
+  color: white;
+  font-family: var(--font-title);
+}
+footer section.logo svg,
+footer section.logo svg .flower,
+footer section.logo svg .coko-text {
+  fill: white ;
+  max-width: 250px;
+}
+footer section.logo {
+  display: flex;
+  flex-direction: column;
+}
+footer section.logo a {
+  list-style: 0;
+}
+footer section.logo ul {
+  display: flex;
+  flex-direction: row;
+  list-style-type: none;
+  justify-content: center;
+  border-top: 1px solid white;
+  padding-top: 10px;
+  gap: 20px;
+}
+footer section.links svg {
+  fill: white;
+  width: 30px;
+}
+footer section.contact {
+  flex-grow: 2;
+}
+footer section.contact h3 {
+  color: white;
+}
+footer section.contact form {
+  border: 0px;
+  display: flex;
+  flex-direction: column;
+  color: white !important;
+}
+input::placeholder {
+  color: white;
+}
+input[type=text] {
+  width: 50%;
+  float: left;
+  padding-right: 5px;
+}
+input[type=submit],
+input[type=email] {
+  width: 100%;
+}
+input[type=text], input[type=submit],
+input[type=email] {
+  padding: 12px;
+  margin: 8px 0;
+  display: inline-block;
+  border-bottom: 1px solid white;
+  border-top: 0px;
+  border-left: 0px;
+  border-right: 0px;
+  box-sizing: border-box;
+  background-color: var(--color-primary);
+}
+input[type=checkbox] {
+  margin-top: 16px;
+}
+input[type=submit] {
+  color: white;
+  border: 1px solid white;
+  background-color: initial;
+}
+input[type=submit]:hover {
+  background-color: var(--color-trois);
+  color: white;
+}


+footer section.infos {
+text-align: center;
+}
+footer section.infos .adress {
+  margin-bottom: 10px;
+}
+footer section.infos a {
+  color: white;
+  margin-top: 10px;
+  border-bottom: 1px solid white;
+}
+footer section.infos a:hover {
+  color: var(--color-gris);
+}
+
+  /* Responsif ----------------------- */

  @media screen and (max-width: 1000px)  {
    .grid { grid-template-columns: repeat(3, 1fr); }
    main h2 { grid-column: 1/end; }
    article p, article ul { grid-column: 2/end;}
    img.team-map { grid-column: 1/end; }
+    footer section.infos {margin-top: 2em;}
  }
  @media screen and (max-width: 800px)  {
    header { margin-bottom: 2em;}
    .grid { grid-template-columns: repeat(2, 1fr); }
  }
+  @media screen and (max-width: 650px)  {
+    footer {flex-direction: column;}
+    footer section {width: 100%;  text-align: center;  }
+    footer section.contact {margin-top: 2.5em;}
+  }
+
  @media screen and (max-width: 500px)  {
    .grid { display: block; 
    }