ramsesoriginal · March 16, 2012 22:46
diff --git a/dabblet.css b/dabblet.css
 /**
 * Form für Peter
 */

 @import url(http://fonts.googleapis.com/css?family=Lobster|Open+Sans);
 
 * {
 	 box-sizing: border-box;
 	 transition: all 0.5s ease;
 	 vertical-align: middle;
 }
 html {
 	min-height: 100%;
 	padding:0;
 	margin:0;
 	font-size: 62.5%;
 }

 body {
 	min-height: 600px;
 	min-height: 60rem;
 	/*position: relative;*/
 	position: absolute;
 	top:0;
 	bottom: 0;
 	left:0;
 	right:0;
 	height: auto;
 	font-size: 16px;
 	font-size: 1.6rem;
 	padding:0;
 	margin:0;
 	padding-top: 125px;
 	padding-top: 12.5rem;
 	padding-bottom: 125px;
 	padding-bottom: 12.5rem;
 	background-color: rgb(148,140,117);
 	font-family: 'Open Sans', sans-serif;
 }

 hgroup,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
 	font-family: 'Lobster', cursive;
 	text-shadow: 3px 3px 3px #d9ceb2, 3px 3px 6px #7A6A53;
 }

 body > header {
 	position: absolute;
 	top:0;
 	left:0;
 	right:0;
 	height: 110px;
 	height: 11rem;
 }

 body > footer{
 	position: absolute;
 	bottom:0;
 	left:0;
 	right:0;
 	height: 110px;
 	height: 11rem;
 	display: box;
 	box-orient: horizontal;
 }

 body > header,
 body > footer {
 	background-color: rgb(217,206,178);
 	border-top: 2px solid #222;
 	border-bottom: 2px solid #222;
 	box-shadow: 0px 5px 5px 0px rgba(0,0,0, 0.5), 0px -5px 5px 0px rgba(0,0,0, 0.5);
 	z-index: 20;
 	overflow: hidden;
 }

 body > footer > nav,
 body > footer > aside {
 	display: block;
 	box-flex: 1;
 	width: 25%;
 	padding: 10px;
 	padding: 1rem;
 }

 body > form {
 	padding:0;
 	margin:0;
 	display: block;
 	width: 100%;
 	min-height: 100px;
 	min-height: 10rem;
 	position: absolute;
 	top: 130px;
 	top: 13rem;
 	bottom: 130px;
 	bottom: 13rem;
 }

 .configpage {
 	background-color: rgb(213,222,217);
 	position: absolute;
 	top:0;
 	left:0;
 	right: 88%;
 	bottom:0;
 	padding: 5px;
 	padding: 0.5rem;
 	box-shadow: 0px 0px 5px 1px rgba(0,0,0, 0.5);
 	border-radius: 5px;
 	border-radius: 0.5rem;
 	overflow: hidden;
 }

 .configpage h1{
 	/*width: 1000px;
 	text-align: right;
 	transform-origin: 0px 0px;
 	transform: rotate(-90deg) translate(-100%,0);*/
 }

 .configpage:target {
 	left: 10%;
 	right: 10%;
 	z-index: 10;
 	top: -20px;
 	top: -2rem;
 	bottom: -20px;
 	bottom: -2rem;
 }

 .configpage:target h1{
 	width: 100%;
 	text-align: center;
 }


 .configpage:target ~ .configpage {
 	right:0;
 	left:88%;
 	display:none;
 }
 .configpage:target + .configpage {
 	display:block;

 }

 .configpage:target ~ .configpage h1{
 	text-align: right;
 	/*transform-origin: 10px 20px;
 	transform: rotate(90deg) translate(0,0);*/
 }

 h1 a,
 h1 a:visited {
 	color: rgb(153,178,183);
 	text-decoration: none;
 }
diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->
 <header>
 	<hgroup>
 		<h1>Servermanagementconsole</h1>
 		<h2>Mit zuig und so</h2>
 	</hgroup>
 </header>
 <form>
 	<section id="vserver" class="configpage">
 		<h1><a href="#vserver">vServer</a></h1>
 	</section>
 	<section id="dedicatedServer" class="configpage">
 		<h1><a href="#dedicatedServer">Dedicated Server</a></h1>
 	</section>
 	<section id="user" class="configpage">
 		<h1><a href="#user">User</a></h1>
 	</section>
 	<section id="usergroups" class="configpage">
 		<h1><a href="#usergroups">Usergroups</a></h1>
 	</section>
 </form>
 <footer>
 	<aside>
 		<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/">
 			<img alt="Creative Commons License" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" />
 		</a>
 		<br />
 		This
 		<span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" rel="dct:type">
 			work
 		</span>
 		is licensed under a
 		<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/">
 			Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License
 		</a>
 		.
 	</aside>
 	<nav>
 		<a href="http://www.google.com">Google</a>
 		<a href="http://www.yahoo.com">Yahoo!</a>
 		<a href="http://www.bing.com">Bing</a>
 		<a href="http://www.wikipedia.org">Wikipedia</a>
 	</nav>
 	<aside>
 		For any additional question, just ask the
 		<a href="mailto:[email protected]">
 			the WALL!
 		</a>
 		<br />
 		Seriously, don't fuck with us, we don't want to hear you!
 	</aside>
 	<aside>
 		Some additional stuff that nobody is ever going to read, so I'll just write some random copy, and it will sit here forever. Well, I don't care. This is just filler text anyway, so ... stfu!
 	</aside>
 </footer>
