whatwg · domenic · Jan 8, 2018 · Dec 21, 2017 · Dec 21, 2017 · Jan 4, 2018
diff --git a/README.md b/README.md
@@ -7,3 +7,5 @@ We are committed to providing a friendly, safe, and welcoming environment for al
 ### Acknowledgments
 
 Thanks to [DigitalOcean](https://www.digitalocean.com/) for sponsoring the hosting of whatwg.org.
+
+Thanks to [Oliver Williams](https://github.com/o-t-w) for the most recent home page design (see [#90](https://github.com/whatwg/whatwg.org/pull/90) and [#153](https://github.com/whatwg/whatwg.org/pull/153)).
diff --git a/whatwg.org/img/arrow.svg b/whatwg.org/img/arrow.svg
diff --git a/whatwg.org/img/checker.svg b/whatwg.org/img/checker.svg
diff --git a/whatwg.org/img/irc.svg b/whatwg.org/img/irc.svg
diff --git a/whatwg.org/img/participate.svg b/whatwg.org/img/participate.svg
diff --git a/whatwg.org/img/twitter.svg b/whatwg.org/img/twitter.svg
diff --git a/whatwg.org/index.html b/whatwg.org/index.html
@@ -1,42 +1,296 @@
 <!DOCTYPE HTML>
 <html lang="en">
- <head>
-  <title>Web Hypertext Application Technology Working Group</title>
-  <link rel="stylesheet" href="/style/tabbed-pages">
-  <link rel="icon" href="https://resources.whatwg.org/logo.svg">
- </head>
- <body class="front-page">
-  <hgroup>
-   <h1><img src="https://resources.whatwg.org/logo.svg" height=100 width=100 alt> Welcome to the WHATWG community</h1>
-   <h2>Maintaining and evolving HTML since 2004</h2>
-  </hgroup>
-
-  <a href="/faq"><p><strong>FAQ</strong> <span>Get answers</span> <span>to your questions</span> <span>about the WHATWG</span></p></a>
-  <a href="https://html.spec.whatwg.org/multipage/"><p><strong>HTML</strong> <span>Read, use,</span> <span>or implement</span> <span>the HTML Living Standard</span></p></a>
-  <a href="https://spec.whatwg.org/"><p><strong>Standards</strong> <span>See the other</span> standards <span>developed at the WHATWG</span></p></a>
-
-  <a href="https://blog.whatwg.org/"><p><strong>News</strong> <span>Read and contribute</span> <span>to the WHATWG blog</span></p></a>
-  <a href="https://checker.html5.org/"><p><strong>HTML checker</strong> <span>Validate your documents</span> <span>with an HTML checker</span></p></a>
-  <a href="/working-mode"><p><strong>Working Mode</strong> <span>Find out</span> <span>how the</span> <span>WHATWG works</span></p></a>
-
-  <a href="https://github.com/whatwg"><p><strong>Join</strong> <span>Contribute to</span> <span>standards development</span> <span>on GitHub</span></p></a>
-  <a href="https://wiki.whatwg.org/wiki/IRC"><p><strong>IRC</strong> <span>Chat with other members</span> <span>of the WHATWG community</span></p></a>
-  <a href="https://participate.whatwg.org/"><p><strong>Participate</strong> <span>Get started with</span> <span>contributing to WHATWG standards</span></p></a>
-
-<!--
-  <a href="https://wiki.whatwg.org/"><p><strong>Wiki</strong> <span>Poke at our wiki pages</span> <span>and see what you unearth</span></p></a>
-  <a href="https://twitter.com/WHATWG"><p><strong>Twitter</strong> <span>Keep track of spec changes</span> <span>by following our Twitter feed</span></p></a>
--->
-
-  <footer>
-   <address>Queries can be directed either as a
-   <a href="https://github.com/whatwg/meta/issues/new">new meta issue</a> or as an email to the
-   <a href="mailto:sg@whatwg.org">Steering Group</a>.</address>
-
-   <p><small>Copyright © 2017 WHATWG (Apple, Google, Mozilla, Microsoft). This work is licensed under a <a rel="license" href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.</small></p>
-  </footer>
-
-  <script> var _gaq = [['_setAccount', 'UA-20955470-1'], ['_setDomainName', '.whatwg.org'], ['_trackPageview']]; </script>
-  <script async src="https://ssl.google-analytics.com/ga.js"></script>
- </body>
-</html>
+<meta charset="utf-8">
+<title>Web Hypertext Application Technology Working Group (WHATWG)</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="theme-color" content="#3A7908">
+<link rel="icon" href="https://resources.whatwg.org/logo.svg">
+
+<style>
+* {
+ box-sizing: border-box;
+}
+
+:link {
+ color: #00F;
+}
+:visited {
+ color: #0E388C;
+}
+
+html {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+ background-color: rgb(235, 235, 235);
+ --whatwggreen: #3A7908;
+}
+
+body {
+ max-width: 900px;
+ margin: 0 auto;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+}
+
+@media (max-width: 600px) {
+ body {
+  padding: 8px;
+ }
+}
+
+body > *:not(footer):not(script) {
+ margin-bottom: 40px;
+}
+
+header {
+ margin-top: 32px;
+ display: flex;
+ align-items: center;
+}
+
+header > hgroup {
+ margin-left: 20px;
+}
+
+header > hgroup > h1 {
+ margin: 0;
+ font-weight: normal;
+}
+
+@media (max-width: 600px) {
+ header {
+  margin-top: 0;
+ }
+
+ header > hgroup > h1 {
+  font-size: 19px;
+ }
+}
+
+header > hgroup > h2 {
+ font-size: 17px;
+ margin: 0;
+ color: rgb(40, 40, 40);
+ font-weight: normal;
+ margin: 5px 0;
+}
+
+#the-standards > ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+#the-standards li {
+ border: solid var(--whatwggreen) 2px;
+ border-radius: 7px;
+ letter-spacing: 0.25px;
+ font-weight: bold;
+ background-color: white;
+}
+
+#the-standards li:not(:last-of-type) {
+ margin-bottom: 15px;
+}
+
+#the-standards a {
+ color: var(--whatwggreen);
+ text-decoration: none;
+ padding: 4px 30px;
+ height: 64px;
+ display: flex;
+ align-items: center;
+}
+
+#the-standards a:hover, #the-standards a:focus {
+  transition: 0.2s;
+  padding-left: 50px;
+}
+
+#the-standards a::before {
+ display: inline-block;
+ width: 27px;
+ height: 15.4px;
+ background: url(/img/arrow.svg);
+ content: "";
+ margin-right: 21px;
+ vertical-align: middle;
+ background-repeat: no-repeat;
+}
+
+@media (min-width: 600px) {
+ #self-explanatory-links {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-column-gap: 20px;
+  grid-row-gap: 20px;
+ }
+}
+
+#self-explanatory-links > a {
+ padding: 10px;
+ text-align: center;
+ border: 8px solid rgba(58, 121, 8, 0.2);
+ background: linear-gradient(var(--whatwggreen), #00981B);
+ background-clip: padding-box;
+ grid-column: span 3;
+ text-decoration: none;
+ color: white;
+ font-size: 17px;
+ letter-spacing: 0.3px;
+}
+
+#self-explanatory-links > a:hover, #self-explanatory-links > a:focus {
+  transition: 0.2s;
+  transform: scale(1.1);
+}
+
+@media (max-width: 600px) {
+ #self-explanatory-links > a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  margin-top: 15px;
+ }
+}
+
+#links-with-explanations {
+ /* Grow into the extra space before the footer to make the footer stick to the bottom. */
+ flex: 1;
+}
+
+#links-with-explanations a {
+ padding: 0 10px;
+ display: flex;
+ flex-wrap: wrap;
+ margin-bottom: 15px;
+ background-color: #333;
+ align-items: center;
+ justify-content: space-between;
+ border-radius: 4px;
+ color: white;
+ min-height: 54px;
+ text-decoration: none;
+}
+
+#links-with-explanations a:hover, #links-with-explanations a:focus {
+  transition: .2s;
+  background-color: black;
+}
+
+#links-with-explanations a::before {
+ display: inline-block;
+ width: 30px;
+ height: 30px;
+ content: "";
+ margin: 12px 20px 12px 8px;
+ vertical-align: middle;
+ background-repeat: no-repeat;
+}
+
+#participate::before {
+ background: url(/img/participate.svg);
+}
+
+#irc::before {
+ background: url(/img/irc.svg);
+}
+
+#twitter::before {
+ background: url(/img/twitter.svg);
+}
+
+#checker::before {
+ background: url(/img/checker.svg);
+}
+
+#links-with-explanations a > strong {
+ margin-right: auto;
+}
+
+#links-with-explanations a > p {
+ margin-left: auto;
+ padding-right: 8px;
+}
+
+@media (max-width: 600px) {
+  #links-with-explanations a > p {
+    width: 100%;
+    padding-left: 12px;
+  }
+}
+
+footer {
+ border-top: 1px solid black;
+ text-align: center;
+ font-size: 12px;
+}
+
+footer small {
+  /* Semantically it's small, but the footer is already small, so don't change the font size. */
+  font-size: inherit;
+}
+
+footer > * {
+ font-style: normal;
+ margin: 12px 0;
+}
+</style>
+
+<header>
+ <img class="main-logo" src="https://resources.whatwg.org/logo.svg" height="100" width="100" alt="">
+ <hgroup>
+  <h1>Welcome to the WHATWG community</h1>
+  <h2>Maintaining and evolving HTML since 2004</h2>
+ </hgroup>
+</header>
+
+<div id="the-standards">
+ <ul>
+  <li><a href="https://html.spec.whatwg.org">Read the HTML Living Standard</a></li>
+  <li><a href="https://spec.whatwg.org/">See the other Living Standards developed at the WHATWG</a></li>
+ </ul>
+</div>
+
+<div id="self-explanatory-links">
+ <a href="https://blog.whatwg.org/">Blog</a>
+ <a href="/faq">FAQ</a>
+ <a href="https://github.com/whatwg">GitHub</a>
+ <a href="/policies">Policies</a>
+</div>
+
+<div id="links-with-explanations">
+ <a href="https://participate.whatwg.org/" id="participate">
+  <strong>Participate</strong>
+  <p>Get started with contributing to the WHATWG</p>
+ </a>
+ <a href="https://wiki.whatwg.org/wiki/IRC" id="irc">
+  <strong>IRC</strong>
+  <p>Chat with other members of the WHATWG community</p>
+ </a>
+ <a href="https://twitter.com/WHATWG" id="twitter">
+  <strong>Twitter</strong>
+  <p>Keep track of spec changes and other announcements</p>
+ </a>
+ <a href="https://checker.html5.org/" id="checker">
+  <strong>HTML checker</strong>
+  <p>Validate your HTML documents</p>
+ </a>
+</div>
+
+<footer>
+ <address>Queries can be directed either as a
+  <a href="https://github.com/whatwg/meta/issues/new">new meta issue</a> or as an email to the
+  <a href="mailto:sg@whatwg.org">Steering Group</a>.
+ </address>
+
+ <p><small>Copyright © 2017 WHATWG (Apple, Google, Mozilla, Microsoft). This work is licensed under a <a rel="license" href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.</small></p>
+</footer>
+
+<script>
+ "use strict";
+ window._gaq = [['_setAccount', 'UA-20955470-1'], ['_setDomainName', '.whatwg.org'], ['_trackPageview']];
+</script>
+<script async src="https://ssl.google-analytics.com/ga.js"></script>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,3 +7,5 @@ We are committed to providing a friendly, safe, and welcoming environment for al
		### Acknowledgments

		Thanks to [DigitalOcean](https://www.digitalocean.com/) for sponsoring the hosting of whatwg.org.

		Thanks to [Oliver Williams](https://github.com/o-t-w) for the most recent home page design (see [#90](https://github.com/whatwg/whatwg.org/pull/90) and [#153](https://github.com/whatwg/whatwg.org/pull/153)).