yhahn/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<script src='http://underscorejs.org/underscore-min.js'></script>
<script src='http://api.tiles.mapbox.com/mapbox.js/v1.1.0/mapbox.js'></script>
<link href='http://api.tiles.mapbox.com/mapbox.js/v1.1.0/mapbox.css' rel='stylesheet' />
<style>
* {
  box-sizing:border-box;
  font-family:"Open Sans";
  font-size:20px;
  line-height:20px;
  }
body {
  margin:0; padding:0;
  color:#222;
  }
a {
  color:#222;
  text-decoration:none;
  }
#map {
  position:fixed; width:100%; height:100%;
  background:#eee;
  -webkit-transform:scale(1);
  -webkit-transform-origin:0px 0px;
  -webkit-transition:-webkit-transform 100ms, width 100ms, height 100ms;
}
#dash {
  position:fixed; width:100%; height:100%;
  padding:20px 120px;
  }
#dash:target ~ #map{
  width:160px;
  height:160px;
  -webkit-transform:scale(0.5);
}

.logo {
  position:fixed;
  z-index:1000;
  width:80px; height:80px;
  top:0px; left:0px;
  background:url('data:image/png;base64,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') 0px 0px;
  -webkit-transition:opacity 100ms;
  }
.logo-dash {
  background-position:0px -80px;
  opacity:0;
  }
#dash:target ~ .logo-map { opacity:0; }
#dash:target ~ .logo-dash { opacity:1; }

.actions { position:fixed; top:10px; right:10px; z-index:10000;}
</style>
</head>
<body>

<div id='app'>

<div class='actions'>
  <a href='#'>Map</a>
  <a href='#dash'>Dash</a>
</div>

<div id='dash'>
<h1>Dashboard stuff</h1>
</div>

<div id='map'></div>

<div class='logo logo-map'></div>
<div class='logo logo-dash'></div>

</div>

<script type='text/javascript'>
var app = document.getElementById('app');
var map = L.mapbox.map('map', 'examples.map-vyofok3q', {
  attributionControl: false,
  zoomControl: false
});
map.setView([38.8934, -77.0362], 15);
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
	<script src='http://underscorejs.org/underscore-min.js'></script>
	<script src='http://api.tiles.mapbox.com/mapbox.js/v1.1.0/mapbox.js'></script>
	<link href='http://api.tiles.mapbox.com/mapbox.js/v1.1.0/mapbox.css' rel='stylesheet' />
	<style>
	* {
	box-sizing:border-box;
	font-family:"Open Sans";
	font-size:20px;
	line-height:20px;
	}
	body {
	margin:0; padding:0;
	color:#222;
	}
	a {
	color:#222;
	text-decoration:none;
	}
	#map {
	position:fixed; width:100%; height:100%;
	background:#eee;
	-webkit-transform:scale(1);
	-webkit-transform-origin:0px 0px;
	-webkit-transition:-webkit-transform 100ms, width 100ms, height 100ms;
	}
	#dash {
	position:fixed; width:100%; height:100%;
	padding:20px 120px;
	}
	#dash:target ~ #map{
	width:160px;
	height:160px;
	-webkit-transform:scale(0.5);
	}

	.logo {
	position:fixed;
	z-index:1000;
	width:80px; height:80px;
	top:0px; left:0px;
	background:url('data:image/png;base64,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') 0px 0px;
	-webkit-transition:opacity 100ms;
	}
	.logo-dash {
	background-position:0px -80px;
	opacity:0;
	}
	#dash:target ~ .logo-map { opacity:0; }
	#dash:target ~ .logo-dash { opacity:1; }

	.actions { position:fixed; top:10px; right:10px; z-index:10000;}
	</style>
	</head>
	<body>

	<div id='app'>

	<div class='actions'>
	<a href='#'>Map</a>
	<a href='#dash'>Dash</a>
	</div>

	<div id='dash'>
	<h1>Dashboard stuff</h1>
	</div>

	<div id='map'></div>

	<div class='logo logo-map'></div>
	<div class='logo logo-dash'></div>

	</div>

	<script type='text/javascript'>
	var app = document.getElementById('app');
	var map = L.mapbox.map('map', 'examples.map-vyofok3q', {
	attributionControl: false,
	zoomControl: false
	});
	map.setView([38.8934, -77.0362], 15);
	</script>
	</body>
	</html>