summaryrefslogtreecommitdiffstats
path: root/themes/danix-xyz-hacker/assets/css/main.css
AgeCommit message (Collapse)AuthorFilesLines
2026-04-22chore: extract theme into git submodule (danix2-hugo-theme)Danilo M.1-1709/+0
2026-04-22style: add solid background to tag-cloud links for readability on canvasDanilo M.1-1/+2
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>
2026-04-21feat: add overflow visible to tag-cloud containerDanilo M.1-0/+1
2026-04-21feat: simplify tag cloud CSS for continuous scalingDanilo M.1-20/+3
- 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
2026-04-21feat: Add reusable tag cloud partial with A11y and dark/light mode supportDanilo M.1-0/+76
- 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>
2026-04-21fix: improve badge text color contrast for WCAG AA complianceDanilo M.1-0/+17
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>
2026-04-21chore: adding files for agentic content writingDanilo M.1-0/+18
2026-04-21fix: correct mobile connector/node geometry accounting for ol paddingDanilo M.1-7/+20
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>
2026-04-21fix: correct timeline layout bugs — desktop stacking, connector geometry, ↵Danilo M.1-54/+39
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>
2026-04-21fix: add type-color CSS variants for timeline elementsDanilo M.1-0/+67
2026-04-21feat: add timeline CSS component classesDanilo M.1-0/+196
2026-04-20fix: correct Tailwind class in back-to-top button CSS (justify-center)Danilo M.1-1/+1
2026-04-20fix: use theme variables for .back-to-top colors instead of hardcoded valuesDanilo M.1-2/+3
2026-04-20style: add .back-to-top component classDanilo M.1-0/+17
2026-04-20fix: resolve mobile viewport overflow on article pagesDanilo M.1-2/+8
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>
2026-04-20fix: make prev-next navigation responsive on mobileDanilo M.1-1/+1
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>
2026-04-20feat: redesign footer with fortune cookie, about terminal readout, and ↵Danilo M.1-0/+15
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.1-0/+22
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.1-0/+5
- 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: larger sidebar titles, color --accent WCAG AA passed.Danilo M.1-2/+3
2026-04-18style: unify sidebar widget styling with bash comment prefixDanilo M.1-5/+12
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.1-0/+10
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.1-2/+5
2026-04-18style: center-align social share icon gridDanilo M.1-1/+1
2026-04-18fix: use explicit 50px column grid for share icons so sidebar always shows ↵Danilo M.1-0/+6
5+4 layout
2026-04-18fix: bring social share widget into WCAG AA and theming standard complianceDanilo M.1-11/+16
2026-04-18style: redesign social share widget with terminal-native aestheticDanilo M.1-0/+58
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.1-6/+19
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.1-0/+474
2026-04-16fix: add x-cloak to prevent menu flash on page loadDanilo M.1-0/+5
- 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: hamburger menu click handler and horizontal scroll issuesDanilo M.1-1/+5
- 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.1-0/+13
- 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.1-0/+34
- 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.1-0/+184
- 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-16refactor: remove footer-specific backdrop-filter rule for consistencyDanilo M.1-6/+0
2026-04-16refactor: use frosted-bar class on footer with stronger blur variantDanilo M.1-4/+2
2026-04-16fix: add position and z-index to footer for backdrop-filter to workDanilo M.1-0/+2
2026-04-16fix: add backdrop-filter blur to footer via CSS with vendor prefixDanilo M.1-3/+4
2026-04-16test: set footer background to fully opaque (1) to debug stylingDanilo M.1-4/+3
2026-04-16fix: add frosted-bar-strong class to footer for stronger frosting and opacityDanilo M.1-2/+3
2026-04-16fix: increase footer backdrop blur from 10px to 20px for stronger frosting ↵Danilo M.1-2/+2
effect
2026-04-16fix: increase footer opacity to 0.88 for better visual balance with headerDanilo M.1-0/+5
2026-04-16fix: reduce frosted-bar background opacity from 0.92 to 0.75 for better ↵Danilo M.1-1/+1
readability
2026-04-16refactor: remove border from frosted-bar component, let templates control ↵Danilo M.1-1/+7
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