Tab Station

dabblet.css

/* Tab Station */
@charset 'UTF-8';
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
	
/* toggling css in its crudest form */
form { max-height:0; overflow:hidden; background:#ccc; 
	transition:.5s }
:checked + form { max-height:54em; padding-bottom:1em }

/* demo styles */
* { font:1em/1.6 Source Sans Pro;border-radius:.3em;
 	box-sizing:border-box; padding:0; margin:0 }
html { background:#222 }
body { min-width:22em; max-width:35em; margin:1em auto }

label { background:#ccc; display:inline-block; padding:0 1em;
	cursor:pointer; border:1px solid transparent;
	border-radius:0 }
	[for=post_to_feed] { border-bottom-color:#222 }
	[for=create_a_task] { border-top-color:#222 }

form { padding:1ex 1em; border-radius:0 }
	form input, form textarea { display:block; width:100%;
		margin:1em 0; padding:.3em }
	form button { padding:.3em 1em }
	form input, form textarea, form button { border:1px solid #999;
		background:white }
	
#activity > * { padding:1em; margin:.3em;
	background:hsl(0,0%,97%) }
	.comment, .task { overflow:hidden }
	.comment [rel=author] { float:right }
	.comment time { float:right; clear:right }

dabblet.html

<input type=radio name=tabs id=post_to_feed hidden>
<form>
    <input name=comment placeholder=comment>
    <button> Update </button>  
</form>
<label for=post_to_feed> Post to Feed </label>

<label for=create_a_task> Create a Task </label> 
<input type=radio name=tabs id=create_a_task hidden>
<form>
	<input name=title placeholder=task>
	<textarea placeholder=description></textarea>
	<button> Create </button>
</form>


<section id=activity>
  <article class=task data-ticket=1480>
   	<input type=checkbox> 
   	<a href="ticket/1480"> Locked file name is editable </a>
  </article>
  
  <article class=comment>
  	I&rsquo;m gonna need you to work on Saturday, mmkay?
  	<a rel=author>Lumbergh</a> <time>a minute ago</time>
  </article>
   
</section>

dabblet.js

// alert('Hello world!');

settings.json

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