summaryrefslogtreecommitdiffstats
path: root/themes/danix-xyz-hacker/assets/css
AgeCommit message (Collapse)AuthorFilesLines
2026-04-20feat: redesign footer with fortune cookie, about terminal readout, and ↵Danilo M.2-0/+96
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>
2026-04-18feat: add prev/next article navigation with shell prompt styleDanilo M.2-0/+76
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>
2026-04-18feat: theme-aware default thumbnails with picture elementDanilo M.2-0/+11
- 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>
2026-04-18fixed syntax in article git-setup-own-serverDanilo M.1-4/+0
2026-04-18fix: remove whitespace gaps and restore font size in code blocksDanilo M.1-0/+14
- 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>
2026-04-18fix: code block copy icon, light theme bg, horizontal scrollDanilo M.1-2/+12
- 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>
2026-04-18refactor: syntax highlighting with Catppuccin Macchiato and copy buttonsDanilo M.1-104/+314
- 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>
2026-04-18consolidated duplicated shortcodes. Initial fix of the content files. Manual ↵Danilo M.1-5/+0
review needed
2026-04-18fixed: larger sidebar titles, color --accent WCAG AA passed.Danilo M.2-4/+6
2026-04-18style: unify sidebar widget styling with bash comment prefixDanilo M.2-10/+26
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>
2026-04-18feat: add // prefix to H2–H6 headings in proseDanilo M.2-0/+22
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>
2026-04-18fixed the number of columns for the sharing widget in the sidebar to 3x3Danilo M.2-4/+10
2026-04-18style: center-align social share icon gridDanilo M.2-2/+2
2026-04-18fix: use explicit 50px column grid for share icons so sidebar always shows ↵Danilo M.2-4/+12
5+4 layout
2026-04-18fix: bring social share widget into WCAG AA and theming standard complianceDanilo M.2-22/+32
2026-04-18style: redesign social share widget with terminal-native aestheticDanilo M.2-50/+107
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.
2026-04-18style: resize social share icons to 50px and tighten grid gapDanilo M.2-11/+45
2026-04-17build: rebuild CSS to include social sharing widget utility classesDanilo M.1-0/+49
2026-04-17feat: add social-share partial with 9 targets and two layout modesDanilo M.1-0/+33
2026-04-17fix: use client-side language detection for 404 navigation linksDanilo M.1-4/+0
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>
2026-04-17fix: improve styling and functionality for 404 and Repository pagesDanilo M.1-54/+4
- 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>
2026-04-17test: verify accessibility (WCAG AA) - heading hierarchy, contrast, focus, ↵Danilo M.1-2/+388
motion
2026-04-17feat: add prefers-reduced-motion support (disable animations when ↵Danilo M.1-0/+18
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>
2026-04-17feat: add focus management styles (:focus-visible, button hover, form input ↵Danilo M.1-0/+57
focus)
2026-04-17feat: add animation utility classes (.animate-fade-in, .animate-slide-up, ↵Danilo M.1-0/+14
.animate-spin-loader)
2026-04-17feat: add CSS keyframe animations (fadeIn, slideUp, refine modalSlideUp, spin)Danilo M.1-2/+25
2026-04-16feat: add form component styles (inputs, textarea, checkbox, radio)Danilo M.2-0/+1258
2026-04-16fix: header sticky positioning regressionDanilo M.1-0/+4
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>
2026-04-16fix: add x-cloak to prevent menu flash on page loadDanilo M.2-0/+11
- Add [x-cloak] { display: none } CSS rule - Add x-cloak attribute to menu overlay div - This hides the menu until Alpine.js initializes - Prevents the menu from appearing briefly on page refresh/load - Rebuild CSS: main.min.css updated Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-04-16fix: rewrite hamburger menu using Alpine.js event dispatcherDanilo M.1-17/+9
- Replace vanilla JS click handlers with Alpine.js @toggle-menu event - Hamburger button dispatches toggle-menu event on click - Menu overlay listens to toggle-menu and toggles menuOpen state - Alpine controls visibility via :class bindings (opacity/invisible) - Alpine controls panel slide via :class bindings (translate-x) - All menu interactions (close button, links, ESC, backdrop) use Alpine - Remove complex vanilla JS that wasn't working reliably - Rebuild CSS: main.min.css updated Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-04-16fix: hamburger menu click handler and horizontal scroll issuesDanilo M.2-1/+10
- Improve hamburger menu JS with better error handling and console warnings - Add preventDefault() to button click handlers for reliability - Handle document ready state check (in case script runs before DOMContentLoaded) - Add overflow-x-hidden to html and body to prevent horizontal scrolling on mobile - Rebuild CSS: main.min.css updated Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-04-16feat: add breadcrumb navigation componentDanilo M.2-0/+38
- Create breadcrumb.html partial with Home > Articles > Title structure - Support both English and Italian language versions - Add breadcrumb and breadcrumb-separator CSS classes - Integrate breadcrumb into article detail pages - Rebuild CSS: main.min.css updated Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-04-16feat: add header nav and hamburger menu styling with JS handlersDanilo M.2-0/+68
- Add header, nav-link, header-actions component CSS - Add menu-overlay and menu-nav component CSS - Update hamburger-menu.html with vanilla JS handlers: - openMenu/closeMenu functions - ESC key support - Click outside to close (backdrop click) - Menu link auto-close - Scroll lock when menu open - Replace Alpine @click with id-based event listeners - Rebuild CSS: main.min.css updated Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-04-16feat: add card component with hover lift and glow effectsDanilo M.2-28/+362
- Add .card base component with border, rounded corners, glow shadow - Add .card:hover state with translateY(-2px) lift and enhanced glow - Add .card-image, .card-body, .card-title, .card-excerpt, .card-footer semantic classes - Refactor article-list-item.html to use card component classes - Rebuild CSS: main.min.css updated Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-04-16feat: import 36 articles with assets and create supporting shortcodesDanilo M.1-4/+47
- Migrate all English articles from old site to content/en/articles/ - Organize article assets in static/uppies/year/month/ structure - Create Italian article stubs with draft=true status - Add 7 new shortcodes: strike, em, dropcap, figure, highlight, img, youtube, gal-img - Update article image paths to reference /uppies/ locations - All 36 articles now build successfully without errors Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-04-16refactor: remove footer-specific backdrop-filter rule for consistencyDanilo M.2-13/+0
2026-04-16refactor: use frosted-bar class on footer with stronger blur variantDanilo M.2-8/+4
2026-04-16fix: add position and z-index to footer for backdrop-filter to workDanilo M.2-0/+8
2026-04-16fix: add backdrop-filter blur to footer via CSS with vendor prefixDanilo M.2-6/+8
2026-04-16test: set footer background to fully opaque (1) to debug stylingDanilo M.2-9/+6
2026-04-16fix: add frosted-bar-strong class to footer for stronger frosting and opacityDanilo M.2-5/+7
2026-04-16fix: increase footer backdrop blur from 10px to 20px for stronger frosting ↵Danilo M.2-4/+5
effect
2026-04-16fix: increase footer opacity to 0.88 for better visual balance with headerDanilo M.2-0/+11
2026-04-16fix: reduce frosted-bar background opacity from 0.92 to 0.75 for better ↵Danilo M.2-2/+2
readability
2026-04-16refactor: remove border from frosted-bar component, let templates control ↵Danilo M.2-1/+27
border direction
2026-04-16refactor: extract bg2 RGBA values to CSS variables for frosted-bar componentDanilo M.1-5/+4
2026-04-16feat: add frosted-bar CSS component for header and footerDanilo M.1-0/+12
2026-04-16Add padding and glow effects to content sectionsfeature/matrix-rain-backgroundDanilo M.2-0/+34
- Add 2rem padding, border, and soft glow to single page content grid - Add matching glow effect to article list items with full-opacity border - Uses theme-aware CSS variables for consistent styling across dark/light modes Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-04-16Complete matrix rain background effect implementationDanilo M.2-0/+92
- Add canvas-based matrix rain animation with ASCII + katakana characters - Implement per-column animation with varied drop speeds (2-4 frame throttle) - Theme-aware colors: purple and green accents with live switching - Homepage: 28% opacity (dark) / 35% opacity (light) for prominent hero effect - Inner pages: 13% opacity (dark) / 18% opacity (light) for subtle side gutters - Respect prefers-reduced-motion system setting - Add opaque background to content grids to block rain under text - Add .content-grid class to differentiate single pages from list pages - Add solid background to article list item cards - Update article list item with bg-bg class for readability - Z-index stack: canvas (z-1), content grid (z-9), main content (z-10) Files modified: - matrix-rain.js: new IIFE animation script with MutationObserver for theme switching - baseof.html: add canvas element and script tag with guard - main.css: add canvas positioning, opacity rules, content grid background - _default/single.html: add max-w-7xl and .content-grid class - articles/single.html: add max-w-7xl and .content-grid class - is/list.html: add max-w-7xl and .content-grid class - article-list-item.html: add bg-bg class for solid background Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-04-15Implement article type colors, reading progress bar, and optimize layoutDanilo M.1-5/+110
- Add colored type pills to article list items (overlay on thumbnails, top-right) - Add type accent corner (L-shaped) to single article headers with colored pill badge in metadata - Implement smooth reading progress bar at viewport top (violet→green gradient) - Progress bar only appears on single pages/articles, not on lists or homepage - Constrain article width to max-w-7xl for comfortable reading with side gutters - Use CSS variables for all colors to support dark/light theme switching - Add reading-progress.js with requestAnimationFrame throttling for performance - Update HANDOFF.md with current progress Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>