amcgregor · September 14, 2023 06:55
diff --git a/404.html b/404.html
 <!DOCTYPE html><html lang=en>
 <title>Page Not Found</title>
 <meta charset=utf-8>
 <meta name=viewport content="width=device-width,initial-scale=1">

 <h1>Page Not Found</h1>
 <p>Sorry, but the page you were trying to view does not exist.</p>
diff --git a/base.scss b/base.scss
 /* "Theme" Variable Declarations */

 $theme-font: 12px/15px Verdana, sans-serif !default;
 $theme-background: #fff !default;
 $theme-foreground: #444 !default;
 $theme-space: 10px !default;


 :root {
 	// Expose our SASS variables out to CSS, and allow for overloading through inheritance.
 	--theme-font: #{$theme-font};
 	--theme-background: #{$theme-background};
 	--theme-foreground: #{$theme-foreground};
 	--theme-space: #{$theme-space};
 }

 @media (prefers-color-scheme: dark) {
 	// Extremely rudimentary "dark mode" support inverts foreground and background.
 	:root {
 		--theme-background: #{$theme-foreground};
 		--theme-foreground: #{$theme-background};
 	}
 }


 /* Meyers Reset / "Public Domain" / v2.0 / 20110126 / https://meyerweb.com/eric/tools/css/reset/ */
 // Modified to apply "theme"-appropriate defaults, where appropriate, and incorporate menu lists.
 // Additionally modified to omit obsolete and eliminated elements such as <center>, <big>, <strike>, etc.

 html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 	margin: 0;
 	padding: 0;
 	border: none;
 	font-size: 100%;
 	font: inherit;
 	vertical-align: baseline;
 }

 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
 	// HTML5 display-role reset for older browsers.
 	display: block;
 }

 html, body {
 	height: 100%;
 }

 body {
 	font: var(--theme-font);
 	color: var(--theme-foreground);
 	background: var(--theme-background);
 }

 ol, ul, menu {
 	list-style: none;
 }

 blockquote, q {
 	quotes: none;
 	cursor: text;  // Indicate ability to interact with as text, e.g select.
 }

 blockquote:before, blockquote:after, q:before, q:after {
 	content: '';
 	content: none;
 }

 table {
 	// Sensible default border rules for tables.
 	border-collapse: collapse;
 	border-spacing: 0;
 }

 * {
 	font: inherit;  // By default, inherit font properties all the way up to <body>.
 	cursor: default;  // Eliminate all default mouse cursor customization.
 }

 a, button {
 	cursor: pointer;  // Indicate ability to click as an action.
 }

 input:read-only, textarea:read-only, [contenteditable]:read-only {
 	// Above selectors scoped to prevent matching the entire page.
 	cursor: not-allowed;  // Note how we're defining the _exceptional_ case, here.
 }

 :read-write {
 	cursor: text;  // Indicate ability to manipulate as mutable text.
 }

 :read-write img, :read-write input, :read-write textarea {
 	cursor: pointer;  // Images and fields aren't text, let's be careful about inline-editable ones.
 }

 // Automatically eliminate conflicting margins.
 // Specifically, margins on leading and final elements which would extend "beyond" the container.
 // Correct implementation would require the margin to be applied to the container, if intentional.
 // Alternatively, applied as padding to the container instead.

 :first-child {
 	margin-top: 0 !important;
 	margin-left: 0 !important;
 }

 :last-child {
 	margin-bottom: 0 !important;
 	margin-right: 0 !important;
 }

 // Add back spacing between structural elements.

 header + *,  // Content immediately following a header should be separated from that header.
 footer,  // All footers should be spaced away from the section they represent.
 section + section,  // Separate sections from each-other.
 * + p  // Paragraphs deserve a little space from any preceeding content.
 { margin-top: var(--theme-space); }


 /* Language-Dependent Styles */

 :lang(en) {
 	// Apply English-style quoting.
 	q { quotes: '“' '”' '‘' '’'; }
 	
 	// Highlight other languages by not underlining the current one in navigation.
 	a.lang-en { text-decoration: none; }
 }

 :lang(fr) {
 	// Apply French-style quoting.
 	q { quotes: '« ' ' »'; }
 	
 	// Highlight other languages by not underlining the current one in navigation.
 	a.lang-fr { text-decoration: none; }
 }
