From 97e03deb3bd9d1f3b9b1c90af511f030859c8d6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Elian=20=E2=98=95=EF=B8=8F?= Date: Mon, 11 Oct 2021 22:16:28 +0200 Subject: [PATCH] Add 404 page to website (#1501) * Add 404 page to website * Improving style and structure * Rework 404 as one page * Added temporary fix for errorpage The page won't work when reusing global stylesheets --- www/src/pages/404.astro | 14 +++++ www/src/pages/index.astro | 2 +- www/src/scss/error.scss | 108 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 123 insertions(+), 1 deletion(-) create mode 100644 www/src/pages/404.astro create mode 100644 www/src/scss/error.scss diff --git a/www/src/pages/404.astro b/www/src/pages/404.astro new file mode 100644 index 000000000..3b3920eab --- /dev/null +++ b/www/src/pages/404.astro @@ -0,0 +1,14 @@ + + + Astro | Page Not Found + + + +
+

404 | error

+

Lost in space there, Astronaut?

+

Let's see if we can guide you back

+ Back to homepage +
+ + \ No newline at end of file diff --git a/www/src/pages/index.astro b/www/src/pages/index.astro index 3d113a694..981db9f57 100644 --- a/www/src/pages/index.astro +++ b/www/src/pages/index.astro @@ -18,7 +18,7 @@ let lang = 'en'; - + diff --git a/www/src/scss/error.scss b/www/src/scss/error.scss new file mode 100644 index 000000000..61b0b1747 --- /dev/null +++ b/www/src/scss/error.scss @@ -0,0 +1,108 @@ +@use './fonts.scss'; + +:root { + --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + --font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', + 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; + --color-accent: #ff5d01; +} + +* { + box-sizing: border-box; + margin: 0; +} +html { + background-color: #000014; +} +html, +body { + padding: 0; + font-size: clamp(14px, calc(1rem + (3vw - 1.2rem)), 20px); + font-family: var(--font-sans); + font-weight: 400; + background-repeat: no-repeat; + color: #f3f4f6; +} +.visually-hidden { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} +a { + position: relative; + text-decoration: none; + color: var(--color-accent); + padding: 0.05em 0.125em; + margin: -0.05em -0.125em; + transition: color 120ms cubic-bezier(0.23, 1, 0.32, 1); + z-index: 0; + display: inline-block; + + &:hover, + &:focus { + color: rgba(0, 0, 0, 1); + + &::before { + transform: scaleY(1); + background: var(--color-accent); + } + } + + &:visited { + // color: var(--color-accent); + color: var(--color-accent); + &:hover, + &:focus { + color: rgba(0, 0, 0, 1); + } + } + + &::before { + transform-origin: bottom center; + content: ''; + display: block; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + inset: 0; + background: var(--color-accent); + pointer-events: none; + transform: scaleY(0.05); + transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background 120ms cubic-bezier(0.23, 1, 0.32, 1); + z-index: -1; + } +} + +a + a { + margin-left: 2px; +} + + +section.error-content { + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + p.error-code { + color: #ff5d01; + text-transform: uppercase; + } + h1 { + margin-top: -0.5rem; + margin-bottom: 1rem; + font-size: 2rem; + } + p { + margin: 1rem 0; + } + a { + margin: 1rem 0; + } +} \ No newline at end of file