fix: color of selected country in footer (#92)

* docs: add install instructions

* refactor: drop period from selected country

* fix: color on selected country

Author: piperchester

CONTRIBUTING.md

@@ -1,6 +1,11 @@
 # Contributing Guidelines
 
-This is a GatsbyJS site, on top of Netlify CMS for now, and powered by YAML files.
+This is a GatsbyJS site, on top of Netlify CMS for now, and powered by YAML files. It's easy to start hacking. All you need is to
+
+1. Fork the repo
+1. `yarn` to fetch dependencies
+1. `yarn start` to spin up dev server on localhost:8000
+1. Update, commit, push to your fork. And open a pull request
 
 Swing by `src/data/links/` to see all the links, and if you'd like to add a new one just copy and paste one of the older ones and update it.
 

src/components/Footer.jsx

@@ -67,7 +67,6 @@ const Footer = () => {
                     {Countries.fromAlpha2Code(country.code).emoji}{' '}
                     {country.name}
                   </span>{' '}
-                  <span>&middot;</span>
                 </>
               ) : null}
               <Button href="/select-your-country" className="link text-white">

src/styles/global.scss

@@ -17,6 +17,13 @@ blockquote p {
   display: inline;
 }
 
+// Ensure the selected country is
+// readable on the #333 footer.
+.change-country .current {
+  color: white;
+  margin-bottom: 20px;
+}
+
 /* Select Your Country */
 .select-your-country {
   max-width: 768px;