Commit c856b6dc by David Baumgold

Merge pull request #7457 from edx/db/openedx-logo-on-edx.org

"Powered by Open edX" logo on edx.org footer
parents 9edda950 d66bb883
...@@ -16,10 +16,14 @@ ...@@ -16,10 +16,14 @@
margin: 0 auto; margin: 0 auto;
color: $gray-l1; color: $gray-l1;
.footer-content-primary {
@include clearfix();
}
.colophon { .colophon {
width: flex-grid(4, 12); width: flex-grid(4, 12);
float: left; @include float(left);
margin-right: flex-gutter(2); @include margin-right(flex-gutter(2));
} }
a { a {
...@@ -32,15 +36,15 @@ ...@@ -32,15 +36,15 @@
.nav-peripheral { .nav-peripheral {
width: flex-grid(6, 12); width: flex-grid(6, 12);
float: right; @include float(right);
text-align: right; @include text-align(right);
.nav-item { .nav-item {
display: inline-block; display: inline-block;
margin-right: ($baseline/4); @include margin-right($baseline/4);
&:last-child { &:last-child {
margin-right: 0; @include margin-right(0);
} }
a { a {
...@@ -53,10 +57,47 @@ ...@@ -53,10 +57,47 @@
@extend %t-action3; @extend %t-action3;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-right: ($baseline/4); @include margin-right($baseline/4);
} }
} }
} }
} }
.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);
@include margin-right(flex-gutter(2));
}
// platform Open edX logo and link
.footer-about-openedx {
@include float(right);
width: flex-grid(3,12);
@include text-align(right);
a {
display: inline-block;
img {
display: block;
width: ($baseline* 6);
}
&:hover {
border-bottom: none;
}
}
}
} }
} }
...@@ -3,33 +3,47 @@ ...@@ -3,33 +3,47 @@
<div class="wrapper-footer wrapper"> <div class="wrapper-footer wrapper">
<footer class="primary" role="contentinfo"> <footer class="primary" role="contentinfo">
<div class="colophon">
<p>&copy; ${settings.COPYRIGHT_YEAR} <a data-rel="edx.org" href="${marketing_link('ROOT')}" rel="external">${settings.PLATFORM_NAME}</a>.</p> <div class="footer-content-primary">
## Site operators: Please do not remove this paragraph! This attributes back to edX and makes your acknowledgement of edX's trademarks clear. <div class="colophon">
<p> <p>&copy; ${settings.COPYRIGHT_YEAR} <a data-rel="edx.org" href="${marketing_link('ROOT')}" rel="external">${settings.PLATFORM_NAME}</a>.</p>
## Translators: 'EdX', 'edX', 'Studio', and 'Open edX' are trademarks of 'edX Inc.'. Please do not translate any of these trademarks and company names. </div>
${_("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/'>", <nav class="nav-peripheral">
link_end=u"</a>" <ol>
)} <li class="nav-item nav-peripheral-tos">
</p> <a data-rel="edx.org" href="${marketing_link('TOS')}">${_("Terms of Service")}</a>
</li>
<li class="nav-item nav-peripheral-pp">
<a data-rel="edx.org" href="${marketing_link('PRIVACY')}">${_("Privacy Policy")}</a>
</li>
% if settings.TENDER_DOMAIN and user.is_authenticated():
<li class="nav-item nav-peripheral-feedback">
<a data-rel="edx.org" href="http://${settings.TENDER_DOMAIN}/discussion/new" class="show-tender" title="${_('Use our feedback tool, Tender, to share your feedback')}">${_("Contact Us")}</a>
</li>
% endif
</ol>
</nav>
</div> </div>
<nav class="nav-peripheral" aria-label="{_('Legal')}"> <div class="footer-content-secondary" aria-label="{_('Legal')}">
<ol> <div class="footer-about-copyright">
<li class="nav-item nav-peripheral-tos"> ## Site operators: Please do not remove this paragraph! This attributes back to edX and makes your acknowledgement of edX's trademarks clear.
<a data-rel="edx.org" href="${marketing_link('TOS')}">${_("Terms of Service")}</a> <p>
</li> ## Translators: 'EdX', 'edX', 'Studio', and 'Open edX' are trademarks of 'edX Inc.'. Please do not translate any of these trademarks and company names.
<li class="nav-item nav-peripheral-pp"> ${_("EdX, Open edX, Studio, and the edX and Open edX logos are registered trademarks or trademarks of {link_start}edX Inc.{link_end}").format(
<a data-rel="edx.org" href="${marketing_link('PRIVACY')}">${_("Privacy Policy")}</a> link_start=u"<a data-rel='edx.org' href='https://www.edx.org/'>",
</li> link_end=u"</a>"
% if settings.TENDER_DOMAIN and user.is_authenticated(): )}
<li class="nav-item nav-peripheral-feedback"> </p>
<a data-rel="edx.org" href="http://${settings.TENDER_DOMAIN}/discussion/new" class="show-tender" title="${_('Use our feedback tool, Tender, to share your feedback')}">${_("Contact Us")}</a> </div>
</li>
% endif <div class="footer-about-openedx">
</ol> <a href="http://open.edx.org" title="${_("Powered by Open edX")}">
</nav> <img alt="${_("Powered by Open edX")}" src="https://files.edx.org/openedx-logos/edx-openedx-logo-tag.png">
</a>
</div>
</div>
</footer> </footer>
</div> </div>
...@@ -159,7 +159,7 @@ ...@@ -159,7 +159,7 @@
} }
// platform Open edX logo and link // platform Open edX logo and link
.powered-by { .footer-about-openedx {
@include float(right); @include float(right);
width: flex-grid(3,12); width: flex-grid(3,12);
display: inline-block; display: inline-block;
...@@ -307,14 +307,35 @@ $edx-footer-bg-color: rgb(252,252,252); ...@@ -307,14 +307,35 @@ $edx-footer-bg-color: rgb(252,252,252);
@extend %edx-footer-title; @extend %edx-footer-title;
} }
.footer-about-logo { .footer-about-logo, .footer-about-openedx {
margin-bottom: $edx-footer-spacing; margin-bottom: $edx-footer-spacing;
img {
height: 47px;
}
a {
display: block;
&:hover {
border-bottom: 0;
}
}
}
.footer-about-logo {
@include float(left);
}
.footer-about-openedx-logo {
@include float(right);
} }
.footer-about-copy { .footer-about-copy {
@extend %t-copy-sub1; @extend %t-copy-sub1;
margin-bottom: $edx-footer-spacing; margin-bottom: $edx-footer-spacing;
color: rgb(61, 62, 63); color: rgb(61, 62, 63);
clear: both;
p { p {
// NOTE: needed for poor LMS span styling // NOTE: needed for poor LMS span styling
......
...@@ -43,6 +43,12 @@ ...@@ -43,6 +43,12 @@
</p> </p>
</div> </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 class="footer-about-links"> <div class="footer-about-links">
<a href="${marketing_link('TOS')}"><span class="copy">${_("Terms of Service and Honor Code")}</span></a> <a href="${marketing_link('TOS')}"><span class="copy">${_("Terms of Service and Honor Code")}</span></a>
<a href="${marketing_link('PRIVACY')}"><span class="copy">${_("Privacy Policy")}</span> <a href="${marketing_link('PRIVACY')}"><span class="copy">${_("Privacy Policy")}</span>
......
...@@ -91,16 +91,16 @@ ...@@ -91,16 +91,16 @@
</div> </div>
## please leave this link and use one of the logos provided ## please leave this link and use one of the logos provided
<div class="powered-by"> <div class="footer-about-openedx">
<p> <p>
<a href="http://openedx.org/"> <a href="http://openedx.org/">
## standard powered-by logo ## standard powered-by logo
## Translators: 'Open edX' is a brand, please keep this untranslated. See http://openedx.org for more information. ## 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 ## 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 ## 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> </a>
</p> </p>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment