diff --git a/src/data/products.json b/src/data/products.json
index d489c827ae02792a529d6d384c09c32a88453bbf..9007aae683d930c3842e443ba3eeb29811287990 100644
--- a/src/data/products.json
+++ b/src/data/products.json
@@ -1,7 +1,7 @@
{
"entities": [
{
- "tag": "Plateform",
+ "tag": "plateform",
"logo": "/images/uploads/Pubsweet.png",
"name": "Pubsweet",
"description": "PubSweet is Coko’s free, open source framework for building state-of-the-art publishing platforms. ",
@@ -9,7 +9,7 @@
"giturl": ""
},
{
- "tag": "Plateform",
+ "tag": "plateform",
"logo": "/images/uploads/NCBI.jpg",
"name": "NCBI Bookshelf",
"description": "Built for the NCBI and will replace the current NCBI Bookshelf CMS. It is an extensive project with a lot of internal integrations and migrations.",
@@ -17,7 +17,7 @@
"giturl": ""
},
{
- "tag": "Plateform",
+ "tag": "plateform",
"logo": "/images/uploads/HHMI.png",
"name": "HHMI BioInteractive Question Bank",
"description": "Currently in production, Coko is building an entire workflow around the creation and review of test questions made by science educators for their students.",
@@ -25,7 +25,7 @@
"giturl": ""
},
{
- "tag": "Plateform",
+ "tag": "plateform",
"logo": "/images/uploads/Kotahi.png",
"name": "Kotahi",
"description": "Manage the submission, review, and publication of preprints, micropubs, and journals. Kotahi is built for remote teams, accelerating publishing, and reducing costs.",
@@ -33,7 +33,7 @@
"giturl": ""
},
{
- "tag": "Plateform",
+ "tag": "plateform",
"logo": "/images/uploads/Micropublication.png",
"name": "microPublication.org",
"description": "WormBase commissioned the Coko team to develop a micropublications platform for their micropublications.org project. It follows a simple micropubs workflow which has been designed and built to allow for its re-purposing by any micropubs use case.",
@@ -41,7 +41,7 @@
"giturl": ""
},
{
- "tag": "Plateform",
+ "tag": "plateform",
"logo": "/images/uploads/Editoria.png",
"name": "Editoria",
"description": "Editoria the fully fledged post-acquisition book production workflow developed by the Coko team in collaboration with the University of California Press (UCP) and the California Digital Library. Editoria is now in live use by UCP, ATLA Press, punctum books, M Publishing, UNC Press/Longleaf Services and Book Sprints.",
@@ -49,7 +49,7 @@
"giturl": ""
},
{
- "tag": "Plateform",
+ "tag": "plateform",
"logo": "/images/uploads/Hindawi.jpg",
"name": "Hindawi’s Phenom",
"description": "Journal submission and peer review platform built by the Hindawi team. Journals publishing and technology organization Hindawi Ltd. has developed a manuscript submission and peer review platform currently in live use. In addition to this, they’ve begun work on additional tools using PubSweet.",
@@ -57,7 +57,7 @@
"giturl": ""
},
{
- "tag": "Plateform",
+ "tag": "plateform",
"logo": "/images/uploads/Europe.png",
"name": "Europe PMC Plus",
"description": "The EBI (European Bioinformatics Institute) platform, Europe PMC Plus, is a multiple source post-publish QA system for content aggregation (pushing to EuropePMC). Built by the EBI team with initial design support from Coko.",
@@ -65,7 +65,7 @@
"giturl": ""
},
{
- "tag": "Plateform",
+ "tag": "plateform",
"logo": "/images/uploads/Libero.png",
"name": "Libero Reviewer",
"description": "Manuscript Submission and Peer Review. Built by the eLife team. eLife chose to begin their development by working toward incremental replacement of a previous system.",
@@ -73,7 +73,7 @@
"giturl": ""
},
{
- "tag": "Plateform",
+ "tag": "plateform",
"logo": "/images/uploads/Digitalscience.png",
"name": "Digital Science",
"description": "Digital Science‘s has built two platforms with PubSweet. One platform is focused on Award workflows (submission, review, awarding). The second platform is a configurable Journal workflow – this platform currently powers the Physiome Journal.",
@@ -81,7 +81,7 @@
"giturl": ""
},
{
- "tag": "Component",
+ "tag": "component",
"logo": "/images/uploads/Pagedjs.png",
"name": "Pagedjs",
"description": "Paged.js is a free and open source JavaScript library that paginates content in the browser to create PDF output from any HTML content. This means you can design works for print (eg. books) using HTML and CSS!",
@@ -89,7 +89,7 @@
"giturl": ""
},
{
- "tag": "Component",
+ "tag": "component",
"logo": "/images/uploads/Wax.png",
"name": "Wax",
"description": "a web based word processor. Wax can be configured to meet your application requirements. It is very configurable and extensible. Wax has a number of plugins for various word processing requirements.",
@@ -97,7 +97,7 @@
"giturl": ""
},
{
- "tag": "Component",
+ "tag": "component",
"logo": "/images/uploads/Xsweet.png",
"name": "xSweet",
"description": "A high fidelity MS Word (docx) to HTML converter. Can be used for any application. XSweet extracts the contents of MS Word documents from their underlying XML into HTML, which can be published as-is, imported into an application, or used as a intermediate format to convert it into another format altogether.",
@@ -105,7 +105,7 @@
"giturl": ""
},
{
- "tag": "Component",
+ "tag": "component",
"logo": "/images/uploads/Flax.png",
"name": "Flax",
"description": "Flax is a new product (website pending). Flax is a publishing front end, a web presence for content produced in Kotahi and Editoria. ",
@@ -113,7 +113,7 @@
"giturl": ""
},
{
- "tag": "Extend Plateform",
+ "tag": "extend plateform",
"logo": "/images/uploads/Plume.jpg",
"name": "Plume",
"description": "Platform built for the Cour des Comptes (French Court of Audit) for the French Government. Built by the French Government as an extension to Editoria.",
@@ -121,7 +121,7 @@
"giturl": ""
},
{
- "tag": "Extend Plateform",
+ "tag": "extend plateform",
"logo": "/images/uploads/Open.png",
"name": "Open Education Network",
"description": "OEN commissioned Coko to extend Editoria for OER specific use cases.",
@@ -129,7 +129,7 @@
"giturl": ""
},
{
- "tag": "Extend Plateform",
+ "tag": "extend plateform",
"logo": "/images/uploads/Head.png",
"name": "Haute école d’art et de design",
"description": "Haute école d’art et de design (HEAD – Geneva) extended Editoria to meet the needs of there experimental design studies and publishing course.",
diff --git a/src/layouts/base.njk b/src/layouts/base.njk
index 440b890b1700610068812912a9f61653ea5eec24..0149906f5e7ccdf5953cc450f3ef9e1e218d2f2c 100644
--- a/src/layouts/base.njk
+++ b/src/layouts/base.njk
@@ -120,9 +120,9 @@
{% endblock %}
</main>
- {# {% block footer %}
+ {% block footer %}
{% include "_partials/footer.njk" %}
- {% endblock %} #}
+ {% endblock %}
{# check instant #}
<script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>
diff --git a/src/layouts/products.njk b/src/layouts/products.njk
index ee06a3cf59c7bd7cb2575d247fe94be177d82042..43f3bc9357d0fe472fdbe58b6a4a948a15f9b20f 100644
--- a/src/layouts/products.njk
+++ b/src/layouts/products.njk
@@ -21,7 +21,7 @@
</li>
{% endfor %}
<li>
- <button data-tag="all" class="trigger-category">All</button>
+ <button data-tag="all" class="trigger-category">all</button>
</li>
</ul>
@@ -30,12 +30,22 @@
{% for item in products.entities %}
<div class="grid-item {{item.tag | slugify}}">
<p class="tags">{{ item.tag }}</p>
- <img src="{{item.logo}}" alt="">
+ <figure><img src="{{item.logo}}" alt=""></figure>
<div class="card">
<h3>{{ item.name }}</h3>
<p>{{ item.description | markdownify | safe }}</p>
- <a href="{{item.weburl}}">{{ item.weburl }}</a>
- <a href="{{item.giturl}}">{{ item.giturl }}</a>
+ {% if item.weburl %}
+ <a href="{{item.weburl}}">Website</a>
+ {% else %}
+ <a href="{{item.weburl}}"></a>
+ {% endif %}
+
+ {% if item.item.giturl %}
+ <a href="{{item.giturl}}">Git</a>
+ {% else %}
+ <a href="{{item.giturl}}"></a>
+ {% endif %}
+
</div>
</div>
{% endfor %}
diff --git a/src/layouts/team.njk b/src/layouts/team.njk
index 08704ac8e0e7ed20044c1dc0c00f71ade918df87..bf6ea7626ba921349b6b5b7da60ca061f7111543 100644
--- a/src/layouts/team.njk
+++ b/src/layouts/team.njk
@@ -6,8 +6,8 @@
<div class="grid">
{% for item in team.people %}
- <div class="grid-items {{item.card-width}}">
- <img src="{{item.portrait}}" alt="">
+ <div class="grid-item {{item.cardWidth}}">
+ <figure><img src="{{item.portrait}}" alt=""></figure>
<h3>{{item.name}}</h3>
<h4>{{item.fonction}}</h4>
<p>{{item.description | markdownify | safe}}</p>
@@ -15,23 +15,22 @@
{% endfor %}
</div>
- <section class="board">
- <div class="grid">
+ <div class="grid board">
{% for item in team.board %}
- <div class="grid-items {{item.card-width}}">
+ <div class="grid-item {{item.cardWidth}}">
<h2>{{item.title}}</h2>
<h2>{{item.presentation}}</h2>
</div>
{% endfor %}
{% for item in team.advisory %}
- <div class="grid-items {{item.card-width}}">
- <img src="{{item.portrait}}" alt="">
+ <div class="grid-item {{item.cardWidth}}">
+ <figure><img src="{{item.portrait}}" alt=""></figure>
<h3>{{item.name}}</h3>
<h4>{{item.fonction}}</h4>
<p>{{item.description | markdownify | safe}}</p>
</div>
{% endfor %}
- </div>
+
</section>
diff --git a/src/team.md b/src/team.md
index 55f5eb0ec00a04ceb299629d0b52575efa78263d..f1c4a95d086ff08246974f06375ae935729ce202 100644
--- a/src/team.md
+++ b/src/team.md
@@ -8,3 +8,4 @@ heading: We build better publishing platforms, with you or for you.
## We’ve built over a dozen highly successful publishing platforms – making us the most experienced folks in the business. Our professional, expert team has experience across a range of disciplines so that we can tailor our services to meet your needs.
+<img src="/images/uploads/Coko-team-map.jpg" class="team-map" alt="Coko-team-map">
diff --git a/static/css/layout/one-column.css b/static/css/layout/one-column.css
index e11821646ab0f282d7242d747e8e991be4523d45..6c42d6cf8814e04b1e8b7d071c5fc666980d25b9 100644
--- a/static/css/layout/one-column.css
+++ b/static/css/layout/one-column.css
@@ -137,19 +137,19 @@ html {
/* ↓----------------- menu -------------↓ */
-.topbar {
+/* .topbar {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
-
+ flex-wrap: nowrap;
z-index: 10000000;
top: 0;
padding: 1em 5vh;
font-family: var(--font-interface);
position: sticky;
transition: background-color 1000ms;
-}
+} */
@keyframes showtopbarback {
from {
diff --git a/static/css/theme-coko/main.css b/static/css/theme-coko/main.css
index 1dbe6a59ac533aeb1004b6f7ff80afe51486bbad..d1f1edf0efd47224aef99c74276ea86827da081e 100644
--- a/static/css/theme-coko/main.css
+++ b/static/css/theme-coko/main.css
@@ -7,8 +7,6 @@
.products h2,
.products h3,
.products h4,
-.products p.tags,
-.products .card,
.products a,
.services h1,
.services h2,
@@ -21,8 +19,6 @@
.contact h2,
.contact h3,
.contact h4,
-.contact p.tags,
-.contact .card,
.contact a {
color: var(--color-secondary);
}
@@ -31,21 +27,18 @@
.home h3,
.home h4,
.home p.tags,
-.home .card,
.home a,
.news h1,
.news h2,
.news h3,
.news h4,
.news p.tags,
-.news .card,
.news a,
.articles h1,
.articles h2,
.articles h3,
.articles h4,
.articles p.tags,
-.articles .card,
.articles a {
color: var(--color-primary);
}
@@ -54,13 +47,11 @@
.about h3,
.about h4,
.about p.tags,
-.about .card,
.team h1,
.team h2,
.team h3,
.team h4,
-.team p.tags,
-.team .card {
+.team p.tags{
color: var(--color-trois);
}
@@ -88,22 +79,20 @@ a:hover {
color: var(--color-gris);
}
-
-
main p,
main li {
max-width: 70ch;
- font-variation-settings: "opsz" 1;
- line-height: 1.7;
- /* font-size: 1em; */
- }s
-
- p + p {
- text-indent: 5ch;
+ line-height: 1.5;
+ font-size: var(--font-size);
+ font-weight: 400;
}
+
+
/* Menu -------------------- */
- aside { background: rgb(255,255,255); }
+ aside {
+ position: sticky;
+ background: rgb(255,255,255); }
.home aside,
.articles aside,
.news aside {
@@ -121,16 +110,33 @@ a:hover {
background: linear-gradient(6deg, rgba(255,255,255,1) 58%, #E39FBA 100%);
filter: drop-shadow(700px -15px 15px var(--color-secondary));
}
- .topbar a.logo {
- padding-right: 1.5rem;
+ .topbar {
+ position: sticky;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ /* flex-wrap: wrap; */
+ z-index: 10000000;
+ top: 0;
+ padding: 1em 5vh;
+ font-family: var(--font-interface);
+ transition: background-color 1000ms;
}
+
+
.topbar a.logo.solito svg {
max-width: 350px;
+ padding-right: 1.5rem;
}
.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);
}
@@ -149,26 +155,138 @@ a:hover {
h5,
h6 {
font-family: var(--font-title);
- font-weight: 400;
- margin-top: 2em;
- margin-bottom: .2em;
+ font-weight: 300;
scroll-margin-top: 2em;
}
h1 {
margin-top: 2em;
- font-size: 4.2em;
- line-height: 1.1;
+ font-size: 3.2em;
+ line-height: 1.2;
}
section.intro h2 {
- margin-top: 0em;
+ max-width: 65ch;
}
h2 {
- font-size: 2.2em;
+ font-size: 1.7em;
+ margin-top: 0.5em;
+ margin-bottom: 1em;
}
h3 {
- font-size: 1.5em;
+ font-size: 1.1em;
+ font-weight: 700;
}
h4 {
font-size: 1em;
+ }
+
+ /* Layout ----------------------*/
+ main {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ grid-gap: 10px;
+ grid-auto-rows: minmax(100px, auto);
+ margin-bottom: 3em;
+ }
+ header {
+ margin-bottom: 7em;
+ grid-column: 1/end;
+ }
+ main h2 {
+ grid-column-end: span 2;
+ }
+
+ .grid {
+ grid-column: 1/end;
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ grid-gap: 40px;
+ row-gap: 100px;
+ grid-auto-rows: minmax(100px, auto);
+ margin-top: 5em;
+ }
+ .grid-item.wide{
+ grid-column: span 2;;
+ }
+
+ /* Layout per page----------------------- */
+
+ /* PRODUCT --------------------*/
+ ul.filter {
+ grid-column: 1/end;
+ display: flex;
+ justify-self: start;
+ flex-direction: row;
+ list-style: none;
+ justify-content: space-between;
+ align-items: center;
+ column-gap: 15px;
+
+ }
+ ul.filter:before {
+ content: "show by:"
+ }
+ ul.filter button,
+ .products p.tags,
+ ul.filter:before {
+ font-style: normal;
+ color: var(--color-gris);
+ font-variant: small-caps;
+ }
+ ul.filter button:hover {
+ color: var(--color-secondary);
+ }
+ .products .grid {
+ margin-top: -1em;
+ }
+ .products .grid-item {
+ border-top: 1px solid var(--color-secondary);
+ }
+ .products .card {
+ background-color: var(--color-secondary-fade);
+ padding: 10px;
+ }
+ .products figure {
+ height: 150px;
+ margin: 1em;
+ }
+ .products img {
+ max-height: 140px;
+ width: auto;
+ margin: auto;
+ vertical-align: baseline;
+ }
+
+
+ /* TEAM --------------------*/
+ .team .grid img {
+ border-radius: 50%;
+ max-width: 150px;
+ height: auto;
+ margin: auto;
+ margin-bottom: 1em;
+ filter: grayscale(0.8) brightness(1.1);
+ }
+ img.team-map {
+ grid-column-end: span 2;
+ }
+
+
+
+
+
+ @media screen and (max-width: 1000px) {
+ .grid { grid-template-columns: repeat(3, 1fr); }
+ main h2 { grid-column: 1/end; }
+ img.team-map { grid-column: 1/end; }
+ }
+ @media screen and (max-width: 800px) {
+ .grid { grid-template-columns: repeat(2, 1fr); }
+ }
+ @media screen and (max-width: 500px) {
+ .grid { display: block; }
+ .grid-item { margin-top: 4em; }
+ ul.filter {
+ flex-direction: column;
+ margin: auto;}
}
\ No newline at end of file
diff --git a/static/css/theme-coko/theme.css b/static/css/theme-coko/theme.css
index d8b0da2b0af767d42a4c74a800e2fb976b01c42b..d79b771a80a0fe26c1e734c457220675e66935eb 100644
--- a/static/css/theme-coko/theme.css
+++ b/static/css/theme-coko/theme.css
@@ -3,7 +3,6 @@
--font-body: "Cabin";
--font-title: "Montserrat";
--font-interface: "Cabin";
- /* --font-deco: "Oi"; */
--color-background: #efefef;
--color-body: #222222;
@@ -11,64 +10,65 @@
--color-primary: rgba(33, 177, 172, 1);
--color-secondary: rgba(224, 56, 122, 1);
+ --color-secondary-fade: rgba(224, 56, 122, 0.05);
--color-trois: rgba(124, 64, 151, 1);
- --font-size: 14px;
+ --font-size: 1.05em;
--line-height: 20px;
}
@font-face {
- font-family: "Montserrat", sans-serif;
+ font-family: "Montserrat";
src:
- url("../fonts/Montserrat-Regular.ttf") format("truetype");
+ url("/fonts/Montserrat-Regular.ttf") format("truetype");
font-style: normal;
font-weight: 400;
}
@font-face {
- font-family: "Montserrat", sans-serif;
+ font-family: "Montserrat";
src:
- url("../fonts/Montserrat-Regular.ttf") format("truetype");
+ url("/fonts/Montserrat-Regular.ttf") format("truetype");
font-style: italic;
font-weight: 400;
}
@font-face {
- font-family: "Montserrat", sans-serif;
+ font-family: "Montserrat";
src:
- url("../fonts/Montserrat-Light.ttf") format("truetype");
+ url("/fonts/Montserrat-Light.ttf") format("truetype");
font-style: normal;
font-weight: 300;
}
@font-face {
- font-family: "Montserrat", sans-serif;
+ font-family: "Montserrat";
src:
- url("../fonts/Montserrat-LightItalic.ttf") format("truetype");
+ url("/fonts/Montserrat-LightItalic.ttf") format("truetype");
font-style: italic;
font-weight: 300;
}
@font-face {
- font-family: "Montserrat", sans-serif;
+ font-family: "Montserrat";
src:
- url("../fonts/Montserrat-SemiBold.ttf") format("truetype");
+ url("/fonts/Montserrat-SemiBold.ttf") format("truetype");
font-style: normal;
font-weight: 600;
}
@font-face {
- font-family: "Montserrat", sans-serif;
+ font-family: "Montserrat";
src:
- url("../fonts/Montserrat-SemiBoldItalic.ttf") format("truetype");
+ url("/fonts/Montserrat-SemiBoldItalic.ttf") format("truetype");
font-style: italic;
font-weight: 600;
}
@font-face {
font-family: "Cabin";
src:
- url("../fonts/Cabin-VariableFont_wdth,wght.ttf") format("truetype");
+ url("/fonts/Cabin-VariableFont_wdth,wght.ttf") format("truetype");
font-style: normal;
font-weight: 400 700;
}
@font-face {
font-family: "Cabin";
- src: url("../fonts/Cabin-Italic-VariableFont_wdth,wght.ttf") format("truetype");
+ src: url("/fonts/Cabin-Italic-VariableFont_wdth,wght.ttf") format("truetype");
font-style: italic;
font-weight: 400 700;
}
\ No newline at end of file
diff --git a/static/css/fonts/Cabin-Italic-VariableFont_wdth,wght.ttf b/static/fonts/Cabin-Italic-VariableFont_wdth,wght.ttf
similarity index 100%
rename from static/css/fonts/Cabin-Italic-VariableFont_wdth,wght.ttf
rename to static/fonts/Cabin-Italic-VariableFont_wdth,wght.ttf
diff --git a/static/css/fonts/Cabin-VariableFont_wdth,wght.ttf b/static/fonts/Cabin-VariableFont_wdth,wght.ttf
similarity index 100%
rename from static/css/fonts/Cabin-VariableFont_wdth,wght.ttf
rename to static/fonts/Cabin-VariableFont_wdth,wght.ttf
diff --git a/static/css/fonts/Montserrat-Italic.ttf b/static/fonts/Montserrat-Italic.ttf
similarity index 100%
rename from static/css/fonts/Montserrat-Italic.ttf
rename to static/fonts/Montserrat-Italic.ttf
diff --git a/static/css/fonts/Montserrat-Light.ttf b/static/fonts/Montserrat-Light.ttf
similarity index 100%
rename from static/css/fonts/Montserrat-Light.ttf
rename to static/fonts/Montserrat-Light.ttf
diff --git a/static/css/fonts/Montserrat-LightItalic.ttf b/static/fonts/Montserrat-LightItalic.ttf
similarity index 100%
rename from static/css/fonts/Montserrat-LightItalic.ttf
rename to static/fonts/Montserrat-LightItalic.ttf
diff --git a/static/css/fonts/Montserrat-Regular.ttf b/static/fonts/Montserrat-Regular.ttf
similarity index 100%
rename from static/css/fonts/Montserrat-Regular.ttf
rename to static/fonts/Montserrat-Regular.ttf
diff --git a/static/css/fonts/Montserrat-SemiBold.ttf b/static/fonts/Montserrat-SemiBold.ttf
similarity index 100%
rename from static/css/fonts/Montserrat-SemiBold.ttf
rename to static/fonts/Montserrat-SemiBold.ttf
diff --git a/static/css/fonts/Montserrat-SemiBoldItalic.ttf b/static/fonts/Montserrat-SemiBoldItalic.ttf
similarity index 100%
rename from static/css/fonts/Montserrat-SemiBoldItalic.ttf
rename to static/fonts/Montserrat-SemiBoldItalic.ttf
diff --git a/static/images/uploads/Coko-team-map.jpg b/static/images/uploads/Coko-team-map.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b15bd43efe2abe24d8eb85ca158f51d46cde5146
Binary files /dev/null and b/static/images/uploads/Coko-team-map.jpg differ
diff --git a/static/images/uploads/Digitalscience.png b/static/images/uploads/Digitalscience.png
index 1cddcdb05ba6ac50a2f3f08b8475a7a48db94b63..6b8478580d26599952eab7f59087e1ae8947bab1 100644
Binary files a/static/images/uploads/Digitalscience.png and b/static/images/uploads/Digitalscience.png differ