Adding "donate" button to top navigation

[sisiwei]

HTML

Add the following to the <ul> with class "site-nav-links": <li><a href="https://opennews.networkforgood.com/"><span class="donate">Donate</span></a></li>

CSS Changes

Add:

.site-nav-links li span.donate {
    background-color: #fc6d1f;
    padding: 10px 0px 15px;
    margin-top: 7.5px;
    display: block;
    width: 90%;
}

Update the three flex attributes in this chunk:

@media (min-width: 23em)
.site-nav-links li {
    float: left;
    border-bottom: none;
    -webkit-flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
}

Update (changed 50% to 65%):

@media (min-width: 45em)
.site-nav {
    width: 65%;
}

[sisiwei]

And then in the footer I think we should do this:

HTML Add to foot-content right after the "Learn more..." paragraph:

<p class="donate"><span>Donate</span> to OpenNews.</p>

CSS

Add:

p.donate {
    margin-top: 30px;
}
.page-footer p.donate span {
    background-color: #fc6d1f;
    padding: 5px 10px 10px;
}

[sisiwei]

DONE. Donate button in the top nav, and an orange button in the footer.