Merge pull request #653 from motionsuggests/master

[BUILD] Add a global site footer to Spark Docs

src/assets/drizzle/styles/base/_color.scss

@@ -11,4 +11,6 @@ $orange-medium: #ff8920;
 $orange-dark: #ff721e;
 $orangered: #ff5c1c;
 $red: #ff451a;
+$red-light: #faccc4;
+$purple: #582d41;
 $code-preview: #2b2b2b;

src/assets/drizzle/styles/base/_icons.scss

@@ -1,8 +1,14 @@
 .#{$app-namespace}-b-Icon {
+  fill: currentColor;
   width: 1rem;
   margin: 3px;
 }
 
+.#{$app-namespace}-b-Icon--large {
+  width: 2.1875rem;
+  height: 2.1875rem;
+}
+
 .#{$app-namespace}-b-Icon--small {
   width: 0.75rem;
 }

src/assets/drizzle/styles/base/_type.scss

@@ -1,6 +1,13 @@
 .#{$app-namespace}-b-Body {
   font-size: 1rem;
   line-height: 1.563;
+  display: flex;
+  flex-direction: column;
+}
+
+html,
+body {
+  height: 100%;
 }
 
 body,

src/assets/drizzle/styles/components/_footer.scss

@@ -0,0 +1,28 @@
+.#{$app-namespace}-c-Footer {
+  background-color: $purple;
+  padding: $space-inset-short-l;
+
+  @media (max-width: 21.5625rem) {
+    padding: $space-inset-short-m;
+  }
+}
+
+.#{$app-namespace}-c-Footer__icons {
+  @media (max-width: $footer-collapse-breakpoint) {
+    margin: 0 auto;
+    text-align: center;
+  }
+}
+
+.#{$app-namespace}-c-Footer__link {
+  display: inline-block;
+
+  @media (max-width: $footer-collapse-breakpoint) {
+    margin: 0 auto $space-m;
+    text-align: center;
+  }
+}
+
+.#{$app-namespace}-c-Footer__link:hover {
+  color: $red-light;
+}

src/assets/drizzle/styles/main.scss

@@ -14,6 +14,7 @@
 @import './components/logo';
 @import './components/code-example-switch';
 @import './components/divider';
+@import './components/footer';
 @import './components/navigation';
 @import './components/preview';
 @import './components/site-header';

src/assets/drizzle/styles/objects/_main-layout.scss

@@ -1,17 +1,43 @@
 $drizzle-header-padding-vert-wide: 1rem;
 
+.#{$app-namespace}-o-Layout__wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex: 1 0 auto;
+}
+
 .#{$app-namespace}-o-Layout {
   height: 100%;
   margin: 0;
 }
 
 .#{$app-namespace}-o-Layout__main {
+  flex: 1 0 auto;
+
   @media (min-width: $nav-switch-breakpoint) {
     width: $layout-main-width;
     margin-left: $layout-nav-width;
   }
 }
 
+.#{$app-namespace}-o-Layout__footer {
+  flex: 0 0 auto;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: center;
+
+  @media (min-width: $nav-switch-breakpoint) {
+    width: $layout-main-width;
+    margin-left: $layout-nav-width;
+  }
+  @media (max-width: $footer-collapse-breakpoint) {
+    display: block;
+    justify-content: center;
+  }
+}
+
 .#{$app-namespace}-o-Layout__content {
   max-width: 66rem;
   padding: $space-l $space-m;

src/assets/drizzle/styles/settings/_settings.scss

@@ -1,5 +1,6 @@
 $app-namespace: 'drizzle';
 $nav-switch-breakpoint: 60rem;
+$footer-collapse-breakpoint: 32.5rem;
 $layout-nav-width: 15.9375rem;
 $layout-main-width: calc(100% - 15.9375rem);
 $nav-background-color: $black;

src/assets/drizzle/styles/utility/_utility.scss

@@ -13,3 +13,7 @@
 .#{$app-namespace}-u-Columned {
   columns: 12rem;
 }
+
+.#{$app-namespace}-u-Display--inline-block {
+  display: inline-block;
+}

src/templates/blank.hbs

@@ -44,7 +44,9 @@
     {{/block}}
 
     {{#block "foot"}}
+      {{> drizzle.footer}}
     {{/block}}
+
 
     <script src="{{@root.baseurl}}/assets/drizzle/scripts/drizzle.js"></script>
     <script src="{{@root.baseurl}}/assets/toolkit/scripts/toolkit.js"></script>

src/templates/collection.hbs

@@ -124,4 +124,7 @@
     {{/if}}
     {{/content}}
   {{/extend}}
+  {{#content "foot"}}
+    {{> drizzle.footer}}
+  {{/content}}
 </div>

src/templates/default.hbs

@@ -10,16 +10,17 @@
   {{/content}}
 
   {{#content "body"}}
-    <div data-sprk-main>
+    <div class="drizzle-o-Layout__wrapper" data-sprk-main>
       {{> drizzle.nav}}
       <div class="drizzle-o-Layout__main">
         {{#block "main"}}
 
         {{/block}}
       </div>
+
     </div>
+
   {{/content}}
 
-  {{#content "foot"}}
-  {{/content}}
+
 {{/extend}}

src/templates/drizzle/footer.hbs

@@ -0,0 +1,22 @@
+<div class="drizzle-o-Layout__footer drizzle-c-Footer">
+  <div class="drizzle-c-Footer__icons">
+    <a class="drizzle-c-Footer__link drizzle-b-Link--light" href="mailto:[email protected]">
+      [email protected]
+    </a>
+  </div>
+
+  <div class="drizzle-c-Footer__icons">
+    <a class="drizzle-c-Footer__link drizzle-b-Link--light drizzle-u-Display--inline-block" href="https://twitter.com/sparkQL" aria-label="Spark Design System on Twitter">
+      <svg class="drizzle-b-Icon drizzle-b-Icon--large" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path d="M23.954 4.569a10 10 0 0 1-2.825.775 4.958 4.958 0 0 0 2.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 0 0-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 0 0-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 0 1-2.228-.616v.061a4.923 4.923 0 0 0 3.946 4.827 4.996 4.996 0 0 1-2.212.085 4.937 4.937 0 0 0 4.604 3.417 9.868 9.868 0 0 1-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 0 0 7.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 0 0 2.46-2.548l-.047-.02z" />
+      </svg>
+    </a>
+    <a class="drizzle-c-Footer__link drizzle-b-Link--light drizzle-u-Display--inline-block" href="https://github.com/sparkdesignsystem/spark-design-system" aria-label="Spark Design System on GitHub">
+      <svg class="drizzle-b-Icon drizzle-b-Icon--large" viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+      </svg>
+    </a>
+  </div>
+
+</div>