Merge pull request #1817 from katieporter/develop

Remove footer iframe and add temporary short footer

Author: eschallock

source/_assets/stylesheets/base/default.less

@@ -14,6 +14,7 @@ body {
 	line-height: 24px;
   font-weight: 300;
   background-color: @white;
+  color: @slate-80;
 }
 
 p {

source/_assets/stylesheets/base/typography.less

@@ -11,6 +11,10 @@ h1, h2, h3 {
   font-family: "Colfax-Light", sans-serif;
 }
 
+h1, h2, h4 {
+  color: @slate;
+}
+
 h1 {
   margin-bottom: 30px;
   line-height: 45px;
@@ -26,6 +30,7 @@ h3, .h3 {
   margin-bottom: 13px;
   margin-top: 20px;
   line-height: 30px;
+  color: @slate-80;
 }
 
 h4 {
@@ -36,7 +41,7 @@ h4 {
 }
 
 h5 {
-  color: rgba(41, 70, 97, 0.60);
+  color: @slate-60;
   font-weight: 700;
   letter-spacing: 1px;
   margin-bottom: 13px;
@@ -50,10 +55,11 @@ h6 {
 }
 
 p {
-  margin-bottom: 16px;
+  margin-bottom: @scale-0;
+  line-height: @scaleup-3;
   &.small {
     font-size: @font-size-small;
-    color: rgba(41, 70, 97, 0.60);
+    color: @slate-60;
     font-weight: 400;
   }
 }
@@ -81,3 +87,7 @@ ol {
 li {
   color: @body-color;
 }
+
+.text-align-center {
+  text-align: center;
+}

source/_assets/stylesheets/base/variables.less

@@ -34,7 +34,7 @@
 @body-color:            rgba(41, 70, 97, 0.80);
 
 //** Global textual link color.
-@link-color:            rgba(26, 130, 226, 0.80);
+@link-color:            @sg-blue-80;
 //** Link hover color set via `darken()` function.
 @link-hover-color:      @brand-primary;
 
@@ -869,6 +869,11 @@
 @gray-border:     #ECECED;
 @gray-background: #F5F5F8;
 
+// Low Opacity Whites
+@white-80:        rgba(255, 255, 255, 0.8);
+@white-60:        rgba(255, 255, 255, 0.6);
+@white-50:        rgba(255, 255, 255, 0.5);
+
 // Modular Scale
 @scaleup-11:      9.492em;
 @scaleup-10:      7.594em;

source/_assets/stylesheets/components/footer.less

@@ -1,9 +1,15 @@
-#footer-iframe {
-  width: 100%;
-  height: 590px;
-  border: 0;
-  margin-bottom: -8px;
-  .media-up(@screen-tablet, {
-    height: 304px;
-  });
+.page-footer {
+  background-color: @slate;
+  color: @white-80;
+  padding-top: @scale-0;
+  padding-bottom: @scale-0;
+  span:not(:last-child) {
+    margin-right: @scaledown-2;
+  }
+  a {
+    color: @white-80;
+    &:hover {
+      color: @white;
+    }
+  }
 }

source/_includes/footer.html

@@ -1 +1,17 @@
-<iframe id="footer-iframe" src="//sendgrid.com/mkt-api/v2/footer?key=71ab8b6afb1bae3df247e0286da35e0da16564ff" frameborder="0" scrolling="no"></iframe>
+<footer class="page-footer page-footer-short">
+
+    <div class="container-fluid">
+      <div class="row text-align-center">
+        <small class="col-sm-12">
+          <span class='footer-copyright'>©<script>document.write(new Date().getFullYear())</script> SendGrid</span>
+          <span> / </span>
+          <span><a href="http://sendgrid.com" id="footer-tos">Home</a></span>
+          <span> / </span>
+          <span><a href="/" id="footer-tos">Docs</a></span>
+          <span> / </span>
+          <span><a href="https://sendgrid.com/tos" id="footer-tos">Legal</a></span>
+        </small>
+      </div>
+    </div>
+
+</footer>