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.
diff --git a/main.css b/main.css
index ffd9610..6b42c97 100644
--- 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
new file mode 100644
index 0000000..5d84295
--- /dev/null
+++ 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
new file mode 100644
index 0000000..ea61960
--- /dev/null
+++ 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 and 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
new file mode 100644
index 0000000..a0ce782
--- /dev/null
+++ 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
new file mode 100644
index 0000000..bc30d56
--- /dev/null
+++ 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; }