michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add 404 page to website (#1501)

Browse source 
* 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
This commit is contained in:
Elian ☕️ 2021-10-11 22:16:28 +02:00 committed by GitHub
parent 5ef1bf6e7d
commit 97e03deb3b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 123 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
www/src/pages/404.astro Normal file
View file

@ -0,0 +1,14 @@
<html lang="en">
<head>
<title>Astro | Page Not Found</title>
<link rel="stylesheet" href={Astro.resolve('../scss/error.css')} />
</head>
<body>
<section class="error-content">
<p class="error-code">404 | error</p>
<h1>Lost in space there, Astronaut?</h1>
<p>Let's see if we can guide you back</p>
<a href="/" title="back to homepage">Back to homepage</a>
</section>
</body>
</html>

2
www/src/pages/index.astro
View file

@ -18,7 +18,7 @@ let lang = 'en';
<html lang={ lang ?? 'en' }>
<head>
<BaseHead title={title} description={description} permalink={permalink} />
<BaseHead title={title} description={description} canonicalURL={permalink} />
<link rel="stylesheet" href={Astro.resolve('../scss/global.css')} />
</head>

108
www/src/scss/error.scss Normal file
View file

@ -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;
}
}