splash , japanized kiwi

dabblet.css

/* splash , japanized kiwi */
html {height:100%;width:100%;display:table;background:#A0CE13;}
body {display:table-cell;vertical-align:middle;}
nav            	{padding:10px; width:600px;margin:auto;
				 position:relative;
				 background:
				 radial-gradient( yellow , #A0CE13 68px, white 70px , green 76px, transparent 80px) no-repeat,
				 linear-gradient(90deg, transparent 48%, rgba(0,0,0,0.3) 50%, transparent 52%)  ,
				 linear-gradient(10deg, transparent 48%, rgba(0,0,0,0.3) 50%, transparent 52%) ,
				 linear-gradient(-10deg, transparent 48%, rgba(0,0,0,0.3) 50%, transparent 52%) ,
				 linear-gradient( 15deg, transparent 48%, rgba(0,0,0,0.3) 50%, transparent 52%) ,
				 linear-gradient( -15deg, transparent 48%, rgba(0,0,0,0.3) 50%, transparent 52%) ,
				 linear-gradient( 0deg, transparent 48%, rgba(0,0,0,0.3) 50%, transparent 52%) ,
				 linear-gradient( 45deg, transparent 48%, rgba(0,0,0,0.3) 50%, transparent 52%),
				 linear-gradient(-45deg, transparent 48%, rgba(0,0,0,0.3) 50%, transparent 52%) ,
				 linear-gradient( 20deg, transparent 48%, rgba(0,0,0,0.3) 50%, transparent 52%),
				 linear-gradient(-20deg, transparent 48%, rgba(0,0,0,0.3) 50%, transparent 52%) ,
				 linear-gradient( 30deg, transparent 48%, rgba(0,0,0,0.3) 50%, transparent 52%),
				 linear-gradient(-30deg, transparent 48%, rgba(0,0,0,0.3) 50%, transparent 52%) ,
				 linear-gradient(35deg, transparent 48%, rgba(0,0,0,0.3) 50%, transparent 52%) ,
				 linear-gradient(-35deg, transparent 48%, rgba(0,0,0,0.3) 50%, transparent 52%) ,
				 linear-gradient(25deg, transparent 48%, rgba(0,0,0,0.3) 50%, transparent 52%) ,
				 linear-gradient(-25deg, transparent 48%, rgba(0,0,0,0.3) 50%, transparent 52%) ,
				 linear-gradient(55deg, transparent 48%, rgba(0,0,0,0.3) 50%, transparent 52%) ,
				 linear-gradient(-55deg, transparent 48%, rgba(0,0,0,0.3) 50%, transparent 52%) ,
				 linear-gradient(65deg, transparent 48%, rgba(0,0,0,0.3) 50%, transparent 52%)	,
				 linear-gradient(-65deg, transparent 48%, rgba(0,0,0,0.3) 50%, transparent 52%),
				 linear-gradient(75deg, transparent 48%, rgba(0,0,0,0.3) 50%, transparent 52%)	,
				 linear-gradient(-75deg, transparent 48%, rgba(0,0,0,0.3) 50%, transparent 52%)	,
				 linear-gradient(5deg, transparent 48%, rgba(0,0,0,0.3) 50%, transparent 52%)	,
				 linear-gradient(-5deg, transparent 48%, rgba(0,0,0,0.3) 50%, transparent 52%)		 ;
				 background-size: 50% 80% , 100%, 100%,100%, 100%,100%,100%,100%,
				 100%, 100%, 100%, 100%,100%,100%,100%,100%,100%,100%,100%,100%,100%,100%,100%,100%,100%,100%;
background-position:center;
background-color:gold;}
nav , p , label	{box-shadow: 0 0 5px #A0CE13, inset -2px 2px 2px #A0CE13;
				 border:solid 1px ;border-radius:0.5em;}
:not(:checked) ~ p {opacity:0;height:4px;transition:1s;}
:not([type="radio"]):checked ~ p , label
		      	{margin:10px 20px;display:block;padding:0 1em;line-height:40px;height:40px;
		      	background:rgba(0,0,0,0.2)  linear-gradient(0deg,rgba(60,60,60,0.2),rgba(0,0,0,0.2),rgba(60,60,60,0.2));
				 color:#ddd;opacity:1;
				 }
input:checked  ~ p:hover /*, input:checked  ~:nth-of-type(4) */, label{
				 background: #333 linear-gradient(0deg,#222,#000,#222);transition:1s;
				 }
nav > [type="checkbox"] 
				{position:absolute;left:-9999px;}
:not(:checked) + label 
				{position:absolute;top:65px;width:520px;z-index:1;text-align:center;transition: 1s;cursor:pointer}
:checked + label
				{position:absolute; left:-999px;transform:rotate(180deg);transition:1s;}
label::after, label::before 
				{content:''; position:absolute;
				border:solid 9px transparent;border-bottom-color:gray;
				z-index:1;right:1em;top:0;
				box-shadow: 0  3px  5px -3px white}
label::before 	{top:auto;bottom:0;transform:rotate(180deg) }
label span {position:absolute;bottom:60px;left:200px;color:#A0CE13;font-size:2em;text-shadow:0 0 1px #000, 0 0 3px #333;
font-weight:bold;transform:rotate(-10deg)}
p span {opacity:0;font-size:30px;vertical-align:middle;margin: 0 0.25em 0 0; color:#A0CE13;}
p:hover span {opacity:1;}
a  {display:inline-block;color :#ddd;line-height:14px;vertical-align:middle;}

dabblet.html

<nav> 
<input type="checkbox" id="checkme" name="checkme"/>
<label for="checkme" ><span> Je veux !</span> Click for freebies ! </label>
<p><span> free !</span><a href="#"> link <br/> link </a></p>
<p><span> free !</span><a href="#"> link </a></p>
<p><span> free !</span><a href="#"> link </a></p>
<p><span> free !</span><a href="#"> link <br/> link link link </a></p>
<p><span> free !</span><a href="#"> link </a></p>
<p><span> free !</span><a href="#"> link </a></p>
<p><span> free !</span><a href="#"> link </a></p>
</nav>

dabblet.js

// alert('Hello world!');

settings.json

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