Update 404 page

This commit is contained in:
Alex Shpak
2025-09-28 19:01:37 +02:00
parent 8db9aeb2c8
commit 1dd926ac06
3 changed files with 59 additions and 29 deletions
-1
View File
@@ -207,7 +207,6 @@ body[dir="rtl"] .book-menu {
} }
.book-header { .book-header {
display: none;
margin-bottom: $padding-16; margin-bottom: $padding-16;
label { label {
+42 -11
View File
@@ -1,31 +1,62 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ .Site.Language.Lang }}"> <html lang="{{ .Site.Language.Lang }}">
<head> <head>
{{ partial "docs/html-head" . }} {{ partial "docs/html-head" . }}
{{ partial "docs/inject/head" . }} {{ partial "docs/inject/head" . }}
<style> <style>
.not-found { .not-found {
text-align: center; height: 100vh;
width: 100vw;
} }
.not-found h1 { .not-found h1 {
margin: .25em 0 0 0; font-size: 10vmin;
opacity: .25; font-weight: lighter;
font-size: 40vmin; cursor: default;
}
.not-found h1 span {
display: inline-block;
transition: transform .2s ease-out, opacity .2s ease-out;
}
.not-found h1:hover span {
transition-duration: 1s;
transform: translate(var(--drift-x), var(--drift-y)) rotate(var(--rotate-end));
opacity: 0;
}
.not-found h1:hover span:nth-child(1) {
--drift-x: -1em;
--drift-y: 1em;
--rotate-end: -90deg;
}
.not-found h1:hover span:nth-child(2) {
--drift-x: -1em;
--drift-y: -2em;
--rotate-end: 45deg;
}
.not-found h1:hover span:nth-child(3) {
--drift-x: 3em;
--drift-y: 1em;
--rotate-end: 120deg;
} }
</style> </style>
</head> </head>
<body> <body class="not-found flex justify-center align-center">
<main class="flex justify-center not-found"> <main class="text-center">
<div> <h1>
<h1>404</h1> <span>Page</span>
<h2>Page Not Found</h2> <span>Not</span>
<span>Found</span>
</h1>
<h3> <h3>
<a href="{{ .Site.Home.RelPermalink }}">{{ .Site.Title }}</a> <a href="{{ .Site.Home.RelPermalink }}">{{ .Site.Title }}</a>
</h3> </h3>
</div>
</main> </main>
{{ partial "docs/inject/body" . }} {{ partial "docs/inject/body" . }}
+1 -1
View File
@@ -11,7 +11,7 @@
{{ template "menu-container" . }} <!-- Left menu --> {{ template "menu-container" . }} <!-- Left menu -->
<div class="book-page"> <div class="book-page">
<header class="book-header"> <header class="book-header hidden">
{{ template "header" . }} <!-- Mobile layout header --> {{ template "header" . }} <!-- Mobile layout header -->
</header> </header>