Skip to content

Commit 1dd926a

Browse files
alex-shpakalex-shpak
committed
Update 404 page
1 parent 8db9aeb commit 1dd926a

File tree

3 files changed

+63
-33
lines changed

3 files changed

+63
-33
lines changed

‎assets/_main.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -207,7 +207,6 @@ body[dir="rtl"] .book-menu {
207207
}
208208

209209
.book-header {
210-
display: none;
211210
margin-bottom: $padding-16;
212211

213212
label {

‎layouts/404.html‎

Lines changed: 62 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,65 @@
11
<!DOCTYPE html>
22
<html lang="{{ .Site.Language.Lang }}">
3+
<head>
4+
{{ partial "docs/html-head" . }}
5+
{{ partial "docs/inject/head" . }}
36

4-
<head>
5-
{{ partial "docs/html-head" . }}
6-
{{ partial "docs/inject/head" . }}
7-
8-
<style>
9-
.not-found {
10-
text-align: center;
11-
}
12-
.not-found h1 {
13-
margin: .25em 0 0 0;
14-
opacity: .25;
15-
font-size: 40vmin;
16-
}
17-
</style>
18-
</head>
19-
20-
<body>
21-
<main class="flex justify-center not-found">
22-
<div>
23-
<h1>404</h1>
24-
<h2>Page Not Found</h2>
25-
<h3>
26-
<a href="{{ .Site.Home.RelPermalink }}">{{ .Site.Title }}</a>
27-
</h3>
28-
</div>
29-
</main>
30-
31-
{{ partial "docs/inject/body" . }}
32-
</body>
33-
34-
</html>
7+
<style>
8+
.not-found {
9+
height: 100vh;
10+
width: 100vw;
11+
}
12+
13+
.not-found h1 {
14+
font-size: 10vmin;
15+
font-weight: lighter;
16+
cursor: default;
17+
}
18+
19+
.not-found h1 span {
20+
display: inline-block;
21+
transition: transform .2s ease-out, opacity .2s ease-out;
22+
}
23+
24+
.not-found h1:hover span {
25+
transition-duration: 1s;
26+
transform: translate(var(--drift-x), var(--drift-y)) rotate(var(--rotate-end));
27+
opacity: 0;
28+
}
29+
30+
.not-found h1:hover span:nth-child(1) {
31+
--drift-x: -1em;
32+
--drift-y: 1em;
33+
--rotate-end: -90deg;
34+
}
35+
36+
.not-found h1:hover span:nth-child(2) {
37+
--drift-x: -1em;
38+
--drift-y: -2em;
39+
--rotate-end: 45deg;
40+
}
41+
42+
.not-found h1:hover span:nth-child(3) {
43+
--drift-x: 3em;
44+
--drift-y: 1em;
45+
--rotate-end: 120deg;
46+
}
47+
</style>
48+
</head>
49+
50+
<body class="not-found flex justify-center align-center">
51+
<main class="text-center">
52+
<h1>
53+
<span>Page</span>
54+
<span>Not</span>
55+
<span>Found</span>
56+
</h1>
57+
<h3>
58+
<a href="{{ .Site.Home.RelPermalink }}">{{ .Site.Title }}</a>
59+
</h3>
60+
</main>
61+
62+
{{ partial "docs/inject/body" . }}
63+
</body>
64+
65+
</html>

‎layouts/baseof.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
{{ template "menu-container" . }} <!-- Left menu -->
1212

1313
<div class="book-page">
14-
<header class="book-header">
14+
<header class="book-header hidden">
1515
{{ template "header" . }} <!-- Mobile layout header -->
1616
</header>
1717

0 commit comments

Comments
 (0)