Static page for maintenance downtime #193

Closed
wants to merge 3 commits into
from
View
49 templates/offline/css/offline.css
@@ -0,0 +1,49 @@
+@font-face {
+ font-family: "Bebas Neue";
+ src: url('../fonts/BebasNeue-webfont.eot'); /* IE9 */
+ src: url('../fonts/BebasNeue-webfont.eot?') format('eot'), /* IE6-8 */
+ url('../fonts/BebasNeue-webfont.woff') format('woff'), /* Modern browsers */
+ url('../fonts/BebasNeue-webfont.ttf') format('truetype'), /* Older Webkits */
+ url('../fonts/BebasNeue-webfont.svg#webfont') format('svg'); /* Opera */
+ font-weight: normal;
+ font-style: normal;
+}
+
+/* @General elements and content *********/
+html { background: #f6f6f1 url("../img/bg-content.png") fixed; }
+body { min-height: 400px; font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", Lucida, Arial, Helvetica, sans-serif; margin: 0 auto; color: #333; }
+
+/*** @Links *********/
+:link { color: #369; text-decoration: none; }
+:visited { color: #69c; text-decoration: none; }
+:link:hover, :link:focus, :link:active { color: #25a; text-decoration: underline; }
+:visited:hover, :visited:focus, :visited:active { color: #25a; text-decoration: underline; }
+
+/*** @Headings *********/
+h1, h2, h3, h4, h5, h6 { margin: 0 0 .8em; }
+h1, .page-title { font-size: 1.857em; }
+h2 { font-size: 1.428em; }
+h3 { font-size: 1.142em; }
+h4, h5, h6 { font-size: 1em; }
+
+/* @Layout *********/
+.wrap { position: relative; width: 940px; padding: 0 10px; margin: 0 auto; }
+.wrap:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } /* clear floats */
+
+#content { min-height: 400px; }
+#content .wrap { padding: 30px 0; }
+
+/* @Header *********/
+#masthead { background: #000 url("../img/bg-pinstripe.png") center top repeat-x; border-top: 2px solid #fff; border-bottom: 4px solid #f8d575; color: #ccc; min-height: 70px; -moz-box-shadow: 0 1px 0 rgba(0,0,0,.25); -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.25); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
+#masthead .wrap { padding-top: 85px; background: #000 url("../img/bg-pinstripe.png") center top repeat-x; }
+
+#branding { position: absolute; left: 10px; top: 10px; width: 50%; padding: 2px 0 0 70px; margin: 0 0 10px; }
+#logo { margin: 6px 0 0; font: normal 44px/1 "Bebas Neue", "League Gothic", Haettenschweiler, Impact, "Arial Narrow", sans-serif; text-transform: uppercase; color: #fff; letter-spacing: 1px; }
+#logo a { color: #fff; text-decoration: none; }
+#logo img { position: absolute; left: -3px; top: -4px; }
+
+/*** @Tabzilla *********/
+#masthead #tabzilla { position: absolute; right: 0; top: 0; }
+
+.beast { float: right; margin: 20px 0 20px 20px; }
+
View
BIN templates/offline/fonts/BebasNeue-webfont.eot
Binary file not shown.
View
BIN templates/offline/fonts/BebasNeue-webfont.ttf
Binary file not shown.
View
BIN templates/offline/fonts/BebasNeue-webfont.woff
Binary file not shown.
View
BIN templates/offline/img/beast-500.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN templates/offline/img/bg-content.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN templates/offline/img/bg-pinstripe.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN templates/offline/img/mdn-logo-sm.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
59 templates/offline/offline.html
@@ -0,0 +1,59 @@
+<html lang="en-US" dir="ltr" id="developer-mozilla-org">
+<head>
+ <title>Temporarily Offline | Mozilla Developer Network</title>
+
+ <meta charset="utf-8">
+
+ <link rel="stylesheet" href="css/offline.css">
+ <link rel="stylesheet" href="//www.mozilla.org/tabzilla/media/css/tabzilla.css">
+
+</head>
+
+<body class="landing">
+
+ <header id="masthead" role="banner">
+ <div class="wrap">
+ <div id="branding">
+ <h1 id="logo"><img src="img/mdn-logo-sm.png" alt="" title="" width="62" height="71"> Mozilla Developer Network</a></h1>
+ </div>
+ <a href="http://www.mozilla.org/" id="tabzilla">Mozilla</a>
+ </div>
+ </header>
+
+ <div id="content" role="main">
+ <div class="wrap">
+
+ <img src="img/beast-500.png" alt="" class="beast 500">
+
+ <h1 class="page-title">Temporarily Offline</h1>
+
+ <p>Mozilla Developer Network will be down for maintenance and completely unavailable for approximate eight hours
+ on <time datetime="2012-05-08T15:00:00+00:00">Tuesday, May 8th, 2012, starting at 15:00 UTC</time>
+ (<time datetime="2012-05-08T17:00:00+02:00">Tue 17:00 CET</time>, <time datetime="2012-05-08T11:00:00-04:00">Tue 11:00 US-EDT</time>,
+ <time datetime="2012-05-08T08:00:00-07:00">Tue 8:00 US-PDT</time>). It should be back online by <time datetime="2012-05-09T00:00:00-00:00">00:00 UTC on Wednesday May 9th</time>
+ (<time datetime="2012-05-09T02:00:00+02:00">Wed 02:00 CET</time>, <time datetime="2012-05-09T20:00:00-04:00">Tue 20:00 US-EDT</time>,
+ <time datetime="2012-05-09T17:00:00-07:00">Tue 17:00 US-PDT</time>).
+
+ <p>During this time, the site will not be available for viewing or editing. Don't panic &ndash; MDN will be back before you know it!</p>
+
+ <p>Meanwhile, here are some alternative resources:</p>
+
+ <h2>Open Web standards:</h2>
+ <ul>
+ <li><a href="http://dochub.io/">DocHub</a> mirrors content from MDN and other sources</li>
+ <li><a href="http://dev.opera.com/web">Dev.Opera</a> has lots of Web technology articles</li>
+ <li><a href="http://www.w3.org/standards/webdesign/">W3C Web Design and Applications</a> is a landing page for Web standards</li>
+ <li><a href="https://developer.apple.com/library/safari/navigation/index.html">Safari Developer Library</a> has many articles on Web development</li>
+ </ul>
+
+ <h2>Mozilla stuff:</h2>
+ <ul>
+ <li><a href="https://wiki.mozilla.org/">Mozilla wiki</a> has all kinds of information related to the Mozilla project</li>
+ </ul>
+
+ </div>
+ </div>
+
+<script src="//www.mozilla.org/tabzilla/media/js/tabzilla.js"></script>
+</body>
+</html>