closes #11

fixes margins in articles and add intro to about page.

src/about.md

 ---
 title: About
-menu: True
+introduction: "Coko is a fiscally sponsored charitable not-for-profit project of [Aspiration](https://aspirationtech.org/). All surplus goes back into the development of what we call “Community Products” (see [Community](https://coko.foundation/community)). These products are developed with the community, for the community, and are freely available (open source) for use and re-use. Here are the principles that guide us."
+menu: true
 class: about
 layout: single.njk
 order: 1
 heading: 100% Open Source. 100% Community.
-chapeau: 
 ---
 
-Coko is a fiscally sponsored charitable not-for-profit project of [Aspiration](https://aspirationtech.org/). All surplus goes back into the development of what we call “Community Products” (see [Community](https://coko.foundation/community)). These products are developed with the community, for the community, and are freely available (open source) for use and re-use. Here are the principles that guide us:
-
 ## Collaboration and Community
 
 Collaboration and community is at the heart of everything that we do. It defines who we are, how we work, and the things we believe in. Like openness, transparency, and treating people with respect.

src/layouts/base.njk

@@ -12,13 +12,13 @@
 
         <script type="module">
             document
-                .documentElement
-                .classList
-                .remove('no-js');
-            document
-                .documentElement
-                .classList
-                .add('js');
+.documentElement
+.classList
+.remove('no-js');
+document
+.documentElement
+.classList
+.add('js');
         </script>
 
         <meta name="description" content="{{site.description}}">
@@ -41,27 +41,27 @@
         {# twitter: do not track #}
         <meta name="twitter:dnt" content="on">
         {% block styleLayout %}
-            {# TODO: add a way to change the layout from the yaml/code #}
+        {# TODO: add a way to change the layout from the yaml/code #}
 
         {% endblock %}
 
         {% block styles %}
 
-            {% if theme %}
-                <link rel="stylesheet" href="/css/{{theme}}/main.css">
-            {% elseif folder %}
-                {# {% if folder in site.configuration.books %} #}
-                {% for item in site.books %}
-                    {% if folder == item.folder %}
-                        <link rel="stylesheet" href="/css/{{item.theme}}/main.css">
-                    {% endif %}
-                {% endfor %}
-            {% else %}
-                <link rel="stylesheet" href="/css/{{site.configuration.theme}}/theme.css">
-                <link rel="stylesheet" href="/css/{{site.configuration.theme}}/main.css">
-                {# {% endif %} #}
-                {# {% else %} #}
-            {% endif %}
+        {% if theme %}
+        <link rel="stylesheet" href="/css/{{theme}}/main.css">
+        {% elseif folder %}
+        {# {% if folder in site.configuration.books %} #}
+        {% for item in site.books %}
+        {% if folder == item.folder %}
+        <link rel="stylesheet" href="/css/{{item.theme}}/main.css">
+        {% endif %}
+        {% endfor %}
+        {% else %}
+        <link rel="stylesheet" href="/css/{{site.configuration.theme}}/theme.css">
+        <link rel="stylesheet" href="/css/{{site.configuration.theme}}/main.css">
+        {# {% endif %} #}
+        {# {% else %} #}
+        {% endif %}
         {% endblock %}
 
         <script>
@@ -77,38 +77,38 @@
 
         {% block scriptHead %}
 
-            {% include "_partials/scripthead.njk" %}
+        {% include "_partials/scripthead.njk" %}
 
         {% endblock %}
 
         {% block matomo %}
-            <!-- Matomo -->
-            <script type="text/javascript">
-                var _paq = window._paq = window._paq || [];
-                /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-                _paq.push(["setCookieDomain", "*.coko.foundation"]);
-                _paq.push(['trackPageView']);
-                _paq.push(['enableLinkTracking']);
-                (function () {
-                    var u = "https://stats.coko.foundation/";
-                    _paq.push([
-                        'setTrackerUrl', u + 'matomo.php'
-                    ]);
-                    _paq.push(['setSiteId', '1']);
-                    var d = document,
-                        g = d.createElement('script'),
-                        s = d.getElementsByTagName('script')[0];
-                    g.async = true;
-                    g.src = u + 'matomo.js';
-                    s
-                        .parentNode
-                        .insertBefore(g, s);
-                })();
-            </script>
-            <noscript>
-                <p><img src="https://stats.coko.foundation/matomo.php?idsite=1&amp;rec=1" style="border:0;" alt=""/></p>
-            </noscript>
-            <!-- End Matomo Code -->
+        <!-- Matomo -->
+        <script type="text/javascript">
+            var _paq = window._paq = window._paq || [];
+            /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+            _paq.push(["setCookieDomain", "*.coko.foundation"]);
+            _paq.push(['trackPageView']);
+            _paq.push(['enableLinkTracking']);
+            (function () {
+                var u = "https://stats.coko.foundation/";
+                _paq.push([
+                    'setTrackerUrl', u + 'matomo.php'
+                ]);
+                _paq.push(['setSiteId', '1']);
+                var d = document,
+                    g = d.createElement('script'),
+                    s = d.getElementsByTagName('script')[0];
+                g.async = true;
+                g.src = u + 'matomo.js';
+                s
+                    .parentNode
+                    .insertBefore(g, s);
+            })();
+        </script>
+        <noscript>
+            <p><img src="https://stats.coko.foundation/matomo.php?idsite=1&amp;rec=1" style="border:0;" alt=""/></p>
+        </noscript>
+        <!-- End Matomo Code -->
         {% endblock %}
     </head>
 
@@ -117,11 +117,11 @@
         {% block background %}{% endblock %}
 
         {% block topbar %}
-            {% include "_partials/menu.njk" %}
+        {% include "_partials/menu.njk" %}
         {% endblock %}
 
         {# {% block side %}
-            <aside class="readMenu">
+        <aside class="readMenu">
             <button id="nightmode">
                 <span class="icon">
                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/></svg>
@@ -130,37 +130,37 @@
             </button>
         </aside> 
 
-            {% include "_partials/readbuttons.njk" %}
+        {% include "_partials/readbuttons.njk" %}
         {% endblock %}#}
 
         <main>
             {% block header %}
-                <header>
-                    <h1>{{heading}}</h1>
-                    {% if chapeau %}
-                        
-                    <section class="intro">
-                        <h2>{{chapeau |  markdowninline | safe}}</h2>
-                    </section>
-                    {% endif %}
-                </header>
+            <header>
+                <h1>{{heading}}</h1>
+                {% if chapeau %}
+
+                <section class="intro">
+                    <h2>{{chapeau |  markdowninline | safe}}</h2>
+                </section>
+                {% endif %}
+            </header>
             {% endblock %}
 
             {% block content %}
-                <article>
-                    {{content | safe}}
-                </article>
+            <article>
+                {{content | safe}}
+            </article>
             {% endblock %}
         </main>
 
         {% block footer %}
-            {% include "_partials/footer.njk" %}
+        {% include "_partials/footer.njk" %}
         {% endblock %}
 
         {# check instant #}
         <script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>
         {% block scripts %}
-            <script type="module" src="/js/main.js"></script>
+        <script type="module" src="/js/main.js"></script>
         {% endblock %}
 
         {% block printpreview %}{% endblock %}

src/layouts/single.njk

@@ -3,9 +3,13 @@
 
 
 {% block content %}
-  
-        <article>
-            {{content | safe}}
-        </article>
-   
-{% endblock %}
\ No newline at end of file
+
+
+    {% if  "About" in title %}
+        <section class="introduction">{{ introduction | markdownify | safe }}</section>  
+    {% endif %}  
+    <article>
+    {{content | safe}}
+    </article>
+
+{% endblock %}

static/css/theme-coko/main.css

 @import url(../layout/one-column.css);
 /* colors set up */
 
-
-.home h1, .home h2, .home h3, .home h4, .home p.tags, .home a{
+.home h1,
+.home h2,
+.home h3,
+.home h4,
+.home p.tags,
+.home a {
   color: var(--color-primary);
 }
-.about h1, .about h2, .about h3, .about h4, .about a { 
+.about h1,
+.about h2,
+.about h3,
+.about h4,
+.about a {
   color: var(--color-primary);
 }
 
-
-.products h1, .products h2, .products h3, .products h4, .products a {
+.products h1,
+.products h2,
+.products h3,
+.products h4,
+.products a {
   color: var(--color-primary);
 }
-.services h1, .services h2, .services h3, .services h4, .services p.tags, .services .card, .services a {
-color: var(--color-secondary);}
+.services h1,
+.services h2,
+.services h3,
+.services h4,
+.services p.tags,
+.services .card,
+.services a {
+  color: var(--color-secondary);
+}
 
-.community h1, .community h2, .community h3, .community h4, .community a {
+.community h1,
+.community h2,
+.community h3,
+.community h4,
+.community a {
   color: var(--color-secondary);
 }
-.news h1, .news h2, .news h3, .news h4, .news p.tags, .news a {
+.news h1,
+.news h2,
+.news h3,
+.news h4,
+.news p.tags,
+.news a {
 }
 
 .blog-post h1,
 .blog-post h2,
 .blog-post h3,
-.blog-post a
-{}
+.blog-post a {
+}
 .articles h1,
 .articles h2,
 .articles h3,
@@ -94,14 +121,13 @@ aside {
 .about aside,
 .blog-post aside {
   background: linear-gradient(
-  6deg,
-  rgba(255, 255, 255, 1) 58%,
-  rgba(150, 208, 206, 1) 100%
+    6deg,
+    rgba(255, 255, 255, 1) 58%,
+    rgba(150, 208, 206, 1) 100%
   );
   filter: drop-shadow(700px -15px 15px #62c8c4);
 }
 
-
 .articles aside,
 .article-single aside,
 .team aside {
@@ -416,7 +442,8 @@ img.team-map {
 }
 .team .board .wide {
   grid-column-start: 1;
-grid-column-end: 5; }
+  grid-column-end: 5;
+}
 
 .team .board .wide h2 {
   max-width: 38ch;
@@ -637,7 +664,7 @@ footer section.infos a:hover {
   font-size: 1.2em;
   font-weight: 300;
 }
-.article-single .post-content p ,
+.article-single .post-content p,
 .article-single .post-content li {
   font-weight: 300;
 }
@@ -659,13 +686,13 @@ footer section.infos a:hover {
 }
 
 .articles main .grid-item {
-  margin-top: 2em
+  margin-top: 2em;
 }
 
 .community article img {
   width: 50%;
   margin: 2em auto;
-  text-align:right;
+  text-align: right;
 }
 .sponsors {
   list-style-type: none;
@@ -677,15 +704,31 @@ footer section.infos a:hover {
     grid-template-columns: repeat(4, minmax(1px, 1fr));
   }
 }
-@media screen and (min-width: 1300px) { .sponsors{grid-template-columns: repeat(4, minmax(1px, 1fr));} }
-@media screen and (max-width: 700px) { .sponsors{grid-template-columns: repeat(3, minmax(1px, 1fr));} }
-@media screen and (max-width: 500px) { .sponsors{grid-template-columns: repeat(2, minmax(1px, 1fr));} }
-@media screen and (max-width: 400px) { .sponsors{display: block} }
+@media screen and (min-width: 1300px) {
+  .sponsors {
+    grid-template-columns: repeat(4, minmax(1px, 1fr));
+  }
+}
+@media screen and (max-width: 700px) {
+  .sponsors {
+    grid-template-columns: repeat(3, minmax(1px, 1fr));
+  }
+}
+@media screen and (max-width: 500px) {
+  .sponsors {
+    grid-template-columns: repeat(2, minmax(1px, 1fr));
+  }
+}
+@media screen and (max-width: 400px) {
+  .sponsors {
+    display: block;
+  }
+}
 
 .sponsors li {
   padding: 3em;
   padding-bottom: 2em;
-  align-content:center;
+  align-content: center;
   justify-content: center;
   align-content: center;
   align-items: center;
@@ -699,6 +742,15 @@ footer section.infos a:hover {
 }
 
 .sponsors li img {
-  width: 100%;  
+  width: 100%;
   object-fit: contain;
 }
+
+.introduction {
+  grid-column: 1/4;
+  margin-bottom: 3em;
+}
+
+.articles header + h2 {
+  margin-top: 0;
+}