Merge branch 'bug-829628-responsive-errors'

media/css/page-not-found.less

@@ -2,19 +2,44 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-@import "sandstone/variables.less";
-@import "sandstone/mixins.less";
+@import "sandstone/lib.less";
 
+.error500#main-content {
+    .span-all();
+}
 
-#main-feature {
-    .download-button-small {
-        position: absolute;
-        top: 0;
-        right: 48px;
-    }
-    .column {
-        .span(5);
-        margin-left: 0;
-        clear: left;
+#wrapper {
+    .clearfix;
+}
+
+#error-content {
+    .span(6);
+    .clearfix;
+}
+
+#download {
+    .span-all();
+    float: right;
+}
+
+/* {{{ Tablet  Layout: 768px */
+
+@media only screen and (min-width: @widthTablet) and (max-width: @widthDesktop) {
+    #error-content {
+        .span_narrow(6);
     }
 }
+
+/* }}} */
+/* {{{ Wide Mobile Layout: 480px */
+
+@media only screen and (max-width: @widthTablet) {
+    #error-content {
+        .span-all();
+    }
+    #download {
+        .span-all();
+    }
+}
+
+/* }}} */

templates/404.html

@@ -2,7 +2,7 @@
  # License, v. 2.0. If a copy of the MPL was not distributed with this
  # file, You can obtain one at http://mozilla.org/MPL/2.0/. #}
 
-{% extends "base.html" %}
+{% extends "base-resp.html" %}
 
 {% block page_title_prefix %}{% endblock %}
 {% block page_title %}404: Page Not Found{% endblock %}
@@ -13,15 +13,16 @@
 
 {% block content %}
 <div id="main-feature">
+  <div id="error-content">
+    <h1>Whoops!</h1>
+    <p>Did you make a left at that last URL instead of a right? No problem. here are some tips to get you back on your way:</p>
+    <ul>
+      <li>If you typed in the address, check your spelling. Could just be a typo.</li>
+      <li>If you followed a link, it’s probably broken. Please <a href="{{ php_url('/about/contact/') }}">contact us</a> and we’ll fix it.</li>
+      <li>If you’re not sure what you’re looking for, start at <a href="{{ url('mozorg.home') }}">mozilla.org</a>.</li>
+    </ul>
+  </div>
   {{ download_button('download', 'small') }}
-  <h1>Whoops!</h1>
-  <p class="column">Did you make a left at that last URL instead of a right? No problem. here are some tips to get you back on your way:</p>
-  <ul class="column">
-    <li>If you typed in the address, check your spelling. Could just be a typo.</li>
-    <li>If you followed a link, it’s probably broken. Please <a href="{{ php_url('/about/contact/') }}">contact us</a> and we’ll fix it.</li>
-    <li>If you’re not sure what you’re looking for, start at <a href="{{ url('mozorg.home') }}">mozilla.org</a>.
-</li>
-  </ul>
 </div>
 {% endblock %}
 

templates/500.html

@@ -2,11 +2,17 @@
  # License, v. 2.0. If a copy of the MPL was not distributed with this
  # file, You can obtain one at http://mozilla.org/MPL/2.0/. #}
 
-{% extends "base.html" %}
+{% extends "base-resp.html" %}
+
+{% block extrahead %}
+  {{ css('page_not_found') }}
+{% endblock %}
 
 {% block content %}
-<div id="main-content">
+<div id="main-content" class="error500">
   <h1>Oh Noes!</h1>
-  An error occurred. Try back later!
+  <p>An error occurred. Try back later!</p>
 </div>
 {% endblock %}
+
+{% block email_form %}{% endblock %}