jensgro · August 28, 2015 14:45
diff --git a/dabblet.css b/dabblet.css
 /**
 * keyboard order and flexbox ordering
 */

 nav {
 	display: flex;
 	padding: 20px;		
 }
 a:nth-of-type(2) {
 	order: -1;
 }

 a {
 	display: inline-block;
 	text-decoration: none;
 	padding: 10px;
 	background: #a20000;
 	color: #fff;
 	margin-right: 10px;
 	transition: all 0.3s;
 }

 a:hover, a:focus {
 	background-color: #454545;
 	padding: 10px 20px;
 	transition: all 0.3s;
 	position: relative;
 	z-index: 10;
 	margin-left: -10px;
 }
diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->

 <nav>
 <a href="http://vasilis.nl">Link 1</a>
 <a href="http://vasilis.nl">Link 2</a>
 <a href="http://vasilis.nl">Link 3</a>
 </nav>
diff --git a/dabblet.js b/dabblet.js
 // alert('Hello world!');
diff --git a/settings.json b/settings.json
 {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* keyboard order and flexbox ordering
	*/

	nav {
	display: flex;
	padding: 20px;
	}
	a:nth-of-type(2) {
	order: -1;
	}

	a {
	display: inline-block;
	text-decoration: none;
	padding: 10px;
	background: #a20000;
	color: #fff;
	margin-right: 10px;
	transition: all 0.3s;
	}

	a:hover, a:focus {
	background-color: #454545;
	padding: 10px 20px;
	transition: all 0.3s;
	position: relative;
	z-index: 10;
	margin-left: -10px;
	}
	<!-- content to be placed inside <body>…</body> -->

	<nav>
	<a href="http://vasilis.nl">Link 1</a>
	<a href="http://vasilis.nl">Link 2</a>
	<a href="http://vasilis.nl">Link 3</a>
	</nav>