Claude/fix archive layout f kj c0 #1
+1,061
−6,790
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Remove academic/culture split, focus on academic content - Add minimalist CSS theme (Inter font, dark mode) - Move tea ceremony essays to blog posts - Clean up stale template files - Simplify navigation: About, Publications, CV, Blog - Rewrite README for future maintainability Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Change URL from yc-han.github.io to yhan228.github.io - Update repository to YHan228/YHan228.github.io - Add CSS fixes to prevent text cutoff Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Removed custom width/max-width CSS that was breaking the Susy grid layout and causing text to be cut off by sidebar. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add left margin to #main when sidebar becomes position:fixed, preventing content from being hidden behind the sidebar. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Replace Susy float grid with CSS Grid layout - Change sidebar from fixed to sticky positioning (fixes overlap bug) - Add comprehensive design token system (colors, spacing, transitions) - Implement fluid typography with clamp() and tight letter-spacing - Add glassmorphism masthead with backdrop blur - Style sidebar as card with circular avatar and icon-only social links - Add card-style archive items with hover effects - Implement staggered fadeInUp animations on page load - Add masthead shadow on scroll via intersection observer - Support prefers-reduced-motion for accessibility - Optimize for mobile with 44px touch targets Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1. Sidebar social links: hide text, show icons only 2. Navigation: remove redundant "About" link (homepage = about) 3. Archive items: switch from cards to horizontal list style 4. Code blocks: increase font size from 0.875em to 14px 5. Chanoyu pages: add back-to-home navigation button 6. Dark mode toggle: fix click handler not working Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Chanoyu pages: Home button now styled as green pill button - Archive items: use CSS Grid for proper horizontal layout - Title on left, date on right (same line) - Hides excerpt for cleaner list view - Stacks vertically on mobile Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Dark mode: rewrite toggle with proper event handling - Archive items: full-width horizontal rows (title left, meta right) - Theme toggle: add explicit color and appearance reset Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Archive items: - Change from flex to block layout - Items now stack vertically (title, metadata, citation) - Remove flex-related mobile overrides Dark mode: - Complete rewrite with simpler implementation - Use class selector instead of ID - Direct onclick handler (no addEventListener) - Unicode sun/moon icons Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Archive: - Override .list__item padding-right (was cramping content) - Override .archive width constraints - Add !important to force full-width display - Items now properly use full content width Dark mode: - Replace Unicode icons with SVG sun/moon - CSS controls icon visibility based on data-theme - Simpler onclick handler Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Bug 1 - Archive Layout (box instead of full-width list): ROOT CAUSE: Susy grid mixins in _archive.scss generated percentage-based widths and margins that constrained the archive to ~83% width. custom.css overrode width/float but NOT margin-left. FIX: Removed Susy mixins from _archive.scss, added comprehensive margin/padding overrides in custom.css. Bug 2 - Dark Mode Toggle (clicking did nothing): ROOT CAUSE: Two competing implementations - jQuery in main.min.js targeting #theme-toggle (hidden masthead element) and vanilla JS targeting .theme-toggle (floating button). The jQuery code could interfere with theme initialization on page load. FIX: Removed old masthead toggle, rewrote vanilla JS with robust error handling, added jQuery conflict prevention, and cleaned up _main.js dark mode code. Files modified: - _sass/layout/_archive.scss: Removed Susy grid constraints - _includes/masthead.html: Removed old hidden #theme-toggle - _includes/scripts.html: Robust vanilla JS theme toggle - assets/css/custom.css: Added margin overrides for archive - assets/js/_main.js: Removed conflicting dark mode code https://claude.ai/code/session_01Pf6RppSKLUNg77tXAyKvFm
Root cause fixes:
1. Archive Layout (still narrow):
- CAUSE: When no sidebar exists, .archive was placed in the sidebar
column (first column of the grid)
- FIX: Added `grid-column: 1 / -1` to .archive by default, then
`.sidebar ~ .archive { grid-column: auto }` when sidebar exists
2. Dark Mode Toggle (clicking did nothing):
- CAUSE: main.min.js is a PRE-COMPILED file that still contained the
old jQuery dark mode code, which was conflicting with vanilla JS
- FIX: Surgically removed the jQuery dark mode code from main.min.js
- Also cleaned up scripts.html (removed now-unnecessary jQuery
conflict prevention code)
Files modified:
- assets/js/main.min.js: Removed jQuery dark mode code
- assets/css/custom.css: Fixed archive grid-column behavior
- _includes/scripts.html: Removed obsolete jQuery workaround
https://claude.ai/code/session_01Pf6RppSKLUNg77tXAyKvFm
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.