skip <link rel="canonical"> for 404 page
#384
Conversation
- Integrates with existing Jekyll layout system - Matches site color scheme and navigation - Provides helpful links for users - Includes auto-redirect for common typos
- 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
- 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
|
Hey @justinmk , take a look at this , it's working now . |
|
Thanks! Feedback for future work: after all the words in this PR, I don't get the one explanation I actually need, which is how do the changes in The current PR description is a long list of things that happened, but no idea which ones solve which problem. |
| {% unless page.url == "/404.html" %} | ||
| <link rel="canonical" href="{{ site.url }}{% if page.canonical_url %}{{ page.canonical_url }}{% else %}{{ page.url }}{% endif %}" /> |
There was a problem hiding this comment.
IIUC, the key change is that rel="canonical" is skipped for the 404 page.
There was a problem hiding this comment.
Yes, exactly right. That's the core fix - should have highlighted that upfront instead of all the implementation details
justinmk
changed the title
justinmk
changed the title
<link rel="canonical"> for 404 page
Thanks for the feedback! You're absolutely right - I should have clearly explained how the _layouts/default.html changes solve the specific problem. I'll make sure future PRs follow a Problem/Solution structure so the 'why' behind each change is clear upfront. |
|
hey @justinmk , Should the footer sit directly at the bottom of the page with no extra spacing below it, and without triggering a scrollbar? Just want to confirm the expected behavior before making further adjustments. |
|
https://neovim.io/about/ works the same way. I don't think 404 page should have a custom footer behavior. Perhaps a bit of padding should be added above the footer, but not very much. Showing scrollbars on 13-inch laptops is a pretty bad tradeoff just to fix this other "problem" on bigger screens. If CSS has a simple way to add padding for bigger screens, but reduce padding for smaller screens, then sure. |
|
Got it! I'll add responsive padding that only applies on larger screens to avoid the scrollbar issue on smaller devices. I'll use a media query to keep it minimal on laptops while fixing the spacing on larger displays. |
|
Is a media query actually needed or is there a CSS property like |
|
I don't think CSS has max-padding or min-padding properties. A media query seems to be the standard approach for this. |
^ |
|
So should I make the changes directly to the main footer component, or is there a different approach you'd prefer for fixing this? |
|
All pages should have the same footer behavior |
|
understood! |
|
hey @justinmk , I've made some updates to the Here are the changes: html {
height: 100%;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
margin: 0;
}
body > nav {
flex-shrink: 0;
}
body > main {
flex: 1 0 auto;
}
body > footer {
flex-shrink: 0;
margin-top: auto;
}the final result: If you'd like any refinements or adjustments, just let me know. If everything looks good, I'll go ahead and open the pull request. |
|
LGTM thanks |
|
done , here you go : |
2 participants
Summary
Adds a custom 404 page for GitHub Pages with responsive design and mobile button alignment fixes.
Changes Made
404 Page (
404.html)Layout Updates (
_layouts/default.html)Features
Testing