xiaohutai · September 26, 2019 14:00 · xiaohutai · Sep 26, 2019
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};
 }


 /* 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; }
 }
diff --git a/basic.html b/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>
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>


 <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>
diff --git a/minimal.html b/minimal.html
 <!DOCTYPE html>
 <title>Yes, really.</title>
 <p>This is everything you need.
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.
 <!-- 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