Add contribute page

src/components/layout.js

@@ -48,9 +48,14 @@ const Layout = ({ pageTitle, children }) => {
                 Home
               </Link>
             </li>
+            <li className="navLinkItem">
+              <Link to="/contribute" title="Contribute" className="navLinkText">
+                Contribute
+              </Link>
+            </li>
             <li className="navLinkItem">
               <a
-                href="https://hepsoftwarefoundation.org/"
+                href="https://hepsoftwarefoundation.org/workinggroups/training.html"
                 target="_blank"
                 rel="noopener noreferrer"
                 title="About"

src/pages/contribute.js

@@ -0,0 +1,90 @@
+import * as React from "react";
+import Layout from "../components/layout";
+import Seo from "../components/seo";
+
+// markup
+const ContributePage = () => {
+  return (
+    <Layout pageTitle="Contribute">
+      <br />
+      <br />
+      Training in software and computing are essential ingredients for the
+      success of any HEP experiment. As most experiments have similar basic
+      prerequisites (Unix shell, Python, C++, etc.) we have joined efforts and
+      created this introductory software training curriculum that teaches HEP
+      newcomers the software skills they need as they enter the field, and in
+      parallel, instills best practices for writing software.
+      <br />
+      <br />
+      The curriculum is composed of a set of <it>modules</it> (developed by HSF,
+      Software Carpentries, and other organizations), so that learners/students
+      can focus on what is most relevant to them.
+      <br />
+      <br />
+      Contributions of any kind are very welcome! There are various ways you can
+      get involved:
+      <br />
+      <br />
+      <ul>
+        <li>
+          Join our <b>meetings</b> to give feedback and discuss with us (details
+          at our{" "}
+          <a
+            href="https://hepsoftwarefoundation.org/workinggroups/training.html"
+            className="a-no-style"
+          >
+            main page
+          </a>
+          ).
+        </li>
+        <li>
+          <b>Bugs reports or feature requests</b>: Directly open an issue on{" "}
+          <a href="https://github.com/hsf-training" className="a-no-style">
+            GitHub
+          </a>{" "}
+          or (even better) submit a pull request to fix things.
+        </li>
+        <li>
+          Want to <b>contribute your own module</b>? We compiled a small list of
+          recommendations{" "}
+          <a
+            href="https://hepsoftwarefoundation.org/training/module-guidelines.html"
+            className="a-no-style"
+          >
+            here
+          </a>
+          . Of course we always encourage you to talk to us early for a better
+          coordination. There is also more technical information for{" "}
+          <a
+            href="https://github.com/hsf-training/carpentry-cookiecutter"
+            className="a-no-style"
+          >
+            creating a new module
+          </a>
+          .
+        </li>
+        <li>
+          Want to <b>help out at a workshop?</b>{" "}
+          <a
+            href="https://hepsoftwarefoundation.org/training/educators.html"
+            className="a-no-style"
+          >
+            More information on the different roles in our training events
+          </a>
+        </li>
+        <li>
+          Want to <b>organize your own workshop</b>?{" "}
+          <a
+            href="https://hepsoftwarefoundation.org/training/howto-event.html"
+            className="a-no-style"
+          >
+            We got you covered
+          </a>
+        </li>
+      </ul>
+    </Layout>
+  );
+};
+
+export const Head = () => <Seo title="Contribute" />;
+export default ContributePage;

src/styles/globalStyle.css

@@ -20,6 +20,13 @@ a {
   transition: all 0.2s ease-in-out;
 }
 
+.a-no-style {
+  text-decoration: none;
+  transition: all 0.2s ease-in-out;
+  text-decoration: underline !important;
+  color: blue !important;
+}
+
 input {
   font-family: jetbrainsmono, sans-serif !important;
   outline: none;

src/styles/layout.css

@@ -16,7 +16,7 @@ nav .container {
 }
 
 nav ul {
-  width: 7rem;
+  width: 12rem;
   list-style: none;
   display: flex;
   justify-content: space-between;
@@ -26,6 +26,7 @@ nav ul li a {
   color: #fff;
   font-size: 1rem;
   text-decoration: none;
+  margin-right: 0.7rem;
 }
 
 nav ul li a:hover {
@@ -84,7 +85,7 @@ footer .container {
     margin: auto 1rem;
   }
   nav ul {
-    width: 5rem;
+    width: 12rem;
   }
   nav ul li a {
     font-size: 0.8rem;