Rework donate button #543

Merged
Vincevrp merged 1 commits from donate-button into master 2018-10-25 16:18:35 +00:00
2 changed files with 46 additions and 3 deletions

View File

@ -17,6 +17,45 @@ body {
width: auto;
}
#navbar {
max-height: 100%;
}
.navbar-nav {
width: 100%;
}
@media (max-width: 768px) {
.navbar-collapse > .navbar-nav > #donate {
float: none;
padding: 0;
}
.navbar-collapse > .navbar-nav > #donate > a {
padding: 10px 15px;
}
}
@media (max-width: 992px) {
nav > .container {
width: 100%;
}
}
#donate {
float: right;
Review

The float: right gets ugly when navbar is collapsed.

screenshot from 2018-10-23 15-25-34

The `float: right` gets ugly when navbar is collapsed. ![screenshot from 2018-10-23 15-25-34](https://user-images.githubusercontent.com/4354706/47363772-eac6a600-d6d7-11e8-87ad-fa3bdb129295.png)
}
#donate-icon {
color: red;
margin-left: 5px;
}
#donate > a {
padding: 15px 0;
Review

I'd add some space (margin) between the text and the heart.

I'd add some space (margin) between the text and the heart.
color: white;
}
a.anchor {
display: block; position: relative; top: -50px; visibility: hidden;
}

View File

@ -163,9 +163,13 @@
<li><a href="http://sharetodiaspora.github.io/?title=privacytools.io%20-%20encryption%20against%20global%20mass%20surveillance&url=https://www.privacytools.io">Diaspora*</a></li>
</ul>
</li>
<li><a href="https://twitter.com/privacytoolsIO">Twitter</a></li>
<li><a href="donate.html" style="color:white;"><button type="button" class="btn btn-default btn-xs"><strong>Donate</strong> <span class="glyphicon glyphicon-heart" aria-hidden="true" style="color:red;"></span></button></a></li>
</ul>
<li><a href="https://twitter.com/privacytoolsIO">Twitter</a></li>
<li id="donate">
<a href="donate.html">
<strong>Donate</strong><span id="donate-icon" class="glyphicon glyphicon-heart" aria-hidden="true"></span>
</a>
</li>
</ul>
</div>
</div>
</nav>