hugo-book
Code Issues

Update 404 page

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
assets/_main.scss
-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 {
layouts/404.html
+58 -27
View File
@@ -1,34 +1,65 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ .Site.Language.Lang }}"> <html lang="{{ .Site.Language.Lang }}">
<head>
{{ partial "docs/html-head" . }}
{{ partial "docs/inject/head" . }}
<head> <style>
{{ partial "docs/html-head" . }} .not-found {
{{ partial "docs/inject/head" . }} height: 100vh;
width: 100vw;
}
<style> .not-found h1 {
.not-found { font-size: 10vmin;
text-align: center; font-weight: lighter;
} cursor: default;
.not-found h1 { }
margin: .25em 0 0 0;
opacity: .25;
font-size: 40vmin;
}
</style>
</head>
<body> .not-found h1 span {
<main class="flex justify-center not-found"> display: inline-block;
<div> transition: transform .2s ease-out, opacity .2s ease-out;
<h1>404</h1> }
<h2>Page Not Found</h2>
<h3>
<a href="{{ .Site.Home.RelPermalink }}">{{ .Site.Title }}</a>
</h3>
</div>
</main>
{{ partial "docs/inject/body" . }} .not-found h1:hover span {
</body> transition-duration: 1s;
transform: translate(var(--drift-x), var(--drift-y)) rotate(var(--rotate-end));
opacity: 0;
}
</html> .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>
</head>
<body class="not-found flex justify-center align-center">
<main class="text-center">
<h1>
<span>Page</span>
<span>Not</span>
<span>Found</span>
</h1>
<h3>
<a href="{{ .Site.Home.RelPermalink }}">{{ .Site.Title }}</a>
</h3>
</main>
{{ partial "docs/inject/body" . }}
</body>
</html>
layouts/baseof.html
+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>