added social icons

forecast-admin/forecast/opportunities/templates/includes/footer.html

@@ -0,0 +1,84 @@
+{% load static from staticfiles %}
+
+<footer class="usa-footer usa-footer-medium usa-sans" role="contentinfo">
+    <div class="usa-grid usa-footer-return-to-top">
+      <a href="#">Return to top</a>
+    </div>
+    <div class="usa-footer-primary-section">
+      <div class="usa-grid-full">
+        <nav class="usa-footer-nav">
+          <ul class="usa-unstyled-list">
+            <li class="usa-width-one-sixth usa-footer-primary-content">
+              <a class="usa-footer-primary-link" href="#">Primary link</a>
+            </li>
+            <li class="usa-width-one-sixth usa-footer-primary-content">
+              <a class="usa-footer-primary-link" href="#">Primary link</a>
+            </li>
+            <li class="usa-width-one-sixth usa-footer-primary-content">
+              <a class="usa-footer-primary-link" href="#">Primary link</a>
+            </li>
+            <li class="usa-width-one-sixth usa-footer-primary-content">
+              <a class="usa-footer-primary-link" href="#">Primary link</a>
+            </li>
+            <li class="usa-width-one-sixth usa-footer-primary-content">
+              <a class="usa-footer-primary-link" href="#">Primary link</a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+
+    <div class="usa-footer-secondary_section">
+      <div class="usa-grid">
+        <div class="usa-footer-logo usa-width-one-half">
+          <img class="usa-footer-logo-img" src="{% static 'assets/img/nav-logo.jpg' %}" alt="GSA Logo" />
+          <h3 class="usa-footer-logo-heading">U.S. General Services Administration</h3>
+        </div>
+
+        <div class="usa-footer-contact-links usa-width-one-half">
+          <div class="usa-social-links">
+            <a href="#">
+              <span class="fa-stack">
+                <i class="fa fa-circle fa-stack-2x"></i>
+                <i class="fa fa-facebook fa-stack-1x fa-inverse" role="img" aria-label="Facebook"></i>
+              </span>
+            </a>
+            <a href="#">
+              <span class="fa-stack">
+                <i class="fa fa-circle fa-stack-2x"></i>
+                <i class="fa fa-twitter fa-stack-1x fa-inverse" role="img" aria-label="Twitter"></i>
+              </span>
+            </a>
+            <a href="#">
+              <span class="fa-stack">
+                <i class="fa fa-circle fa-stack-2x"></i>
+                <i class="fa fa-youtube fa-stack-1x fa-inverse" role="img" aria-label="Youtube"></i>
+              </span>
+            </a>
+            <a href="#">
+              <span class="fa-stack">
+                <i class="fa fa-circle fa-stack-2x"></i>
+                <i class="fa fa-instagram fa-stack-1x fa-inverse" role="img" aria-label="Instagram"></i>
+              </span>
+            </a>
+            <a href="#">
+              <span class="fa-stack">
+                <i class="fa fa-circle fa-stack-2x"></i>
+                <i class="fa fa-pinterest fa-stack-1x fa-inverse" role="img" aria-label="Pinterest"></i>
+              </span>
+            </a>
+            <a href="#">
+              <span class="fa-stack">
+                <i class="fa fa-circle fa-stack-2x"></i>
+                <i class="fa fa-envelope-o fa-stack-1x fa-inverse" role="img" aria-label="Email"></i>
+              </span>
+            </a>
+          </div>
+
+          <address>
+            <h3 class="usa-footer-contact-heading">JOIN THE CONVERSATION</h3>
+          </address>
+        </div>
+      </div>
+    </div>
+  </footer>

forecast-admin/forecast/opportunities/templates/includes/header.html

@@ -0,0 +1,17 @@
+{% load static from staticfiles %}
+
+<header class="header" role="banner">
+  <div>
+    <h3 class="header-title">
+      <a href="/" accesskey="1" title="Home" aria-label="Home" class="header-logo_link">
+        <img src="{% static 'assets/img/nav-logo.jpg' %}" alt="GSA Logo" class="header-logo" />
+      </a>
+      <span class="header-title_text">
+
+      {% block page_title %}
+        Forecast of Contracting Opportunities
+      {% endblock %}
+      </span>
+    </h3>
+  </div>
+</header>

forecast-admin/forecast/opportunities/templates/layout.html

@@ -24,26 +24,15 @@
 
 </head>
 <body>
-  <header class="header" role="banner">
-    <div>
-      <h3 class="header-title">
-        <a href="/" accesskey="1" title="Home" aria-label="Home" class="header-logo_link">
-          <img src="{% static 'assets/img/nav-logo.jpg' %}" alt="GSA Logo" class="header-logo" />
-        </a>
-        <span class="header-title_text">
+  {% include 'includes/header.html' %}
 
-        {% block page_title %}
-          Forecast of Contracting Opportunities
-        {% endblock %}
-        </span>
-      </h3>
-    </div>
-  </header>
   <div class="usa-grid">
     <div class="usa-width-one-whole">
       {% block content %}{% endblock %}
     </div>
   </div>
+
+  {% include 'includes/footer.html' %}
 </body>
 {% block scripts %}{% endblock %}
 </html>

forecast-admin/forecast/static/assets/_scss/components/_footer.scss

