source: Klonkt/src/views/pages/404.ejs@ b200738

main
Last change on this file since b200738 was 3b6e04a, checked in by roboburr <roboburr@…>, 3 months ago

404: proper, mobile-friendly page instead of bare text

Catch-all now renders pages/404.ejs via the shell (viewport + topnav + branding):
large 404 number in accent color, clear heading, "go home"/archive buttons,
responsive (buttons full-width on narrow screens). Bare-HTML fallback if rendering
fails.

Co-Authored-By: Claude <noreply@…>
  • Property mode set to 100644
File size: 1.5 KB
Line 
1<section class="nf">
2 <div class="nf-code">404</div>
3 <h1 class="nf-title">Pagina niet gevonden</h1>
4 <p class="nf-sub">Deze pagina bestaat niet (meer). Misschien is de link verouderd of verkeerd getypt.</p>
5 <div class="nf-actions">
6 <a class="nf-btn nf-btn-primary" href="<%= (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '' %>/">← Naar de homepagina</a>
7 <% if (typeof site !== 'undefined' && site && site.show_archive_link !== 0) { %>
8 <a class="nf-btn" href="<%= (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '' %>/archive">Archief</a>
9 <% } %>
10 </div>
11</section>
12
13<style>
14 .nf { max-width: 540px; margin: 0 auto; padding: 12vh 20px 64px; text-align: center; }
15 .nf-code { font-size: clamp(72px, 22vw, 140px); font-weight: 800; line-height: .9; color: var(--accent, #6b8f71); opacity: .9; letter-spacing: -.03em; }
16 .nf-title { font-size: clamp(22px, 6vw, 32px); margin: .4rem 0 .6rem; }
17 .nf-sub { opacity: .8; line-height: 1.6; margin: 0 auto 1.6rem; max-width: 36ch; }
18 .nf-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
19 .nf-btn { display: inline-block; padding: 12px 20px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 15px; border: 1px solid rgba(128,128,128,.35); color: inherit; }
20 .nf-btn-primary { background: var(--accent, #6b8f71); border-color: var(--accent, #6b8f71); color: #fff; }
21 @media (max-width: 420px) { .nf-actions { flex-direction: column; } .nf-btn { width: 100%; } }
22</style>
Note: See TracBrowser for help on using the repository browser.