Add footer
This commit is contained in:
Michael Kohler
Родитель
f08bc18fa3
Коммит
151e1deb6d
|
|
@ -0,0 +1,6 @@
|
|||
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
|
||||
<style>
|
||||
.st0{fill:#fff}
|
||||
</style>
|
||||
<path class="st0" d="M9 0C4 0 0 4 0 9s4 9 9 9 9-4 9-9-4-9-9-9zM6.3 5.6c.7 0 1.3.6 1.3 1.3S7 8.2 6.3 8.2 5 7.7 5 7c0-.8.6-1.4 1.3-1.4zm6.5 5.9c-.5 1.7-2.1 2.8-3.8 2.8-1.8 0-3.3-1.1-3.8-2.8-.1-.4.1-.7.4-.8s.7.1.8.4C6.8 12.2 7.8 13 9 13s2.2-.8 2.5-1.9c.1-.4.5-.6.8-.4.4.1.6.4.5.8zm-1.1-3.2c-.7 0-1.3-.6-1.3-1.3s.6-1.3 1.3-1.3S13 6.2 13 7c0 .7-.6 1.3-1.3 1.3z"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 492 B |
|
|
@ -0,0 +1,6 @@
|
|||
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
|
||||
<style>
|
||||
.st0{fill:#fff}
|
||||
</style>
|
||||
<path class="st0" d="M9 0C4 0 0 4 0 9s4 9 9 9 9-4 9-9-4-9-9-9zm4.4 10.4c-.5.6-1.1 1-1.9 1.3-.8.3-1.6.5-2.6.5-.4 0-.8 0-1.3-.1-.6.4-1.3.7-2 .9-.2 0-.4.1-.6.1-.1 0-.1 0-.1-.1 0 0-.1-.1-.1-.2l.2-.2c.1-.1.1-.2.2-.2 0-.1.1-.1.2-.2s.1-.2.2-.3.1-.2.1-.3c-.6-.3-1.1-.8-1.4-1.3s-.5-1-.5-1.6c0-.7.2-1.3.7-1.9s1.1-1 1.9-1.3c.8-.5 1.7-.7 2.6-.7s1.8.2 2.6.5 1.4.8 1.9 1.3c.5.6.7 1.2.7 1.9s-.3 1.3-.8 1.9z"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 528 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="19" height="19" viewBox="0 0 19 19" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.973 10.7l5.01-5.968.205-.018 1.578 1.322.018.208L8.358 13.9l-.125.053-.085-.035-4.277-3.59-.017-.207 1.324-1.574.207-.017 2.59 2.172M9.318 0a9.317 9.317 0 1 0 0 18.633 9.316 9.316 0 0 0 9.317-9.316A9.315 9.315 0 0 0 9.318 0" fill="#FFF" fill-rule="evenodd"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 365 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.317 0A9.317 9.317 0 0 0 0 9.318a9.317 9.317 0 0 0 18.634 0A9.317 9.317 0 0 0 9.317 0zm4.193 7.364c.007.094.007.187.007.28 0 2.862-2.177 6.157-6.156 6.157a6.1 6.1 0 0 1-3.32-.97c.173.02.34.028.522.028a4.33 4.33 0 0 0 2.686-.925 2.167 2.167 0 0 1-2.022-1.5 2.278 2.278 0 0 0 .978-.04A2.163 2.163 0 0 1 4.47 8.27v-.03c.287.163.622.263.977.276a2.16 2.16 0 0 1-.964-1.8c0-.404.107-.772.295-1.094a6.137 6.137 0 0 0 4.46 2.264 2.163 2.163 0 0 1 3.688-1.974c.49-.092.96-.273 1.374-.52-.16.5-.502.923-.95 1.19a4.293 4.293 0 0 0 1.245-.334c-.295.43-.663.81-1.085 1.12z" fill="#FFF" fill-rule="evenodd"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 700 B |
|
|
@ -0,0 +1,23 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 360 102.8" style="enable-background:new 0 0 360 102.8;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M134.3,45.6c-6.6,0-10.7,4.9-10.7,13.4c0,7.8,3.6,13.8,10.6,13.8c6.7,0,11.1-5.4,11.1-14
|
||||
C145.3,49.7,140.4,45.6,134.3,45.6z"/>
|
||||
<path class="st0" d="M310.9,68.3c0,2.9,1.4,5.2,5.3,5.2c4.6,0,9.5-3.3,9.8-10.8c-2.1-0.3-4.4-0.6-6.5-0.6
|
||||
C314.9,62.1,310.9,63.4,310.9,68.3z"/>
|
||||
<path class="st0" d="M0.1,0v103h360V0H0.1z M105.1,82h-19V56.3c0-7.8-2.9-10.8-8-10.8c-6.2,0-9,4.4-9,10.7V72h6v10h-18V56.3
|
||||
c0-7.8-2.9-10.8-8-10.8c-6.2,0-9,4.4-9,10.7V72h9v10h-28V72h6V46h-6v-9h19v6.4c3-4.8,7.5-7.7,13.8-7.7c6.5,0,12.5,3.1,14.7,9.7
|
||||
c2.5-6,7.8-9.7,14.9-9.7c8.1,0,15.7,4.9,15.7,15.6V72h6V82z M133.8,82.6c-13.9,0-23.5-8.5-23.5-22.9c0-13.2,8-24.1,24.2-24.1
|
||||
c16.2,0,24.1,10.9,24.1,23.5C158.6,73.5,148.2,82.6,133.8,82.6z M206.4,82h-39.3l-1.3-7.2L190.6,46h-14.1l-2,7.2l-9.3-0.7l1.6-15.5
|
||||
h39.5l1,6.7l-25,28.3h14.6l2.1-7.1l10.2,1.1L206.4,82z M232.1,82h-13V65h13V82z M232.1,53h-13V37h13V53z M240.6,82L260,13h12.7
|
||||
l-19.5,69H240.6z M266.7,82l19.5-69h12.7l-19.5,69H266.7z M335.9,82.6c-6,0-9.3-3.5-9.9-9c-2.6,4.6-7.2,9-14.5,9
|
||||
c-6.5,0-13.9-3.5-13.9-12.9c0-11.1,10.7-13.7,21-13.7c2.5,0,5.4,0.1,7.4,0.4V55c0-4.6-0.1-10.1-7.4-10.1c-2.7,0-4.8,0.2-6.9,1.3
|
||||
l-1.5,5.1L300,50.2l1.8-10.4c7.9-3.2,12-4.1,19.4-4.1c9.7,0,18,5,18,15.3v19.6c0,2.6,0.9,3.5,3,3.5c0.6,0,1.1-0.1,1.8-0.3l0.1,6.8
|
||||
C341.6,81.8,338.7,82.6,335.9,82.6z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 1.7 KiB |
|
|
@ -0,0 +1,76 @@
|
|||
footer {
|
||||
color: var(--text-color-light);
|
||||
background-color: #161616;
|
||||
padding: 40px 0;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.3;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
footer .icons {
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer .icon-container {
|
||||
display: inline-block;
|
||||
margin: 0 1.125rem;
|
||||
min-width: 120px;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
footer .icon .footer-icon {
|
||||
max-width: 18px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@media all and (max-width: var(--on-palm)) {
|
||||
footer .icon-container {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
footer .icon {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer .footer-icon {
|
||||
display: block;
|
||||
margin: 5px auto;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--text-color-light);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
max-width: 55rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.footer-content a.logo {
|
||||
color: white;
|
||||
display: inline-block;
|
||||
border-right: 0.0625rem solid #666;
|
||||
padding-right: 1.25rem;
|
||||
margin-right: 1.25rem;
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.footer-content p {
|
||||
text-align: left;
|
||||
width: calc(100% - 10.375rem);
|
||||
}
|
||||
|
|
@ -5,7 +5,47 @@ import './Footer.css';
|
|||
class Footer extends Component {
|
||||
render() {
|
||||
return (
|
||||
<h1>Footer</h1>
|
||||
<footer>
|
||||
<div className="wrapper container row">
|
||||
<div className="icons">
|
||||
<div className="icon-container">
|
||||
<div className="icon">
|
||||
<img src="/icons/icon-twitter.svg" class="footer-icon" />
|
||||
<a href="https://twitter.com/MozParticipate" target="_blank">Twitter</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="icon-container">
|
||||
<div className="icon">
|
||||
<img src="/icons/icon-irc.svg" class="footer-icon" />
|
||||
<a href="https://discourse.mozilla-community.org/c/participation-leaders" target="_blank">Discussion</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="icon-container">
|
||||
<div className="icon">
|
||||
<img src="/icons/icon-code.svg" class="footer-icon" />
|
||||
<a href="https://github.com/mozilla/activate.mozilla.community" target="_blank">Contribute</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="icon-container">
|
||||
<div className="icon">
|
||||
<img src="/icons/icon-terms.svg" class="footer-icon" />
|
||||
<a href="https://www.mozilla.org/en-US/about/legal.html" target="_blank">Legal</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="footer-content">
|
||||
<a href="https://www.mozilla.org/" class="logo" target="_blank">
|
||||
<img src="/mozilla-wordmark.svg" height="30" width="105" />
|
||||
</a>
|
||||
<p>
|
||||
Mozilla is a global non-profit dedicated to putting you in control of your online
|
||||
experience and shaping the future of the web for the public good. Visit us
|
||||
at <a target="_blank" href="//mozilla.org">mozilla.org</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,21 +23,21 @@ img.brand {
|
|||
color: var(--brand-color);
|
||||
}
|
||||
|
||||
a.page-link,
|
||||
a.page-link:active,
|
||||
a.page-link:focus {
|
||||
header a.page-link,
|
||||
header a.page-link:active,
|
||||
header a.page-link:focus {
|
||||
color: var(--brand-color);
|
||||
}
|
||||
|
||||
@media all and (max-width: 992px) {
|
||||
a.page-link,
|
||||
a.page-link:active,
|
||||
a.page-link:focus {
|
||||
header a.page-link,
|
||||
header a.page-link:active,
|
||||
header a.page-link:focus {
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
a.page-link:hover {
|
||||
header a.page-link:hover {
|
||||
border-bottom: 2px solid var(--brand-color);
|
||||
box-shadow: inset 0 -2px 0 var(--brand-color);
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче