diff --git a/src/routes/error/[code]/page.scss b/src/routes/error/[code]/page.scss index fbc2c2e6..bf97ea41 100644 --- a/src/routes/error/[code]/page.scss +++ b/src/routes/error/[code]/page.scss @@ -12,9 +12,8 @@ display: flex; padding: 2rem; - & > *:not(:last-child) { - margin-right: 2rem; - margin-bottom: 2rem; + & > * + * { + margin-left: 2rem; } @include screen.desktop { @@ -22,10 +21,20 @@ max-width: 960px; width: 75%; } + + @include screen.mobile { + flex-direction: column; + + & > * + * { + margin-left: 0; + margin-top: 2rem; + } + } } &__illustration { - flex: 30%; + flex: 0 0 30%; + min-height: 300px; background-position: bottom; background-repeat: no-repeat; background-size: contain; @@ -39,6 +48,7 @@ &__code { font-size: 8rem; color: #a3a3a3; + line-height: 1; margin: 0; } @@ -49,10 +59,10 @@ } &__content { - flex: 70%; + flex: 1 1 70%; - & > *:not(:last-child) { - margin-bottom: 1rem; + & > * + * { + margin-top: 1rem; } @include screen.mobile { @@ -63,66 +73,60 @@ &__description { max-width: 480px; color: colors.$light-gray; + line-height: 1.5; } &__actions { display: flex; padding: 2rem 0; flex-wrap: wrap; - - @include screen.gt-mobile { - & > *:not(:last-child) { - margin-right: 1rem; - } - } + gap: 1rem; @include screen.mobile { - flex-wrap: wrap; + flex-direction: column; + } + } - & > *:not(:last-child) { - margin-bottom: 1rem; + &__btn { + height: 35px; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0 1.5rem; + text-decoration: none; + border-radius: vars.$border-radius; + font-size: 1rem; + cursor: pointer; + transition: background-color 0.2s, color 0.2s; + + &--primary { + background-color: colors.$blue-light; + color: colors.$white; + border: none; + + &:hover { + background-color: colors.$blue-light--hover; } } - a { - height: 35px; - display: flex; - align-items: center; - text-decoration: none; - color: colors.$blue-link; + &--secondary { + background-color: colors.$blue-dark; + color: colors.$white; + border: none; + + &:hover { + opacity: 0.9; + } + } + + &--link { + background: transparent; + color: colors.$blue-light; + border: none; &:hover { text-decoration: underline; } } } - - &__search { - width: 100%; - - @include screen.desktop { - width: 17rem; - } - - margin-bottom: 1rem; - - input { - font-size: 0.875rem; - box-sizing: border-box; - width: 100%; - height: 2.25rem; - padding: 0.25rem 0.5rem; - border: 1px solid #dfdfdf; - background: #fff; - appearance: none; - transition: all 0.2s; - outline: 0 solid transparent; - border-radius: 0.1875rem; - - &:focus { - border: 1px solid #b7d3f3; - box-shadow: 0 0.0625rem 0.1875rem #cad6e5; - } - } - } } diff --git a/src/routes/error/[code]/page.tsx b/src/routes/error/[code]/page.tsx index 7f8f21ce..0e87ef84 100644 --- a/src/routes/error/[code]/page.tsx +++ b/src/routes/error/[code]/page.tsx @@ -1,27 +1,31 @@ import { useParams } from "@modern-js/runtime/router"; import "./page.scss"; -const ERROR_CONFIG: Record = { +const ERROR_CONFIG: Record = { "404": { title: "Page not found", description: "The page you are looking for does not exist or the link is broken.", + image: "/assets/img/lady404.png", }, "500": { title: "Server error", description: "An internal error occurred while processing your request. Please try again later.", + image: "/assets/img/lady500.png", }, "503": { title: "Service unavailable", description: "The service is temporarily unavailable. Please try again in a few moments.", + image: "/assets/img/lady500.png", }, }; const FALLBACK = { title: "Error", description: "An unexpected error occurred.", + image: "/assets/img/lady500.png", }; /** @@ -34,14 +38,34 @@ export default function ErrorPage(): JSX.Element { return (
-
-
+
+
-

{code ?? "?"}

-

{config.title}

-

{config.description}

+
{code ?? "?"}
+
{config.title}
+
{config.description}