initial checkin

024d806a · telegnom · 024d806a · 024d806a · 024d806a · 024d806a
Commit 024d806a authored 8 years ago by telegnom
--- a/LICENSE
+++ b/LICENSE
+The MIT License (MIT)
+
+Copyright (c) 2016 telegnom (Max Andre)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
+# **Fork me on chaos.expert** CSS ribbon
+
+This is a __*Fork me on chaos.expert*__ ribbon, like the popular _Fork me on G** H**_ ribbons. It's written in pure css and comes without any dependencies.
+
+## Screenshot
+
+![screenshot](img/screenshot.png "Screenshot of Fork me on chaos.expert in action")
+This is a screenshot of the example.html which is included in this repository.
+
+## Installation
+
+### Manual
+
+Just clone or download this repository and copy both, the `chaos-expert-fork-ribbon.css` and the `chaos-expert-fork-ribbon.ie.css`, into the folder holding the `.css` files of your project.
+
+### Using with Bower
+
+You can install the CSS files using [Bower](https://github.com/bower/bower).
+
+```bower install chaos-expert-fork-ribbon```
+
+## Integration
+
+Put the .css files provided in this repro into the folder where you store all the other css stuff and include the
+ following lines into your HTML-*Code*
+
+Copy the following code into the `<head>` of your pag and replace the path with the actual location of the `.css` files.
+
+```html
+<link rel="stylesheet" href="<path>/<to>/<your>/<css>/chaos-expert-fork-ribbon.css" />
+<!--[if lt IE 9]>
+    <link rel="stylesheet" href="<path>/<to>/<your>/<css>/chaos-expert-fork-ribbon.ie.css" />
+<![endif]-->
+```
+
+And copy the following line of code into the `<body>` of your page and you are done. But don't forget to put the url of your repo into the `href`. Otherwise it would link to, ermmm… nothing.
+
+```html
+<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
+
+Wanna see the stuff in action? [Click here!](https://fnord.de) 
+
+## Credits
+
+This work is based on [Simon Whitakers](https://twitter.com/s1mn) work which you'll find on [Github](https://github.com/simonwhitaker/github-fork-ribbon-css)
+
+Feel free to fork, tweak and send me a merge request. The whole stuff is licensed under the MIT license.
--- a/bower.json
+++ b/bower.json
+{
+  "name": "chaos-expert-fork-ribbon",
+  "version": "0.0.1",
+  "homepage": "https://chaos.expert/groups/chaos-expert",
+  "authors": [
+    "telegnom (Max Andre)"
+  ],
+  "description": "\"Fork me on Chaos.expert\" CSS ribbon",
+  "main": [
+    "chaos-expert-fork-ribbon.css",
+    "chaos-expert-fork-ribbon.ie.css"
+  ],
+  "keywords": [
+    "css",
+    "fork",
+    "chaos.expert",
+    "ribbon"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "img",
+    "*.zip",
+    "*.json"
+  ]
+}
--- a/chaos-expert-fork-ribbon.css
+++ b/chaos-expert-fork-ribbon.css
+/*!
+ * "Fork me on chaos.expert" CSS ribbon v0.0.1 | MIT License
+ * https://chaos.expert/chaos-expert/fork-ribbon
+*/
+
+.chaos-expert-fork-ribbon {
+  width: 12.1em;
+  height: 12.1em;
+  position: absolute;
+  overflow: hidden;
+  top: 0;
+  right: 0;
+  z-index: 9999;
+  pointer-events: none;
+  font-size: 11.5px;
+  text-decoration: none;
+  text-indent: -999999px;
+  text-align: center;
+}
+
+.chaos-expert-fork-ribbon.fixed {
+  position: fixed;
+}
+
+.chaos-expert-fork-ribbon:before, .chaos-expert-fork-ribbon:after {
+  /* The right and left classes determine the side we attach our banner to */
+  position: absolute;
+  display: block;
+  width: 16.78em;
+  height: 1.54em;
+  
+  top: 3.73em;
+  right: -3.73em;
+  
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.chaos-expert-fork-ribbon:before {
+  content: "";
+
+  /* Add a bit of padding to give some substance outside the "stitching" */
+  padding: .38em 0;
+
+  /* Set the base colour */
+  background-color: #e802c9;
+
+  /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
+  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
+  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+
+  /* Add a drop shadow */
+  -webkit-box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
+  -moz-box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
+  box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
+
+  pointer-events: auto;
+}
+
+.chaos-expert-fork-ribbon:after {
+  /* Set the text from the title attribute */
+  content: attr(title);
+
+  /* Set the text properties */
+  color: #fff;
+  font: 700 1em "Ubuntu", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
+  line-height: 1.54em;
+  text-decoration: none;
+  /*text-shadow: 0 -.08em rgba(0, 0, 0, 0.5);*/
+  text-align: center;
+  text-indent: 0;
+
+  /* Set the layout properties */
+  padding: .15em 0;
+  margin: .15em 0;
+
+  /* Add "stitching" effect */
+  border-width: .08em 0;
+  border-style: dashed;
+  border-color: #fff;
+  border-color: rgba(255, 255, 255, 0.75);
+}
+
--- a/chaos-expert-fork-ribbon.ie.css
+++ b/chaos-expert-fork-ribbon.ie.css
+/*!
+ * "Fork me on chaos-expert" CSS ribbon v0.0.1 | MIT License
+ * https://chaos.expert/chaos-expert/fork-ribbon
+*/
+
+/* IE voodoo courtesy of http://stackoverflow.com/a/4617511/263871 and
+ * http://www.useragentman.com/IETransformsTranslator */
+
+html {
+  overflow: auto;
+}
+
+body {
+  position: relative;
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+}
+
+.chaos-expert-fork-ribbon {
+  width: 15.38em;
+  height: 5.62em;
+
+  /* IE positioning hack (couldn't find a transform-origin alternative for IE) */
+  top: -3.92em;
+  right: -4.46em;
+
+  /* IE8+ */
+  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
+}
+
+.chaos-expert-fork-ribbon.left-top, .chaos-expert-fork-ribbon.right-bottom {
+  /* IE8+ */
+  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
+}
+
+.chaos-expert-fork-ribbon:before, .chaos-expert-fork-ribbon:after {
+  left: auto !important;
+  right: auto !important;
+  font-size: inherit;
+}
+
+.chaos-expert-fork-ribbon.left-top, .chaos-expert-fork-ribbon.left-bottom {
+  left: -3.92em;
+}
+
+.chaos-expert-fork-ribbon.left-bottom, .chaos-expert-fork-ribbon.right-bottom {
+  bottom: 4.77em;
+}
--- a/example.html
+++ b/example.html
+<!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]-->
+</head>
+<body>
+    <a class="chaos-expert-fork-ribbon" 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>
+    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.
+    </p><p>    
+    Modi veritatis qui eaque nam et quisquam aut. Dicta nemo minus illum aspernatur architecto odit qui odit. Et impedit fugiat incidunt odit enim at. Omnis ad voluptas tempore quos omnis adipisci. Nesciunt quidem nostrum inventore eveniet commodi vero aut quo. Et ab eius facilis.
+	</p><p>
+    Veniam pariatur soluta recusandae non aut quas dolor. Maiores aut officiis id adipisci vero sunt fuga. Nesciunt voluptatem sed tenetur. Totam omnis commodi sit. Cumque aliquam accusamus nobis distinctio deserunt qui. Nesciunt tempore dolorum occaecati quia aut.
+	</p><p>
+    Qui nam hic amet autem quod vitae odit. Rerum voluptas nihil quis voluptate ad sit corporis. Nemo dolorum rerum mollitia quaerat repudiandae. Aut vel eos natus in.
+	</p><p>
+    Doloribus aut perspiciatis saepe dicta voluptas. Quo et corrupti vel recusandae dolores quas dolores. Molestias quis quia provident est quas. Corrupti est et ut esse repudiandae maxime soluta aut. Quia qui qui odit. Veniam numquam quos ullam aspernatur nihil.
+	</p><p>
+    Autem sed placeat est. Explicabo ipsum animi sed voluptate magnam odio. Placeat tempore eius neque nisi ducimus non rem. Atque numquam dolores sequi deleniti. Dignissimos molestiae et molestiae. Aut cumque odit doloribus odio aliquid dignissimos non totam.
+	</p><p>
+    A harum accusantium tenetur voluptatibus qui est atque esse. Quasi voluptas placeat itaque. Occaecati ad fugit ut adipisci recusandae quia enim quae. Earum dolorem incidunt tempora facere esse praesentium. Eligendi qui omnis libero enim placeat.
+	</p><p>
+    Ea ipsam enim quis. Perspiciatis consequuntur dolor consequuntur ad delectus suscipit nobis eos. Deserunt est sed aut in laborum non pariatur.
+	</p><p>
+    Rerum consequatur et vel. Vel iusto molestiae sint. Numquam et blanditiis sapiente aspernatur ullam placeat id. Tempore reprehenderit qui odio enim quibusdam.
+	</p><p>
+    Ipsam nisi rerum assumenda commodi illo culpa sunt ut. Distinctio facilis voluptas vero. Officiis amet eveniet recusandae reiciendis iste molestias.
+	</p><p>
+    Quis sunt sunt nesciunt. Suscipit nesciunt vel odit beatae aliquam sint. Velit aliquid voluptas sit ipsa. Sunt et ex temporibus consectetur.
+	</p><p>
+    Sequi eum ut quia fuga odio. Incidunt voluptas nam enim. Omnis magnam ut non. Ut est autem maiores et.
+	</p><p>
+    Quisquam et explicabo hic et ex eaque. Aut fuga et et fugiat iste repudiandae deleniti ipsa. Dicta eum et numquam quia. Optio ut dolorum nisi ea nemo quisquam. Culpa tenetur quia accusantium sed neque suscipit pariatur. Nemo vitae repellat rerum.
+	</p><p>
+    Atque consequatur culpa maxime at ipsam nihil. Nobis cum corporis aut totam. Id molestiae beatae cupiditate fugit non corrupti neque.
+	</p><p>
+    Aut qui rem ea consectetur. Nobis praesentium sunt enim aut eius corrupti aut. Aut omnis sed nemo dolorem ea itaque. Corrupti ut ut eum ducimus mollitia doloremque assumenda id.
+	</p><p>
+    Debitis dolores architecto ipsam quia et. Rem iste ea ut aut dicta dolore doloribus. Facere ipsa et itaque. Dolores earum in provident velit.
+	</p><p>
+    Esse temporibus laborum perferendis adipisci aut velit ut delectus. Et cumque sit quo ea ipsum ea est qui. Sunt ex ut neque ullam ex praesentium cumque. Non velit eos placeat ea consequatur.
+	</p><p>
+    Et sapiente repudiandae nemo optio non quia qui voluptas. Facere facere repudiandae doloremque corrupti maiores. Id dolorem ut dolores soluta ab dolorem. Dolorem accusamus eum sint.
+	</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>
+    </body>
+</html> 
\ No newline at end of file
--- a/img/ribbon_default.png
+++ b/img/ribbon_default.png
--- a/img/screenshot.png
+++ b/img/screenshot.png