Added social media icons to footer

mbucknell · Dec 21, 2020 · 9355aea · 9355aea
1 parent 0fd25de
commit 9355aea
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 4 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -2,9 +2,6 @@ language: node_js
 node_js:
 - lts/*
 
-addons:
-  firefox: latest
-
 branches:
   only:
     - master

diff --git a/src/index.html b/src/index.html
@@ -3,7 +3,7 @@
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <script src="js/uswds-init.min.js"></script>
+        <script src="uswds-init.min.js"></script>
         <link rel="stylesheet" href="wdfnviz.css">
         <script src="wdfnviz.js"></script>
         <title>Test Page - USGS Water Data For The Nation</title>

diff --git a/src/stylesheets/partials/_footer.scss b/src/stylesheets/partials/_footer.scss
@@ -17,6 +17,18 @@ footer {
       border-bottom: solid 1px color('white');
       padding-top: 0;
     }
+    .social-media-links {
+      float: right;
+      display:inline-block;
+      span {
+        vertical-align: top;
+      }
+      a {
+        svg {
+          color: color('white');
+        }
+      }
+    }
   }
 
   // Add style to the actual links in the footer

diff --git a/src/templates/footer.html b/src/templates/footer.html
@@ -6,6 +6,39 @@
             <a class="usgs-footer-link" href="https://www2.usgs.gov/laws/accessibility.html">Accessibility</a> |
             <a class="usgs-footer-link" href="https://www.usgs.gov/sitemap">Site Map</a> |
             <a class="usgs-footer-link" href="https://answers.usgs.gov/">Contact USGS</a>
+            <div class="social-media-links">
+                <span>Follow</span>
+                <a href="https://twitter.com/usgs" target="_blank">
+                    <svg class="usa-icon usa-icon--size-3" aria-hidden="true" focusable="false" role="img">
+                        <use xlink:href="img/sprite.svg#twitter"></use>
+                    </svg>
+                </a>
+                <a href="http://facebook.com/usgeologicalsurvey" target="_blank">
+                    <svg class="usa-icon usa-icon--size-3" aria-hidden="true" focusable="false" role="img">
+                        <use xlink:href="img/sprite.svg#facebook"></use>
+                    </svg>
+                </a>
+                <a href="http://github.com/usgs" target="_blank">
+                    <svg class="usa-icon usa-icon--size-3" aria-hidden="true" focusable="false" role="img">
+                        <use xlink:href="img/sprite.svg#github"></use>
+                    </svg>
+                </a>
+                <a href="http://flickr.com/usgeologicalsurvey" target="_blank">
+                    <svg class="usa-icon usa-icon--size-3" aria-hidden="true" focusable="false" role="img">
+                        <use xlink:href="img/sprite.svg#flickr"></use>
+                    </svg>
+                </a>
+                <a href="http://youtube.com/usgs" target="_blank">
+                    <svg class="usa-icon usa-icon--size-3" aria-hidden="true" focusable="false" role="img">
+                        <use xlink:href="img/sprite.svg#youtube"></use>
+                    </svg>
+                </a>
+                <a href="http://instagram.com/usgs">
+                    <svg class="usa-icon usa-icon--size-3" aria-hidden="true" focusable="false" role="img">
+                        <use xlink:href="img/sprite.svg#instagram"></use>
+                    </svg>
+                </a>
+            </div>
         </div>
         <div class="usgs-footer-nav">
             <a class="usgs-footer-link" href="https://www.doi.gov/">U.S. Department of the Interior</a> |
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,9 +2,6 @@ language: node_js @@
     node_js:
     - lts/*
-    addons:
-      firefox: latest
     branches:
       only:
         - master
@@ Expand Down @@