spjoes/index.html

## index.html
<div class="text">
    <p>The Coding</p>
  <p>
    <span class="word wisteria">Library.</span>
    <span class="word belize">Library.</span>
    <span class="word pomegranate">Library
    </span>
    <span class="word green">Library.</span>

  </p>
</div>


<html>

  <body>
<center>

  <div class="buttons">

  <button class="raise">Buttons</button>
    <br>
    <button class="raise">Hex Colors</button>


</center>


  </body>
</html>


## script.js
var words = document.getElementsByClassName('word');
var wordArray = [];
var currentWord = 0;

words[currentWord].style.opacity = 1;
for (var i = 0; i < words.length; i++) {
  splitLetters(words[i]);
}

function changeWord() {
  var cw = wordArray[currentWord];
  var nw = currentWord == words.length-1 ? wordArray[0] : wordArray[currentWord+1];
  for (var i = 0; i < cw.length; i++) {
    animateLetterOut(cw, i);
  }

  for (var i = 0; i < nw.length; i++) {
    nw[i].className = 'letter behind';
    nw[0].parentElement.style.opacity = 1;
    animateLetterIn(nw, i);
  }

  currentWord = (currentWord == wordArray.length-1) ? 0 : currentWord+1;
}

function animateLetterOut(cw, i) {
  setTimeout(function() {
		cw[i].className = 'letter out';
  }, i*80);
}

function animateLetterIn(nw, i) {
  setTimeout(function() {
		nw[i].className = 'letter in';
  }, 340+(i*80));
}

function splitLetters(word) {
  var content = word.innerHTML;
  word.innerHTML = '';
  var letters = [];
  for (var i = 0; i < content.length; i++) {
    var letter = document.createElement('span');
    letter.className = 'letter';
    letter.innerHTML = content.charAt(i);
    word.appendChild(letter);
    letters.push(letter);
  }

  wordArray.push(letters);
}

changeWord();
setInterval(changeWord, 4000);


## style.scss
// Animate the size, inside
.fill:hover,
.fill:focus {
  box-shadow: inset 0 0 0 2em var(--hover);
}

// Animate the size, outside
.pulse:hover,
.pulse:focus {
  animation: pulse 1s;
  box-shadow: 0 0 0 2em rgba(#fff,0);
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--hover); }
}

// Stack multiple shadows, one from the left, the other from the right
.close:hover,
.close:focus {
  box-shadow:
    inset -3.5em 0 0 0 var(--hover),
    inset 3.5em 0 0 0 var(--hover);
}

// Size can also be negative; see how it's smaller than the element
.raise:hover,
.raise:focus {
  box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
  transform: translateY(-0.25em);
}

// Animating from the bottom
.up:hover,
.up:focus {
  box-shadow: inset 0 -3.25em 0 0 var(--hover);
}

// And from the left
.slide:hover,
.slide:focus {
  box-shadow: inset 6.5em 0 0 0 var(--hover);
}

// Multiple shadows, one on the outside, another on the inside
.offset {
  box-shadow:
    0.3em 0.3em 0 0 var(--color),
    inset 0.3em 0.3em 0 0 var(--color);

  &:hover,
  &:focus {
    box-shadow:
      0 0 0 0 var(--hover),
      inset 6em 3.5em 0 0 var(--hover);
  }
}

//=== Set button colors
// If you wonder why use Sass vars or CSS custom properties...
  // Make a map with the class names and matching colors
$colors: (
  fill: #a972cb,
  pulse: #ef6eae,
  close: #ff7f82,
  raise: #ffa260,
  up: #e4cb58,
  slide: #8fc866,
  offset: #19bc8b
);

// Sass variables compile to a static string; CSS variables are dynamic and inherited
  // Loop through the map and set CSS custom properties using Sass variables
@each $button, $color in $colors {
  .#{$button} {
    --color: #{$color};
    --hover: #{adjust-hue($color, 45deg)};
  }
}

// Now every button will have different colors as set above. We get to use the same structure, only changing the custom properties.
button {
  color: var(--color);
  transition: 0.25s;

  &:hover,
  &:focus {
    border-color: var(--hover);
    color: #fff;
  }
}

//=== Pen styling, ignore
body {
  color: #fff;
  background: hsl(227, 10%, 10%);


  // Center everything ever
  justify-content: center;
  align-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
  display: flex;
}

// Basic button styles
button {
  background: none;
  border: 2px solid;
  line-height: 1;
  margin: 0.5em;
  padding: 1em 2em;
}


code {
  color: #e4cb58;

}


@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 40px;
}

.text {
  position: absolute;
  width: 450px;
  left: 45%;
  margin-left: -225px;
  height: 40px;
  top: 10%;
  margin-top: -20px;
}

p {
  display: inline-block;
  vertical-align: top;
  margin: 0;
}

.word {
  position: absolute;
  width: 220px;
  opacity: 0;
}

.letter {
  display: inline-block;
  position: relative;
  float: left;
  transform: translateZ(25px);
  transform-origin: 50% 50% 25px;
}

