Merge pull request #720 from shawnthompson/contribute-email

Add email to contribute section

Author: shawnthompson

package.json

@@ -16,7 +16,7 @@
     "sass-start": "sass src/_scss/base.scss _site/css/da11yn.css",
     "sass-build": "sass --style=compressed src/_scss/base.scss _site/css/da11yn.css",
     "watch:sass": "npm run sass-start -- --watch",
-    "start": "cross-env ELEVENTY_WATCH=true ELEVENTY_ENV=local npm-run-all sass-start serve:port --parallel watch:*",
+    "start": "cross-env ELEVENTY_WATCH=true ELEVENTY_ENV=local npm-run-all --parallel watch:* serve:port",
     "start-dev": "cross-env ELEVENTY_WATCH=true ELEVENTY_ENV=dev npm-run-all sass-start serve:port --parallel watch:*",
     "start-prod": "cross-env ELEVENTY_WATCH=true ELEVENTY_ENV=prod npm-run-all sass-start serve:port --parallel watch:*",
     "dev": "cross-env ELEVENTY_ENV=dev npm-run-all sass-build --parallel eleventy",

src/_data/contribute.js

@@ -1,11 +1,14 @@
 module.exports = {
+	email: "digitala11ytoolkit-boitedoutila11enumerique@ssc-spc.gc.ca",
 	fr: {
 		contribute: "Contribuez à ce projet",
 		small: "sur Github.com",
 		see: "Code source",
 		report: "Problèmes",
 		join: "Discussions",
 		netlify: "Ce site est alimenté par",
+		emailText: "Contactez la Boîte à outils de l'accessibilité numérique par courriel",
+		emailSubject: "Contribuer%20%C3%A0%20la%20Bo%C3%AEte%20%C3%A0%20outils%20de%20l'accessibilit%C3%A9%20num%C3%A9rique"
 	},
 
 	en: {
@@ -15,5 +18,7 @@ module.exports = {
 		report: "Issues",
 		join: "Discussions",
 		netlify: "This site is powered by",
+		emailText: "Reach the Digital Accessibility Toolkit by email",
+		emailSubject: "Contribute%20to%20the%20Digital%20Accessibility%20Toolkit"
 	},
 };

src/_includes/partials/contribute.njk

@@ -8,10 +8,11 @@
 			</div>
 			<div class="col-md-7">
 				<ul class="list-inline">
-					<li class="mrgn-rght-sm"><i class="fas fa-code fa-lg fa-fw" aria-hidden="true"></i><a{% if locale == "fr" %} {% endif %} href="https://github.com/gc-da11yn/gc-da11yn.github.io">{{ contribute[locale].see }}{% if locale == "fr" %} <small>(en anglais seulement)</small>{% endif %}</a></li>
-					<li class="mrgn-rght-sm"><i class="fas fa-exclamation-circle fa-lg fa-fw" aria-hidden="true"></i><a{% if locale == "fr" %} {% endif %} href="https://github.com/gc-da11yn/gc-da11yn.github.io/issues/">{{ contribute[locale].report }}{% if locale == "fr" %} <span lang="en">(Issues)</span><small>(en anglais seulement)</small>{% endif %}</a></li>
-					<li><i class="fas fa-comments fa-lg fa-fw" aria-hidden="true"></i><a{% if locale == fr %} {% endif %} href="https://github.com/gc-da11yn/gc-da11yn.github.io/discussions">{{ contribute[locale].join }}{% if locale == "fr" %} <small>(en anglais seulement)</small>{% endif %}</a></li>
+					<li class="mrgn-rght-sm"><i class="fas fa-code fa-lg fa-fw" aria-hidden="true"></i><a{% if locale == "fr" %} {% endif %} href="https://github.com/gc-da11yn/gc-da11yn.github.io">{{ contribute[locale].see }}</a></li>
+					<li class="mrgn-rght-sm"><i class="fas fa-exclamation-circle fa-lg fa-fw" aria-hidden="true"></i><a{% if locale == "fr" %} {% endif %} href="https://github.com/gc-da11yn/gc-da11yn.github.io/issues/">{{ contribute[locale].report }}</a></li>
+					<li><i class="fas fa-comments fa-lg fa-fw" aria-hidden="true"></i><a{% if locale == fr %} {% endif %} href="https://github.com/gc-da11yn/gc-da11yn.github.io/discussions">{{ contribute[locale].join }}</a></li>
 				</ul>
+				<p><i class="fas fa-envelope fa-lg fa-fw" aria-hidden="true"></i><a href="mailto:{{ contribute.email }}?subject={{ contribute[locale].emailSubject }}">{{ contribute[locale].emailText }}</a></p>
 			</div>
 		</div>
 		{# This code block checks if the environment is set to "dev". If it is, it displays a paragraph with a link to Netlify and a link to edit the code for the current page on GitHub. #}

src/_scss/contribute.scss

@@ -1,18 +1,18 @@
 .contribute {
 	background-color: black;
-	color: white;
+	color: #fff;
+	padding-bottom: 25px !important;
 
 	ul {
-		padding-bottom: 2em;
 
 		@media only screen and (min-width: 992px) {
 			padding-top: 4em;
 		}
 	}
 
 	li {
-	padding-bottom: 15px;
-}
+		padding-bottom: 15px;
+	}
 
 	small {
 		display: block;