diff --git a/assets/styles/layouts/404.scss b/assets/styles/layouts/404.scss index e4b1265..d496fdb 100644 --- a/assets/styles/layouts/404.scss +++ b/assets/styles/layouts/404.scss @@ -2,94 +2,63 @@ body.kind-404 { #sidebar-toggler { display: none; } - + .notFound { padding-top: 5rem; text-align: center; padding-bottom: 8rem; + + img { + height: 500px; + } + + h1 { + font-style: italic; + } + + .message { + position: absolute; + max-width: 20rem; + top: 40%; + left: 30%; + } } - - .notFound img { - height: 500px; - } - - .notFound h1 { - font-style: italic; - } - - .notFound .message { - position: absolute; - max-width: 20rem; - top: 40%; - left: 30%; - } - - /* ============= Device specific fixes ======= */ - - /* Large screens such as TV */ - @media only screen and (min-width: 1824px) { - } - - /* Extra large devices (large desktops, 1200px and up) */ - - @media (max-width: 1400px) { - } - - @media (max-width: 1200px) { + + @include media('<=very-large') { .notFound .message { top: 50%; left: 25%; } } - - /* IPad Pro */ - @media (max-width: 1024px) { - } - - /* Large devices (desktops, 992px and up) */ - - @media (max-width: 992px) { + + @include media('<=large') { .notFound .message { top: 46%; left: 25%; } } - - /* Medium devices (tablets, 768px and up) */ - - @media only screen and (max-width: 768px) { - .notFound img { - height: 400px; - } - - .notFound .message { - top: 20rem; - left: 4rem; + + @include media('<=medium') { + .notFound { + img { + height: 400px; + } + .message { + top: 20rem; + left: 4rem; + } } } - - /* Small devices (landscape phones, 576px and up) */ - - @media only screen and (max-width: 576px) { - .notFound img { - height: 250px; - } - - .notFound .message { - top: 20rem; - left: 2rem; + + @include media('<=small') { + .notFound { + img { + height: 250px; + } + .message { + top: 20rem; + left: 2rem; + } } } - - /* iPhoneX, iPhone 6,7,8 */ - @media only screen and (max-width: 375px) { - } - - /* Galaxy S5, Moto G4 */ - @media only screen and (max-width: 360px) { - } - - /* iPhone 5 or before */ - @media only screen and (max-width: 320px) { - } }