Improve docs site footer

+ Add workiva W symbol
+ Tweak item spacing
+ Add link to license

_config.yml

@@ -50,7 +50,8 @@ org_url: https://www.workiva.com
 org_target: wk
 
 org_repos_url: https://github.com/Workiva
-repo_url: https://github.com/Workiva/over_react/
+repo_url: https://github.com/Workiva/over_react
+license_url: https://github.com/Workiva/over_react/blob/master/LICENSE
 repo_target: github
 
 api_docs_url: https://pub.dartlang.org/packages/over_react

docs/_includes/site_footer.html

@@ -1,13 +1,27 @@
-<hr class="feature-divider">
+<hr class="footer-divider">
 
 <div class="container">
     <footer class="footer row">
-        <div class="col-sm pt-1">
-            {{ site.title }} is brought to you by the good folks at
-            <a href="{{ site.org_url }}" target="{{ site.org_target }}">Workiva</a>.
+        <div class="footer__col footer__col--left col-md">
+            <div class="d-flex flex-items-xs-middle">
+                {% include svg/workiva-symbol.svg class="footer__logo" %}
+                <span>
+                    {{ site.title }} is brought to you by the good folks at
+                    <a href="{{ site.org_url }}" target="{{ site.org_target }}">Workiva</a>
+                </span>
+            </div>
         </div>
-        <div class="col-sm col-sm-shrink py-1">
-            <a class="footer-link" href="{{ site.repo_url }}" target="{{ site.repo_target }}">Github</a>
+        <div class="footer__col footer__col--right col-md col-sm-shrink d-flex flex-items-xs-middle">
+            <div class="d-flex flex-items-xs-middle">
+                <ul class="footer__items">
+                    <li class="footer__item">
+                        <a class="footer__link" href="{{ site.license_url }}" target="{{ site.repo_target }}">License</a>
+                    </li>
+                    <li class="footer__item">
+                        <a class="footer__link" href="{{ site.repo_url }}" target="{{ site.repo_target }}">Github</a>
+                    </li>
+                </ul>
+            </div>
         </div>
     </footer>
 </div>

docs/sass/_base.scss

@@ -16,6 +16,11 @@
   color: white;
 }
 
+.d-flex {
+  display: flex;
+  display: -ms-flexbox;
+}
+
 // Can't believe the bootstrap grid doesn't have this!!?
 @each $breakpoint in map-keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint, $grid-breakpoints) {

docs/sass/_footer.scss

@@ -1,3 +1,45 @@
+.footer-divider {
+  margin-top: $footer-vertical-padding;
+  margin-bottom: 0;
+}
+
 .footer {
-  color: $gray-light;
+  color: $footer-text-color;
+}
+
+.footer__col--left {
+  padding-top: $footer-vertical-padding;
+}
+
+.footer__col--right {
+  padding-top: $footer-vertical-padding;
+  padding-bottom: $footer-vertical-padding;
+}
+
+.footer__logo {
+  height: to-rem($line-height-base-px);
+  width: auto;
+  margin-right: $footer-item-spacing * 3;
+
+  path {
+    fill: $footer-logo-color;
+  }
+}
+
+.footer__items {
+  @include list-unstyled();
+  margin-bottom: 0;
+
+  @at-root .footer__item {
+    display: inline-block;
+
+    + .footer__item {
+      // Add a separator between unrelated items / links in the footer.
+      &:before {
+        padding-left: $footer-item-spacing;
+        padding-right: $footer-item-spacing;
+        content: "·";
+      }
+    }
+  }
 }

docs/sass/_variables.scss

@@ -42,6 +42,7 @@ $font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New
 
 @import 'bootstrap/scss/bootstrap';
 
+$line-height-base-px: $font-size-root * $line-height-base;
 
 // OverReact site variables
 $navbar-content-height: to-rem($font-size-root * $line-height-base);
@@ -61,3 +62,8 @@ $hero-title-breakpoints: (
   size-lg: $display3-size,
   weight-lg: $display3-weight
 );
+
+$footer-vertical-padding: to-rem($grid-gutter-width-base);
+$footer-item-spacing: to-rem($list-inline-padding);
+$footer-text-color: $gray-light;
+$footer-logo-color: mix($footer-text-color, #fff, 35%);