From d630c77673fe905006b497bc4734e53462600d02 Mon Sep 17 00:00:00 2001
From: Scott Stocker <stocker@stanford.edu>
Date: Tue, 26 Feb 2019 15:26:15 -0800
Subject: [PATCH] 298-change "sticky-footer" mixin to target <footer> selector 
 (#299)

remove parent <footer> element from the Global Footer component and include it instead in kss/builder/decanter/index.twig.  The Global Footer component is now a <section> to be included in a a sites <footer> region.  Also added some comments to global-footer.twig which mirror what are in the brand-bar component.
---
 core/css/decanter.css                         | 118 +++++++++---------
 .../scss/components/brand-bar/_brand-bar.scss |   3 -
 .../global-footer/_global-footer.scss         |  16 +--
 .../mixins/layout/_sticky-footer.scss         |   7 +-
 .../global-footer/global-footer.twig          |  46 ++++---
 kss/builder/decanter/index.twig               |   2 +
 kss/builder/decanter/kss-assets/css/kss.css   |   2 +-
 7 files changed, 101 insertions(+), 93 deletions(-)

diff --git a/core/css/decanter.css b/core/css/decanter.css
index 8b1e5f229..afcfa8a01 100644
--- a/core/css/decanter.css
+++ b/core/css/decanter.css
@@ -6524,10 +6524,6 @@ dfn {
     .su-brand-bar__container {
       max-width: 1500px;
       width: calc(100% - 200px); } }
-  @media only screen and (min-width: 0) and (max-width: 575px) {
-    .su-brand-bar__container {
-      padding-right: 20px;
-      padding-left: 20px; } }
 
 .su-brand-bar__logo {
   display: inline-block;
@@ -7074,104 +7070,104 @@ button,
       .su-cta--button-center .su-cta__button {
         width: auto; } }
 
-.global-footer {
+.su-global-footer {
   background-color: #8c1515;
   color: #ffffff; }
   @media only screen and (min-width: 0) {
-    .global-footer {
+    .su-global-footer {
       padding-top: 2.31111104rem; } }
   @media only screen and (min-width: 576px) {
-    .global-footer {
+    .su-global-footer {
       padding-top: 2.31111104rem; } }
   @media only screen and (min-width: 768px) {
-    .global-footer {
+    .su-global-footer {
       padding-top: 2.59999992rem; } }
   @media only screen and (min-width: 992px) {
-    .global-footer {
+    .su-global-footer {
       padding-top: 2.59999992rem; } }
   @media only screen and (min-width: 1200px) {
-    .global-footer {
+    .su-global-footer {
       padding-top: 2.59999992rem; } }
   @media only screen and (min-width: 1500px) {
-    .global-footer {
+    .su-global-footer {
       padding-top: 2.74444436rem; } }
   @media only screen and (min-width: 0) {
-    .global-footer {
+    .su-global-footer {
       padding-bottom: 2.31111104rem; } }
   @media only screen and (min-width: 576px) {
-    .global-footer {
+    .su-global-footer {
       padding-bottom: 2.31111104rem; } }
   @media only screen and (min-width: 768px) {
-    .global-footer {
+    .su-global-footer {
       padding-bottom: 2.59999992rem; } }
   @media only screen and (min-width: 992px) {
-    .global-footer {
+    .su-global-footer {
       padding-bottom: 2.59999992rem; } }
   @media only screen and (min-width: 1200px) {
-    .global-footer {
+    .su-global-footer {
       padding-bottom: 2.59999992rem; } }
   @media only screen and (min-width: 1500px) {
-    .global-footer {
+    .su-global-footer {
       padding-bottom: 2.74444436rem; } }
-  .global-footer a {
+  .su-global-footer a {
     color: rgba(255, 255, 255, 0.9);
     text-decoration: none; }
-    .global-footer a:hover {
+    .su-global-footer a:hover {
       color: #ffffff;
       text-decoration: underline; }
-  .global-footer .global-footer__container {
+  .su-global-footer .su-global-footer__container {
     margin: 0 auto; }
     @media only screen and (min-width: 0) {
-      .global-footer .global-footer__container {
+      .su-global-footer .su-global-footer__container {
         max-width: calc(100% - 40px);
         width: calc(100% - 40px); } }
     @media only screen and (min-width: 576px) {
-      .global-footer .global-footer__container {
+      .su-global-footer .su-global-footer__container {
         max-width: calc(100% - 60px);
         width: calc(100% - 60px); } }
     @media only screen and (min-width: 768px) {
-      .global-footer .global-footer__container {
+      .su-global-footer .su-global-footer__container {
         max-width: calc(100% - 100px);
         width: calc(100% - 100px); } }
     @media only screen and (min-width: 992px) {
-      .global-footer .global-footer__container {
+      .su-global-footer .su-global-footer__container {
         max-width: calc(100% - 160px);
         width: calc(100% - 160px); } }
     @media only screen and (min-width: 1200px) {
-      .global-footer .global-footer__container {
+      .su-global-footer .su-global-footer__container {
         max-width: calc(100% - 200px);
         width: calc(100% - 200px); } }
     @media only screen and (min-width: 1500px) {
-      .global-footer .global-footer__container {
+      .su-global-footer .su-global-footer__container {
         max-width: 1500px;
         width: calc(100% - 200px); } }
     @media only screen and (min-width: 768px) {
-      .global-footer .global-footer__container {
+      .su-global-footer .su-global-footer__container {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex; } }
-  .global-footer .global-footer__brand {
+  .su-global-footer .su-global-footer__brand {
     padding-top: 0.5rem;
     text-align: center; }
     @media only screen and (min-width: 0) {
-      .global-footer .global-footer__brand {
+      .su-global-footer .su-global-footer__brand {
         margin-bottom: 0.8rem; } }
     @media only screen and (min-width: 576px) {
-      .global-footer .global-footer__brand {
+      .su-global-footer .su-global-footer__brand {
         margin-bottom: 0.8rem; } }
     @media only screen and (min-width: 768px) {
-      .global-footer .global-footer__brand {
+      .su-global-footer .su-global-footer__brand {
         margin-bottom: 0.9rem; } }
     @media only screen and (min-width: 992px) {
-      .global-footer .global-footer__brand {
+      .su-global-footer .su-global-footer__brand {
         margin-bottom: 0.9rem; } }
     @media only screen and (min-width: 1200px) {
-      .global-footer .global-footer__brand {
+      .su-global-footer .su-global-footer__brand {
         margin-bottom: 0.9rem; } }
     @media only screen and (min-width: 1500px) {
-      .global-footer .global-footer__brand {
+      .su-global-footer .su-global-footer__brand {
         margin-bottom: 0.95rem; } }
-    .global-footer .global-footer__brand a {
+    .su-global-footer .su-global-footer__brand a {
       display: inline-block;
       font-family: Stanford, 'Source Serif Pro', Georgia, Times, 'Times New Roman', serif;
       font-style: normal;
@@ -7193,25 +7189,25 @@ button,
       color: #ffffff;
       font-size: 3.4rem; }
       @media only screen and (min-width: 0) and (max-width: 575px) {
-        .global-footer .global-footer__brand a {
+        .su-global-footer .su-global-footer__brand a {
           font-size: 3.2rem; } }
-  .global-footer .global-footer__content {
+  .su-global-footer .su-global-footer__content {
     -webkit-box-flex: 1;
         -ms-flex-positive: 1;
             flex-grow: 1; }
     @media only screen and (min-width: 576px) and (max-width: 767px) {
-      .global-footer .global-footer__content {
+      .su-global-footer .su-global-footer__content {
         text-align: center; } }
     @media only screen and (min-width: 768px) {
-      .global-footer .global-footer__content {
+      .su-global-footer .su-global-footer__content {
         padding-left: 3rem; } }
     @media only screen and (min-width: 992px) {
-      .global-footer .global-footer__content {
+      .su-global-footer .su-global-footer__content {
         padding-left: 4.5rem; } }
     @media only screen and (min-width: 1200px) {
-      .global-footer .global-footer__content {
+      .su-global-footer .su-global-footer__content {
         padding-left: 5.2rem; } }
-  .global-footer nav {
+  .su-global-footer nav {
     margin-bottom: 1rem;
     display: -webkit-box;
     display: -ms-flexbox;
@@ -7223,66 +7219,66 @@ button,
         -ms-flex-pack: center;
             justify-content: center; }
     @media only screen and (min-width: 576px) {
-      .global-footer nav {
+      .su-global-footer nav {
         display: block;
         margin-bottom: 1.3rem; } }
-  .global-footer .global-footer__menu {
+  .su-global-footer .su-global-footer__menu {
     margin: 0 0 1rem;
     padding: 0;
     list-style-type: none; }
-    .global-footer .global-footer__menu li {
+    .su-global-footer .su-global-footer__menu li {
       margin: 0;
       padding: 0.25em 0;
       display: block; }
       @media only screen and (min-width: 576px) {
-        .global-footer .global-footer__menu li {
+        .su-global-footer .su-global-footer__menu li {
           margin-right: 1.3rem;
           display: inline-block;
           line-height: 1.1; } }
       @media only screen and (min-width: 768px) {
-        .global-footer .global-footer__menu li {
+        .su-global-footer .su-global-footer__menu li {
           padding: 0;
           text-align: left; } }
       @media only screen and (min-width: 992px) {
-        .global-footer .global-footer__menu li {
+        .su-global-footer .su-global-footer__menu li {
           margin-right: 2rem; } }
-      .global-footer .global-footer__menu li:last-child {
+      .su-global-footer .su-global-footer__menu li:last-child {
         margin-right: 0; }
-  .global-footer .global-footer__menu--global {
+  .su-global-footer .su-global-footer__menu--global {
     font-size: 1.5rem; }
     @media only screen and (min-width: 0) and (max-width: 575px) {
-      .global-footer .global-footer__menu--global {
+      .su-global-footer .su-global-footer__menu--global {
         padding-right: 2rem; } }
     @media (min-width: 768px) and (max-width: 1499px) {
-      .global-footer .global-footer__menu--global {
+      .su-global-footer .su-global-footer__menu--global {
         font-size: 1.7rem; } }
     @media only screen and (min-width: 1500px) {
-      .global-footer .global-footer__menu--global {
+      .su-global-footer .su-global-footer__menu--global {
         font-size: 1.8rem; } }
-  .global-footer .global-footer__menu--policy {
+  .su-global-footer .su-global-footer__menu--policy {
     font-size: 1.5rem;
     font-weight: 300; }
     @media only screen and (min-width: 0) and (max-width: 575px) {
-      .global-footer .global-footer__menu--policy {
+      .su-global-footer .su-global-footer__menu--policy {
         padding-left: 2rem;
         font-weight: 400; } }
     @media only screen and (min-width: 576px) {
-      .global-footer .global-footer__menu--policy {
+      .su-global-footer .su-global-footer__menu--policy {
         font-size: 1.4rem; } }
     @media (min-width: 768px) and (max-width: 1199px) {
-      .global-footer .global-footer__menu--policy {
+      .su-global-footer .su-global-footer__menu--policy {
         font-size: 1.5rem; } }
     @media only screen and (min-width: 1200px) {
-      .global-footer .global-footer__menu--policy {
+      .su-global-footer .su-global-footer__menu--policy {
         font-size: 1.6rem; } }
-  .global-footer .global-footer__copyright {
+  .su-global-footer .su-global-footer__copyright {
     font-size: 1.4rem;
     font-weight: 300;
     text-align: center; }
-    .global-footer .global-footer__copyright span {
+    .su-global-footer .su-global-footer__copyright span {
       white-space: nowrap; }
     @media only screen and (min-width: 768px) {
-      .global-footer .global-footer__copyright {
+      .su-global-footer .su-global-footer__copyright {
         text-align: left; } }
 
 .su-hero {
diff --git a/core/scss/components/brand-bar/_brand-bar.scss b/core/scss/components/brand-bar/_brand-bar.scss
index 979367c70..b0d3c87bc 100644
--- a/core/scss/components/brand-bar/_brand-bar.scss
+++ b/core/scss/components/brand-bar/_brand-bar.scss
@@ -21,9 +21,6 @@
 
 .su-brand-bar__container {
   @include centered-column;
-  @include grid-media-only('xs') {
-    @include padding(null 20px);
-  }
 }
 
 .su-brand-bar__logo {
diff --git a/core/scss/components/global-footer/_global-footer.scss b/core/scss/components/global-footer/_global-footer.scss
index bf28cf98b..b22d4db5a 100644
--- a/core/scss/components/global-footer/_global-footer.scss
+++ b/core/scss/components/global-footer/_global-footer.scss
@@ -11,7 +11,7 @@
 //
 
 // Global styles for the global footer.
-.global-footer {
+.su-global-footer {
   @include modular-spacing(1, 'padding-top');
   @include modular-spacing(1, 'padding-bottom');
   background-color: $color-cardinal-red;
@@ -28,7 +28,7 @@
   }
 
   // Grid settings for footer container.
-  .global-footer__container {
+  .su-global-footer__container {
     @include centered-column;
     @include grid-media('md') {
       display: flex;
@@ -36,7 +36,7 @@
   }
 
   // The Logo.
-  .global-footer__brand {
+  .su-global-footer__brand {
     @include padding(0.5rem null null);
     @include modular-spacing(-2, 'margin-bottom');
     text-align: center;
@@ -52,7 +52,7 @@
     }
   }
 
-  .global-footer__content {
+  .su-global-footer__content {
     @include grid-media-only('sm') {
       text-align: center;
     }
@@ -86,7 +86,7 @@
     }
   }
 
-  .global-footer__menu {
+  .su-global-footer__menu {
     @include margin(0 0 1rem);
     @include padding(0);
     list-style-type: none;
@@ -117,7 +117,7 @@
     }
   }
 
-  .global-footer__menu--global {
+  .su-global-footer__menu--global {
     font-size: 1.5rem;
 
     @include grid-media-only('xs') {
@@ -133,7 +133,7 @@
     }
   }
 
-  .global-footer__menu--policy {
+  .su-global-footer__menu--policy {
     font-size: 1.5rem;
     font-weight: 300;
 
@@ -155,7 +155,7 @@
     }
   }
 
-  .global-footer__copyright {
+  .su-global-footer__copyright {
     font-size: 1.4rem;
     font-weight: 300;
     text-align: center;
diff --git a/core/scss/utilities/mixins/layout/_sticky-footer.scss b/core/scss/utilities/mixins/layout/_sticky-footer.scss
index fa326da54..8097be074 100644
--- a/core/scss/utilities/mixins/layout/_sticky-footer.scss
+++ b/core/scss/utilities/mixins/layout/_sticky-footer.scss
@@ -1,8 +1,5 @@
 @charset 'UTF-8';
 
-// This file is here until https://github.com/SU-SWS/decanter/pull/261 gets
-// merged and pulled in to this project.
-
 //
 // @sticky-footer
 //
@@ -15,12 +12,12 @@
 // at the bottom of the page when the content is shorter than the window, but allow
 // the content to push the footer below the viewport when the page is long.
 //
-// $selector - the CSS selector used to target the footer; default '> footer'
+// $selector - the CSS selector used to target the footer; default '> .site-footer'
 //
 // Style guide: Mixins.Layout.Sticky Footer
 //
 
-@mixin sticky-footer($selector: '> .global-footer') {
+@mixin sticky-footer($selector: '> .site-footer') {
   @include padding(0);
   @include margin(0);
 
diff --git a/core/templates/components/global-footer/global-footer.twig b/core/templates/components/global-footer/global-footer.twig
index 59f4edc8f..6617ab2ca 100644
--- a/core/templates/components/global-footer/global-footer.twig
+++ b/core/templates/components/global-footer/global-footer.twig
@@ -1,29 +1,45 @@
-<footer{{ attributes }} class="global-footer {{ modifier_class }}">
-  <div class="global-footer__container">
-    <div class="global-footer__brand">
-      <a href="https://www.stanford.edu/" class="global-footer__logo">Stanford<br>University</a>
+{#
+/**
+ * @file
+ * Global Footer Component.
+ *
+ * Stanford Universal Footer as defined at https://identity.stanford.edu/web-mobile.html#build-something-new
+ * This component should be added into the footer region of your site below site-specific footer section, if any.
+ * The entire footer can be made to "stick" to the bottom of the browser window by including the @sticky-footer mixin.
+ */
+#}
+<section class="su-global-footer">
+  <div class="su-global-footer__container">
+    <div class="su-global-footer__brand">
+      <a href="https://www.stanford.edu/" class="su-global-footer__logo">Stanford<br>University</a>
     </div>
-    <div class="global-footer__content">
+    <div class="su-global-footer__content">
       <nav role="navigation">
-        <ul class="global-footer__menu global-footer__menu--global">
+        <ul class="su-global-footer__menu su-global-footer__menu--global">
           <li><a href="https://www.stanford.edu">Stanford Home</a></li>
           <li><a href="https://visit.stanford.edu/plan/">Maps &amp; Directions</a></li>
           <li><a href="https://www.stanford.edu/search/">Search Stanford</a></li>
           <li><a href="https://emergency.stanford.edu">Emergency Info</a></li>
         </ul>
-        <ul class="global-footer__menu global-footer__menu--policy">
-          <li><a href="https://www.stanford.edu/site/terms/" title="Terms of use for sites">Terms of Use</a></li>
-          <li><a href="https://www.stanford.edu/site/privacy/" title="Privacy and cookie policy">Privacy</a></li>
-          <li><a href="https://uit.stanford.edu/security/copyright-infringement" title="Report alleged copyright infringement">Copyright</a></li>
-          <li><a href="https://adminguide.stanford.edu/chapter-1/subchapter-5/policy-1-5-4" title="Ownership and use of Stanford trademarks and images">Trademarks</a></li>
-          <li><a href="http://exploredegrees.stanford.edu/nonacademicregulations/nondiscrimination/" title="Non-discrimination policy">Non-Discrimination</a></li>
-          <li><a href="https://www.stanford.edu/site/accessibility" title="Report web accessibility issues">Accessibility</a></li>
+        <ul class="su-global-footer__menu su-global-footer__menu--policy">
+          <li><a href="https://www.stanford.edu/site/terms/" title="Terms of use for sites">Terms of Use</a>
+          </li>
+          <li><a href="https://www.stanford.edu/site/privacy/" title="Privacy and cookie policy">Privacy</a>
+          </li>
+          <li><a href="https://uit.stanford.edu/security/copyright-infringement"
+                 title="Report alleged copyright infringement">Copyright</a></li>
+          <li><a href="https://adminguide.stanford.edu/chapter-1/subchapter-5/policy-1-5-4"
+                 title="Ownership and use of Stanford trademarks and images">Trademarks</a></li>
+          <li><a href="http://exploredegrees.stanford.edu/nonacademicregulations/nondiscrimination/"
+                 title="Non-discrimination policy">Non-Discrimination</a></li>
+          <li><a href="https://www.stanford.edu/site/accessibility" title="Report web accessibility issues">Accessibility</a>
+          </li>
         </ul>
       </nav>
-      <div class="global-footer__copyright">
+      <div class="su-global-footer__copyright">
         <span>&copy; Stanford University.</span>
         <span>&nbsp; Stanford, California 94305.</span>
       </div>
     </div>
   </div>
-</footer> <!-- global-footer end -->
+</section> <!-- su-global-footer end -->
diff --git a/kss/builder/decanter/index.twig b/kss/builder/decanter/index.twig
index 06c1b474c..46f20e923 100644
--- a/kss/builder/decanter/index.twig
+++ b/kss/builder/decanter/index.twig
@@ -273,6 +273,8 @@
   });
 </script>
 {{ scripts|raw }}
+<footer class="site-footer">
 {% include "@decanter/components/global-footer/global-footer.twig" %}
+</footer>
 </body>
 </html>
diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css
index 6902377f2..938a5f819 100644
--- a/kss/builder/decanter/kss-assets/css/kss.css
+++ b/kss/builder/decanter/kss-assets/css/kss.css
@@ -867,7 +867,7 @@ body {
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column; }
-  body > .global-footer {
+  body > .site-footer {
     margin-top: auto; }
   html {
     display: -webkit-box;