xiaohutai/404.html

## 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>

## 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};
}


/* 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: 0;
	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, textarea {
	cursor: text;  // Indicate ability to manipulate as mutable text.
}

// 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; }
}

## basic.html
<!DOCTYPE html>
<html lang="en">
<!-- The HTML element itself is optional if not assigning additional attributes; I tend to offer localization, though. -->

<title>Your page title here.</title>

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

<link rel="stylesheet" href="base.css">


<p>Really.</p>


<script>
	window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
	ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>

## 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>


<script>
	window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
	ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>

## minimal.html
<!DOCTYPE html>
<title>Yes, really.</title>
<p>This is everything you need.

## 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.
<!-- From https://twitter.com/GothAlice/status/1177030060559216641
	<!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};
	}


	/* 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: 0;
	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, textarea {
	cursor: text; // Indicate ability to manipulate as mutable text.
	}

	// 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">
	<!-- The HTML element itself is optional if not assigning additional attributes; I tend to offer localization, though. -->

	<title>Your page title here.</title>

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

	<link rel="stylesheet" href="base.css">


	<p>Really.</p>


	<script>
	window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
	ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
	</script>
	<script src="https://www.google-analytics.com/analytics.js" async></script>
	<!DOCTYPE html>
	<title>Yes, really.</title>
	<p>This is everything you need.
	<!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 <head> and <body> parts. Really. HTML5Boilerplate is >200% larger than it needs to be.
	<!-- From https://twitter.com/GothAlice/status/1177030060559216641