diff --git a/basic.html b/basic.html
 <!DOCTYPE html><html lang=en>
 <title>Your page title here.</title>
 <!-- The HTML element itself is optional if not assigning additional attributes; I tend to offer localization, though. -->

 <meta charset=utf-8>
 <meta name=viewport content="width=device-width, initial-scale=1">
 <meta name=description content="">

 <link rel=stylesheet href=base.css>
 <script src=//example.com/external.js async>// This won't have DOM ready.</script>


 <p>Really.</p>


 <script>
 	// Do things requiring the DOM be ready here.
 	// No need for onDomReady. It's ready.
 </script>
diff --git a/html5boilerplate.html b/html5boilerplate.html
 <!DOCTYPE html><html lang=en>
 <title>Your page title here.</title>

 <meta charset=utf-8>
 <meta name=description content="">
 <meta name=viewport content="width=device-width, initial-scale=1">
 <meta name=theme-color content=#fafafa>
 <link rel=stylesheet href=base.css>
 <link rel=manifest href=site.webmanifest>
 <link rel=apple-touch-icon href=icon.png>


 <p>Really.</p>
diff --git a/LICENSE.md b/LICENSE.md
diff --git a/login.html b/login.html
 <!DOCTYPE html><html lang=en>
 <title>Sign In — CEGID RITA</title>

 <meta charset=utf-8>
 <meta name=description content="">
 <meta name=viewport content="width=device-width, initial-scale=1">
 <meta name=theme-color content=#fafafa>
 <link rel=stylesheet href=base.css>
 <link rel=stylesheet href=authn.css>
 <link rel=apple-touch-icon href=icon.png>


 <form action=/account/authenticate method=post id=authn>
 	<h1>CEGID</h1>
 	<h2>RITA</h2>
 	<h3>Sign In</h3>
 	
 	<dl>
 		<dt>Identity (User Name or E-Mail Address)</dt>
 		<dd><input id=identity-field name=identity autofocus placeholder="OTP, User Name, or E-Mail Address" value=""></dd>
 		
 		<dt>Password</dt>
 		<dd><input id=password-field type=password name=password placeholder="Your Password" value=""></dd>
 		
 		<dt id=authn-actions>Actions</dt>
 		<dd>
 			<nav>
 				<menu>
 					<li><a href=/account/register>Sign Up</a>
 					<li><a href=/account/lost>Forgot</a>
 					<li><input type=submit value="Sign In">
 				</menu>
 			</nav>
 		</dd>
 	</dl>
 </form>
diff --git a/minimal.html b/minimal.html
 <!DOCTYPE html>
 <title>Yes, really.</title>
 <p>This is everything you need.
diff --git a/sample.py b/sample.py
 # A "template engine" generating an optimized HTML serialization.
 # https://github.com/amcgregor/python-samples/blob/main/Metaprogramming/Alternate%20Class%20Instantiation.ipynb
 # Based on https://github.com/marrow/tags

 from html5 import html, head, title, body, p

 page = html [
        head [
            title [ "I'm really not kidding you." ],
        ],
        body [
            p(classList={"best"}) [ "This is a complete and fully-formed HTML document." ],
        ],
    ]

 print(page)
 # <!DOCTYPE html>
 # <title>I'm really not kidding you.</title>
 # <p class=best>This is a complete and fully-formed HTML document.</p>
diff --git a/tweet-example-corrected.html b/tweet-example-corrected.html
 <!DOCTYPE html><title>What is needed…</title><p>Is way, way less markup. This is perfectly semantic and valid as a standalone HTML document with clearly defined &lt;head&gt; and &lt;body&gt; parts. Really. HTML5Boilerplate is &gt;200% larger than it needs to be.