@@ -24,7 +24,7 @@
 
 .usa-footer-return-to-top {
   padding: {
-    bottom: 2rem;    
+    bottom: 2rem;
     top: 2rem;
   }
 }
@@ -50,7 +50,7 @@
         left: 0;
         right: 0;
       }
-    }  
+    }
   }
 
   .usa-grid-full {
@@ -66,13 +66,13 @@
 .width-one-sixth {
   @include media($medium) {
     @include span-columns(2);
-  }  
+  }
 }
 
 .usa-footer-medium {
   .usa-footer-primary-section {
     padding: 0;
-    
+
     @include media($medium-screen) {
       padding: {
         top: 1rem;
@@ -84,9 +84,9 @@
   .usa-footer-nav ul {
     @include media($medium-screen) {
       align-items: center;
-      display: flex;  
+      display: flex;
     }
-  }  
+  }
 }
 
 .usa-footer-slim {
@@ -97,7 +97,7 @@
 
   .usa-footer-primary-section {
     padding-bottom: 2rem;
-    
+
     @include media($medium-screen) {
       padding: {
         bottom: 1rem;
@@ -106,16 +106,16 @@
 
       .usa-grid-full {
         align-items: center;
-        display: flex;     
-      }      
+        display: flex;
+      }
     }
   }
 }
 
 ul.usa-footer-primary-content,
 li.usa-footer-primary-content,
 li.usa-footer-primary-content {
-  border-top: 1px solid $color-base;      
+  border-top: 1px solid $color-base;
 
   &:last-child {
     border-bottom: 1px solid $color-base;
@@ -155,7 +155,7 @@ li.usa-footer-primary-content {
   @include media($medium-screen) {
     float: right;
     padding: 0;
-  }  
+  }
 }
 
 .usa-footer-secondary_section {
@@ -173,7 +173,7 @@ li.usa-footer-primary-content {
 .usa-footer-big-secondary-section {
   @include media($medium-screen) {
     padding-top: 5rem;
-  }  
+  }
 }
 
 .usa-footer-contact-links {
@@ -188,7 +188,7 @@ li.usa-footer-primary-content {
       padding: {
         top: 3rem;
         bottom: 4rem;
-      }      
+      }
     }
   }
 
@@ -209,7 +209,7 @@ li.usa-footer-primary-content {
 
     @include media($medium-screen) {
       padding-bottom: 0;
-    }    
+    }
 
     .usa-footer-primary-link {
       background-image: url('../img/arrow-down.png');
@@ -229,7 +229,7 @@ li.usa-footer-primary-content {
     &.hidden {
       padding-bottom: 0;
 
-      .usa-footer-primary-link { 
+      .usa-footer-primary-link {
         background-image: url('../img/arrow-right.png');
         background-image: url('../img/arrow-right.svg');
         cursor: pointer;
@@ -238,9 +238,9 @@ li.usa-footer-primary-content {
         @include media($medium-screen) {
           background: none;
           padding-left: 0;
-        }        
+        }
       }
-        
+
       li { display: none; }
     }
   }
@@ -264,7 +264,7 @@ li.usa-footer-primary-content {
 
 .usa-footer-slim-logo-img {
   float: left;
-  max-width: 10rem; 
+  max-width: 10rem;
 }
 
 .usa-footer-logo-heading {
@@ -273,9 +273,9 @@ li.usa-footer-primary-content {
 
 .usa-footer-contact-heading {
   margin-top: 0;
-  
+
   @include media($medium-screen) {
-    margin-top: 1rem;  
+    margin-top: 1rem;
   }
 }
 
@@ -290,3 +290,18 @@ li.usa-footer-primary-content {
     }
   }
 }
+
+.usa-footer-secondary_section {
+  background-color: $color-bisque;
+}
+
+.usa-footer-logo-img {
+  width: $gsa-logo-width;
+  height: $gsa-logo-width;
+}
+
+.usa-footer-logo-heading {
+  display: inline-block;
+  padding-left: $base-padding;
+  padding-right: $base-padding;
+}

forecast-admin/forecast/static/assets/_scss/components/_header.scss

@@ -1,22 +1,19 @@
-$logo-width: 60px;
-
-
 .header {
   padding-bottom: $base-padding-lite;
   padding-left: $grid-margins;
   padding-right: $grid-margins;
   padding-top: $base-padding-lite;
-  background-color: $gray-slate;
-  color: $white;
+  background-color: $color-gray-slate;
+  color: $color-white;
   font-family: $font-sans;
   display: table;
   width: 100%;
 }
 
 .header-logo,
 .header-logo_link {
-  width: $logo-width;
-  height: $logo-width;
+  width: $gsa-logo-width;
+  height: $gsa-logo-width;
   display: inline-block;
 }
 

forecast-admin/forecast/static/assets/_scss/core/_variables.scss

@@ -71,8 +71,8 @@ $color-focus:                #3e94cf;
 $color-visited:              #4c2c92;
 
 
-$gray-slate: #505050;
-$white: #fff;
+$color-gray-slate: #505050;
+$color-bisque: #e9e0c7;
 
 
 // Mobile First Breakpoints
@@ -95,3 +95,7 @@ $border-radius:     rem(3px);
 $box-shadow:        0 0 2px rgba(#000, .3);
 $focus-shadow:      0 0 3px $color-focus, 0 0 7px $color-focus;
 $grid-margins:      3rem;
+
+// Assets
+
+$gsa-logo-width: 60px;