lucasad/dabblet.css

## dabblet.css
/**
 * CSS Modals (no Javascript)
 */

.modal-input, .modal-outer, .modal-inner
{
	display: none;
}

:checked + .modal-outer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .8);
    z-index: 1;
    display: block;
}

:checked + .modal-outer > .modal-inner {
    position: fixed;
    display: block;
    margin: auto;
    max-width: 80%;
    height: auto;
    left: 0;
    right: 0;
    top: 0;
    background: white;
    z-index: 2;
    border: 1px solid black;
    border-radius: 1em;
}

.modal-inner > *
{
	font-family: "DejaVu Serif";
	padding: 1em;
}

.modal-inner header
{
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	margin-top: 1em;
	font-family: sans;
	padding: .5em;
}

.modal-inner header h1
{
	padding: 0 .5em;
	margin: 0;
	border-radius: 0 1em;
	color: #002255;
}

.modal-close
{
	color: black;
    float: right;
    display: block;
    font-weight: bold;
    font-size: 30px;
    vertical-align: super;
    line-height: .6;
}

.modal-close:hover
{
   text-shadow: -1px -1px #eee;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<input type="radio" name="modals" id="modal-close" class="modal-input" checked />

<input type="radio" name="modals" id="modal-1" class="modal-input" />
<div class="modal-outer">
    <div class="modal-inner">
    	<header>
    		<label for="modal-close" class="modal-close"><sup>×</sup></label>
    		<h1>First Modal</h1>
        </header>
        <p>You think water moves fast? You should see ice.
        	It moves like it has a mind.
         	Like it knows it killed the world once and got a taste for murder.
         	After the avalanche, it took us a week to climb out.
         	Now, I don't know exactly when we turned on each other,
         	but I know that seven of us survived the slide&hellip; and only five made it out.
         	Now we took an oath, that I'm breaking now.
         	We said we'd say it was the snow that killed the other two, but it wasn't.
         	Nature is lethal but it doesn't hold a candle to man.</p>
        <footer>
        	<label for="modal-2"><button>Next &raquo;</button></label>
        </footer>
    </div>
</div>

<input type="radio" name="modals" id="modal-2" class="modal-input" />
<div class="modal-outer">
    <div class="modal-inner">
        <header>
			<label for="modal-close" class="modal-close">×</label>
    		<h1>Second Modal</h1>
        </header>
        <p>The lysine contingency - it's intended to prevent the spread of the animals is case they ever got off the island.
        	Dr. Wu inserted a gene that makes a single faulty enzyme in protein metabolism.
        	The animals can't manufacture the amino acid lysine.
        	Unless they're continually supplied with lysine by us,
        	they'll slip into a coma and die.</p>
		<footer>
			<label for="modal-1"><button>&laquo; Previous</button></label>
		</footer>
    </div>
</div>
<label for="modal-1"><button>Open Modal 1</button></label>
<label for="modal-2"><button>Open Modal 2</button></label>

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
	/**
	* CSS Modals (no Javascript)
	*/

	.modal-input, .modal-outer, .modal-inner
	{
	display: none;
	}

	:checked + .modal-outer {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, .8);
	z-index: 1;
	display: block;
	}

	:checked + .modal-outer > .modal-inner {
	position: fixed;
	display: block;
	margin: auto;
	max-width: 80%;
	height: auto;
	left: 0;
	right: 0;
	top: 0;
	background: white;
	z-index: 2;
	border: 1px solid black;
	border-radius: 1em;
	}

	.modal-inner > *
	{
	font-family: "DejaVu Serif";
	padding: 1em;
	}

	.modal-inner header
	{
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	margin-top: 1em;
	font-family: sans;
	padding: .5em;
	}

	.modal-inner header h1
	{
	padding: 0 .5em;
	margin: 0;
	border-radius: 0 1em;
	color: #002255;
	}

	.modal-close
	{
	color: black;
	float: right;
	display: block;
	font-weight: bold;
	font-size: 30px;
	vertical-align: super;
	line-height: .6;
	}

	.modal-close:hover
	{
	text-shadow: -1px -1px #eee;
	}
	<!-- content to be placed inside <body>…</body> -->
	<input type="radio" name="modals" id="modal-close" class="modal-input" checked />

	<input type="radio" name="modals" id="modal-1" class="modal-input" />
	<div class="modal-outer">
	<div class="modal-inner">
	<header>
	<label for="modal-close" class="modal-close"><sup>×</sup></label>
	<h1>First Modal</h1>
	</header>
	<p>You think water moves fast? You should see ice.
	It moves like it has a mind.
	Like it knows it killed the world once and got a taste for murder.
	After the avalanche, it took us a week to climb out.
	Now, I don't know exactly when we turned on each other,
	but I know that seven of us survived the slide… and only five made it out.
	Now we took an oath, that I'm breaking now.
	We said we'd say it was the snow that killed the other two, but it wasn't.
	Nature is lethal but it doesn't hold a candle to man.</p>
	<footer>
	<label for="modal-2"><button>Next »</button></label>
	</footer>
	</div>
	</div>

	<input type="radio" name="modals" id="modal-2" class="modal-input" />
	<div class="modal-outer">
	<div class="modal-inner">
	<header>
	<label for="modal-close" class="modal-close">×</label>
	<h1>Second Modal</h1>
	</header>
	<p>The lysine contingency - it's intended to prevent the spread of the animals is case they ever got off the island.
	Dr. Wu inserted a gene that makes a single faulty enzyme in protein metabolism.
	The animals can't manufacture the amino acid lysine.
	Unless they're continually supplied with lysine by us,
	they'll slip into a coma and die.</p>
	<footer>
	<label for="modal-1"><button>« Previous</button></label>
	</footer>
	</div>
	</div>
	<label for="modal-1"><button>Open Modal 1</button></label>
	<label for="modal-2"><button>Open Modal 2</button></label>