From cfaec46b7bafb714a8d45c4760c589bfcdee0ffa Mon Sep 17 00:00:00 2001 From: Agathe <agathe.baez@live.fr> Date: Sat, 18 Dec 2021 14:12:18 +0100 Subject: [PATCH] Footer and menu in order --- src/about.md | 1 + src/articles-index.md | 1 + src/blog/blog-index.md | 1 + src/contact.md | 1 + src/data/site.json | 10 +- src/layouts/_partials/contact.njk | 102 +++++++++++++++++-- src/layouts/_partials/footer.njk | 20 ++-- src/layouts/_partials/footerInfosSupp.njk | 2 - src/layouts/_partials/socialMedia.njk | 2 +- src/products.md | 1 + src/services.md | 1 + src/team.md | 1 + static/css/theme-coko/main.css | 114 +++++++++++++++++++++- 13 files changed, 226 insertions(+), 31 deletions(-) diff --git a/src/about.md b/src/about.md index ff5c3b7..1cc3a6b 100644 --- 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. --- diff --git a/src/articles-index.md b/src/articles-index.md index b11aedb..1e37389 100644 --- 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: --- diff --git a/src/blog/blog-index.md b/src/blog/blog-index.md index 626dabf..2348e59 100644 --- 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 diff --git a/src/contact.md b/src/contact.md index 108bd04..91f08c4 100644 --- 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: --- diff --git a/src/data/site.json b/src/data/site.json index da46f27..8c2230e 100644 --- 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 diff --git a/src/layouts/_partials/contact.njk b/src/layouts/_partials/contact.njk index e57c841..a329a14 100644 --- a/src/layouts/_partials/contact.njk +++ b/src/layouts/_partials/contact.njk @@ -1,15 +1,99 @@ -<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> diff --git a/src/layouts/_partials/footer.njk b/src/layouts/_partials/footer.njk index 2fac232..a0e82c4 100644 --- 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> diff --git a/src/layouts/_partials/footerInfosSupp.njk b/src/layouts/_partials/footerInfosSupp.njk index 63c235f..51d9c4b 100644 --- a/src/layouts/_partials/footerInfosSupp.njk +++ b/src/layouts/_partials/footerInfosSupp.njk @@ -1,4 +1,2 @@ -<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 diff --git a/src/layouts/_partials/socialMedia.njk b/src/layouts/_partials/socialMedia.njk index db1543d..b234185 100644 --- 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> diff --git a/src/products.md b/src/products.md index 529263f..79a5c36 100644 --- 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: --- diff --git a/src/services.md b/src/services.md index 0a79655..4c222a0 100644 --- 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. --- diff --git a/src/team.md b/src/team.md index f1c4a95..9fd91c1 100644 --- 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. --- diff --git a/static/css/theme-coko/main.css b/static/css/theme-coko/main.css index 9eba5be..8f080fe 100644 --- 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; } -- GitLab