130 lines
4.0 KiB
HTML
130 lines
4.0 KiB
HTML
<!doctype html>
|
|
<meta charset=utf-8>
|
|
<title> Badge Service </title>
|
|
<meta name='viewport' content='width=device-width,initial-scale=1'>
|
|
<link href='http://fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet'>
|
|
<h1> Badge Service For You! </h1>
|
|
|
|
<style>
|
|
:root { text-align: center; font-family: Linux Libertine O, Vollkorn, serif; }
|
|
code, input { padding: 0 4px; border: 1px solid grey; background: #eef; border-radius: 4px; }
|
|
input { width: 5em; }
|
|
hr { width: 40%; border-width: 1px 0 0 0; }
|
|
a.photo { text-decoration: none; }
|
|
a.photo>img { padding: 2px; border: 1px solid grey; }
|
|
ul { text-align: left; margin-left: 25%; }
|
|
h2::before { content: '☙ '; }
|
|
h2::after { content: ' ❧'; }
|
|
h2 { font-variant: small-caps; }
|
|
</style>
|
|
|
|
<hr/>
|
|
<form action='javascript:makeImage()' id='imageMaker'>
|
|
<input name='subject' placeholder='subject'/>
|
|
<input name='status' placeholder='status'/>
|
|
<input name='color' placeholder='color'/>
|
|
<button>Go!</button>
|
|
</form>
|
|
<hr/>
|
|
|
|
<h2>GitHub Badges</h2>
|
|
|
|
<img src='/badge-on!-brightgreen.svg'>
|
|
<img src='/license-CC0-red.svg'>
|
|
|
|
<p>
|
|
Ever wanted to have your own GitHub badges? <br/>
|
|
Maybe you simply wanted to have consistent colors? <br/>
|
|
Maybe you wanted to have them be less blurry? <br/>
|
|
Or look better on high-resolution displays? <br/>
|
|
Maybe you simply love SVG. <br/>
|
|
Maybe you fancy a format that uses less than half the bandwidth.
|
|
</p>
|
|
|
|
<img src='/happy-hacking%20%E2%98%BA-yellow.svg'>
|
|
|
|
<p>
|
|
As for me, I wanted a format that people can reuse and hack on. <br/>
|
|
I wanted a service for everyone. <br/>
|
|
I made the GitHub Badge Service.
|
|
</p>
|
|
|
|
<img src='/download-.5K-blue.svg'>
|
|
|
|
<p>
|
|
Here's how it works. <br/>
|
|
<code>http://gh-badges.herokuapp.com/<SUBJECT>-<STATUS>-<COLOR>.svg</code><br/>
|
|
Use two dashes <code>--</code> to have one dash as text. <br/>
|
|
Use two underscores <code>__</code> to have one underscore as text. <br/>
|
|
Use an underscore <code>_</code> if you want a space. Or, you know, use a space.
|
|
</p>
|
|
|
|
<p> Colors: </p>
|
|
<img src='/color-brightgreen-brightgreen.svg'>
|
|
<img src='/color-green-green.svg'>
|
|
<img src='/color-yellowgreen-yellowgreen.svg'>
|
|
<img src='/color-yellow-yellow.svg'>
|
|
<img src='/color-orange-orange.svg'>
|
|
<img src='/color-red-red.svg'>
|
|
<img src='/color-lightgrey-lightgrey.svg'>
|
|
<img src='/color-blue-blue.svg'>
|
|
<img src='/color-ff69b4-ff69b4.svg'>
|
|
|
|
<h2>Like This?</h2>
|
|
|
|
<p>
|
|
Tell your favorite badge service to use it!
|
|
</p>
|
|
|
|
<h2>Known Issues</h2>
|
|
|
|
<ul>
|
|
<li> Chrome/Opera + retina display = blurry.
|
|
<a href='https://code.google.com/p/chromium/issues/detail?id=331387'>
|
|
Known Blink bug</a>.
|
|
<li> Safari + retina display = blurry.
|
|
<a href='https://bugs.webkit.org/show_bug.cgi?id=126398'>Known
|
|
WebKit bug</a>.
|
|
<li> Greenish aura around the text.
|
|
<a href='https://bugzilla.mozilla.org/show_bug.cgi?id=812795'>
|
|
Known Firefox bug</a>.
|
|
<li> The text can be wider than the box (esp. Firefox + Windows).
|
|
<a href='https://github.com/espadrine/gh-badges/pull/6#issuecomment-31558269'>
|
|
Issue with consistency of text measurement</a>.
|
|
</ul>
|
|
|
|
<h2>Origin</h2>
|
|
|
|
<p>
|
|
<a href='https://github.com/h5bp/lazyweb-requests/issues/150'>This</a>.<br/>
|
|
All the activity and the code sits
|
|
<a href='https://github.com/espadrine/gh-badges'>here</a>.
|
|
</p>
|
|
|
|
<h2>Contributors</h2>
|
|
|
|
<a class='photo' href='https://github.com/espadrine'>
|
|
<img alt='espadrine' src='https://gravatar.com/avatar/8c3bee0764c781e1b0b8c2e53f0f11fe'>
|
|
</a>
|
|
<a class='photo' href='https://github.com/mathiasbynens'>
|
|
<img alt='mathiasbynens' src='https://gravatar.com/avatar/24e08a9ea84deb17ae121074d0f17125'>
|
|
</a>
|
|
<a class='photo' href='https://github.com/alrra'>
|
|
<img alt='alrra' src='https://gravatar.com/avatar/2fc3f42c9411898f83f3af8ede902591'>
|
|
</a>
|
|
|
|
<p><small>:wq</small></p>
|
|
<script>
|
|
function escapeField(s) {
|
|
return s.replace(/-/g, '--').replace(/_/g, '__');
|
|
}
|
|
function makeImage() {
|
|
var url = '/';
|
|
url += escapeField(imageMaker.subject.value);
|
|
url += '-' + escapeField(imageMaker.status.value);
|
|
url += '-' + escapeField(imageMaker.color.value);
|
|
url += '.svg';
|
|
document.location = url;
|
|
}
|
|
</script>
|