Springfield Reloaded

dabblet.css

/* Springfield Reloaded */

/* typography */
@import url(//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css);
@import url(http://fonts.googleapis.com/css?family=Signika+Negative:300|Signika:300);
* { font:300 1em/1.6 Signika; margin:0; padding:0 }
a { text-transform:uppercase; font-size:.9em; color:inherit; text-decoration:none;
	margin:0 .6em 0 0; display:inline-block }
header h1 { font:300 2.6em/1 Signika Negative; text-transform:uppercase;
	margin-bottom:.3em }

/* layout */
html { background:url(http://f.cl.ly/items/3a2P0D3r2V1n1W040P1t/springfield%20capitol.jpg) no-repeat center #005;
	background-size:cover }
body { max-width:960px; margin:auto; background:hsla(0,0%,100%,.7) } body 
	> section a { background:#334e54; color:white; padding:0 .6em;
		border-radius:.3em; display:inline-block; margin-left:.6em; 
		box-shadow:1px 1px 2px #666 inset, -1px -1px 2px white inset } body
	> [id] { border-top:1px solid #9ea340; padding:.6em 1em } body 
	> [id]:before { content:attr(id); text-transform:uppercase;
		position:relative; background:transparent }
	
header { background:rgba(0,0,55,.7); color:#fff; border-bottom:2px solid #c9cc27;
	padding:.3em 1em } header
	h1 { text-align:center }
	#user { float:right }

	header nav, #search { display:inline-block; white-space:nowrap }
	#search * { background:transparent; color:inherit; 
		border:1px solid hsla(0,0%,100%,.3);
		padding:0 .6em; height:1.6em; box-sizing:border-box; display:inline-block;
		vertical-align:middle; box-sizing:border-box } #search
		input { } #search
		button { margin-left:-2.3em; border:0 }

#news 
	time { color:#666 } #news
	[for=live] { display:block } #news
	article { padding:.6em .3em .6em 1.3em; max-width:35em; overflow:hidden;
		background:no-repeat .3em 1em hsla(0,0%,100%,.7); border-radius:.3em;
		margin:1px 0 } #news article
		[src] { margin:1em 0 } #news
		article:hover { } #news
	[data-source]:after { content:attr(data-source); float:right;
		color:#999; font-size:.8em; line-height:2 } #news
	.twitter { background-image:url(https://dev.twitter.com/sites/default/files/images_documentation/bird_blue_16.png) }

#services { overflow:hidden } #services
	ul { display:none }

footer { background:rgba(0,0,55,.7); color:#fff; border-top:2px solid #c9cc27;
	text-align:center; clear:right } footer
	nav:not(#legal) { display:inline-block; vertical-align:top;
		margin:1em } footer
	nav[id]:not(#legal):before { content:attr(id); text-transform:uppercase;
		display:block; border-bottom:1px dashed #ddd; margin-bottom:.6em } footer
	nav a { display:block; text-align:left }
	#legal { border-top:2px solid #c9cc27; text-align:center } #legal
		a { display:inline-block }

dabblet.html

<header data-status="No Alerts">
	<h1>City of Springfield</h1>
	<menu id=user>
		<a href=account>weblogic</a>
		<a href=manage>Administration</a>
		<a href=exit>Exit ¬</a>
	</menu>
	<nav>
		<a href="#news">News</a>
		<a href="#services">Services</a>
		<a href="#events">Events</a>
		<a href="#directory">Directory</a>
		<a href="#help">Help</a>
	</nav>
	<form action=search id=search>
		<input name=query placeholder="find..." -autofocus>
		<button class="icon-search"></button>
	</form>
</header>

<section id=news>
	<label for=live>
		<time id=time></time>
		<input type=checkbox name=live checked>
		Live </label>
		
	<article> Welcome to the City of Springfield
		<a href=tour>Take a tour →</a>
		<iframe src="//player.vimeo.com/video/47224216" width=500 height=281 frameborder=0 
			webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
	</article>
		
	<article class=twitter data-source="@springfield_il">
		Mayor Delivers State-of-the-City Address
		<a href="//t.co/rCDLQMS0ey">springfield.il.us</a>
	</article>
	
	<article class=facebook>
		Sheriff&rsquo;s Office to Participate in basic Disaster Preparedness
		<a href="">Sign up &rarr;</a>
	</article>
	
	<time>Apr 22</time>
	<article class=twitter data-source="@EPAgov">
		On average, Americans create over 4lbs of trash every day!
		What do you do to #reduce waste?
		<a href="//go.usa.gov/TBak">//go.usa.gov/TBak</a>
		#EarthDay
	</article>
	
</section>

<section id=services>
	<ul title=DOT>
		<li> Renew your license
		<li> Vehicle registration
	</ul>
	<ul title></ul>
	<ul title></ul>
</section>

<section id=events></section>
<section id=directory></section>

<footer>
	<nav id=help>
		<a href="#health-and-safety">Health and Safety</a>
		<a href="#work">Work</a>
		<a href="#education">Education</a>
		<a href="#tourism">Tourism</a>
		<a href="#about">About</a>
	</nav>
	<nav id=connect>
		<a href="//facebook.com">Facebook</a>
		<a href="//twitter.com">Twitter</a>
		<a href="//plus.google.com">Google+</a>
		<a href="//vimeo.com">Vimeo</a>
	</nav>
	<nav id=media>
		<a href="#">Press</a>
		<a href="#">Newsletters</a>
		<a href="#">Photo Gallery</a>
		<a href="#">Video</a>
		<a href="#">API</a>
	</nav>
	<nav id=legal>
		<a href="//creativecommons.org/licenses/by-sa/3.0/">&copy;2077 cc by-sa</a>
		<a href="privacy">Privacy</a>
		<a href="accessibility">Accessibility</a>
	</nav>
</footer>

dabblet.js

setInterval(function(){
	this.innerHTML = (new Date).toLocaleTimeString()
}.bind(document.getElementById('time')),1e3)

settings.json

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