Frankie-666 · July 3, 2016 15:06
diff --git a/END by Catt.markdown b/END by Catt.markdown
diff --git a/index.haml b/index.haml
 .ribbon{:contenteditable=>"true"} -end-
diff --git a/script.js b/script.js
 /*
 END by Catt http://drbl.in/jJIr. 

 Wanna know how I made this? http://katydecorah.com/code/2014/01/01/z-index-and-transform/
 */
diff --git a/scripts b/scripts
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
diff --git a/style.scss b/style.scss
 $bg:         #f4f4f4;
 $ribbon:     #4b9ae5;
 $tail:       darken($ribbon,5%);
 $ribbonSize: .5em;
 $fontSize:   2.5em;
 $font:       'Roboto', sans-serif;

 body {
  background: $bg;
  font-family: $font;
 }

 .ribbon {
  background: $ribbon;
  display: inline-block;
  color: $bg;
  padding: $ribbonSize .7em;
  font-weight: 900;
  letter-spacing: .2em;
  position: relative;
  font-size: $fontSize;
  text-transform: uppercase;
  transform-style: preserve-3d;
  transform: rotate(-20deg) skew(-20deg,10deg);
  
  &:before, 
  &:after {
    content: '';
    width: 0;
    height: 2em;
    display: block;
    background: #4993da;
    position: absolute;
    border-style: solid;
    border-width: $ribbonSize;
    z-index: -1; // only necessary for flat (transform-style)
    transform: translateZ(-1em); // orders the ribbon tails
  }
  
  &:before {
    left: $ribbonSize * -1;
    top: $ribbonSize;
    border-color: $tail darken($tail,10%) $tail $tail;
  }
  
  &:after {
    right: $ribbonSize * -1;
    top: $ribbonSize * -1;
    border-color: $tail $tail $tail darken($tail,10%);
  }
  
 }
diff --git a/styles b/styles
 <link href="http://codepen.io/katydecorah/pen/5e3594c5f394b457f8b8ffbb4c5b6518?editors=0110" rel="stylesheet" />
	/*
	END by Catt http://drbl.in/jJIr.

	Wanna know how I made this? http://katydecorah.com/code/2014/01/01/z-index-and-transform/
	*/
	$bg: #f4f4f4;
	$ribbon: #4b9ae5;
	$tail: darken($ribbon,5%);
	$ribbonSize: .5em;
	$fontSize: 2.5em;
	$font: 'Roboto', sans-serif;

	body {
	background: $bg;
	font-family: $font;
	}

	.ribbon {
	background: $ribbon;
	display: inline-block;
	color: $bg;
	padding: $ribbonSize .7em;
	font-weight: 900;
	letter-spacing: .2em;
	position: relative;
	font-size: $fontSize;
	text-transform: uppercase;
	transform-style: preserve-3d;
	transform: rotate(-20deg) skew(-20deg,10deg);

	&:before,
	&:after {
	content: '';
	width: 0;
	height: 2em;
	display: block;
	background: #4993da;
	position: absolute;
	border-style: solid;
	border-width: $ribbonSize;
	z-index: -1; // only necessary for flat (transform-style)
	transform: translateZ(-1em); // orders the ribbon tails
	}

	&:before {
	left: $ribbonSize * -1;
	top: $ribbonSize;
	border-color: $tail darken($tail,10%) $tail $tail;
	}

	&:after {
	right: $ribbonSize * -1;
	top: $ribbonSize * -1;
	border-color: $tail $tail $tail darken($tail,10%);
	}

	}