.letter.out {
  transform: rotateX(90deg);
  transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.letter.behind {
  transform: rotateX(-90deg);
}

.letter.in {
  transform: rotateX(0deg);
  transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wisteria {
  color: #8e44ad;
}

.belize {
  color: #2980b9;
}

.pomegranate {
  color: #c0392b;
}

.green {
  color: #16a085;
}

.midnight {
  color: #2c3e50;
}

## the-coding-library-tcl.markdown

      
    Raw
  

              the-coding-library-tcl.markdown
            
          
    The Coding Library (TCL)

A Pen by Joey Kerper on CodePen.
License.
	<div class="text">
	<p>The Coding</p>
	<p>
	<span class="word wisteria">Library.</span>
	<span class="word belize">Library.</span>
	<span class="word pomegranate">Library
	</span>
	<span class="word green">Library.</span>

	</p>
	</div>



	<html>

	<body>
	<center>

	<div class="buttons">

	<button class="raise">Buttons</button>
	<br>
	<button class="raise">Hex Colors</button>


	</center>


	</body>
	</html>
	var words = document.getElementsByClassName('word');
	var wordArray = [];
	var currentWord = 0;

	words[currentWord].style.opacity = 1;
	for (var i = 0; i < words.length; i++) {
	splitLetters(words[i]);
	}

	function changeWord() {
	var cw = wordArray[currentWord];
	var nw = currentWord == words.length-1 ? wordArray[0] : wordArray[currentWord+1];
	for (var i = 0; i < cw.length; i++) {
	animateLetterOut(cw, i);
	}

	for (var i = 0; i < nw.length; i++) {
	nw[i].className = 'letter behind';
	nw[0].parentElement.style.opacity = 1;
	animateLetterIn(nw, i);
	}

	currentWord = (currentWord == wordArray.length-1) ? 0 : currentWord+1;
	}

	function animateLetterOut(cw, i) {
	setTimeout(function() {
	cw[i].className = 'letter out';
	}, i*80);
	}

	function animateLetterIn(nw, i) {
	setTimeout(function() {
	nw[i].className = 'letter in';
	}, 340+(i*80));
	}

	function splitLetters(word) {
	var content = word.innerHTML;
	word.innerHTML = '';
	var letters = [];
	for (var i = 0; i < content.length; i++) {
	var letter = document.createElement('span');
	letter.className = 'letter';
	letter.innerHTML = content.charAt(i);
	word.appendChild(letter);
	letters.push(letter);
	}

	wordArray.push(letters);
	}

	changeWord();
	setInterval(changeWord, 4000);
	// Animate the size, inside
	.fill:hover,
	.fill:focus {
	box-shadow: inset 0 0 0 2em var(--hover);
	}

	// Animate the size, outside
	.pulse:hover,
	.pulse:focus {
	animation: pulse 1s;
	box-shadow: 0 0 0 2em rgba(#fff,0);
	}

	@keyframes pulse {
	0% { box-shadow: 0 0 0 0 var(--hover); }
	}

	// Stack multiple shadows, one from the left, the other from the right
	.close:hover,
	.close:focus {
	box-shadow:
	inset -3.5em 0 0 0 var(--hover),
	inset 3.5em 0 0 0 var(--hover);
	}

	// Size can also be negative; see how it's smaller than the element
	.raise:hover,
	.raise:focus {
	box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
	transform: translateY(-0.25em);
	}

	// Animating from the bottom
	.up:hover,
	.up:focus {
	box-shadow: inset 0 -3.25em 0 0 var(--hover);
	}

	// And from the left
	.slide:hover,
	.slide:focus {
	box-shadow: inset 6.5em 0 0 0 var(--hover);
	}

	// Multiple shadows, one on the outside, another on the inside
	.offset {
	box-shadow:
	0.3em 0.3em 0 0 var(--color),
	inset 0.3em 0.3em 0 0 var(--color);

	&:hover,
	&:focus {
	box-shadow:
	0 0 0 0 var(--hover),
	inset 6em 3.5em 0 0 var(--hover);
	}
	}

	//=== Set button colors
	// If you wonder why use Sass vars or CSS custom properties...
	// Make a map with the class names and matching colors
	$colors: (
	fill: #a972cb,
	pulse: #ef6eae,
	close: #ff7f82,
	raise: #ffa260,
	up: #e4cb58,
	slide: #8fc866,
	offset: #19bc8b
	);

	// Sass variables compile to a static string; CSS variables are dynamic and inherited
	// Loop through the map and set CSS custom properties using Sass variables
	@each $button, $color in $colors {
	.#{$button} {
	--color: #{$color};
	--hover: #{adjust-hue($color, 45deg)};
	}
	}

	// Now every button will have different colors as set above. We get to use the same structure, only changing the custom properties.
	button {
	color: var(--color);
	transition: 0.25s;

	&:hover,
	&:focus {
	border-color: var(--hover);
	color: #fff;
	}
	}

	//=== Pen styling, ignore
	body {
	color: #fff;
	background: hsl(227, 10%, 10%);


	// Center everything ever
	justify-content: center;
	align-content: center;
	align-items: center;
	text-align: center;
	min-height: 100vh;
	display: flex;
	}

	// Basic button styles
	button {
	background: none;
	border: 2px solid;
	line-height: 1;
	margin: 0.5em;
	padding: 1em 2em;
	}



	code {
	color: #e4cb58;

	}






	@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);

	body {
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 40px;
	}

	.text {
	position: absolute;
	width: 450px;
	left: 45%;
	margin-left: -225px;
	height: 40px;
	top: 10%;
	margin-top: -20px;
	}

	p {
	display: inline-block;
	vertical-align: top;
	margin: 0;
	}

	.word {
	position: absolute;
	width: 220px;
	opacity: 0;
	}

	.letter {
	display: inline-block;
	position: relative;
	float: left;
	transform: translateZ(25px);
	transform-origin: 50% 50% 25px;
	}

	.letter.out {
	transform: rotateX(90deg);
	transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
	}

	.letter.behind {
	transform: rotateX(-90deg);
	}

	.letter.in {
	transform: rotateX(0deg);
	transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	.wisteria {
	color: #8e44ad;
	}

	.belize {
	color: #2980b9;
	}

	.pomegranate {
	color: #c0392b;
	}

	.green {
	color: #16a085;
	}

	.midnight {
	color: #2c3e50;
	}