diff --git a/settings.json b/settings.json
 {"view":"split","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* Form für Peter
	*/

	@import url(http://fonts.googleapis.com/css?family=Lobster\|Open+Sans);

	* {
	box-sizing: border-box;
	transition: all 0.5s ease;
	vertical-align: middle;
	}
	html {
	min-height: 100%;
	padding:0;
	margin:0;
	font-size: 62.5%;
	}

	body {
	min-height: 600px;
	min-height: 60rem;
	/position: relative;/
	position: absolute;
	top:0;
	bottom: 0;
	left:0;
	right:0;
	height: auto;
	font-size: 16px;
	font-size: 1.6rem;
	padding:0;
	margin:0;
	padding-top: 125px;
	padding-top: 12.5rem;
	padding-bottom: 125px;
	padding-bottom: 12.5rem;
	background-color: rgb(148,140,117);
	font-family: 'Open Sans', sans-serif;
	}

	hgroup,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
	font-family: 'Lobster', cursive;
	text-shadow: 3px 3px 3px #d9ceb2, 3px 3px 6px #7A6A53;
	}

	body > header {
	position: absolute;
	top:0;
	left:0;
	right:0;
	height: 110px;
	height: 11rem;
	}

	body > footer{
	position: absolute;
	bottom:0;
	left:0;
	right:0;
	height: 110px;
	height: 11rem;
	display: box;
	box-orient: horizontal;
	}

	body > header,
	body > footer {
	background-color: rgb(217,206,178);
	border-top: 2px solid #222;
	border-bottom: 2px solid #222;
	box-shadow: 0px 5px 5px 0px rgba(0,0,0, 0.5), 0px -5px 5px 0px rgba(0,0,0, 0.5);
	z-index: 20;
	overflow: hidden;
	}

	body > footer > nav,
	body > footer > aside {
	display: block;
	box-flex: 1;
	width: 25%;
	padding: 10px;
	padding: 1rem;
	}

	body > form {
	padding:0;
	margin:0;
	display: block;
	width: 100%;
	min-height: 100px;
	min-height: 10rem;
	position: absolute;
	top: 130px;
	top: 13rem;
	bottom: 130px;
	bottom: 13rem;
	}

	.configpage {
	background-color: rgb(213,222,217);
	position: absolute;
	top:0;
	left:0;
	right: 88%;
	bottom:0;
	padding: 5px;
	padding: 0.5rem;
	box-shadow: 0px 0px 5px 1px rgba(0,0,0, 0.5);
	border-radius: 5px;
	border-radius: 0.5rem;
	overflow: hidden;
	}

	.configpage h1{
	/*width: 1000px;
	text-align: right;
	transform-origin: 0px 0px;
	transform: rotate(-90deg) translate(-100%,0);*/
	}

	.configpage:target {
	left: 10%;
	right: 10%;
	z-index: 10;
	top: -20px;
	top: -2rem;
	bottom: -20px;
	bottom: -2rem;
	}

	.configpage:target h1{
	width: 100%;
	text-align: center;
	}


	.configpage:target ~ .configpage {
	right:0;
	left:88%;
	display:none;
	}
	.configpage:target + .configpage {
	display:block;

	}

	.configpage:target ~ .configpage h1{
	text-align: right;
	/*transform-origin: 10px 20px;
	transform: rotate(90deg) translate(0,0);*/
	}

	h1 a,
	h1 a:visited {
	color: rgb(153,178,183);
	text-decoration: none;
	}
	<!-- content to be placed inside <body>…</body> -->
	<header>
	<hgroup>
	<h1>Servermanagementconsole</h1>
	<h2>Mit zuig und so</h2>
	</hgroup>
	</header>
	<form>
	<section id="vserver" class="configpage">
	<h1><a href="#vserver">vServer</a></h1>
	</section>
	<section id="dedicatedServer" class="configpage">
	<h1><a href="#dedicatedServer">Dedicated Server</a></h1>
	</section>
	<section id="user" class="configpage">
	<h1><a href="#user">User</a></h1>
	</section>
	<section id="usergroups" class="configpage">
	<h1><a href="#usergroups">Usergroups</a></h1>
	</section>
	</form>
	<footer>
	<aside>
	<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/">
	<img alt="Creative Commons License" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" />
	</a>
	<br />
	This
	<span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" rel="dct:type">
	work
	</span>
	is licensed under a
	<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/">
	Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License
	</a>
	.
	</aside>
	<nav>
	<a href="http://www.google.com">Google</a>
	<a href="http://www.yahoo.com">Yahoo!</a>
	<a href="http://www.bing.com">Bing</a>
	<a href="http://www.wikipedia.org">Wikipedia</a>
	</nav>
	<aside>
	For any additional question, just ask the
	<a href="mailto:[email protected]">
	the WALL!
	</a>
	<br />
	Seriously, don't fuck with us, we don't want to hear you!
	</aside>
	<aside>
	Some additional stuff that nobody is ever going to read, so I'll just write some random copy, and it will sit here forever. Well, I don't care. This is just filler text anyway, so ... stfu!
	</aside>
	</footer>