team and product css

src/data/products.json

 {
     "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.",

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>

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 %}

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>
           
 

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">

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 {

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

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