jonathansampson/dabblet.css

## dabblet.css
/* Make it a marquee */
.marquee {
    width: 450px;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 50s linear infinite;
}

/* Make it move */
@keyframes marquee {
    0%   { text-indent: 30em }
    100% { text-indent: -105em }
}

/* Make it pretty */
.microsoft {
    padding-left: 1.5em;
    position: relative;
    font: 16px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}

/* ::before was :before before ::before was ::before - kthx */
.microsoft:before, .microsoft::before {
    content: '';
    position: absolute;
    top: -1em; left: -1em;
    width: .5em; height: .5em;
    box-shadow: 1.0em 1.25em 0 #F65314,
        		1.6em 1.25em 0 #7CBB00,
        		1.0em 1.85em 0 #00A1F1,
        		1.6em 1.85em 0 #FFBB00;
}

/* Style the links */
.vanity {
    color: #333;
    text-align: center;
    font: .75em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}

.vanity a, .microsoft a {
    color: #1570A6;
    transition: color .5s;
    text-decoration: none;
}

.vanity a:hover, .microsoft a:hover {
    color: #F65314;
}

/* Style toggle button */
.toggle {
	display: block;
    margin: 2em auto;
}


## dabblet.html
<!-- Wanted to see how easily marquees could be constructed with CSS:
     - This demo uses -prefix-free
     - Requires manual setting of the end text-indent
     - Can rmeove /* Make it pretty */ comment & below
     - Brought to you by @jonathansampson -->
<p class="microsoft marquee">Windows 8 and Windows RT are focused on your life—your friends and family, your apps, and your stuff. With new things like the <a href="http://windows.microsoft.com/en-US/windows-8/start-screen">Start screen</a>, <a href="http://windows.microsoft.com/en-US/windows-8/charms">charms</a>, and a <a href="http://windows.microsoft.com/en-US/windows-8/microsoft-account">Microsoft account</a>, you can spend less time searching and more time doing.</p>
<button class="toggle">Toggle Beautification</button>
<p class="vanity">
    <a href="https://twitter.com/jonathansampson">@jonathansampson</a> of
    <a href="https://twitter.com/appendTo">@appendTo</a>
</p><!-- content to be placed inside <body>…</body> -->

## dabblet.js
$(".toggle").on("click", function () {
    $(".marquee").toggleClass("microsoft");
});// alert('Hello world!');

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/* Make it a marquee */
	.marquee {
	width: 450px;
	margin: 0 auto;
	overflow: hidden;
	white-space: nowrap;
	box-sizing: border-box;
	animation: marquee 50s linear infinite;
	}

	/* Make it move */
	@keyframes marquee {
	0% { text-indent: 30em }
	100% { text-indent: -105em }
	}

	/* Make it pretty */
	.microsoft {
	padding-left: 1.5em;
	position: relative;
	font: 16px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
	}

	/* ::before was :before before ::before was ::before - kthx */
	.microsoft:before, .microsoft::before {
	content: '';
	position: absolute;
	top: -1em; left: -1em;
	width: .5em; height: .5em;
	box-shadow: 1.0em 1.25em 0 #F65314,
	1.6em 1.25em 0 #7CBB00,
	1.0em 1.85em 0 #00A1F1,
	1.6em 1.85em 0 #FFBB00;
	}

	/* Style the links */
	.vanity {
	color: #333;
	text-align: center;
	font: .75em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
	}

	.vanity a, .microsoft a {
	color: #1570A6;
	transition: color .5s;
	text-decoration: none;
	}

	.vanity a:hover, .microsoft a:hover {
	color: #F65314;
	}

	/* Style toggle button */
	.toggle {
	display: block;
	margin: 2em auto;
	}
	<!-- Wanted to see how easily marquees could be constructed with CSS:
	- This demo uses -prefix-free
	- Requires manual setting of the end text-indent
	- Can rmeove /* Make it pretty */ comment & below
	- Brought to you by @jonathansampson -->
	<p class="microsoft marquee">Windows 8 and Windows RT are focused on your life—your friends and family, your apps, and your stuff. With new things like the <a href="http://windows.microsoft.com/en-US/windows-8/start-screen">Start screen</a>, <a href="http://windows.microsoft.com/en-US/windows-8/charms">charms</a>, and a <a href="http://windows.microsoft.com/en-US/windows-8/microsoft-account">Microsoft account</a>, you can spend less time searching and more time doing.</p>
	<button class="toggle">Toggle Beautification</button>
	<p class="vanity">
	<a href="https://twitter.com/jonathansampson">@jonathansampson</a> of
	<a href="https://twitter.com/appendTo">@appendTo</a>
	</p><!-- content to be placed inside <body>…</body> -->
	$(".toggle").on("click", function () {
	$(".marquee").toggleClass("microsoft");
	});// alert('Hello world!');