diff --git a/xray.css b/xray.css
 /*

 Can be seen demonstrated: https://codepen.io/amcgregor/pen/PoZoPYv?editors=1100

 Even more dramatically, using a sanitized Facebook landing page: https://codepen.io/amcgregor/full/jOWObBM

 */

 body { background-color: #000; color: transparent !important; font: 12px/15px "Open Sans", sans-serif; }
 * { color: inherit !important; font: inherit !important; }

 body > * { background-color: #111; }
 body > * > * { background-color: #222; }
 body > * > * > * { background-color: #333; }
 body > * > * > * > * { background-color: #444; }
 body > * > * > * > * > * { background-color: #555; }
 body > * > * > * > * > * > * { background-color: #666; }
 body > * > * > * > * > * > * > * { background-color: #777; }
 body > * > * > * > * > * > * > * > * { background-color: #888; }
 body > * > * > * > * > * > * > * > * > * { background-color: #999; }
 body > * > * > * > * > * > * > * > * > * > * { background-color: #aaa; }
 body > * > * > * > * > * > * > * > * > * > * > * { background-color: #bbb; }
 body > * > * > * > * > * > * > * > * > * > * > * > * { background-color: #ccc; }
 body > * > * > * > * > * > * > * > * > * > * > * > * > * { background-color: #ddd; }
 body > * > * > * > * > * > * > * > * > * > * > * > * > * > * { background-color: #eee; }
 body > * > * > * > * > * > * > * > * > * > * > * > * > * > * > * { background-color: #fff; }
 body > * > * > * > * > * > * > * > * > * > * > * > * > * > * > * > * { background-color: #f0f; } /* Out-of-gamut! */
 body > * > * > * > * > * > * > * > * > * > *:after { color: black !important; }

 /* Block-Level Elements */

 address, article, aside, blockquote, details, dialog, dd, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, li, main, nav, ol, p, pre, section, table, ul {
 	margin: 10px 0;
 	padding: 10px;
 	border: 1px solid rgba(127,127,127,0.25);
 	position: relative;
 }

 address:after, article:after, aside:after, blockquote:after, details:after, dialog:after, dd:after, div:after, dl:after, dt:after, fieldset:after, figcaption:after, figure:after, footer:after, form:after, h1:after, h2:after, h3:after, h4:after, h5:after, h6:after, header:after, hgroup:after, li:after, main:after, nav:after, ol:after, p:after, pre:after, section:after, table:after, ul:after {
 	position: absolute;
 	top: 0;
 	left: 0;
 	padding: 2px 5px;
 	background-color: rgba(127,127,127,0.5);
 	text-transform: uppercase;
 	font: bold 6px/1.8 "Open Sans", sans-serif;
 }

 /* Ones that should have some padding applied to them... */
 ul { padding-left: 2em; }

 address:after { content: 'address' ' #' attr(id) ' (' attr(class) ')' }
 article:after { content: 'article' ' #' attr(id) ' (' attr(class) ')' }
 aside:after { content: 'aside' ' #' attr(id) ' (' attr(class) ')' }
 blockquote:after { content: 'blockquote' ' #' attr(id) ' (' attr(class) ')' }
 details:after { content: 'details' ' #' attr(id) ' (' attr(class) ')' }
 dialog:after { content: 'dialog' ' #' attr(id) ' (' attr(class) ')' }
 dd:after { content: 'dd' ' #' attr(id) ' (' attr(class) ')' }
 div:after { content: 'div' ' #' attr(id) ' (' attr(class) ')' }
 dl:after { content: 'dl' ' #' attr(id) ' (' attr(class) ')' }
 dt:after { content: 'dt' ' #' attr(id) ' (' attr(class) ')' }
 fieldset:after { content: 'fieldset' ' #' attr(id) ' (' attr(class) ')' }
 figcaption:after { content: 'figcaption' ' #' attr(id) ' (' attr(class) ')' }
 figure:after { content: 'figure' ' #' attr(id) ' (' attr(class) ')' }
 footer:after { content: 'footer' ' #' attr(id) ' (' attr(class) ')' }
 form:after { content: 'form' ' #' attr(id) ' (' attr(class) ')' }
 h1:after { content: 'h1' ' #' attr(id) ' (' attr(class) ')' }
 h2:after { content: 'h2' ' #' attr(id) ' (' attr(class) ')' }
 h3:after { content: 'h3' ' #' attr(id) ' (' attr(class) ')' }
 h4:after { content: 'h4' ' #' attr(id) ' (' attr(class) ')' }
 h5:after { content: 'h5' ' #' attr(id) ' (' attr(class) ')' }
 h6:after { content: 'h6' ' #' attr(id) ' (' attr(class) ')' }
 header:after { content: 'header' ' #' attr(id) ' (' attr(class) ')' }
 hgroup:after { content: 'hgroup' ' #' attr(id) ' (' attr(class) ')' }
 li:after { content: 'li' ' #' attr(id) ' (' attr(class) ')' }
 main:after { content: 'main' ' #' attr(id) ' (' attr(class) ')' }
 nav:after { content: 'nav' ' #' attr(id) ' (' attr(class) ')' }
 ol:after { content: 'ol' ' #' attr(id) ' (' attr(class) ')' }
 p:after { content: 'p' ' #' attr(id) ' (' attr(class) ')' }
 pre:after { content: 'pre' ' #' attr(id) ' (' attr(class) ')' }
 section:after { content: 'section' ' #' attr(id) ' (' attr(class) ')' }
 table:after { content: 'table' ' #' attr(id) ' (' attr(class) ')' }
 ul:after { content: 'ul' ' #' attr(id) ' (' attr(class) ')' }

 /* Inline Elements
 	a, abbr, acronym, b, bdi, bdo, big, cite, code, data, datalist, del, dfn, em, i, img, input, ins, kbd, label, mark, meter, output, picture, progress, q, ruby, s, samp, slot, small, span, strong, sub, sup, time, u, tt, var, wbr
 */

 a, abbr, acronym, b, bdi, bdo, big, cite, code, data, datalist, del, dfn, em, i, img, input, ins, kbd, label, mark, meter, output, picture, progress, q, ruby, s, samp, slot, small, span, strong, sub, sup, time, u, tt, var, wbr {
 	display: inline-block;
 	position: relative;
 	padding: 5px;
 	box-decoration-break: clone;
 }

 a:after, abbr:after, acronym:after, b:after, bdi:after, bdo:after, big:after, cite:after, code:after, data:after, datalist:after, del:after, dfn:after, em:after, i:after, img:after, input:after, ins:after, kbd:after, label:after, mark:after, meter:after, output:after, picture:after, progress:after, q:after, ruby:after, s:after, samp:after, slot:after, small:after, span:after, strong:after, sub:after, sup:after, time:after, u:after, tt:after, var:after, wbr:after {
 	position: absolute;
 	top: 0;
 	left: 0;
 	padding: 2px 5px;
 	background-color: rgba(0,0,0,.5);
 	text-transform: uppercase;
 	font: bold 6px/1.8 "Open Sans", sans-serif;
 }

 a:after { content: 'a' }
 abbr:after { content: 'abbr' }
 acronym:after { content: 'acronym' }
 b:after { content: 'b' }
 bdi:after { content: 'bdi' }
 bdo:after { content: 'bdo' }
 big:after { content: 'big' }
 cite:after { content: 'cite' }
 code:after { content: 'code' }
 data:after { content: 'data' }
 datalist:after { content: 'datalist' }
 del:after { content: 'del' }
 dfn:after { content: 'dfn' }
 em:after { content: 'em' }
 i:after { content: 'i' }
 img:after { content: 'img' }
 input:after { content: 'input' }
 ins:after { content: 'ins' }
 kbd:after { content: 'kbd' }
 label:after { content: 'label' }
 mark:after { content: 'mark' }
 meter:after { content: 'meter' }
 output:after { content: 'output' }
 picture:after { content: 'picture' }
 progress:after { content: 'progress' }
 q:after { content: 'q' }
 ruby:after { content: 'ruby' }
 s:after { content: 's' }
 samp:after { content: 'samp' }
 slot:after { content: 'slot' }
 small:after { content: 'small' }
 span:after { content: 'span' }
 strong:after { content: 'strong' }
 sub:after { content: 'sub' }
 sup:after { content: 'sup' }
 time:after { content: 'time' }
 u:after { content: 'u' }
 tt:after { content: 'tt' }
 var:after { content: 'var' }
 wbr:after { content: 'wbr' }

 /* Clean Up a Bit */

 :first-child {
 	margin-top: 0 !important;
 	margin-left: 0 !important;
 }

 :last-child {
 	margin-bottom: 0 !important;
 	margin-right: 0 !important;
 }
	<!DOCTYPE html><html lang=en>
	<title>Page Not Found</title>
	<meta charset=utf-8>
	<meta name=viewport content="width=device-width,initial-scale=1">

	<h1>Page Not Found</h1>
	<p>Sorry, but the page you were trying to view does not exist.</p>
	/* "Theme" Variable Declarations */

	$theme-font: 12px/15px Verdana, sans-serif !default;
	$theme-background: #fff !default;
	$theme-foreground: #444 !default;
	$theme-space: 10px !default;


	:root {
	// Expose our SASS variables out to CSS, and allow for overloading through inheritance.
	--theme-font: #{$theme-font};
	--theme-background: #{$theme-background};
	--theme-foreground: #{$theme-foreground};
	--theme-space: #{$theme-space};
	}

	@media (prefers-color-scheme: dark) {
	// Extremely rudimentary "dark mode" support inverts foreground and background.
	:root {
	--theme-background: #{$theme-foreground};
	--theme-foreground: #{$theme-background};
	}
	}


	/* Meyers Reset / "Public Domain" / v2.0 / 20110126 / https://meyerweb.com/eric/tools/css/reset/ */
	// Modified to apply "theme"-appropriate defaults, where appropriate, and incorporate menu lists.
	// Additionally modified to omit obsolete and eliminated elements such as <center>, <big>, <strike>, etc.

	html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: none;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	}

	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	// HTML5 display-role reset for older browsers.
	display: block;
	}

	html, body {
	height: 100%;
	}

	body {
	font: var(--theme-font);
	color: var(--theme-foreground);
	background: var(--theme-background);
	}

	ol, ul, menu {
	list-style: none;
	}

	blockquote, q {
	quotes: none;
	cursor: text; // Indicate ability to interact with as text, e.g select.
	}

	blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
	}

	table {
	// Sensible default border rules for tables.
	border-collapse: collapse;
	border-spacing: 0;
	}

	* {
	font: inherit; // By default, inherit font properties all the way up to <body>.
	cursor: default; // Eliminate all default mouse cursor customization.
	}

	a, button {
	cursor: pointer; // Indicate ability to click as an action.
	}

	input:read-only, textarea:read-only, [contenteditable]:read-only {
	// Above selectors scoped to prevent matching the entire page.
	cursor: not-allowed; // Note how we're defining the _exceptional_ case, here.
	}

	:read-write {
	cursor: text; // Indicate ability to manipulate as mutable text.
	}

	:read-write img, :read-write input, :read-write textarea {
	cursor: pointer; // Images and fields aren't text, let's be careful about inline-editable ones.
	}

	// Automatically eliminate conflicting margins.
	// Specifically, margins on leading and final elements which would extend "beyond" the container.
	// Correct implementation would require the margin to be applied to the container, if intentional.
	// Alternatively, applied as padding to the container instead.

	:first-child {
	margin-top: 0 !important;
	margin-left: 0 !important;
	}

	:last-child {
	margin-bottom: 0 !important;
	margin-right: 0 !important;
	}

	// Add back spacing between structural elements.

	header + *, // Content immediately following a header should be separated from that header.
	footer, // All footers should be spaced away from the section they represent.
	section + section, // Separate sections from each-other.
	* + p // Paragraphs deserve a little space from any preceeding content.
	{ margin-top: var(--theme-space); }


	/* Language-Dependent Styles */

	:lang(en) {
	// Apply English-style quoting.
	q { quotes: '“' '”' '‘' '’'; }

	// Highlight other languages by not underlining the current one in navigation.
	a.lang-en { text-decoration: none; }
	}

	:lang(fr) {
	// Apply French-style quoting.
	q { quotes: '« ' ' »'; }

	// Highlight other languages by not underlining the current one in navigation.
	a.lang-fr { text-decoration: none; }
	}
	<!DOCTYPE html><html lang=en>
	<title>Your page title here.</title>
	<!-- The HTML element itself is optional if not assigning additional attributes; I tend to offer localization, though. -->

	<meta charset=utf-8>
	<meta name=viewport content="width=device-width, initial-scale=1">
	<meta name=description content="">

	<link rel=stylesheet href=base.css>
	<script src=//example.com/external.js async>// This won't have DOM ready.</script>


	<p>Really.</p>


	<script>
	// Do things requiring the DOM be ready here.
	// No need for onDomReady. It's ready.
	</script>
	<!DOCTYPE html><html lang=en>
	<title>Sign In — CEGID RITA</title>

	<meta charset=utf-8>
	<meta name=description content="">
	<meta name=viewport content="width=device-width, initial-scale=1">
	<meta name=theme-color content=#fafafa>
	<link rel=stylesheet href=base.css>
	<link rel=stylesheet href=authn.css>
	<link rel=apple-touch-icon href=icon.png>


	<form action=/account/authenticate method=post id=authn>
	<h1>CEGID</h1>
	<h2>RITA</h2>
	<h3>Sign In</h3>

	<dl>
	<dt>Identity (User Name or E-Mail Address)</dt>
	<dd><input id=identity-field name=identity autofocus placeholder="OTP, User Name, or E-Mail Address" value=""></dd>

	<dt>Password</dt>
	<dd><input id=password-field type=password name=password placeholder="Your Password" value=""></dd>

	<dt id=authn-actions>Actions</dt>
	<dd>
	<nav>
	<menu>
	<li><a href=/account/register>Sign Up</a>
	<li><a href=/account/lost>Forgot</a>
	<li><input type=submit value="Sign In">
	</menu>
	</nav>
	</dd>
	</dl>
	</form>
	<!DOCTYPE html>
	<title>Yes, really.</title>
	<p>This is everything you need.
	# A "template engine" generating an optimized HTML serialization.
	# https://github.com/amcgregor/python-samples/blob/main/Metaprogramming/Alternate%20Class%20Instantiation.ipynb
	# Based on https://github.com/marrow/tags

	from html5 import html, head, title, body, p

	page = html [
	head [
	title [ "I'm really not kidding you." ],
	],
	body [
	p(classList={"best"}) [ "This is a complete and fully-formed HTML document." ],
	],
	]

	print(page)
	# <!DOCTYPE html>
	# <title>I'm really not kidding you.</title>
	# <p class=best>This is a complete and fully-formed HTML document.</p>
	/*

	Can be seen demonstrated: https://codepen.io/amcgregor/pen/PoZoPYv?editors=1100

	Even more dramatically, using a sanitized Facebook landing page: https://codepen.io/amcgregor/full/jOWObBM

	*/

	body { background-color: #000; color: transparent !important; font: 12px/15px "Open Sans", sans-serif; }
	* { color: inherit !important; font: inherit !important; }

	body > * { background-color: #111; }
	body > * > * { background-color: #222; }
	body > * > * > * { background-color: #333; }
	body > * > * > * > * { background-color: #444; }
	body > * > * > * > * > * { background-color: #555; }
	body > * > * > * > * > * > * { background-color: #666; }
	body > * > * > * > * > * > * > * { background-color: #777; }
	body > * > * > * > * > * > * > * > * { background-color: #888; }
	body > * > * > * > * > * > * > * > * > * { background-color: #999; }
	body > * > * > * > * > * > * > * > * > * > * { background-color: #aaa; }
	body > * > * > * > * > * > * > * > * > * > * > * { background-color: #bbb; }
	body > * > * > * > * > * > * > * > * > * > * > * > * { background-color: #ccc; }
	body > * > * > * > * > * > * > * > * > * > * > * > * > * { background-color: #ddd; }
	body > * > * > * > * > * > * > * > * > * > * > * > * > * > * { background-color: #eee; }
	body > * > * > * > * > * > * > * > * > * > * > * > * > * > * > * { background-color: #fff; }
	body > * > * > * > * > * > * > * > * > * > * > * > * > * > * > * > * { background-color: #f0f; } /* Out-of-gamut! */
	body > * > * > * > * > * > * > * > * > * > *:after { color: black !important; }

	/* Block-Level Elements */

	address, article, aside, blockquote, details, dialog, dd, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, li, main, nav, ol, p, pre, section, table, ul {
	margin: 10px 0;
	padding: 10px;
	border: 1px solid rgba(127,127,127,0.25);
	position: relative;
	}

	address:after, article:after, aside:after, blockquote:after, details:after, dialog:after, dd:after, div:after, dl:after, dt:after, fieldset:after, figcaption:after, figure:after, footer:after, form:after, h1:after, h2:after, h3:after, h4:after, h5:after, h6:after, header:after, hgroup:after, li:after, main:after, nav:after, ol:after, p:after, pre:after, section:after, table:after, ul:after {
	position: absolute;
	top: 0;
	left: 0;
	padding: 2px 5px;
	background-color: rgba(127,127,127,0.5);
	text-transform: uppercase;
	font: bold 6px/1.8 "Open Sans", sans-serif;
	}

	/* Ones that should have some padding applied to them... */
	ul { padding-left: 2em; }

	address:after { content: 'address' ' #' attr(id) ' (' attr(class) ')' }
	article:after { content: 'article' ' #' attr(id) ' (' attr(class) ')' }
	aside:after { content: 'aside' ' #' attr(id) ' (' attr(class) ')' }
	blockquote:after { content: 'blockquote' ' #' attr(id) ' (' attr(class) ')' }
	details:after { content: 'details' ' #' attr(id) ' (' attr(class) ')' }
	dialog:after { content: 'dialog' ' #' attr(id) ' (' attr(class) ')' }
	dd:after { content: 'dd' ' #' attr(id) ' (' attr(class) ')' }
	div:after { content: 'div' ' #' attr(id) ' (' attr(class) ')' }
	dl:after { content: 'dl' ' #' attr(id) ' (' attr(class) ')' }
	dt:after { content: 'dt' ' #' attr(id) ' (' attr(class) ')' }
	fieldset:after { content: 'fieldset' ' #' attr(id) ' (' attr(class) ')' }
	figcaption:after { content: 'figcaption' ' #' attr(id) ' (' attr(class) ')' }
	figure:after { content: 'figure' ' #' attr(id) ' (' attr(class) ')' }
	footer:after { content: 'footer' ' #' attr(id) ' (' attr(class) ')' }
	form:after { content: 'form' ' #' attr(id) ' (' attr(class) ')' }
	h1:after { content: 'h1' ' #' attr(id) ' (' attr(class) ')' }
	h2:after { content: 'h2' ' #' attr(id) ' (' attr(class) ')' }
	h3:after { content: 'h3' ' #' attr(id) ' (' attr(class) ')' }
	h4:after { content: 'h4' ' #' attr(id) ' (' attr(class) ')' }
	h5:after { content: 'h5' ' #' attr(id) ' (' attr(class) ')' }
	h6:after { content: 'h6' ' #' attr(id) ' (' attr(class) ')' }
	header:after { content: 'header' ' #' attr(id) ' (' attr(class) ')' }
	hgroup:after { content: 'hgroup' ' #' attr(id) ' (' attr(class) ')' }
	li:after { content: 'li' ' #' attr(id) ' (' attr(class) ')' }
	main:after { content: 'main' ' #' attr(id) ' (' attr(class) ')' }
	nav:after { content: 'nav' ' #' attr(id) ' (' attr(class) ')' }
	ol:after { content: 'ol' ' #' attr(id) ' (' attr(class) ')' }
	p:after { content: 'p' ' #' attr(id) ' (' attr(class) ')' }
	pre:after { content: 'pre' ' #' attr(id) ' (' attr(class) ')' }
	section:after { content: 'section' ' #' attr(id) ' (' attr(class) ')' }
	table:after { content: 'table' ' #' attr(id) ' (' attr(class) ')' }
	ul:after { content: 'ul' ' #' attr(id) ' (' attr(class) ')' }

	/* Inline Elements
	a, abbr, acronym, b, bdi, bdo, big, cite, code, data, datalist, del, dfn, em, i, img, input, ins, kbd, label, mark, meter, output, picture, progress, q, ruby, s, samp, slot, small, span, strong, sub, sup, time, u, tt, var, wbr
	*/

	a, abbr, acronym, b, bdi, bdo, big, cite, code, data, datalist, del, dfn, em, i, img, input, ins, kbd, label, mark, meter, output, picture, progress, q, ruby, s, samp, slot, small, span, strong, sub, sup, time, u, tt, var, wbr {
	display: inline-block;
	position: relative;
	padding: 5px;
	box-decoration-break: clone;
	}

	a:after, abbr:after, acronym:after, b:after, bdi:after, bdo:after, big:after, cite:after, code:after, data:after, datalist:after, del:after, dfn:after, em:after, i:after, img:after, input:after, ins:after, kbd:after, label:after, mark:after, meter:after, output:after, picture:after, progress:after, q:after, ruby:after, s:after, samp:after, slot:after, small:after, span:after, strong:after, sub:after, sup:after, time:after, u:after, tt:after, var:after, wbr:after {
	position: absolute;
	top: 0;
	left: 0;
	padding: 2px 5px;
	background-color: rgba(0,0,0,.5);
	text-transform: uppercase;
	font: bold 6px/1.8 "Open Sans", sans-serif;
	}

	a:after { content: 'a' }
	abbr:after { content: 'abbr' }
	acronym:after { content: 'acronym' }
	b:after { content: 'b' }
	bdi:after { content: 'bdi' }
	bdo:after { content: 'bdo' }
	big:after { content: 'big' }
	cite:after { content: 'cite' }
	code:after { content: 'code' }
	data:after { content: 'data' }
	datalist:after { content: 'datalist' }
	del:after { content: 'del' }
	dfn:after { content: 'dfn' }
	em:after { content: 'em' }
	i:after { content: 'i' }
	img:after { content: 'img' }
	input:after { content: 'input' }
	ins:after { content: 'ins' }
	kbd:after { content: 'kbd' }
	label:after { content: 'label' }
	mark:after { content: 'mark' }
	meter:after { content: 'meter' }
	output:after { content: 'output' }
	picture:after { content: 'picture' }
	progress:after { content: 'progress' }
	q:after { content: 'q' }
	ruby:after { content: 'ruby' }
	s:after { content: 's' }
	samp:after { content: 'samp' }
	slot:after { content: 'slot' }
	small:after { content: 'small' }
	span:after { content: 'span' }
	strong:after { content: 'strong' }
	sub:after { content: 'sub' }
	sup:after { content: 'sup' }
	time:after { content: 'time' }
	u:after { content: 'u' }
	tt:after { content: 'tt' }
	var:after { content: 'var' }
	wbr:after { content: 'wbr' }

	/* Clean Up a Bit */

	:first-child {
	margin-top: 0 !important;
	margin-left: 0 !important;
	}

	:last-child {
	margin-bottom: 0 !important;
	margin-right: 0 !important;
	}