<commit_before><!DOCTYPE html>
<html>

<head>

	<meta charset="UTF-8">

	<title>skrollr-decks Plugin</title>

	<link rel="stylesheet" href="https://necolas.github.io/normalize.css/3.0.1/normalize.css">

	<style>

.wrapper {
	position: relative;
	overflow: hidden;
	padding-bottom: 20px;
	color: #555;
}

.ribbon {
	font-size: 1rem;
	z-index: 1000;
	background-color: #2E2418;
	overflow: hidden;
	white-space: nowrap;
	position: fixed;
	right: -50px;
	top: 40px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	box-shadow: 0 0 8px rgba(0, 0, 0, .5);
}

@-webkit-keyframes pulse {
	50% {box-shadow: 0 0 10px rgba(0, 0, 0, .2);}
}

@keyframes pulse {
	50% {box-shadow: 0 0 10px rgba(0, 0, 0, .2);}
}

.ribbon:hover {
	-webkit-animation: pulse .5s infinite;
	animation: pulse .5s infinite;
}

.ribbon a {
	border: 1px solid #fff;
	color: #fff;
	display: block;
	font: bold .875em 'Helvetica Neue', Helvetica, Arial, sans-serif;
	margin: 1px 0;
	padding: 10px 50px;
	text-align: center;
	text-decoration: none;
}

a {
	color: inherit;
}

section {
	box-sizing: border-box;
	font: bold 1em sans-serif;
	text-align: center;
}

section span {
	display: block;
	color: #fff; font-size: 12em;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

section:nth-of-type(1) {
	background: #393;
}
section:nth-of-type(2) {
	background: #639;
}
section:nth-of-type(3) {
	background: #963;
}
section:nth-of-type(4) {
	background: #699;
}
section:nth-of-type(5) {
	background: #933;
}
section:nth-of-type(6) {
	padding: 50px 0;
}

.main-nav {
	position: fixed;
	z-index: 20;
	background: rgba(230, 180, 120, .9);
	width: 100%;
}
.main-nav ul {
	list-style: none;
	padding: 20px 40px;
	margin: 0;
}
.main-nav li {
	display: inline-block;
	color: #000;
}

@media (min-width: 1280px) {
	body {
		font-size: 1.5em;
	}
}

	</style>

</head>

<body class="skrollr-decks-init">

<div class="wrapper">

	<div class="ribbon">
		<a href="https://github.com/TrySound/skrollr-decks" target="_blank">Star me on GitHub</a>
	</div>

	<nav class="main-nav">
		<ul>
			<li><a href="#about">About</a></li>
			<li><a href="up">Up</a></li>
			<li><a href="down">Down</a></li>
		</ul>
	</nav>


	<main id="skrollr-body">
		
		<section class="skrollr-deck">
			<span>1</span>
		</section>
		
		<section class="skrollr-deck">
			<span>2</span>
		</section>
		
		<section class="skrollr-deck" style="color: #fff;">
			<br>
			<br>
			<br>
			<br>
			<br>
			<p>Long content...</p>
			<br>
			<br>
			<br>
			<br>
			<br>
			<p>Long content...</p>
			<br>
			<br>
			<br>
			<br>
			<br>
			<p>Long content...</p>
			<br>
			<br>
			<br>
			<br>
			<br>
			<p>Long content...</p><commit_msg>Extended demo<commit_after><!DOCTYPE html>
<html>

<head>

	<meta charset="UTF-8">

	<title>skrollr-decks Plugin</title>

	<link rel="stylesheet" href="https://necolas.github.io/normalize.css/3.0.1/normalize.css">

	<style>

.wrapper {
	position: relative;
	overflow: hidden;
	padding-bottom: 20px;
	color: #555;
}

.ribbon {
	font-size: 1rem;
	z-index: 2000;
	background-color: #2E2418;
	overflow: hidden;
	white-space: nowrap;
	position: fixed;
	right: -50px;
	top: 40px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	box-shadow: 0 0 8px rgba(0, 0, 0, .5);
}

@-webkit-keyframes pulse {
	50% {box-shadow: 0 0 10px rgba(0, 0, 0, .2);}
}

@keyframes pulse {
	50% {box-shadow: 0 0 10px rgba(0, 0, 0, .2);}
}

.ribbon:hover {
	-webkit-animation: pulse .5s infinite;
	animation: pulse .5s infinite;
}

.ribbon a {
	border: 1px solid #fff;
	color: #fff;
	display: block;
	font: bold .875em 'Helvetica Neue', Helvetica, Arial, sans-serif;
	margin: 1px 0;
	padding: 10px 50px;
	text-align: center;
	text-decoration: none;
}

a {
	color: inherit;
}

section {
	position: relative;
	box-sizing: border-box;
	font: bold 1em sans-serif;
	text-align: center;
	z-index: 100;
}

section span {
	display: block;
	color: #fff; font-size: 12em;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

section:nth-of-type(1) {
	background: #393;
}
section:nth-of-type(2) {
	background: #639;
}
section:nth-of-type(3) {
	background: #963;
}
section:nth-of-type(4) {
	background: #699;
}
section:nth-of-type(5) {
	background: #933;
}
section:nth-of-type(6) {
	padding: 50px 0;
}

.main-nav {
	position: fixed;
	z-index: 1000;
	background: rgba(230, 180, 120, .9);
	width: 100%;
}
.main-nav ul {
	list-style: none;
	padding: 20px 40px;
	margin: 0;
}
.main-nav li {
	display: inline-block;
	color: #000;
}

@media (min-width: 1280px) {
	body {
		font-size: 1.5em;
	}
}

	</style>

</head>

<body class="skrollr-decks-init">

<div class="wrapper">

	<div class="ribbon">
		<a href="https://github.com/TrySound/skrollr-decks" target="_blank">Star me on GitHub</a>
	</div>

	<nav class="main-nav">
		<ul>
			<li><a href="#about">About</a></li>
			<li><a href="up">Up</a></li>
			<li><a href="down">Down</a></li>
		</ul>
	</nav>

	<section style="background: #0f0; position:fixed; top: 0; left: 0; width: 100%; height: 100%;"
		data-anchor-target="#second"
		data-bottom-bottom="transform: translateY(0%);"
		data-top-bottom="transform: translateY(-100%);"
	>
		<span>2</span>
	</section>

	<main id="skrollr-body">
		
		<section class="skrollr-deck">
			<span>1</span>
		</section>
		
		<section class="skrollr-deck" id="second" style="z-index: 20;"></section>
		
		<section class="skrollr-deck" style="color: #fff;">
			<br>
			<br>
			<br>
			<br>
			<br>
			<p>Long content...</p>
			<br>
			<br>
			<br>
			<br>
			<br>
			<p>Long content...</p>
			<br>
			<br>
			<br>
			<br>
			<br>
			<p>Long content...</p>
			<br>
			<br>
			<br>
			<br>
			<br>
			<p>Long content...</p>
{'fraction_non_alphanumeric': 0.2024829515649589, 'fraction_numerical': 0.049134464067144605, 'mean_word_length': 3.4583008573655496, 'pattern_counts': {'":': 0, '<': 145, '<?xml version=': 0, '>': 145, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6379700', 'n_tokens_mistral': 2892, 'n_tokens_neox': 2486, 'n_words': 538}