Last active
August 29, 2015 14:05
-
-
Save Potherca/55d75da5140f7d24861f to your computer and use it in GitHub Desktop.
Various options for "Deploy to Heroku" Badges
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Various options for "Deploy to Heroku" Badges | |
*/ | |
@import url(http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono); | |
body { | |
font-family:'Droid Sans', Arial, sans-serif; | |
} | |
dt {text-align: right;} | |
dt, dd {float: left; width: 12.5em; margin: 0.35em 0.2em ;} | |
dt,dl::after {display:block; clear:left;} | |
dt::after { content:":";} | |
dl::after { content:"";} | |
h2 a { | |
color: inherit; | |
text-decoration: inherit; | |
} | |
h2:hover a { | |
border-bottom: 0.1em solid ; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h2> | |
The standard button | |
</h2> | |
<p> | |
Although the technology and philosophy behind the 'Deploy to Heroku' Button are quite awesome, the default look may not be what you want. | |
</p> | |
<p> | |
For one thing there is a distinct difference between the PNG and SVG versions Heroku has on offer. | |
</p> | |
<dl> | |
<dt>PNG format</dt> | |
<dd><img src="https://www.herokucdn.com/deploy/button.png" /></dd> | |
<dt>SVG format</dt> | |
<dd><img src="https://www.herokucdn.com/deploy/button.svg" /></dd> | |
</dl> | |
<p> | |
Which means you have to choose between "looks good" and "Retina Ready". | |
</p> | |
<p> | |
Beyond that... the shape, form or size might break with the look and feel of your site or README file. | |
</p> | |
<p> | |
Or maybe, if you're a bit like me, you dislike the fact that you can't just use a service provider you already use for other services anyway. | |
</p> | |
<h2>Using a <a href=" //shields.io">Shields.io</a> button</h2> | |
<p> | |
As shield.io already offers a decent ammount of badges for various service providers, it might be nice to use the same style for your deploy button. | |
The only real down-side is that the button will not contain the nice little icon. We could just use an "up arrow" instead. | |
</p> | |
<p> | |
Shields.io offers 3 flavours of styles you can choose from... | |
</p> | |
<dl> | |
<dt>Standard</dt> | |
<dd><img src="http://img.shields.io/badge/%E2%86%91%20Deploy%20to-Heroku-7056bf.svg" /> | |
</dd> | |
<dt>Flat (with rounded corners)</dt> | |
<dd><img src="http://img.shields.io/badge/%E2%86%91%20Deploy%20to-Heroku-7056bf.svg?style=flat" /></dd> | |
<dt>Flat and Square</dt> | |
<dd><img src="http://img.shields.io/badge/%E2%86%91%20Deploy%20to-Heroku-7056bf.svg?style=flat-square" /></dd> | |
</dl> | |
<p> | |
Just pic your favorite one and you're good to go! | |
</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*/ alert('Hello world!'); /*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment