diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/images/logo-eyeclosed.svg b/wagtail/wagtailadmin/static_src/wagtailadmin/images/logo-eyeclosed.svg index aa1302c4d1..bc5168c3ae 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/images/logo-eyeclosed.svg +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/images/logo-eyeclosed.svg @@ -1 +1 @@ - + diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_logo.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_logo.scss index b2b660f171..eb747140dd 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_logo.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_logo.scss @@ -65,7 +65,8 @@ display: block; left: 0; top: 0; - width: 60px; + width: 100%; + height: 100%; position: absolute; transition: inherit; diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/404.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/404.scss new file mode 100644 index 0000000000..a2b8f12906 --- /dev/null +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/404.scss @@ -0,0 +1,81 @@ +@import 'wagtailadmin/scss/variables'; +@import 'wagtailadmin/scss/mixins'; +@import 'wagtailadmin/scss/grid'; + +.page404__bg { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: $color-teal-darker; + font-family: $font-sans; + color: $color-white; +} + +.page404__wrapper { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: flex; + justify-content: center; + align-items: center; +} + +.wagtail-logo-container__desktop { + float: left; + width: 400px; + height: 500px; +} + +.page404__text-container { + float: right; + width: 600px; + height: 500px; + text-align: center; +} + +.page404__header { + font-size: 6.8em; + margin-bottom: 0.2em; + color: inherit; +} + +.page404__text { + font-size: 2.25em; + line-height: 1.25em; + color: inherit; +} + +a.button.page404__button { // more specific to override standard button styles + font-size: 1.5em; + line-height: 2em; + height: 2.5em; + padding: 0 0.5em; + background-color: $color-teal-darker; + border: 4px solid $color-teal; + color: inherit; + + &:hover { + background-color: $color-teal; + } +} + +// SMALL DESKTOP CHANGES: +@media screen and (max-width: $breakpoint-desktop-small) { // 900px + .wagtail-logo-container__desktop { + display: none; + } +} + +// MOBILE CHANGES: +@media screen and (max-width: $breakpoint-mobile) { // 800px + .page404__text-container { + width: 400px; + } + + .page404__header { + font-size: 5em; + } +} diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/404.html b/wagtail/wagtailadmin/templates/wagtailadmin/404.html new file mode 100644 index 0000000000..e94fbf98d7 --- /dev/null +++ b/wagtail/wagtailadmin/templates/wagtailadmin/404.html @@ -0,0 +1,31 @@ +{% extends "wagtailadmin/admin_base.html" %} +{% load wagtailadmin_tags wagtailcore_tags staticfiles i18n %} +{% block titletag %}{% trans "Error 404: Page not found" %}{% endblock %} + + +{% block extra_css %} + {{ block.super }} + + +{% endblock %} + + +{% block furniture %} +
+ {% trans "The requested page could not be found." %} +
+ + {% trans "Go to Wagtail admin" %} +