K-12 Education Launchpad

dabblet.css

/* K-12 Education Launchpad */

dabblet.html

<figure class="launchpad">
<input>
<style>
.launchpad { background:#0053a0; color:white;
	text-align:center; padding:1em; margin:0 }
.launchpad input { display:block; margin:1em auto;
	min-width:12em; width:80%; max-width:35em;
	font-size:1.27rem; padding:.62em;               
	border:none; border-radius: 3px }
.launchpad button { border:1px solid; background:hsla(209,100%,20%,.6);
	font-size:.786rem; line-height:2.6; color:inherit;
	padding:0 2.6em; }
</style>
<button> KPIs </button>
<button> Grouped Performance </button>
<button> Recent Reports by Peers </button>
<button> Advanced Search </button>

<style>
.launchpad, .launchpad * { position:relative }
.launchpad * { z-index:1 }
.launchpad:before { 
  box-shadow:0 0 1px hsla(209,100%,20%,.9) inset;
  content:''; position:absolute; top:0; right:0; left:0; bottom:0; opacity:; z-index:0;
  background:url(https://upload.wikimedia.org/wikipedia/commons/2/2d/LAUSD_HQ_Bldg.jpg)
  	no-repeat 0 0 /cover }  	

@keyframes pan {  
to { background-position:0 100%; box-shadow:0 0 100px 100px hsla(209,100%,20%,.9) inset }}
.launchpad:hover:before { animation:15s cubic-bezier(1,.1,.1,1) 2 alternate pan}
</style>
</figure>

dabblet.js

// alert('Hello world!');

settings.json

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