Commit f9ee0fc9 authored by telegnom's avatar telegnom
Browse files

different color varients added

parent b884ebee
# Changelog
## v0.1.0 (2016-08-19)
- color schemes added
- pink (default)
- red
- green
- blue
- yellow
- white
- grey
## v0.0.1 (2016-08-19)
- initial version
\ No newline at end of file
......@@ -39,9 +39,25 @@ And copy the following line of code into the `<body>` of your page and you are d
<a class="chaos-expert-fork-ribbon" href="http://url.to-your.repo.example" title="Fork me on chaos.expert">Fork me on chaos.expert</a>
```
## Example
### colors
Currently the following colors are implemented:
Wanna see the stuff in action? [Click here!](https://fnord.de)
- default (pink)
- red
- green
- blue
- yellow
- grey
- white (for darker background)
To use a certain color simply put the name of the color (see list above) behind the class name `chaos-expert-fork-ribbon`.
#### Example
For a green ribbon you would have to use:
``` html
<a class="chaos-expert-fork-ribbon green" href="https://chaos.expert/chaos-expert" title="Fork me on chaos.expert"></a>
```
## Credits
......
......@@ -92,3 +92,38 @@
border-color: rgba(255, 255, 255, 0.75);
}
.chaos-expert-fork-ribbon.red:before{
background-color: #990000;
}
.chaos-expert-fork-ribbon.green:before{
background-color: #009900;
}
.chaos-expert-fork-ribbon.blue:before{
background-color: #000099;
}
.chaos-expert-fork-ribbon.yellow:before {
background-color: #ffb60b;
}
.chaos-expert-fork-ribbon.silver:before{
background-color: #b4b4b4;
}
.chaos-expert-fork-ribbon.grey:before{
background-color: #959bb5;
}
.chaos-expert-fork-ribbon.white:before{
-webkit-box-shadow: 0 .15em .23em 0 rgba(255, 255, 255, 0.5);
-moz-box-shadow: 0 .15em .23em 0 rgba(255, 255, 255, 0.5);
box-shadow: 0 .15em .23em 0 rgba(255, 255, 255, 0.5);
background-color: #fff;
}
.chaos-expert-fork-ribbon.white:after{
color: #000;
border-color: #333;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fork me on chaos.expert ribbons</title>
<link rel="stylesheet" href="chaos-expert-fork-ribbon.css" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="chaos-expert-fork-ribbon.ie.css" />
<![endif]-->
<meta charset="UTF-8">
<title>Fork me on chaos.expert ribbons</title>
<link rel="stylesheet" href="chaos-expert-fork-ribbon.css" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="chaos-expert-fork-ribbon.ie.css" />
<![endif]-->
<style type="text/css">
html {
font-family: "Droid Sans", Arial, sans-serif;
}
button, input {
max-width: 30em;
width: 100%;
padding: .5em;
display: inline-block;
margin: 0.2em;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
</style>
</head>
<body>
<a class="chaos-expert-fork-ribbon" href="https://chaos.expert/chaos-expert/fork-ribbon" title="Fork me on chaos.expert"></a>
<a id="ribbon" class="chaos-expert-fork-ribbon steel" href="https://chaos.expert/chaos-expert/fork-ribbon" title="Fork me on chaos.expert"></a>
<h1>Fork me on chaos.expert</h1>
<h2>Lorem Ipsum</h2>
<p>
<button onclick="changeColor()">change color and generate c'n'p code snippet</button>
</p>
Enter the URL of your chaos.expert user page or repository:<br>
<input type="text" value="https://chaos.expert/groups/chaos-expert">
</p><p>
The currently selected color is: <strong id="ribbon-color">none (default)</strong>
</p><p>
<code id="ribbon-code">
&lt;a class="chaos-expert-fork-ribbon" href="https://chaos.expert/chaos-expert" title="Fork me on chaos.expert"&gt;&lt;/a&gt;
</code>
</p><p>
Omnis dolor ullam et sit fugit. Laudantium ullam minus non enim ad ut alias. Laudantium explicabo est pariatur sit nesciunt. Sequi fugit ipsum voluptas assumenda at temporibus. Assumenda consequatur magnam accusamus dignissimos. Omnis eos rerum maxime est suscipit quia qui et.
</p><p>
Omnis non eveniet voluptatibus. At rerum unde dolorem quidem quia dolorem corrupti quasi. Illo dignissimos et sed debitis omnis quisquam quia. Quos corrupti incidunt enim incidunt quos nihil harum aut.
......@@ -53,5 +78,34 @@
</p><p>
Dicta blanditiis debitis ea sed ex tenetur enim nobis. Officia consequatur nostrum veritatis eos aut quo. Eos consequatur deserunt voluptatem repellendus voluptate mollitia voluptatum. Exercitationem minus dolore numquam eos tempore.
</p>
<script>
var currentcolor=0;
function changeColor() {
var colors=['default', 'red', 'green', 'blue', 'yellow', 'white', 'grey'];
var colorcount = colors.length;
// console.log(colors[currentcolor]);
currentcolor++;
if (currentcolor >= colors.length) {
currentcolor = 0;
}
var divRibbon = document.getElementById('ribbon');
var emphColor = document.getElementById('ribbon-color');
var codeRibbon = document.getElementById('ribbon-code');
divRibbon.className = "chaos-expert-fork-ribbon " + colors[currentcolor];
emphColor.innerHTML = colors[currentcolor];
if (currentcolor == 0) {
var codecolor = "";
} else {
var codecolor = " " + colors[currentcolor];
}
if (colors[currentcolor] == "white") {
divRibbon.style.backgroundColor = '#333';
} else {
divRibbon.style.backgroundColor = '#fff';
}
codeRibbon.innerHTML = '&lt;a class="chaos-expert-fork-ribbon' + codecolor + '" href="https://chaos.expert/chaos-expert" title="Fork me on chaos.expert"&gt;&lt;/a&gt;'
}
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment