/* ========================================================================== components.css — Reusable UI components ========================================================================== Components defined here: - Buttons (.btn, .btn-primary, .btn-outline, .btn-sm) - Icon buttons (.btn-icon, .theme-toggle, .hamburger) - Nav links (.nav-link) - Search input (.search-input) - Tag pills (.tag) - Post cards (.post-card) ========================================================================== */ /* -------------------------------------------------------------------------- 1. Buttons -------------------------------------------------------------------------- */ /* Base button — extend with modifier classes below */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-6); border: 2px solid transparent; border-radius: var(--radius-md); font-size: var(--text-base); font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); white-space: nowrap; user-select: none; } .btn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } /* Primary — filled */ .btn-primary { background-color: var(--color-primary); color: var(--color-primary-fg); border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15); } .btn-primary:hover { background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-primary-fg); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } /* Outline — ghost style */ .btn-outline { background-color: transparent; color: var(--color-primary); border-color: var(--color-primary); transition: background-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base); } .btn-outline:hover { background-color: var(--color-primary); color: var(--color-primary-fg); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15); } .btn-outline:active { transform: translateY(0); } /* Size modifier — small */ .btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); border-radius: var(--radius-sm); } /* -------------------------------------------------------------------------- 2. Icon buttons (.btn-icon) Used for theme toggle and hamburger. -------------------------------------------------------------------------- */ .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: transparent; border: none; border-radius: var(--radius-md); cursor: pointer; color: var(--color-text); transition: background-color var(--transition-fast); } .btn-icon:hover { background-color: var(--color-bg-alt); } .btn-icon:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } /* Theme toggle icon visibility — controlled by [data-theme] on */ .theme-toggle .icon-moon { display: none; } .theme-toggle .icon-sun { display: inline; } [data-theme="dark"] .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: inline; } /* Hamburger lines */ .hamburger-line { display: block; width: 20px; height: 2px; background-color: var(--color-text); border-radius: 2px; transition: transform var(--transition-base), opacity var(--transition-fast); } /* -------------------------------------------------------------------------- 3. Nav links -------------------------------------------------------------------------- */ .nav-link { display: inline-block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 500; text-decoration: none; transition: color var(--transition-fast), background-color var(--transition-fast); } .nav-link:hover, .nav-link.active { color: var(--color-primary); background-color: var(--color-tag-bg); } .nav-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } @media (max-width: 767px) { .nav-link { display: block; padding: var(--space-3) var(--space-4); font-size: var(--text-base); border-radius: var(--radius-md); } } /* -------------------------------------------------------------------------- 4. Search input — theme-aware styling with smooth transitions -------------------------------------------------------------------------- */ .search-input { width: 100%; max-width: 420px; padding: var(--space-2) var(--space-4); background-color: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-text); font-size: var(--text-base); /* Smooth transitions on theme change and interactions */ transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-fast), box-shadow var(--transition-fast); } .search-input::placeholder { color: var(--color-text-subtle); } .search-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2); } /* -------------------------------------------------------------------------- 5. Tag pills — filter buttons with smooth interactions -------------------------------------------------------------------------- */ .tag { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); background-color: var(--color-tag-bg); color: var(--color-tag-text); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); user-select: none; } .tag:hover { /* Darker/lighter background on hover depending on theme */ filter: brightness(0.92); border-color: var(--color-primary); } .tag.active { background-color: var(--color-primary); color: var(--color-primary-fg); border-color: var(--color-primary); } .tag:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; } /* -------------------------------------------------------------------------- 6. Post cards — link elements, fully clickable and keyboard accessible -------------------------------------------------------------------------- */ .post-card { display: flex; flex-direction: column; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); text-decoration: none; color: inherit; cursor: pointer; transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base), background-color var(--transition-base); } .post-card:hover { box-shadow: 0 12px 32px var(--color-shadow); transform: translateY(-6px); border-color: var(--color-primary); background-color: var(--color-bg); } .post-card:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } .post-card-title { font-size: var(--text-xl); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-2); line-height: var(--lh-tight); } .post-card-excerpt { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--lh-prose); flex: 1; margin-bottom: var(--space-4); } .post-card-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); } .post-card-date { font-size: var(--text-xs); color: var(--color-text-subtle); } .post-card-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); } /* -------------------------------------------------------------------------- 7. Tag filter bar (posts page) — spacing and layout -------------------------------------------------------------------------- */ .tag-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-8); /* Increased from space-4 for better visual hierarchy */ }