1
0
mirror of https://github.com/simple-icons/simple-icons.git synced 2025-01-05 01:20:39 +02:00

Moved donate button to navbar

This commit is contained in:
Dan Leech 2015-10-19 08:51:30 +01:00
parent 3e0cf02131
commit f978136746
3 changed files with 70 additions and 58 deletions

View File

@ -42,9 +42,31 @@
font-size: 0.75rem;
letter-spacing: 0.05rem;
margin: 0;
padding: 0 1.5rem 1.5rem;
padding: 0;
text-transform: uppercase;
}
.donate-form {
margin: 0;
padding: 0 0 1.5rem;
text-align: center;
}
.donate-button {
-webkit-appearance: none;
background: #CCC;
border: 0;
border-radius: 1.5rem;
color: #FFF;
cursor: pointer;
font-family: inherit;
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0.05rem;
padding: 0.75rem 1.5rem;
text-transform: uppercase;
}
.donate-button:focus, .donate-button:hover {
background: #333;
}
@media (min-width: 800px) {
.navbar {
display: flex;
@ -55,7 +77,12 @@
padding: 1.5rem;
}
.navbar__text {
padding: 1.5rem;
display: inline-block;
padding: 1.5rem 0.75rem;
}
.donate-form {
margin: 0 1.5rem 0 0;
padding: 0;
}
}
.hero {
@ -125,34 +152,18 @@
text-align: center;
text-transform: uppercase;
}
.donate-form {
margin: 1.5rem 0;
text-align: center;
}
.donate-button {
-webkit-appearance: none;
background: #999;
border: 0;
border-radius: 1.5rem;
color: #FFF;
cursor: pointer;
font-family: inherit;
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0.05rem;
padding: 0.75rem 1.5rem;
text-transform: uppercase;
}
.donate-button:focus, .donate-button:hover {
background: #333;
}
</style>
</head>
<body>
<header class="navbar" role="banner">
<h1 class="title">Simple Icons</h1>
<p class="navbar__text">Like this? Help by sharing!</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" class="donate-form">
<p class="navbar__text">Like this?</p>
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="UCMEG4SWEYFUC">
<input type="submit" name="submit" value="Buy Dan a coffee!" class="donate-button">
</form>
</header>
<main role="main">
<p class="hero">105 SVG icons for popular brands <a href="https://github.com/danleech/simpleicons.org">Download them from GitHub</a></p>
@ -265,11 +276,6 @@
</main>
<footer class="footer" role="contentinfo">
<p>Distributed for free by <a href="https://twitter.com/bathtype">Dan Leech</a> under the Free Art License. Company logos in icons are copyright of their respective owners. Contributions, corrections and requests can be left on <a href="https://github.com/danleech/simpleicons.org">GitHub</a>.</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" class="donate-form">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="UCMEG4SWEYFUC">
<input type="submit" name="submit" value="Buy Dan a coffee" class="donate-button">
</form>
</footer>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

View File

@ -2,11 +2,6 @@
</main>
<footer class="footer" role="contentinfo">
<p>Distributed for free by <a href="https://twitter.com/bathtype">Dan Leech</a> under the Free Art License. Company logos in icons are copyright of their respective owners. Contributions, corrections and requests can be left on <a href="https://github.com/danleech/simpleicons.org">GitHub</a>.</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" class="donate-form">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="UCMEG4SWEYFUC">
<input type="submit" name="submit" value="Buy Dan a coffee" class="donate-button">
</form>
</footer>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

View File

@ -42,9 +42,31 @@
font-size: 0.75rem;
letter-spacing: 0.05rem;
margin: 0;
padding: 0 1.5rem 1.5rem;
padding: 0;
text-transform: uppercase;
}
.donate-form {
margin: 0;
padding: 0 0 1.5rem;
text-align: center;
}
.donate-button {
-webkit-appearance: none;
background: #CCC;
border: 0;
border-radius: 1.5rem;
color: #FFF;
cursor: pointer;
font-family: inherit;
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0.05rem;
padding: 0.75rem 1.5rem;
text-transform: uppercase;
}
.donate-button:focus, .donate-button:hover {
background: #333;
}
@media (min-width: 800px) {
.navbar {
display: flex;
@ -55,7 +77,12 @@
padding: 1.5rem;
}
.navbar__text {
padding: 1.5rem;
display: inline-block;
padding: 1.5rem 0.75rem;
}
.donate-form {
margin: 0 1.5rem 0 0;
padding: 0;
}
}
.hero {
@ -125,33 +152,17 @@
text-align: center;
text-transform: uppercase;
}
.donate-form {
margin: 1.5rem 0;
text-align: center;
}
.donate-button {
-webkit-appearance: none;
background: #999;
border: 0;
border-radius: 1.5rem;
color: #FFF;
cursor: pointer;
font-family: inherit;
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0.05rem;
padding: 0.75rem 1.5rem;
text-transform: uppercase;
}
.donate-button:focus, .donate-button:hover {
background: #333;
}
</style>
</head>
<body>
<header class="navbar" role="banner">
<h1 class="title">Simple Icons</h1>
<p class="navbar__text">Like this? Help by sharing!</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" class="donate-form">
<p class="navbar__text">Like this?</p>
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="UCMEG4SWEYFUC">
<input type="submit" name="submit" value="Buy Dan a coffee!" class="donate-button">
</form>
</header>
<main role="main">