adding donor banner for december

Author: lmccart

src/assets/css/main.css

@@ -795,6 +795,7 @@ textarea {
     width: 100px;*/
   height: 100px;
   position: relative;
+  margin-top: 1.5em; /* temp promo */
 }
 
 #navi,
@@ -1245,6 +1246,30 @@ h2 {
   //////////////////////////////////////////////////
 */
 
+#promo, #promo:visited {
+  width: 100%;
+  background: palegreen;
+  padding: 0;
+  margin: 0;
+  text-align: center;
+  padding: 0.4em 0;
+  background: rgb(116,255,183);
+  background: radial-gradient(circle, rgba(116,255,183,1) 0%, rgba(138,255,242,1) 100%);
+  font-family: "Montserrat", sans-serif;
+  color: #ED225D !important;
+}
+
+#promo:hover {
+  background: #ED225D;
+  color: white !important;
+}
+
+#promo-link {
+  margin: 0 !important;
+  padding: 0;
+}
+
+
 #family a:link,
 #family a:visited {
   margin: 0.4em;
@@ -1619,7 +1644,7 @@ footer {
 @media (min-width: 769px) {
   .container {
     width: 49em !important;
-    margin: 10em auto;
+    margin: 11.5em auto; /* temp promo, normally 10em */
   }
   main {
     width: 36em;
@@ -1632,7 +1657,7 @@ footer {
 
 @media (min-width: 720px) {
   .container {
-    margin: 10em auto;
+    margin: 11.5em auto; /* temp promo, normally 10em */
     width: 100%;
     padding: 0.8em 0 0 0;
     height: auto;
@@ -1658,7 +1683,7 @@ footer {
   }
   #i18n-btn {
     position: absolute;
-    top: 2.5em;
+    top: 4.0em; /* temp promo, normally 2.5em */
     right: 1em;
   }
   #i18n-btn a {

src/templates/partials/header.hbs

@@ -11,4 +11,7 @@ title: header
     <li><a href="http://pi.processing.org/">Processing for Pi</a></li>
     <li><a href="https://processingfoundation.org/">Processing Foundation</a></li>
   </ul>
+
+
+  <a id="promo-link" href="https://donorbox.org/supportpf2019-fundraising-campaign" target="_blank"><div id="promo">This season, we need your help! Click here to #SupportP5!</div></a>
 </nav>