Fix error page header logos, refactor templates [fix #10357] (#10502)

bedrock/base/templates/404.html

@@ -16,42 +16,28 @@
 {% block canonical_urls %}{% endblock %}
 
 {% block content %}
-  <main role="main">
-    <section class="mzp-l-content message-section">
-      <h1 class="error-header">{{ ftl('not-found-page-sorry-we-cant-find-that-page') }}</h1>
-      <p>{{ftl('not-found-page-were-all-about-a-healthy-internet') }}</p>
-      <div class="hide-back" id="go-back">
-        <a class="back-button">{{ ftl('not-found-page-go-back') }}</a>
-      </div>
-    </section>
-    <section class="mzp-l-content">
-      <ul>
-        <li>
-          <section class="has-icon">
-            <img class="list-icon" alt="" src="{{ static('protocol/img/icons/mozilla.svg') }}" width="30" height="30">
-              <p class="list-content">
-                {{ ftl('not-found-page-learn-about-mozilla-the-non', about=url('mozorg.about.index')) }}
-              </p>
-          </section>
-        </li>
-        <li>
-          <section class="has-icon">
-            <img class="list-icon" alt="" src="{{ static('protocol/img/logos/firefox/logo-flat.svg') }}" width="30" height="30">
-            <p class="list-content">
-            {{ ftl('not-found-page-explore-the-entire-family-for', explore=url('firefox')) }}
-            </p>
-          </section>
-        </li>
-        <li>
-          <section class="has-icon">
-            <img class="list-icon" alt="" src="{{ static('protocol/img/icons/desktop.svg') }}" width="30" height="30">
-            <p class="list-content">
-            {{ ftl('not-found-page-download-the-firefox-browser', download=url('firefox.new')) }}
-            </p>
-          </section>
-        </li>
-      </ul>
-    </section>
+  <main role="main" class="mzp-l-content message-section">
+    <h1 class="error-title">{{ ftl('not-found-page-sorry-we-cant-find-that-page') }}</h1>
+    <p>{{ftl('not-found-page-were-all-about-a-healthy-internet') }}</p>
+
+    <p class="hide-back" id="go-back">
+      <a class="back-button">{{ ftl('not-found-page-go-back') }}</a>
+    </p>
+
+    <ul class="content-list">
+      <li>
+        <img class="list-icon" alt="" src="{{ static('protocol/img/icons/mozilla.svg') }}" width="30" height="30">
+        {{ ftl('not-found-page-learn-about-mozilla-the-non', about=url('mozorg.about.index')) }}
+      </li>
+      <li>
+        <img class="list-icon" alt="" src="{{ static('protocol/img/logos/firefox/logo-flat.svg') }}" width="30" height="30">
+        {{ ftl('not-found-page-explore-the-entire-family-for', explore=url('firefox')) }}
+      </li>
+      <li>
+        <img class="list-icon" alt="" src="{{ static('protocol/img/icons/desktop.svg') }}" width="30" height="30">
+        {{ ftl('not-found-page-download-the-firefox-browser', download=url('firefox.new')) }}
+      </li>
+    </ul>
   </main>
 {% endblock %}
 

bedrock/base/templates/500.html

@@ -13,11 +13,11 @@
 {% endblock %}
 
 {% block content %}
-  <main role="main">
-    <section class="mzp-l-content">
-      <h1 class="error-header">{{ ftl('error-page-something-went-wrong') }}</h1>
-      <p>{{ ftl('error-page-its-probably-just-a-server-error') }}<br>
-      {{ ftl('error-page-you-can-also-try-refreshing', firefox="https://firefox.com", mozilla=url('mozorg.home')) }}</p>
-    </section>
+  <main role="main" class="mzp-l-content message-section">
+    <h1 class="error-title">{{ ftl('error-page-something-went-wrong') }}</h1>
+    <p>
+      {{ ftl('error-page-its-probably-just-a-server-error') }}<br>
+      {{ ftl('error-page-you-can-also-try-refreshing', firefox="https://firefox.com", mozilla=url('mozorg.home')) }}
+    </p>
   </main>
 {% endblock %}

bedrock/base/templates/base-error.html

@@ -10,11 +10,14 @@
 {% block body_class %}{% endblock %}
 
 {% block site_header %}
-  <header class="mzp-l-content">
+<header class="page-header">
+  <div class="mzp-l-content">
     <div class="header-image">
-      <a class="logo-mozilla" href="{{ url('mozorg.home') }}"><img src="{{ static('protocol/img/logos/mozilla/logo-word-hor.svg') }}" alt="Mozilla"></a>
-      <a class="logo-firefox" href="{{ url('firefox') }}">{{ high_res_img('protocol/img/logos/firefox/logo-word-hor-sm.png', {'alt': 'Firefox', 'width':'140'}) }}</a>
+      <a class="logo-mozilla" href="{{ url('mozorg.home') }}"><img src="{{ static('protocol/img/logos/mozilla/logo-word-hor.svg') }}" alt="{{ ftl('error-page-mozilla') }}" width="140"></a>
+      <a class="logo-firefox" href="{{ url('firefox') }}">{{ high_res_img('protocol/img/logos/firefox/logo-word-hor-sm.png', {'alt': ftl('error-page-firefox'), 'width':'140'}) }}</a>
     </div>
-  </header>
+  </div>
+</header>
 {% endblock %}
+
 {% block site_footer %}{% endblock %}

bedrock/base/views.py

@@ -188,4 +188,4 @@ def server_error_view(request, template_name='500.html'):
 
 def page_not_found_view(request, exception=None, template_name='404.html'):
     """404 error handler that runs context processors."""
-    return l10n_utils.render(request, template_name, ftl_files=['404'], status=404)
+    return l10n_utils.render(request, template_name, ftl_files=['404', '500'], status=404)

l10n/en/500.ftl

@@ -2,6 +2,8 @@
 # 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/.
 
+error-page-mozilla = { -brand-name-mozilla }
+error-page-firefox = { -brand-name-firefox }
 error-page-error-page-internal-server-error = 500: Internal Server Error
 error-page-something-went-wrong = Something went wrong
 error-page-its-probably-just-a-server-error = It’s probably just a server error and we’re working to fix it.

media/css/base/page-not-found.scss

@@ -7,19 +7,40 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';
 
-.list-content a:link,
-.list-content a:visited,
-.list-content a:hover,
-.list-content a:active {
-    color: $color-black;
+
+.page-header {
+    .mzp-l-content {
+        padding-top: $layout-sm;
+        padding-bottom: $layout-sm;
+    }
+
+    .header-image {
+        .logo-mozilla {
+            display: inline-block;
+
+            &:after {
+                @include bidi(((float, right, left),));
+                background: $color-marketing-gray-30;
+                content: '';
+                height: 60px;
+                margin: -10px $spacing-lg 0;
+                width: 2px;
+            }
+        }
+
+        .logo-firefox {
+            @include bidi(((transform, translateX(-5px), translateX(5px)),));
+            display: inline-block;
+        }
+    }
 }
 
-main {
-    @include font-size(18px);
+.message-section {
+    @include text-body-lg;
 }
 
-.error-header {
-    @include font-size(40px);
+.error-title {
+    @include text-title-md;
 }
 
 .error-helper { // Fallback content only
@@ -27,68 +48,44 @@ main {
     padding-top: $spacing-lg;
 }
 
-.list-icon {
-    @include bidi((
-        (padding-left, auto, $spacing-md),
-        (padding-right, $spacing-md, auto),
-    ));
-    vertical-align: top;
-}
+.content-list {
+    margin: $layout-lg 0;
+    max-width: 80ch;
 
-.has-icon {
-    padding-bottom: $spacing-md;
-}
+    & > li {
+        margin-bottom: $spacing-lg;
+    }
 
-.back-button:before {
-    content:"\2190\0020";
+    a:link,
+    a:visited,
+    a:hover,
+    a:active {
+        color: $color-black;
+    }
+
+    .list-icon {
+        @include bidi((
+            (padding-left, auto, $spacing-md),
+            (padding-right, $spacing-md, auto),
+        ));
+        vertical-align: top;
+    }
 }
 
 .back-button {
     text-decoration: none;
     color: $color-link;
     cursor: pointer;
+
+    &:before {
+        content:"\2190\0020";
+    }
 }
 
 .hide-back {
     display: none;
 }
 
-.message-section {
-    padding-bottom: $spacing-xl;
-}
-
-.list-icon, .list-content {
-    display: inline-block;
-}
-.list-content {
-    max-width: 80%;
-}
-
-.header-image {
-    padding-top: $spacing-md;
-
-    .logo-mozilla {
-        display: inline-block;
-        height: 50px;
-        transform: translateY(-6px);
-
-        &:after {
-            @include bidi(((float, right, left),));
-            background: $color-marketing-gray-30;
-            content: '';
-            height: 50px;
-            margin: -10px $spacing-lg 0;
-            width: 2px;
-        }
-    }
-
-    .logo-firefox {
-        @include bidi(((transform, translateX(-5px), translateX(5px)),));
-        display: inline-block;
-        height: 50px;
-    }
-
-}
 
 .prose { // Fallback content only
     list-style-type: disc;
@@ -107,11 +104,3 @@ main {
         margin: $spacing-lg 0;
     }
 }
-
-@media #{$mq-md} {
-    .error-header {
-        @include font-size(48px);
-    }
-}
-
-