skip <link rel="canonical"> for 404 page #384

alarcritty · web-flow · commit 99f6e485ed22 · 2025-09-15T12:05:41.000-07:00
* Add custom 404 page with Neovim branding

- Integrates with existing Jekyll layout system
- Matches site color scheme and navigation
- Provides helpful links for users
- Includes auto-redirect for common typos

* refactor: optimize 404 page to use existing CSS utilities

* refactor: remove custom classes, use existing masthead/lead styles

- Replace error-content with existing .masthead class
- Use .lead for 404 number styling
- Remove helpful-links section (redundant with nav)
- Drop error-buttons class, use .flex directly
- Eliminate unnecessary custom CSS classes

* style: restore typewriter style font  for 404.

* refactor: switch to golden-grid, remove bottom margin

* style: update color .masthead

* feat: add custom 404 page with GitHub Pages permalink support
- Add custom 404 page with improved mobile layout
- Improve mobile button text alignment and responsive design
- Add proper YAML front matter for GitHub Pages compatibility
- Update default layout to exclude canonical links and add noindex for 404 page
- Add flexbox layout and gap spacing for better button presentation
diff --git a/404.html b/404.html
@@ -2,11 +2,12 @@
 layout: default
 title: Page Not Found
 canonical_url: /404.html
+permalink: /404.html
 ---
 {% include nav.html %}
-<main class="front-section">
+<div style="padding: 3rem 0; min-height: 60vh; display: flex; align-items: center;">
   <div class="container">
-    <div class="masthead" style="max-width: 600px; margin: 0 auto; background-color: transparent;">
+    <div class="masthead" style="max-width: 600px; margin: 0 auto; background-color: transparent; text-align: center;">
       <div class="lead">404</div>
       <h1>Page Not Found</h1>
       <p class="light">The page you're looking for doesn't exist. It might have been moved, deleted, or you entered the wrong URL.</p>
@@ -16,15 +17,14 @@ <h1>Page Not Found</h1>
         <a href="/doc/" class="btn">Documentation</a>
       </div>
     </div>
-    </div>
   </div>
-</main>
+</div>
 
 <style>
 .masthead .lead {
   font-size: 8rem;
   font-weight: 700;
-  color:#22C55E;
+  color: #22C55E;
   font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;
   line-height: 1;
   margin-bottom: 0.5rem;
@@ -41,8 +41,10 @@ <h1>Page Not Found</h1>
 }
 
 .masthead .flex {
+  display: flex;
   justify-content: center;
   flex-wrap: wrap;
+  gap: 1rem;
 }
 
 @media (max-width: 525px) {
@@ -56,6 +58,7 @@ <h1>Page Not Found</h1>
   
   .masthead p {
     font-size: 1.1rem;
+    margin-bottom: 2rem;
   }
   
   .masthead .flex {
@@ -66,7 +69,11 @@ <h1>Page Not Found</h1>
   .masthead .btn {
     width: 100%;
     max-width: 280px;
+    text-align: center !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    padding: 0.75rem 1rem !important;
   }
 }
 </style>
-
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -23,7 +23,11 @@
 
     <link href="/css/main.css" rel="stylesheet">
     <link href="/css/neovim-hi.css" rel="stylesheet">
+    {% unless page.url == "/404.html" %}
     <link rel="canonical" href="{{ site.url }}{% if page.canonical_url %}{{ page.canonical_url }}{% else %}{{ page.url }}{% endif %}" />
+    {% else %}
+    <meta name="robots" content="noindex">
+    {% endunless %}
   </head>
 
   <body>
