mdn · ExE-Boss · Sep 6, 2018
diff --git a/index.html b/index.html
@@ -1,29 +1,39 @@
 <!doctype html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
 <html>
 <head>
-	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
-	<link href="main.css" rel="stylesheet" media="screen" type="text/css">
+	<meta charset="utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<link href="main.css" rel="stylesheet" media="screen" type="text/css"/>
+	<link href="static/styles/base.css" rel="stylesheet" media="screen" type="text/css"/>
 	<title>MDN Code Samples</title>
 </head>
-<body>
+<body class="mdn-container">
 <div class="mdn-header">
 	<h1>
 		MDN Code Samples
 	</h1>
+	<a class="gh-link" href="https://github.com/mdn/samples-server">
+		Source code available on GitHub
+	</a>
 </div>
 <div class="mdn-content">
 	<p>
 		This site hosts the server side of any MDN code samples that require server
-    assistance to operate, such as WebSocket services, data stores, or WebRTC
-    peer-finding services.
+		assistance to operate, such as WebSocket services, data stores, or WebRTC
+		peer-finding services.
 	</p>
 </div>
 <div class="mdn-footer">
 	All text content on MDN is offered under the
-  <a href="http://creativecommons.org/licenses/by-sa/2.5/">CC-SA-BY</a> license,
-  version 2.5 or later. All sample code offered on this site is provided under the
-   <a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0 (Public
-     Domain)</a> license and may be reused or repurposed without attribution.
+	<a href="http://creativecommons.org/licenses/by-sa/2.5/">CC-SA-BY</a> license,
+	version 2.5 or later.
+	<br/>
+	All sample code offered on this site is provided under the
+	<a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0 (Public Domain)</a>
+	license and may be reused or repurposed without attribution.
 </div>
 </body>
 </html>
diff --git a/main.css b/main.css
@@ -1,3 +1,7 @@
+@charset "UTF-8";
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
 .mdn-footer {
 	font-weight:normal;
 	font-size:12px;

diff --git a/static/styles/base.css b/static/styles/base.css
@@ -0,0 +1,9 @@
+@charset "UTF-8";
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/* A base stylesheet imported by the index page
+ * TODO: Consider merging this using postcss-import. */
+@import "./reset.css";
+@import "./utils.css";
+@import "./responsive.css";
diff --git a/static/styles/reset.css b/static/styles/reset.css
@@ -0,0 +1,21 @@
+@charset "UTF-8";
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/* A stylesheet which fixes some annoyances with slightly different
+ * or legacy behaviour of UAs and CSS when rendering pages */
+*|*, ::before, ::after {
+	/* Always use `box-sizing: border-box;` for everything */
+	box-sizing: border-box;
+}
+
+html,
+body {
+	/* Ensure that <html> and <body> doesn’t weirdly stretch out
+	 * horizontally beyond the viewport, adding a horizontal scrollbar,
+	 * which is very annoying when on mobile, especially on responsive,
+	 * mobile‑first websites. */
+	margin: unset;
+	max-width: 100vw;
+	overflow-x: hidden;
+}
diff --git a/static/styles/responsive.css b/static/styles/responsive.css
@@ -0,0 +1,69 @@
+@charset "UTF-8";
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+.mdn-container {
+	width: 100%;
+	padding-left: 1rem;
+	padding-right: 1rem;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.mdn-footer {
+	padding-top: 0.25rem;
+}
+
+.mdn-header {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: end;
+	margin-top: 1rem;
+	margin-bottom: 1rem;
+	height: unset;
+}
+
+.mdn-header h1 {
+	display: block;
+	height: 24px;
+	margin: unset;
+}
+
+.mdn-header .gh-link {
+	display: block;
+	text-align: end;
+	margin-left: auto;
+	margin-top: 3px;
+}
+
+/* Small (568px) */
+@media (min-width: 36rem) {
+	.mdn-container {
+		/* 540px */
+		max-width: 33.75rem;
+	}
+}
+
+/* Medium (768px) */
+@media (min-width: 48rem) {
+	.mdn-container {
+		/* 720px */
+		max-width: 45rem;
+	}
+}
+
+/* Large (1024px) */
+@media (min-width: 64rem) {
+	.mdn-container {
+		/* 960px */
+		max-width: 60rem;
+	}
+}
+
+/* XL (1200px) */
+@media (min-width: 75rem) {
+	.mdn-container {
+		/* 1120px */
+		max-width: 70rem;
+	}
+}
diff --git a/static/styles/utils.css b/static/styles/utils.css
@@ -0,0 +1,14 @@
+@charset "UTF-8";
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+.d-block { display: block !important; }
+.d-contents { display: contents !important; }
+.d-flex { display: flex !important; }
+.d-grid { display: grid !important; }
+.d-inline { display: inline !important; }
+.d-inline-block { display: inline-block !important; }
+.d-inline-flex { display: inline-flex !important; }
+.d-inline-grid { display: inline-grid !important; }
+.d-list-item { display: list-item !important; }
+.d-none { display: none !important; }