m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-12-22 17:23:50 +01:00
Code

restore 404 page

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-09-09 18:16:13 +02:00
parent 4acd2f227b
commit 4fc6639fbd
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 84 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
_src/_assets/styl/_page-404.styl
View File

@ -1,68 +0,0 @@
//
// kremalicious3
// --------------
// Page - 404
//
.page-404
@extend .textcenter
.entry-title
@extend .hide
.srverror-title
font-size: 2em
margin-bottom: ($spacer/4)
color: $text-color-light
.srverror-text
@extend .text-dimmed
font-size: 1.2em
letter-spacing: .01em
// HAL needs a size
$hal-size = 72px
.hal-9000
@extend .textcenter, .aligncenter
width: $hal-size
height: $hal-size
border-radius: $hal-size
background: #444
padding: 1.5em
margin-top: $spacer
margin-bottom: $spacer
position: relative
border: 4px solid #ccc
box-shadow: inset 0 0 10px #000
// eye
&:before
content: ""
width: 100%
height: 100%
border-radius: 100%
display: block
background: red
box-shadow: 0 0 5px red, 0 0 10px red, 0 0 15px red, 0 0 20px red, 0 0 25px red, 0 0 30px red, 0 0 40px red
animation: halpulse 7s infinite
// gloss
&:after
content: ""
position: absolute
width: $hal-size
height: $hal-size
border-radius: $hal-size
position: absolute
left: 0
top: 0
background-image: linear-gradient(135deg, rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.07) 40%,rgba(255,255,255,0) 41%)
@keyframes halpulse
0%
opacity: 1
50%
opacity: .6
100%
opacity: 1

1
src/components/Layout.module.scss
View File

@ -29,6 +29,7 @@
background-color: $page-background-color;
border-top: 1px solid rgba(255, 255, 255, .7);
border-bottom: 1px solid rgba(255, 255, 255, .7);
padding-bottom: $spacer * 2;
box-shadow: 0 1px 4px rgba($brand-main, .1),
0 -1px 4px rgba($brand-main, .2);
transform: translate3d(0, 0, 0);

14
src/pages/404.jsx
View File

@ -1,17 +1,19 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'gatsby'
import Layout from '../components/Layout'
import styles from './404.module.scss'
const NotFound = ({ location }) => (
<Layout location={location}>
<div className="hal-9000" />
<div className={styles.hal9000} />
<p className="srverror-title">I am sorry Dave,</p>
<p className="srverror-text">I am afraid I can not do that.</p>
<div className={styles.wrapper}>
<h1 className={styles.title}>I am sorry Dave,</h1>
<p className={styles.text}>I am afraid I can not do that.</p>
<a href="#" className="js-search-init">
How about a nice search?
</a>
<Link to={'/'}>Back to homepage</Link>
</div>
</Layout>
)

75
src/pages/404.module.scss Normal file
View File

@ -0,0 +1,75 @@
@import 'variables';
.wrapper {
text-align: center;
}
.title {
font-size: $font-size-h3;
margin-top: 0;
margin-bottom: $spacer / 4;
}
.text {
font-size: $font-size-base;
color: $brand-grey-light;
}
// HAL needs a size
$hal-size: 72px;
.hal9000 {
width: $hal-size;
height: $hal-size;
border-radius: $hal-size;
background: #444;
padding: 1.5em;
margin: $spacer auto;
position: relative;
border: 4px solid #ccc;
box-shadow: inset 0 0 10px #000;
// eye
&::before {
content: '';
width: 100%;
height: 100%;
border-radius: 100%;
display: block;
background: red;
box-shadow: 0 0 5px red, 0 0 10px red, 0 0 15px red, 0 0 20px red,
0 0 25px red, 0 0 30px red, 0 0 40px red;
animation: halpulse 7s infinite;
}
// gloss
&::after {
content: '';
position: absolute;
width: $hal-size;
height: $hal-size;
border-radius: $hal-size;
left: 0;
top: 0;
background-image: linear-gradient(
135deg,
rgba(255, 255, 255, .07) 0%,
rgba(255, 255, 255, .07) 40%,
rgba(255, 255, 255, 0) 41%
);
}
}
@keyframes halpulse {
0% {
opacity: 1;
}
50% {
opacity: .6;
}
100% {
opacity: 1;
}
}