Anchor orange thing theme

dabblet.css

/**
 * Anchor orange thing theme
 */

ul { list-style: none; }
* { box-sizing: border-box; }
html, body { height: 100%; }
a { text-decoration: none; }
*::selection { background-color: #ffdaad; }

/* --- BODY --- */
body {
	text-align: left !important;
	font-family: Helvetica, arial, sans-serif;
}

/* --- CONTENT --- */
.content {
	height: 100%;
}

/* --- HEADER --- */
header {
	padding-top: 25px;
	padding-bottom: 25px;
	background: #e8a24c;
}

.title-box {
	margin: 0px 20%;
}

header .title-box h1 {
	color: #c98c42;
	font-size: 400%;
	font-family: verdana;
	text-shadow: 0px -2px #bc833e,
				 0px 2px #ffb254;
}

header .title-box:after {
	content: "";
	position: fixed;
	height: 100%;
	top: 0px;
	margin-left: 11%;
	width: 0px;
	border-right: #E8A24C 3px solid;
	z-index: -1;
}

/* --- MIDDLE --- */
.middle {
	padding: 0 20%;
	overflow: auto;
}

/* --- LEFT BAR --- */
.left-bar {
	width: 20%;
	float: left;
	padding-right: 4%;
	padding-top: 2%;
}

.left-bar nav ul {
	text-align: right;
	font-size: 110%;
	line-height: 150%;
}

.left-bar nav ul a { color: #C98C42; }
.left-bar nav li:hover a { color: #a87537; }
.left-bar nav li { position: relative; }
.left-bar nav li .arrow { 
	transition: border-width .25s ease;
	border: 13px solid transparent;
	border-right-width: 0px;
	position: absolute;
	width: 0px;
	height: 0px;
	top: 0px;
	right: -16%;
}
.left-bar nav li:hover .arrow, .left-bar nav li.active .arrow {
	border-width: 13px;
	border-right-color: #E8A24C;
}

/* --- RIGHT BAR --- */
.right-bar {
	float: left;
	padding: 2% 1%;
	width: 75%;
	position: relative;
}

.posts li section { 
	width: 100%;
	padding: 1% 0;
	overflow: auto;
}
.posts li section h2 {
	color: #626166;
	float: left;
}
.posts li section .date {
	float: right;
	color: #d9d8e2;
}
.posts li:hover section h2 { color: #333333; }
.posts li:hover section .date { color: #7b7b7f; }


/* --- FOOTER --- */
footer {
	font-size: 80%;
	line-height: 24px;
	padding-top: 2%;
}
footer li { display: inline; }
footer li::after { content: " \2014"; color: #b0b0b7 !important; }
footer ul li:last-child::after { content: ""; }
footer li, footer a { color: #b0b0b7; }
footer li:hover, footer li:hover a { color: #7b7b7f; }


/* --- ATTRIBUTION --- */
.attribution {
	float: right;
}

/* ------ MEDIA QUERIES ------ */
@media (max-width: 1296px) {
	
	.middle { padding: 0 10%; }
	.title-box { margin: 0 10%; }
	.title-box::after { left: 13.7%; }
	
}

@media (max-width: 873px) {
	
	.middle { padding: 0; }
	.title-box { margin: 0 2%; }
	.title-box::after { left: 7.5%; }
	
}

dabblet.html

<!-- Don't put link tags in the body, kidys! -->
<link rel="stylesheet" type="text/css" href="http://acconut.koding.com/anchor/themes/default/css/reset.css" />
<div class="content">
	<header>
		
		<!-- TITLE -->
		<div class="title-box">
			<h1 class="title">
				Your title here
			</h1>
		</div>
	</header>
	<div class="middle">
		
		<!-- THE LEFT THINGY -->
		<div class="left-bar">
			<!-- NAVIGATION -->
			<nav>
				<ul>
					<li class="active"><a href="#">Posts</a><div class="arrow"></div></li>
					<li><a href="#">About</a><div class="arrow"></div></li>
					<li><a href="#">Gallery</a><div class="arrow"></div></li>
				</ul>
			</nav>
			
		</div>
		
		<!-- RIGHT THINGY -->
		<div class="right-bar">
			<div class="posts">
				<ul>
					<li>
						<a href="#">
							<section>
								<h2>Test</h2>
								<span class="date">Just now</span>
							</section>
						</a>
					</li>
					<li>
						<a href="#">
							<section>
								<h2>Post title, ok?</h2>
								<span class="date">Just now</span>
							</section>
						</a>
					</li>
					<li>
						<a href="#">
							<section>
								<h2>Hello World</h2>
								<span class="date">At the beginning of the universe</span>
							</section>
						</a>
					</li>
				</ul>
			</div>
			
			<!-- FOOTER -->
			<footer>
				<div class="attribution">
					<a href="http://anchorcms.com" target="_blank">
						<img src="http://acconut.koding.com/anchor/themes/default/img/attribution.gif" />
					</a>
				</div>
				<ul>
					<li><a href="#">RSS</a></li>
					<li><a href="#">Home</a></li>
					<li><a href="#">@sillytwittername</a></li>
					<li>&copy 2012 owner</li>
				</ul>
			</footer>

		</div>
	</div>
</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}