Adjust styling for Open edX footer details

cms/static/sass/elements/_footer.scss

@@ -16,9 +16,13 @@
     margin: 0 auto;
     color: $gray-l1;
 
+    .footer-content-primary {
+      @include clearfix();
+    }
+
     .colophon {
       width: flex-grid(4, 12);
-      float: left;
+      @include float(left);
       margin-right: flex-gutter(2);
     }
 
@@ -32,15 +36,15 @@
 
     .nav-peripheral {
       width: flex-grid(6, 12);
-      float: right;
-      text-align: right;
+      @include float(right);
+      @include text-align(right);
 
       .nav-item {
         display: inline-block;
-        margin-right: ($baseline/4);
+        @include margin-right($baseline/4);
 
         &:last-child {
-          margin-right: 0;
+          @include margin-right(0);
         }
 
         a {
@@ -59,17 +63,37 @@
       }
     }
 
+    .footer-content-secondary {
+      @include clearfix();
+      margin-top: $baseline;
+    }
+
+    .footer-about-copyright, .footer-about-openedx {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    // platform trademarks
+    .footer-about-copyright {
+      width: flex-grid(4, 12);
+      @include float(left);
+      margin-right: flex-gutter(2);
+    }
+
     // platform Open edX logo and link
-    .powered-by {
+    .footer-about-openedx {
       @include float(right);
       width: flex-grid(3,12);
-      display: inline-block;
-      vertical-align: bottom;
       @include text-align(right);
 
       a {
         display: inline-block;
 
+        img {
+          display: block;
+          width: ($baseline* 6);
+        }
+
         &:hover {
           border-bottom: none;
         }

cms/templates/widgets/footer.html

@@ -3,19 +3,13 @@
 
 <div class="wrapper-footer wrapper">
   <footer class="primary" role="contentinfo">
+
+    <div class="footer-content-primary">
       <div class="colophon">
         <p>&copy; ${settings.COPYRIGHT_YEAR} <a data-rel="edx.org" href="${marketing_link('ROOT')}" rel="external">${settings.PLATFORM_NAME}</a>.</p>
-      ## Site operators: Please do not remove this paragraph! This attributes back to edX and makes your acknowledgement of edX's trademarks clear.
-      <p>
-	## Translators: 'EdX', 'edX', 'Studio', and 'Open edX' are trademarks of 'edX Inc.'. Please do not translate any of these trademarks and company names.
-	${_("EdX, Open edX, Studio, and the edX and Open edX logos are registered trademarks or trademarks of {link_start}edX Inc.{link_end}").format(
-	  link_start=u"<a data-rel='edx.org' href='https://www.edx.org/'>",
-	  link_end=u"</a>"
-	)}
-      </p>
       </div>
 
-    <nav class="nav-peripheral" aria-label="{_('Legal')}">
+      <nav class="nav-peripheral">
         <ol>
           <li class="nav-item nav-peripheral-tos">
             <a data-rel="edx.org" href="${marketing_link('TOS')}">${_("Terms of Service")}</a>
@@ -30,11 +24,26 @@
           % endif
         </ol>
       </nav>
-    <div class="powered-by">
-      <a href="http://openedx.org" title="${_("Powered by Open edX")}">
-        <img alt="${_("Powered by Open edX")}" src="https://files.edx.org/openedx-logos/edx-openedx-logo-tag.png" width="150" height="50">
+    </div>
+
+    <div class="footer-content-secondary" aria-label="{_('Legal')}">
+      <div class="footer-about-copyright">
+        ## Site operators: Please do not remove this paragraph! This attributes back to edX and makes your acknowledgement of edX's trademarks clear.
+        <p>
+          ## Translators: 'EdX', 'edX', 'Studio', and 'Open edX' are trademarks of 'edX Inc.'. Please do not translate any of these trademarks and company names.
+          ${_("EdX, Open edX, Studio, and the edX and Open edX logos are registered trademarks or trademarks of {link_start}edX Inc.{link_end}").format(
+            link_start=u"<a data-rel='edx.org' href='https://www.edx.org/'>",
+            link_end=u"</a>"
+          )}
+        </p>
+      </div>
+
+      <div class="footer-about-openedx">
+        <a href="http://open.edx.org" title="${_("Powered by Open edX")}">
+          <img alt="${_("Powered by Open edX")}" src="https://files.edx.org/openedx-logos/edx-openedx-logo-tag.png">
         </a>
       </div>
+    </div>
   </footer>
 </div>
 

lms/static/sass/shared/_footer.scss

@@ -159,7 +159,7 @@
     }
 
     // platform Open edX logo and link
-    .powered-by {
+    .footer-about-openedx {
       @include float(right);
       width: flex-grid(3,12);
       display: inline-block;
@@ -307,7 +307,7 @@ $edx-footer-bg-color: rgb(252,252,252);
     @extend %edx-footer-title;
   }
 
-  .footer-about-logo, .footer-about-openedx-logo {
+  .footer-about-logo, .footer-about-openedx {
     margin-bottom: $edx-footer-spacing;
 
     img {

lms/templates/footer.html

@@ -91,16 +91,16 @@
     </div>
 
     ## please leave this link and use one of the logos provided
-    <div class="powered-by">
+    <div class="footer-about-openedx">
       <p>
         <a href="http://openedx.org/">
           ## standard powered-by logo
           ## Translators: 'Open edX' is a brand, please keep this untranslated. See http://openedx.org for more information.
-          <img src="https://files.edx.org/openedx-logos/edx-openedx-logo-tag.png" alt="${_('Powered by Open edX')}" width="150" height="50" />
+          <img src="https://files.edx.org/openedx-logos/edx-openedx-logo-tag.png" alt="${_('Powered by Open edX')}" width="140" />
           ## greyscale logo for dark background
-          ## <img src="https://files.edx.org/openedx-logos/edx-openedx-logo-tag-light.png" alt="${_('Powered by Open edX')}" width="150" height="50" />
+          ## <img src="https://files.edx.org/openedx-logos/edx-openedx-logo-tag-light.png" alt="${_('Powered by Open edX')}" width="140" />
           ## greyscale logo for light background
-          ## <img src="https://files.edx.org/openedx-logos/edx-openedx-logo-tag-dark.png" alt="${_('Powered by Open edX')}" width="150" height="50" />
+          ## <img src="https://files.edx.org/openedx-logos/edx-openedx-logo-tag-dark.png" alt="${_('Powered by Open edX')}" width="140" />
         </a>
       </p>
     </div>