Skip to content

Commit

Permalink
Redesign the homepage
Browse files Browse the repository at this point in the history 
Closes #90 by subsuming the work there. Helps with #59 as at least the homepage is now mobile-friendly. Helps with some of the items noted in #149.

Non-stylistic changes:

* "Join" renamed to "GitHub" (see #149)
* "News" renamed to "Blog"
* "Working Mode" replaced with "Policies" (see #149)
* "Twitter" added
  • Loading branch information
@domenic
domenic committed Jan 8, 2018
1 parent 2e94575 commit 9a33872
Show file tree
Hide file tree
Showing 8 changed files with 312 additions and 76 deletions.
2 changes: 2 additions & 0 deletions README.md
View file
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)).
3 changes: 3 additions & 0 deletions whatwg.org/img/arrow.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions whatwg.org/img/checker.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions whatwg.org/img/irc.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions whatwg.org/img/participate.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions whatwg.org/img/twitter.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
334 changes: 294 additions & 40 deletions whatwg.org/index.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit 9a33872

Please sign in to comment.