Update 404 page

2025-09-28 19:01:37 +02:00
parent 8db9aeb2c8
commit 1dd926ac06
3 changed files with 59 additions and 29 deletions
@@ -207,7 +207,6 @@ body[dir="rtl"] .book-menu {
 }

 .book-header {
-  display: none;
  margin-bottom: $padding-16;

  label {
@@ -1,31 +1,62 @@
 <!DOCTYPE html>
 <html lang="{{ .Site.Language.Lang }}">
-
 <head>
  {{ partial "docs/html-head" . }}
  {{ partial "docs/inject/head" . }}

  <style>
    .not-found {
-        text-align: center;
+      height: 100vh;
+      width: 100vw;
    }
+
    .not-found h1 {
-        margin: .25em 0 0 0;
-        opacity: .25;
-        font-size: 40vmin;
+      font-size: 10vmin;
+      font-weight: lighter;
+      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>
 </head>

-  <body>
-    <main class="flex justify-center not-found">
-      <div>
-        <h1>404</h1>
-        <h2>Page Not Found</h2>
+<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>
-      </div>
  </main>

  {{ partial "docs/inject/body" . }}
@@ -11,7 +11,7 @@
    {{ template "menu-container" . }} <!-- Left menu -->

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