Skip to content

Instantly share code, notes, and snippets.

@soundstorm

soundstorm/git-badges.html

Created February 6, 2017 13:29
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save soundstorm/266148cd9dbbdcf5cbc18ce26d75d3ea to your computer and use it in GitHub Desktop.
Save soundstorm/266148cd9dbbdcf5cbc18ce26d75d3ea to your computer and use it in GitHub Desktop.
Download ZIP
Pure CSS Git-Badges
Raw
git-badges.html
<html>
<head>
<style>
div.badge {
display: inline-block;
border-radius: .75em;
font-family: 'Dejavu Sans','Arial';
}
div.badge div {
display: inline-block;
float: left;
text-transform: lowercase;
color: #FFF;
text-shadow: 0px .1em 0px rgba(0, 0, 0, 0.5);
margin: 0;
padding: 0;
border: 0;
}
div.badge div:first-child, div.badge div:first-child span {
border-top-left-radius: .25em;
border-bottom-left-radius: .25em;
}
div.badge div:last-child, div.badge div:last-child span {
border-top-right-radius: .25em;
border-bottom-right-radius: .25em;
}
div.badge div span {
display: inline-block;
background: linear-gradient(180deg, rgba(187, 187, 187, .1) 0%, rgba(0, 0, 0, .1) 100%);
padding: .25em .5em;
box-sizing: border-box;
}
.badge .name {
background: #555555;
}
.badge .status.green {
background: #44cc11;
}
.badge .status.yellow {
background: #ddcc00;
}
.badge .status.blue {
background: #00aadd;
}
.badge .status.red {
background: #cc1100;
}
.badge .status.gray {
background: #cccccc;
}
</style>
</head>
<body>
<div class="badge">
<div class="name">
<span>
coverage
</span>
</div>
<div class="status green">
<span>
100%
</span>
</div>
</div>
<div class="badge">
<div class="name">
<span>
status
</span>
</div>
<div class="status blue">
<span>
testing
</span>
</div>
</div>
<div class="badge">
<div class="name">
<span>
dependencies
</span>
</div>
<div class="status yellow">
<span>
up to date
</span>
</div>
</div>
<div class="badge">
<div class="name">
<span>
build
</span>
</div>
<div class="status red">
<span>
Failed
</span>
</div>
</div>
<div class="badge">
<div class="name">
<span>
review
</span>
</div>
<div class="status gray">
<span>
pending
</span>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment