pop/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title></title>

        <link rel='stylesheet' type='text/css' href='style.css'>

        <script type='text/javascript' src='jquery-2.1.4.min.js'></script>
        <script type='text/javascript' src='play.js'></script>
    </head>
    <body onload='run(".document")'>
        <nav>
          <h1><a href='#'>This is a thing</a></h1>
          <ul>
            <li> About </li>
            <li> Contact </li>
            <li> Other </li>
          </ul>
        </nav>

        <div class="document"> <!-- Comments about the game --> <div class="section" id="level-1"> <h1>Level 1</h1> <p>This is where you start. This is the 'first level'. It's very fancy.</p> <p>If you would like to continue to the next level click the <a class="reference internal" href="#level-2">Level 2</a> button.</p> </div> <div class="section" id="level-2"> <h1>Level 2</h1> <p>If you want to create branching decisions it's pretty easy. Basically you just have two separate links which go to different parts of the document.</p> <p>You can also give the link targets different names:</p> <ul class="simple"> <li><a class="reference internal" href="#level-1">I'm scared</a></li> <li><a class="reference internal" href="#level-3">Let's do this</a></li> </ul> </div> <div class="section" id="level-3"> <h1>Level 3</h1> <p>Well, that's about all I've got for you now... sorry.</p> </div> </div>

        <footer>

        </footer>
    </body>
</html>

## play.js
//
// Filename: play.js
// Written By: Elijah C. Voigt
// Description: Takes reStructuredText document and makes it a Twine-like game.
//

function run() {
  window.scrollTo(0,0);
  T = tags();

  fadeAll('in', function() {
    if (currentLevel(T) == false) {
      onlyShow(T[0], T);
    } else {
      onlyShow(currentLevel(T), T);
    }

    $('a').click(function() {
      fadeAll('out', function() {
        window.location.href = this.href;
        location.reload();
      });
    });
  });
}

function fadeAll(b, func) {
    if (b === 'out') {
      console.log('fading out');
      $('body').fadeOut(800, func);
    } else {
      console.log('fading in');
      $('body').fadeIn(800, func);
    }
}

function onlyShow(t, T) {
  T.map(function(x) {
    if (x !== t) {
      $('#'+x).hide();
    } else {
      $('#'+x).show();
    }
  });
}

function tags() {
  //var X = $(main).children().get();
  var X = $('*');
  var Y = []
  for (x in X) {
    if (Math.floor(x) == x) {
      if ($(X[x]).attr('id') !== undefined) {
        Y.push($(X[x]).attr('id'));
      }
    }
  }
  return Y;
}

function currentLevel(T) {
  href = window.location.href;
  for (t in T) {
    if (href.endsWith('#'+T[t])) {
      return T[t];
    }
  }
  return false;
}

function allTagsBut(T, t) {
  for (i in T) {
    if (T[i] === t) {
      T.splice(T.indexOf(t), 1);
    }
  }
  return T;
}

## style.css
html, body {
    height: 100%;
}

* {
    font-size: 10px;
    margin: 0px;
    font-family: monospace;
}

div.document {
    width: 70%;
    font-size: 15px;
    color: black;
    background: white;
    color: #555;
    line-height: 2em;
    padding: 10px;
    padding-left: 40px;
    float: left;
}

div.document a {
    text-decoration: underline;
    color: #000;
}

nav a {
    text-decoration: none;
    color: #BBB;
}


nav {
    width: 15%;
    float: left;
    background: #222;
    text-align: center;
    color: #999;
    line-height: 1.15em;
    height: 100%;
    padding: 10px;
}

nav ul {
    margin-top: 30px;
    padding: 0;
    list-style: none;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title></title>

	<link rel='stylesheet' type='text/css' href='style.css'>

	<script type='text/javascript' src='jquery-2.1.4.min.js'></script>
	<script type='text/javascript' src='play.js'></script>
	</head>
	<body onload='run(".document")'>
	<nav>
	<h1><a href='#'>This is a thing</a></h1>
	<ul>
	<li> About </li>
	<li> Contact </li>
	<li> Other </li>
	</ul>
	</nav>

	<div class="document"> <!-- Comments about the game --> <div class="section" id="level-1"> <h1>Level 1</h1> <p>This is where you start. This is the 'first level'. It's very fancy.</p> <p>If you would like to continue to the next level click the <a class="reference internal" href="#level-2">Level 2</a> button.</p> </div> <div class="section" id="level-2"> <h1>Level 2</h1> <p>If you want to create branching decisions it's pretty easy. Basically you just have two separate links which go to different parts of the document.</p> <p>You can also give the link targets different names:</p> <ul class="simple"> <li><a class="reference internal" href="#level-1">I'm scared</a></li> <li><a class="reference internal" href="#level-3">Let's do this</a></li> </ul> </div> <div class="section" id="level-3"> <h1>Level 3</h1> <p>Well, that's about all I've got for you now... sorry.</p> </div> </div>

	<footer>

	</footer>
	</body>
	</html>
	//
	// Filename: play.js
	// Written By: Elijah C. Voigt
	// Description: Takes reStructuredText document and makes it a Twine-like game.
	//

	function run() {
	window.scrollTo(0,0);
	T = tags();

	fadeAll('in', function() {
	if (currentLevel(T) == false) {
	onlyShow(T[0], T);
	} else {
	onlyShow(currentLevel(T), T);
	}

	$('a').click(function() {
	fadeAll('out', function() {
	window.location.href = this.href;
	location.reload();
	});
	});
	});
	}

	function fadeAll(b, func) {
	if (b === 'out') {
	console.log('fading out');
	$('body').fadeOut(800, func);
	} else {
	console.log('fading in');
	$('body').fadeIn(800, func);
	}
	}

	function onlyShow(t, T) {
	T.map(function(x) {
	if (x !== t) {
	$('#'+x).hide();
	} else {
	$('#'+x).show();
	}
	});
	}

	function tags() {
	//var X = $(main).children().get();
	var X = $('*');
	var Y = []
	for (x in X) {
	if (Math.floor(x) == x) {
	if ($(X[x]).attr('id') !== undefined) {
	Y.push($(X[x]).attr('id'));
	}
	}
	}
	return Y;
	}

	function currentLevel(T) {
	href = window.location.href;
	for (t in T) {
	if (href.endsWith('#'+T[t])) {
	return T[t];
	}
	}
	return false;
	}

	function allTagsBut(T, t) {
	for (i in T) {
	if (T[i] === t) {
	T.splice(T.indexOf(t), 1);
	}
	}
	return T;
	}
	html, body {
	height: 100%;
	}

	* {
	font-size: 10px;
	margin: 0px;
	font-family: monospace;
	}

	div.document {
	width: 70%;
	font-size: 15px;
	color: black;
	background: white;
	color: #555;
	line-height: 2em;
	padding: 10px;
	padding-left: 40px;
	float: left;
	}

	div.document a {
	text-decoration: underline;
	color: #000;
	}

	nav a {
	text-decoration: none;
	color: #BBB;
	}


	nav {
	width: 15%;
	float: left;
	background: #222;
	text-align: center;
	color: #999;
	line-height: 1.15em;
	height: 100%;
	padding: 10px;
	}

	nav ul {
	margin-top: 30px;
	padding: 0;
	list-style: none;
	}