Port CSRF page to Protocol (#7800)

bedrock/mozorg/templates/mozorg/csrf-failure.html

@@ -2,29 +2,27 @@
  # 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 "mozorg/base-resp.html" %}
+{% extends "base-protocol-mozilla.html" %}
 
-{% block page_title %}Invalid Request{% endblock %}
-{% block body_id %}csrf-failure{% endblock %}
+{% block page_title %}{{ _('Invalid Request') }}{% endblock %}
 
 {% block page_css %}
   {{ css_bundle('csrf-failure') }}
 {% endblock %}
 
+{% block body_id %}csrf-failure{% endblock %}
+
 {% block content %}
 
-<article id="main-content">
-  <h1 class="title-shadow-box hinge">{{ _("Invalid Request") }}</h1>
+<main role="main">
+  <div class="mzp-l-content">
+    <h1>{{ _('Invalid Request') }}</h1>
 
-  <div class="container">
-    <p class="lede">
+    <p>
     {% trans %}
       We could not process your request.
     {% endtrans %}
     </p>
   </div>
-</article>
-
+</main>
 {% endblock %}
-
-{% block email_form %}{% endblock %}

media/css/csrf-failure.less

@@ -1,196 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// 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/lib.less";
-
-#wrapper {
-  width: 100%;
-}
-
-#masthead,
-#main-content,
-.billboard {
-  width: @widthDesktop - (@gridGutterWidth * 2);
-  margin-left: auto;
-  margin-right: auto;
-}
-
-#main-content {
-  .callout-content;
-  margin: 100px auto @baseLine;
-  position: relative;
-
-  .container {
-    clear: left;
-    margin-bottom: @baseLine;
-  }
-
-  .lede {
-    font-weight: 100;
-    .font-size(28px);
-    line-height: 1.3;
-    letter-spacing: -.5px;
-    margin-top: -.25em;
-  }
-}
-
-@-webkit-keyframes hinge {
-  0% {
-    -webkit-transform: rotate(0);
-    -webkit-transform-origin: top left;
-    -webkit-animation-timing-function: ease-in-out;
-  }
-  20%, 60% {
-    -webkit-transform: rotate(80deg);
-    -webkit-transform-origin: top left;
-    -webkit-animation-timing-function: ease-in-out;
-  }
-  40% {
-    -webkit-transform: rotate(60deg);
-    -webkit-transform-origin: top left;
-    -webkit-animation-timing-function: ease-in-out;
-  }
-  80% {
-    -webkit-transform: rotate(60deg) translateY(0);
-    opacity: 1;
-    -webkit-transform-origin: top left;
-    -webkit-animation-timing-function: ease-in-out;
-  }
-  100% {
-    -webkit-transform: translateY(700px);
-    opacity: 0;
-  }
-}
-
-@-moz-keyframes hinge {
-  0% {
-    -moz-transform: rotate(0);
-    -moz-transform-origin: top left;
-    -moz-animation-timing-function: ease-in-out;
-  }
-  20%, 60% {
-    -moz-transform: rotate(80deg);
-    -moz-transform-origin: top left;
-    -moz-animation-timing-function: ease-in-out;
-  }
-  40% {
-    -moz-transform: rotate(60deg);
-    -moz-transform-origin: top left;
-    -moz-animation-timing-function: ease-in-out;
-  }
-  80% {
-    -moz-transform: rotate(60deg) translateY(0);
-    opacity: 1;
-    -moz-transform-origin: top left;
-    -moz-animation-timing-function: ease-in-out;
-  }
-  100% {
-    -moz-transform: translateY(700px);
-    opacity: 0;
-  }
-}
-
-@-o-keyframes hinge {
-  0% {
-    -o-transform: rotate(0);
-    -o-transform-origin: top left;
-    -o-animation-timing-function: ease-in-out;
-  }
-  20%, 60% {
-    -o-transform: rotate(80deg);
-    -o-transform-origin: top left;
-    -o-animation-timing-function: ease-in-out;
-  }
-  40% {
-    -o-transform: rotate(60deg);
-    -o-transform-origin: top left;
-    -o-animation-timing-function: ease-in-out;
-  }
-  80% {
-    -o-transform: rotate(60deg) translateY(0);
-    opacity: 1;
-    -o-transform-origin: top left;
-    -o-animation-timing-function: ease-in-out;
-  }
-  100% {
-    -o-transform: translateY(700px);
-    opacity: 0;
-  }
-}
-
-@keyframes hinge {
-  0% {
-    transform: rotate(0);
-    transform-origin: top left;
-    animation-timing-function: ease-in-out;
-  }
-  20%, 60% {
-    transform: rotate(80deg);
-    transform-origin: top left;
-    animation-timing-function: ease-in-out;
-  }
-  40% {
-    transform: rotate(60deg);
-    transform-origin: top left;
-    animation-timing-function: ease-in-out;
-  }
-  80% {
-    transform: rotate(60deg) translateY(0);
-    opacity: 1;
-    transform-origin: top left;
-    animation-timing-function: ease-in-out;
-  }
-  100% {
-    transform: translateY(700px);
-    opacity: 0;
-  }
-}
-
-.hinge {
-  -webkit-animation: hinge 1s ease-out 2s 1 normal forwards;
-  -moz-animation: hinge 1s ease-out 2s 1 normal forwards;
-  -o-animation: hinge 1s ease-out 2s 1 normal forwards;
-  animation: hinge 1s ease-out 2s 1 normal forwards;
-}
-
-/* Tablet Layout: 760px */
-@media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) {
-  #masthead,
-  #main-content,
-  .billboard {
-    width: @widthTablet - (@gridGutterWidth * 2);
-  }
-}
-
-/* Mobile layout: 320px */
-@media only screen and (max-width: @breakTablet) {
-  #masthead,
-  #main-content,
-  .billboard {
-    width: @widthMobile - (@gridGutterWidth * 2);
-  }
-
-  .billboard {
-    padding-left: @gridGutterWidth;
-    padding-right: @gridGutterWidth;
-  }
-
-  #main-content {
-    margin-top: 30px;
-
-    .lede {
-      .font-size(20px);
-    }
-  }
-}
-
-/* Wide mobile layout: 480px; */
-@media only screen and (min-width: @breakMobileLandscape) and (max-width: @breakTablet) {
-
-  #masthead,
-  #main-content,
-  .billboard {
-    width: @widthMobileLandscape - @gridGutterWidth;
-  }
-}

media/css/csrf-failure.scss

@@ -0,0 +1,9 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// 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 '../protocol/css/includes/lib';
+
+main {
+    min-height: 350px;
+}

media/static-bundles.json

@@ -368,8 +368,7 @@
     },
     {
       "files": [
-        "css/sandstone/sandstone-resp.less",
-        "css/csrf-failure.less"
+        "css/csrf-failure.scss"
       ],
       "name": "csrf-failure"
     },