Improve Crosswalk page introduction and contribution instructions (#95)

* Improve Crosswalk page introduction and contribution instructions

* Tidy list partial to make crosswalks list easier to understand

Author: meldra

content/crosswalk/_index.md

@@ -1,10 +1,35 @@
 ---
 title: "Crosswalks"
-#layout: single
+layout: list
 ---
 
-The CodeMeta crosswalk provides an explicit map between the metadata fields used by a broad range of software repositories, registries and archives.  Here are the currently available mappings from existing standards into CodeMeta properties.  Mapping onto a common set of properties should facilitate translation between any two crosswalked standards.  The full crosswalk table is [available as a `.csv`](https://github.com/codemeta/codemeta/tree/master/crosswalk.csv) file on the CodeMeta repository.  
+CodeMeta Crosswalks provide an explicit map between the fields of existing
+metadata standards, as used by a broad range of software repositories, 
+registries, and archives. When mapped by a Crosswalk, CodeMeta's terms act as
+a common set of properties, providing a pathway for metadata to be translated
+between standards.
 
-## Contribute!
+Crosswalks are not required to have a one-to-one mapping for every field.
+Because Crosswalks only map fields common between a standard and CodeMeta, the
+subset of common fields may differ a lot between Crosswalks. The diagram below
+demonstrates how CodeMeta maps between standards when there are differences.
 
-CodeMeta encourages submissions of additional vocabularies by making Pull Requests against the [full crosswalk table](https://github.com/codemeta/codemeta/tree/master/crosswalk.csv).  Feel free to propose corrections or extensions in the [CodeMeta issues tracker](https://github.com/codemeta/codemeta/issues).
+![Diagram of CodeMeta mapping between two metadata standards. It shows a common term, terms unique to each standard, and terms common to only CodeMeta and each standard.](/img/crosswalkdiagram.svg)
+
+### Contribute!
+
+CodeMeta encourages submissions of additional vocabularies. Refer to the
+[CodeMeta repository contribution guide](https://github.com/codemeta/codemeta?tab=contributing-ov-file#contributing-a-new-mapping)
+to submit a new Crosswalks.
+
+Crosswalks are not automatically listed on this website.
+[The guide for contributing to this website](https://github.com/codemeta/codemeta.github.io?tab=contributing-ov-file#adding-new-crosswalks)
+explains how to set that up.
+
+Please feel welcome to propose corrections or extensions in the [CodeMeta issues tracker](https://github.com/codemeta/codemeta/issues).
+
+## Crosswalk directory
+
+This directory contains many of the available Crosswalks. The full Crosswalk table is
+[available as a `.csv`](https://github.com/codemeta/codemeta/tree/master/crosswalk.csv)
+file in the CodeMeta repository.

static/img/crosswalkdiagram.svg

@@ -7,35 +7,46 @@
 </div>
 {{end}}
 
-  {{ with .Title }}<h1>{{ . }}</h1>{{ end }}
 
    <!-- List pages can get Content and yaml metadata from an _index.md -->
   {{ with .Content }}<div class="article-style" itemprop="articleBody">{{ . }}</div>{{ end }}
 
 
   <div class="row">
-    <div class="col-11">
+    <table class="col-11">
     {{ range .Paginator.Pages }}
-    <div class="article">
-      <h2><a href="{{ .RelPermalink }}">{{if .Params.image }} <img alt="{{ substr .Params.image 5 -4 }} logo" src="{{ .Params.image }}" height="50px"/> {{ end }}{{ .Title }}</a></h2>
-    </div>
+    <tr class="article">
+      <td class="col-2 p-2 text-center">
+      {{if .Params.image }}
+          <img style="height:auto;max-width:75px;" alt="{{ substr .Params.image 5 -4 }} logo" src="{{ .Params.image }}" height="50px"/>
+      {{ end }}
+      </td>
+      <td>
+          <h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
+      </td>
+    </tr>
     {{ end }}
-    </div>
+    </table>
+
+	{{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }}
+	<nav class="mt-5">
+	  <table class="col-12">
+	  <tr class="pager">
+	    <td class="col-4 text-end">
+	    {{ if .Paginator.HasPrev }}
+                <a href="{{ .Paginator.Prev.URL | relURL }}">&laquo; Previous</a>
+            {{ end }}
+            </td>
+            <td class="col-4 text-center">
+                {{ .Paginator.PageNumber }} of {{ .Paginator.TotalPages }}</td>
+	    <td class="col-4 text-start">
+	    {{ if .Paginator.HasNext }}
+		<a href="{{ .Paginator.Next.URL | relURL }}">Next &raquo;</a>
+	    {{ end }}
+            </td>
+	  </tr>
+          </table>
+	</nav>
+	{{ end }}
 
-
-
-{{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }}
-<nav>
-  <ul class="pager">
-    {{ if .Paginator.HasPrev }}
-    <li><a href="{{ .Paginator.Prev.URL | relURL }}">&laquo; Previous</a></li>
-    {{ end }}
-    {{ if .Paginator.HasNext }}
-    <li><a href="{{ .Paginator.Next.URL | relURL }}">Next &raquo;</a></li>
-    {{ end }}
-  </ul>
-</nav>
-{{ end }}
-
-  <br />  
   </div>