| Age | Commit message (Collapse) | Author | Files | Lines |
|---|
|
|
|
|
|
Tag cloud links now use var(--bg2) solid background instead of transparent,
improving readability against the matrix rain canvas on homepage. Hover state
uses rgba(accent-rgb, 0.1) for consistency with theming standard.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
|
|
- Rebuilt CSS with main.min.css using Tailwind
- Fixed tag-cloud.html template: replaced cond function with if/else to properly render CSS color variables
- All tag cloud instances now render with correct inline styles: var(--accent) and var(--text-dim)
- HTML output verified across homepage, article sidebars, and 404 page
- Language-aware tag URLs confirmed: /tags/* for English, /it/tags/* for Italian
|
|
- Remove .tag-tier-* classes (sizing now inline)
- Update .tag-cloud to center-justify for natural cloud layout
- Add opacity transition to .tag-cloud-link
- Remove hardcoded font-size from .tag-cloud-link
|
|
- Create tag-cloud.html partial with flexible dict interface:
* showCount (bool): Toggle count badges
* wrapInWidget (bool): Sidebar widget wrapper with .sidebar-widget class
* maxTags (int): Limit shown tags (used for sidebar: 15 max)
* headingLevel (h2|h3): Configurable heading element
- Implement visual tier scaling by frequency (3 tiers):
* low: 0.75rem, 0.75 opacity — uncommon tags
* medium: 0.875rem, 0.88 opacity — moderate frequency
* high: 1rem, 1 opacity, accent border — popular tags
- Add .tag-cloud and .tag-tier-* CSS classes (main.css):
* Uses CSS variables (--accent, --border, --text-dim) for dark/light compatibility
* Focus ring matches site standard (outline-offset: 2px)
* Hover state: accent border + subtle bg tint
* prefers-reduced-motion: transitions disabled
- Integrate in 3 locations:
* Homepage (layouts/index.html): Full cloud with counts
* Article sidebar (layouts/partials/sidebar.html): Compact widget, 15 max, no counts
* 404 pages (404.en.html, 404.it.html): Full cloud between recent articles and nav
- A11y implementation:
* <section aria-labelledby> landmark (non-sidebar mode)
* <nav aria-label="Browse by topic"> named navigation
* Each link aria-label includes count text even when visual badge hidden
* <span aria-hidden="true"> on count badge to avoid duplication
* Proper heading hierarchy (h2 homepage, h3 on 404)
- Add i18n keys (en.yaml, it.yaml):
* tagCloud: "Explore Topics" / "Esplora gli argomenti"
* exploreTopics: "Browse by topic" / "Sfoglia per argomento"
- URL handling: Use .Page.RelPermalink from OrderedTaxonomyEntry — no manual /tags/ construction, language-aware paths work automatically
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
Added CSS custom properties --type-{name}-text for each article type with appropriate text colors per theme:
- Dark mode: all types use black text (#000000) for sufficient contrast
- Light mode: tech and photo types use white text (#ffffff), life/quote/link use black text (#000000)
Updated article-header.html and article-card.html to use color: var(--type-{name}-text) instead of hardcoded text-white class.
Improves contrast ratios:
- Quote type dark mode: 1.34:1 → 15.66:1 (white on #00ff88 was failing WCAG AA)
- All other types now pass 4.5:1 minimum for WCAG AA small text
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
|
|
|
|
The spine's absolute position is measured from the <ol> border edge, but
abs-positioned children of .timeline-item use the item's padding box as
reference. With px-4 (16px) on .timeline and margin-left: 30px on the item,
the item left sits at 46px from the <ol> border. Spine right = 22px, so
relative to item = -24px. Fixed connector to left:-24px/width:24px and
node to left:-30px so both touch the spine correctly on mobile.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
thumbnail ratio
- Remove flex from .timeline-item (was breaking abs positioning of connector/node)
- Fix desktop connector math: left=calc(50%-24px)/right=calc(50%+1px), width=23px each
- Fix mobile node position: left=-20px (was -27px, off-spine by ~5px)
- Fix mobile connector: left=-14px/width=14px (aligned to spine right edge at 22px)
- Fix thumbnail aspect-ratio: 3/2 landscape (was 2/3 portrait)
- Reduce item margin-left from 44px to 36px for better mobile breathing room
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Move max-w-7xl from grid to article element so CSS grid computes
column track sizes against the actual container width. Add min-w-0
to the col-span-2 child to prevent implicit grid child overflow.
Simplify .content-grid CSS selector and guard 2rem padding behind
md breakpoint; apply 2px padding on mobile so content doesn't sit
flush against the border.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
Stack links vertically on narrow screens, removing max-width constraints to prevent text truncation. Links are left-aligned for prev, right-aligned for next on all screen sizes.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
Manual testing completed with all verifications passing:
Build & Setup:
- Hugo built successfully (289 EN pages, 253 IT pages)
- search-index.json generated (7.5KB) with valid JSON array structure
- Language-specific indices created: /search-index.json and /it/search-index.json
- CSS compiled via Tailwind (77KB, includes focus ring utilities)
- Hugo dev server started successfully on localhost:1313
Desktop Modal (Hidden on Mobile):
- Search icon visible in header (magnifying glass icon, md: breakpoint)
- Click search icon opens modal with overlay
- Input field auto-focused (Alpine.js $nextTick handler)
- Type query filters results in real-time (max 5 results)
- Results display title + publication date
- Click result navigates to article URL (both EN and IT)
- Esc key closes modal (Alpine handleEscape listener)
- Click backdrop (outside modal) closes it
- Close button (×) closes modal (Alpine close method)
Mobile Menu (Hidden on Desktop):
- Search icon NOT visible in header (hidden md:hidden)
- Hamburger menu contains search bar at top
- Search bar visible between navigation links and language toggle
- Type query filters results in real-time below input
- Click result navigates to article and closes menu automatically
404 Page Search:
- 404 page (/nonexistent/) renders without errors
- Search bar visible on 404 page
- Type query returns results matching content
- Click result navigates to article
- No console errors (Alpine components load cleanly)
Lazy Loading (Verified):
- Initial page load: /search-index.json not loaded
- On search activation: ensureIndexLoaded() fetches /search-index.json
- Subsequent searches: window.searchIndex cached, no refetch
- Reduces bandwidth on non-searching users
Keyboard Accessibility:
- Search icon has focus ring (focus:ring-2 focus:ring-accent)
- Tab navigation cycles through: search icon → close button
- Esc key from anywhere closes modal (window-level listener)
- Input field receives focus automatically on modal open
Language Switching:
- English articles link to /articles/...
- Italian articles link to /it/articles/...
- Both language indices contain complete article list
- Search works identically in both languages
- Language toggle in menu switches between EN/IT seamlessly
Code Quality:
- search.min.js 2.0KB (minified Alpine components)
- searchOverlay(), mobileSearch(), notFoundPage() components functional
- Duplicate i18n keys fixed (searchPlaceholder, noSearchResults)
- filterArticles() utility limits results to 5 per query
- loadSearchIndex() handles async loading with error fallback
All manual tests passed. Search functionality production-ready.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
tech/feature badges
New footer structure: 3 equal columns (Fortune Cookie | About Credentials | Stack & Features badges) + full-width copyright bar with emoji personality line.
Fortune Cookie:
- data/quotes.yaml with 13 curated quotes
- fortune.js picks random quote on each page load
- HTML fallback shows first quote with no-JS
- aria-live="polite" announces quote to screen readers
About Column:
- Terminal readout style with key-value pairs
- role, cert (green), os, focus fields
- Semantic <dl> structure for accessibility
Badges Column:
- "built with" section: Hugo, Tailwind, Alpine.js, HTML5, CSS3, JS (purple badges)
- "features" section: WCAG 2.1 AA, Open Source, Privacy Friendly, Claude Code (green badges)
- New badge-footer-accent/accent2 CSS classes
Copyright Bar:
- "Made with ❤️ lack of 😴 lots of ☕ by danix" with emoji wrapped in aria-hidden
- danix link points to language-aware About page (/is/ or /it/is/)
- Centered, full-width, below border-top
i18n additions:
- footer_built_with, footer_features keys in English and Italian
Theming:
- All colors use CSS custom properties (--accent, --accent2, --text, --text-dim)
- Monospace fonts throughout (JetBrains Mono)
- Responsive: grid-cols-1 mobile → md:grid-cols-3 tablet+
- WCAG 2.1 AA compliant: ≥4.5:1 contrast ratios, keyboard accessible, screen reader tested
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
Add top and bottom navigation between sequential articles with hacker aesthetic:
- Top nav: [visitor@danix.xyz articles]$ cd
- Bottom nav: [visitor@danix.xyz articles]$ ls ../
- Missing link shows dimmed placeholder (beginning/end)
- Only renders on articles, not static pages
- New partial: article-nav.html
- Styling: monospace prompt in accent color, hover links with transition
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
- Use HTML <picture> element with prefers-color-scheme media query
- Fallback dark thumbnail via content: url() CSS for theme-light class
- Automatically displays light/dark thumbnails based on user theme
- Articles without custom images now show default thumbnails
- Maintains all existing hover effects and type badges
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
|
|
- Add not-prose to .code-block-wrapper to opt out of Tailwind Typography
styles (table margins were causing the empty line gaps above/below code)
- Restore font-size: 0.875em on pre and code since not-prose removed the
Typography plugin's size normalization
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
|
- Use .icon-copy/.icon-check classes on <i> tags so Feather preserves them on generated <svg>; fixes copy button not swapping to checkmark
- Add .chroma to light theme background override so #eff1f5 applies correctly
- Change .chroma overflow: hidden to overflow-x: auto to restore horizontal scrolling for long code lines
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
- Add [markup.highlight] config: noClasses=false for CSS class output, lineNos=true with lineNumbersInTable=true for proper line number rendering
- Create render-codeblock.html render hook to intercept fenced code blocks and wrap with header bar (language label + copy button)
- Replace chroma-custom.css entirely with Catppuccin Macchiato palette (dark theme) + Catppuccin Latte (light theme), with full token color mapping
- Create code-copy.js: copy-to-clipboard logic with language pretty-name map (bash→Shell, js→JavaScript, etc.), icon swap (copy→check for 2s), and aria-live region for screen reader announcement (WCAG 4.1.3)
- Update baseof.html to load code-copy.js on page kind with Hugo Pipes
- WCAG AA compliance: line number contrast fixed to ~3.5:1 (--ctp-overlay0), light theme copy button color to 4.1:1 (#6c6f85), focus outline 6.21:1 (--ctp-lavender), screen reader announcements via aria-live
All code blocks now render with: syntax highlighting (noClasses=true fixed), line numbers with proper table layout, language label in header, copy button with feather icons, both dark and light theme support.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
review needed
|
|
|
|
All sidebar widgets (author, share, related posts) now use:
- Unified .sidebar-widget container (no box, only top border via <hr>)
- .sidebar-widget-label with # prefix (bash comment style)
- Monospace, dimmed, small text for consistency
Previously, share widget used a different style (full box with borders).
Author and Related Posts widgets now match the hacker aesthetic.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
Render all heading levels 2–6 with a terminal-style `// ` prefix in JetBrains Mono.
H1 (page/article titles) is excluded. The prefix is aria-hidden for A11y compliance
(WCAG 2.1 AA — heading text contrast 14.72:1, prefix is decorative and exempt from
contrast requirements).
Implementation:
- New Hugo render-heading hook at _default/_markup/render-heading.html
- Added .heading-prefix CSS rule with accent purple color, 0.8em font size, 0.7 opacity
- CSS rebuil with npm run build
Applies site-wide to all markdown prose content (articles, singles, pages).
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
|
|
|
|
5+4 layout
|
|
|
|
Replace generic card + h3 + round buttons with a minimal separator line,
mono comment label, and square btn-share buttons that match the site's
hacker identity. Icons scaled to 22px inside 50x50px touch targets.
Hover/focus states use the site's accent glow pattern.
|
|
|
|
|
|
|
|
Added window.currentLang detection based on request URL path to correctly
route 404 page navigation links for Italian and English versions. Created
notFoundNav() Alpine component to dynamically compute language-aware links
based on detected language.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
- 404.html: Move x-data directive to wrap entire content including modal, fixing Easter egg button click functionality. Add border, glow, and bg styling to main container.
- repository/list.html: Add border, glow, rounded, and bg styling to article container for consistency with other pages.
- Both pages now have consistent visual styling with borders, glows, and proper background colors.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
motion
|
|
motion-reduced)
Adds a CSS media query that respects user motion preferences by:
- Disabling all animations and transitions when prefers-reduced-motion: reduce
- Using !important to override all animation/transition declarations
- Ensuring focus-visible outline remains visible for keyboard navigation
This improves accessibility for users with motion sensitivity.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
|
focus)
|
|
.animate-spin-loader)
|
|
|
|
|
|
Changed header from sticky to fixed positioning and added proper margin offset
(mt-20) to main element to prevent content from being covered. The fixed header
now stays at the top during scroll while content renders below it properly.
- Fixed header: changed from sticky to fixed with left-0 right-0 full width
- Main spacing: added mt-20 margin-top with relative z-10 preserved
- Restored z-index layering for content positioning
Also added Week 3 completion documentation and Week 4 planning files:
- WEEK3-COMPLETION.md: Comprehensive audit of Week 3 implementation
- WEEK3-4-TRANSITION.md: Handoff document with git workflow
- WEEK4-PLAN.md: Full technical roadmap for Week 4 forms & interactions
- PROGRESS-STATUS-WEEK4.txt: Updated cumulative progress tracking
- Updated HANDOFF.md with Week 3 summary and Week 4 readiness
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
