diff options
Diffstat (limited to 'themes/danix-xyz-hacker/assets')
| -rw-r--r-- | themes/danix-xyz-hacker/assets/css/chroma-custom.css | 391 | ||||
| -rw-r--r-- | themes/danix-xyz-hacker/assets/css/main.css | 1709 | ||||
| -rw-r--r-- | themes/danix-xyz-hacker/assets/css/main.min.css | 4495 | ||||
| -rw-r--r-- | themes/danix-xyz-hacker/assets/js/article-lazy.js | 34 | ||||
| -rw-r--r-- | themes/danix-xyz-hacker/assets/js/code-copy.js | 79 | ||||
| -rw-r--r-- | themes/danix-xyz-hacker/assets/js/contact-form.js | 45 | ||||
| -rw-r--r-- | themes/danix-xyz-hacker/assets/js/form-components.js | 127 | ||||
| -rw-r--r-- | themes/danix-xyz-hacker/assets/js/fortune.js | 9 | ||||
| -rw-r--r-- | themes/danix-xyz-hacker/assets/js/matrix-rain.js | 157 | ||||
| -rw-r--r-- | themes/danix-xyz-hacker/assets/js/menu.js | 112 | ||||
| -rw-r--r-- | themes/danix-xyz-hacker/assets/js/not-found-page.js | 9 | ||||
| -rw-r--r-- | themes/danix-xyz-hacker/assets/js/reading-progress.js | 29 | ||||
| -rw-r--r-- | themes/danix-xyz-hacker/assets/js/search.js | 134 | ||||
| -rw-r--r-- | themes/danix-xyz-hacker/assets/js/tag-cloud-spiral.js | 122 | ||||
| -rw-r--r-- | themes/danix-xyz-hacker/assets/js/theme-toggle.js | 53 |
15 files changed, 0 insertions, 7505 deletions
diff --git a/themes/danix-xyz-hacker/assets/css/chroma-custom.css b/themes/danix-xyz-hacker/assets/css/chroma-custom.css deleted file mode 100644 index d632e09..0000000 --- a/themes/danix-xyz-hacker/assets/css/chroma-custom.css +++ /dev/null @@ -1,391 +0,0 @@ -/* === Chroma Custom — Catppuccin Macchiato === */ - -:root { - /* Catppuccin Macchiato palette */ - --ctp-base: #24273a; - --ctp-surface0: #363a4f; - --ctp-surface1: #494d64; - --ctp-overlay0: #6e738d; - --ctp-text: #cad3f5; - --ctp-subtext1: #b8c0e0; - --ctp-lavender: #b7bdf8; - --ctp-blue: #8aadf4; - --ctp-sapphire: #7dc4e4; - --ctp-sky: #91d7e3; - --ctp-teal: #8bd5ca; - --ctp-green: #a6da95; - --ctp-yellow: #eed49f; - --ctp-peach: #f5a97f; - --ctp-maroon: #ee99a0; - --ctp-red: #ed8796; - --ctp-mauve: #c6a0f6; - --ctp-pink: #f5bde6; -} - -/* === Code block wrapper and header bar === */ - -.code-block-wrapper { - margin: 1.5rem 0; - border-radius: 0.5rem; - overflow: hidden; - border: 1px solid var(--border); -} - -.code-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0.375rem 0.75rem; - background-color: var(--ctp-surface0); - border-bottom: 1px solid var(--ctp-surface1); - font-family: 'JetBrains Mono', monospace; - font-size: 0.75rem; -} - -.code-lang-label { - color: var(--ctp-subtext1); - letter-spacing: 0.05em; -} - -.code-copy-wrapper { - display: flex; - align-items: center; - gap: 0.25rem; -} - -.code-copy-btn { - display: inline-flex; - align-items: center; - justify-content: center; - background: transparent; - border: none; - cursor: pointer; - padding: 0.25rem; - border-radius: 0.25rem; - color: var(--ctp-overlay0); - transition: color 0.15s ease, background 0.15s ease; - line-height: 1; -} - -.code-copy-btn:hover { - color: var(--ctp-text); - background: rgba(202, 211, 245, 0.08); -} - -.code-copy-btn:focus-visible { - outline: 2px solid var(--ctp-lavender); - outline-offset: 2px; -} - -.code-copy-btn [data-feather], -.code-copy-btn svg { - width: 14px !important; - height: 14px !important; - stroke-width: 2px; -} - -.code-copy-btn .hidden { - display: none; -} - -.code-copy-btn.is-copied { - color: var(--ctp-green); -} - -/* === Code body === */ - -.code-body { - overflow-x: auto; -} - -.code-body .highlight, -.code-body .highlight .chroma { - margin: 0; - border-radius: 0; - border: none; - background-color: var(--ctp-base); -} - -/* === Reset conflicts with main.css base styles === */ - -.code-block-wrapper pre, -.prose .code-block-wrapper pre, -.prose-invert .code-block-wrapper pre { - margin: 0; - padding: 0; - background: transparent; - border: none; - border-radius: 0; - overflow-x: visible; -} - -/* Re-apply padding after the reset above, with higher specificity */ -.code-block-wrapper .highlight .lntd:first-child pre { - padding: 0.875rem 0; -} - -.code-block-wrapper .highlight .lntd:last-child pre { - padding: 0.875rem 1rem; -} - -/* === Chroma table layout (lineNumbersInTable = true) === */ - -.highlight table { - border-collapse: collapse; - width: 100%; -} - -.highlight td { - padding: 0; - vertical-align: top; -} - -/* Line number column — not selectable */ -/* color: --ctp-overlay0 (#6e738d) on --ctp-surface0 (#363a4f) = ~3.5:1 */ -.highlight .lnt, -.highlight .ln { - padding: 0.875rem 0.75rem 0.875rem 1rem; - color: var(--ctp-overlay0); - user-select: none; - -webkit-user-select: none; - min-width: 2.5rem; - text-align: right; - border-right: 1px solid var(--ctp-surface1); - font-size: 0.8125rem; -} - -.highlight .lntd:first-child { - background-color: var(--ctp-surface0); -} - -.highlight .lntd:first-child pre { - padding: 0.875rem 0; -} - -.highlight .lntd:last-child pre { - padding: 0.875rem 1rem; -} - -.highlight .chroma { - overflow-x: auto; -} - -.code-block-wrapper pre, -.code-block-wrapper code { - font-size: 0.875em; -} - -/* === Syntax token colors (dark theme default) === */ - -.highlight { - background-color: var(--ctp-base); - color: var(--ctp-text); -} - -/* Keywords — mauve */ -.highlight .k, -.highlight .kc, -.highlight .kd, -.highlight .kn, -.highlight .kp, -.highlight .kr, -.highlight .kt { - color: var(--ctp-mauve); - font-weight: 500; -} - -/* Strings — green */ -.highlight .s, -.highlight .sa, -.highlight .sb, -.highlight .sc, -.highlight .dl, -.highlight .sd, -.highlight .s1, -.highlight .s2, -.highlight .se, -.highlight .sh, -.highlight .si, -.highlight .sx, -.highlight .sr, -.highlight .ss { - color: var(--ctp-green); -} - -/* Numbers — peach */ -.highlight .m, -.highlight .mb, -.highlight .mf, -.highlight .mh, -.highlight .mi, -.highlight .il, -.highlight .mo { - color: var(--ctp-peach); -} - -/* Comments — overlay0, italic */ -.highlight .c, -.highlight .c1, -.highlight .cm, -.highlight .cs, -.highlight .cp, -.highlight .cpf { - color: var(--ctp-overlay0); - font-style: italic; -} - -/* Operators — sky */ -.highlight .o, -.highlight .ow { - color: var(--ctp-sky); -} - -/* Names / Identifiers */ -.highlight .n { - color: var(--ctp-text); -} - -.highlight .na { - color: var(--ctp-yellow); -} - -.highlight .nb { - color: var(--ctp-blue); -} - -.highlight .nc { - color: var(--ctp-yellow); -} - -.highlight .nd { - color: var(--ctp-pink); -} - -.highlight .ne { - color: var(--ctp-maroon); -} - -.highlight .nf, -.highlight .fm { - color: var(--ctp-blue); -} - -.highlight .ni { - color: var(--ctp-text); -} - -.highlight .nl { - color: var(--ctp-teal); -} - -.highlight .nn { - color: var(--ctp-yellow); -} - -.highlight .nt { - color: var(--ctp-mauve); -} - -.highlight .nv, -.highlight .vc, -.highlight .vg, -.highlight .vi { - color: var(--ctp-text); -} - -/* Punctuation */ -.highlight .p { - color: var(--ctp-subtext1); -} - -/* Generic tokens (diff output etc.) */ -.highlight .gd { - color: var(--ctp-red); - background: rgba(237, 135, 150, 0.1); -} - -.highlight .gi { - color: var(--ctp-green); - background: rgba(166, 218, 149, 0.1); -} - -.highlight .gh { - color: var(--ctp-lavender); - font-weight: bold; -} - -.highlight .gu { - color: var(--ctp-overlay0); -} - -.highlight .ge { - font-style: italic; -} - -.highlight .gs { - font-weight: bold; -} - -/* Error */ -.highlight .err { - color: var(--ctp-red); -} - -/* === Light theme overrides (Catppuccin Latte) === */ - -html.theme-light .code-block-wrapper { - border-color: #ccd0da; -} - -html.theme-light .code-header { - background-color: #dce0ea; - border-bottom-color: #bcc0cc; -} - -html.theme-light .code-lang-label { - color: #5c5f77; -} - -html.theme-light .code-copy-btn { - color: #6c6f85; -} - -html.theme-light .code-copy-btn:hover { - color: #4c4f69; - background: rgba(76, 79, 105, 0.08); -} - -html.theme-light .code-body .highlight, -html.theme-light .code-body .highlight .chroma { - background-color: #eff1f5; - color: #4c4f69; -} - -html.theme-light .highlight .lntd:first-child { - background-color: #e6e9ef; -} - -html.theme-light .highlight .lnt, -html.theme-light .highlight .ln { - color: #bcc0cc; - border-right-color: #bcc0cc; -} - -/* Comments must be darker to read on light bg */ -html.theme-light .highlight .c, -html.theme-light .highlight .c1, -html.theme-light .highlight .cm, -html.theme-light .highlight .cs, -html.theme-light .highlight .cp, -html.theme-light .highlight .cpf { - color: #7c7f93; -} - -/* Text defaults */ -html.theme-light .highlight .n { - color: #4c4f69; -} - -html.theme-light .highlight .p { - color: #6c6f85; -} diff --git a/themes/danix-xyz-hacker/assets/css/main.css b/themes/danix-xyz-hacker/assets/css/main.css deleted file mode 100644 index ab41a7d..0000000 --- a/themes/danix-xyz-hacker/assets/css/main.css +++ /dev/null @@ -1,1709 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -/* Dark theme (default) - CSS custom properties */ -:root { - --bg: #060b10; - --bg2: #0c1520; - --bg2-rgb: 12, 21, 32; - --surface: #101e2d; - --surface-rgb: 16, 30, 45; - --border: #182840; - --accent: #a855f7; - --accent-rgb: 168, 85, 247; - --accent2: #00ff88; - --accent-glow: rgba(168, 85, 247, 0.12); - --text: #c4d6e8; - --text-dim: #7a9bb8; - --muted: #304860; - /* Article type colors - dark */ - --type-tech: #a855f7; - --type-life: #f59e0b; - --type-quote: #00ff88; - --type-link: #38bdf8; - --type-photo: #ec4899; - /* Article type text colors - dark (all black for WCAG AA) */ - --type-tech-text: #000000; - --type-life-text: #000000; - --type-quote-text: #000000; - --type-link-text: #000000; - --type-photo-text: #000000; -} - -/* Light theme overrides */ -html.theme-light { - --bg: #ffffff; - --bg2: #f8f9fa; - --bg2-rgb: 248, 249, 250; - --surface: #f0f3f7; - --surface-rgb: 240, 243, 247; - --border: #d9dfe8; - --accent: #9333ea; - --accent-rgb: 147, 51, 234; - --accent2: #10b981; - --accent-glow: rgba(147, 51, 234, 0.1); - --text: #1f2937; - --text-dim: #374151; - --muted: #d1d5db; - /* Article type colors - light */ - --type-tech: #7c3aed; - --type-life: #d97706; - --type-quote: #008f5a; - --type-link: #0284c7; - --type-photo: #be185d; - /* Article type text colors - light (mixed for WCAG AA) */ - --type-tech-text: #ffffff; - --type-life-text: #000000; - --type-quote-text: #000000; - --type-link-text: #000000; - --type-photo-text: #ffffff; -} - -/* No-JS fallback: prefers-color-scheme light */ -@media (prefers-color-scheme: light) { - html:not(.theme-dark) { - --bg: #ffffff; - --bg2: #f8f9fa; - --bg2-rgb: 248, 249, 250; - --surface: #f0f3f7; - --surface-rgb: 240, 243, 247; - --border: #d9dfe8; - --accent: #9333ea; - --accent-rgb: 147, 51, 234; - --accent2: #10b981; - --accent-glow: rgba(147, 51, 234, 0.1); - --text: #1f2937; - --text-dim: #374151; - --muted: #d1d5db; - --type-tech: #7c3aed; - --type-life: #d97706; - --type-quote: #008f5a; - --type-link: #0284c7; - --type-photo: #be185d; - --type-tech-text: #ffffff; - --type-life-text: #000000; - --type-quote-text: #000000; - --type-link-text: #000000; - --type-photo-text: #ffffff; - } -} - -/* Theme-aware picture element for default thumbnails */ -html.theme-light picture img[src="/images/default_thumbnail_dark.png"] { - content: url('/images/default_thumbnail_light.png'); -} - -@layer base { - html { - @apply overflow-x-hidden; - } - - body { - @apply bg-bg text-text font-body overflow-x-hidden; - } - - h1, - h2, - h3, - h4, - h5, - h6 { - @apply font-bold; - font-family: 'Oxanium', monospace; - } - - h1 { - @apply text-3xl md:text-4xl; - } - - h2 { - @apply text-2xl md:text-3xl; - } - - h3 { - @apply text-xl md:text-2xl; - } - - .heading-prefix { - font-family: 'JetBrains Mono', monospace; - font-weight: 400; - font-size: 0.8em; - color: var(--accent); - opacity: 0.7; - margin-right: 0.35em; - user-select: none; - } - - a { - @apply text-accent hover:opacity-80 transition-opacity; - } - - code { - @apply font-mono bg-surface border border-border px-1.5 py-0.5 rounded text-accent2; - } - - pre { - background-color: rgba(var(--surface-rgb), 0.8); - @apply p-4 rounded border border-border overflow-x-auto; - } - - pre code { - @apply bg-transparent border-0 p-0 text-text; - } - - *:focus-visible { - @apply ring-2 ring-accent ring-offset-2; - ring-offset-color: var(--bg); - } - - button, - input, - textarea, - select { - @apply transition-colors duration-200; - } -} - -@layer components { - .container { - @apply max-w-4xl mx-auto; - } - - /* Background utilities */ - .bg-bg { - background-color: var(--bg); - } - - .bg-bg2 { - background-color: var(--bg2); - } - - .bg-surface { - background-color: var(--surface); - } - - /* Border utilities */ - .border-border { - border-color: var(--border); - } - - /* Text color utilities */ - .text-accent { - color: var(--accent); - } - - .text-accent2 { - color: var(--accent2); - } - - .text-text { - color: var(--text); - } - - .text-text-dim { - color: var(--text-dim); - } - - /* Additional semantic utilities */ - .text-muted { - color: var(--muted); - } - - .bg-muted { - background-color: var(--muted); - } - - /* Glow effect utility */ - .glow-accent { - box-shadow: 0 0 20px var(--accent-glow); - } - - /* Frosted glass bar (header/footer) */ - .frosted-bar { - background-color: rgba(var(--bg2-rgb), 0.75); - backdrop-filter: blur(10px); - box-shadow: 0 0 20px var(--accent-glow); - /* border applied via utility classes in templates */ - } - - /* Border utilities for frosted-bar component */ - .frosted-bar.border-b, - .frosted-bar.border-t { - border-color: var(--border); - } - - /* Button component styles */ - .btn { - @apply inline-flex items-center justify-center px-4 py-2 rounded font-bold transition-all duration-200 cursor-pointer; - background-color: var(--accent); - color: #ffffff; - border: none; - outline: none; - } - - .btn:hover:not(:disabled) { - opacity: 0.85; - transform: translateY(-1px); - } - - .btn:focus-visible { - @apply ring-2 ring-offset-2; - ring-color: var(--accent); - ring-offset-color: var(--bg); - } - - .btn:active:not(:disabled) { - transform: translateY(0); - opacity: 0.75; - } - - .btn:disabled { - opacity: 0.5; - cursor: not-allowed; - } - - /* Button variants */ - .btn-primary { - background-color: var(--accent); - color: #ffffff; - } - - .btn-primary:hover:not(:disabled) { - background-color: var(--accent); - } - - .btn-secondary { - background-color: var(--accent2); - color: var(--bg); - font-weight: 600; - } - - .btn-secondary:hover:not(:disabled) { - background-color: var(--accent2); - } - - .btn-outline { - background-color: transparent; - color: var(--accent); - border: 2px solid var(--accent); - } - - .btn-outline:hover:not(:disabled) { - background-color: var(--accent); - color: #ffffff; - } - - /* Button sizes */ - .btn-sm { - @apply px-3 py-1 text-sm; - } - - .btn-lg { - @apply px-6 py-3 text-lg; - } - - /* Icon button (for icons without text) */ - .btn-icon { - @apply rounded-full inline-flex items-center justify-center; - width: auto; - height: auto; - padding: 0.5rem; - } - - .btn-icon svg, - .btn-icon i { - width: auto !important; - height: auto !important; - } - - /* Force Feather icons to match size */ - .btn-icon [data-feather] { - width: 50px !important; - height: 50px !important; - } - - .btn-icon [data-feather] svg { - width: 50px !important; - height: 50px !important; - } - - /* Sidebar widget — no box, no border */ - .sidebar-widget { - margin-bottom: 1.5rem; - } - - /* Sidebar widget title — bash comment style */ - .sidebar-widget-label { - font-family: var(--font-mono, monospace); - font-size: 1rem; - font-weight: bold; - color: var(--accent); - letter-spacing: 0.08em; - margin-bottom: 0.5rem; - } - - /* Sidebar separator */ - .sidebar-hr { - border: none; - border-top: 1px solid var(--border); - margin-bottom: 1.5rem; - } - - /* ===================== - Tag Cloud Component - ===================== */ - - .tag-cloud { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 0.75rem; - align-items: baseline; - overflow: visible; - } - - .tag-cloud-link { - display: inline-flex; - align-items: center; - gap: 0.375rem; - padding: 0.25rem 0.625rem; - border: 1px solid var(--border); - border-radius: 0.25rem; - font-family: var(--font-mono, 'JetBrains Mono', monospace); - color: var(--text-dim); - text-decoration: none; - background-color: var(--bg2); - transition: border-color 150ms ease-out, color 150ms ease-out, background-color 150ms ease-out, opacity 150ms ease-out; - white-space: nowrap; - line-height: 1.4; - } - - .tag-cloud-link:hover { - border-color: rgba(var(--accent-rgb), 0.5); - color: var(--accent); - background-color: rgba(var(--accent-rgb), 0.1); - } - - .tag-cloud-link:focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; - border-radius: 0.25rem; - } - - .tag-cloud-count { - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0 0.375rem; - border-radius: 9999px; - font-size: 0.65em; - font-weight: 600; - background-color: rgba(var(--accent-rgb), 0.12); - color: var(--accent); - line-height: 1.6; - min-width: 1.2em; - } - - @media (prefers-reduced-motion: reduce) { - .tag-cloud-link { - transition: none; - } - } - - .share-grid { - display: grid; - grid-template-columns: repeat(3, 50px); - justify-content: space-evenly; - justify-items: center; - align-content: space-evenly; - align-items: center; - } - - .btn-share { - display: inline-flex; - align-items: center; - justify-content: center; - width: 50px; - height: 50px; - border-radius: 4px; - border: 1px solid var(--border); - background: var(--surface); - color: var(--text-dim); - cursor: pointer; - transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; - text-decoration: none; - } - - .btn-share svg, - .btn-share i, - .btn-share [data-feather] { - width: 22px !important; - height: 22px !important; - flex-shrink: 0; - } - - .btn-share:hover { - color: var(--accent); - border-color: rgba(var(--accent-rgb), 0.5); - background: rgba(var(--accent-rgb), 0.06); - box-shadow: 0 0 10px var(--accent-glow); - } - - .btn-share:focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; - color: var(--accent); - border-color: var(--accent); - } - - .btn-share--copied { - color: var(--accent2); - border-color: var(--accent2); - background: var(--surface); - } - - @media (prefers-reduced-motion: reduce) { - .btn-share { - transition: none; - } - } - - /* Badge base style */ - .badge { - @apply inline-flex items-center px-2.5 py-1 rounded text-sm font-mono font-semibold whitespace-nowrap transition-all duration-200; - border: 1px solid; - } - - /* Article type badge styles */ - .badge-tech { - color: var(--type-tech); - background-color: rgba(168, 85, 247, 0.1); - border-color: rgba(168, 85, 247, 0.3); - } - - .badge-tech:hover { - background-color: rgba(168, 85, 247, 0.2); - } - - .badge-life { - color: var(--type-life); - background-color: rgba(245, 158, 11, 0.1); - border-color: rgba(245, 158, 11, 0.3); - } - - .badge-life:hover { - background-color: rgba(245, 158, 11, 0.2); - } - - .badge-quote { - color: var(--type-quote); - background-color: rgba(0, 255, 136, 0.1); - border-color: rgba(0, 255, 136, 0.3); - } - - .badge-quote:hover { - background-color: rgba(0, 255, 136, 0.2); - } - - .badge-link { - color: var(--type-link); - background-color: rgba(56, 189, 248, 0.1); - border-color: rgba(56, 189, 248, 0.3); - } - - .badge-link:hover { - background-color: rgba(56, 189, 248, 0.2); - } - - .badge-photo { - color: var(--type-photo); - background-color: rgba(236, 72, 153, 0.1); - border-color: rgba(236, 72, 153, 0.3); - } - - .badge-photo:hover { - background-color: rgba(236, 72, 153, 0.2); - } - - /* Legacy type-* classes for compatibility (with badge styling) */ - .type-tech { - color: var(--type-tech); - background-color: rgba(168, 85, 247, 0.1); - } - - .type-life { - color: var(--type-life); - background-color: rgba(245, 158, 11, 0.1); - } - - .type-quote { - color: var(--type-quote); - background-color: rgba(0, 255, 136, 0.1); - } - - .type-link { - color: var(--type-link); - background-color: rgba(56, 189, 248, 0.1); - } - - .type-photo { - color: var(--type-photo); - background-color: rgba(236, 72, 153, 0.1); - } - - /* Card component */ - .card { - @apply border border-border rounded-lg overflow-hidden transition-all duration-200; - box-shadow: 0 0 20px var(--accent-glow); - } - - .card:hover { - transform: translateY(-2px); - box-shadow: 0 0 30px var(--accent-glow); - } - - .card-image { - @apply aspect-video object-cover w-full; - } - - .card-body { - @apply p-5 md:p-6 space-y-3; - } - - .card-title { - @apply text-xl font-semibold; - } - - .card-excerpt { - @apply text-text-dim text-sm line-clamp-3; - } - - .card-footer { - @apply flex items-center justify-between gap-4; - } - - /* ===================== - Timeline Layout - ===================== */ - - .timeline { - @apply relative mx-auto max-w-5xl px-4 py-12; - } - - /* Vertical spine */ - .timeline::before { - content: ''; - @apply absolute top-0 bottom-0; - /* Mobile: fixed 20px from container left edge */ - left: 20px; - width: 2px; - background: linear-gradient(to bottom, var(--accent), var(--accent2, var(--accent))); - opacity: 0.7; - } - - @screen md { - .timeline::before { - left: 50%; - transform: translateX(-50%); - } - } - - /* Each timeline row — block, full width, positioned context for abs children */ - .timeline-item { - @apply relative mb-10; - /* - Mobile geometry (.timeline has px-4 = 16px padding): - spine left = 20px from <ol> border → 20-16 = 4px from item's containing block. - We want card to start ~8px right of spine right edge (22px from <ol> = 6px from block). - Use margin-left: 30px so card starts at 16+30=46px from <ol>, 24px right of spine right. - abs children: spine left relative to item = 4 - 30 = -26px. - */ - margin-left: 30px; - } - - @screen md { - .timeline-item { - margin-left: 0; - } - } - - /* ---- Connector line ---- */ - .timeline-connector { - @apply absolute; - top: 20px; - height: 2px; - /* - Mobile: .timeline px-4(16px) + item margin-left(30px) = 46px from <ol> border. - Spine right edge = 22px from <ol> border = 22-46 = -24px from item left. - Connector: left=-24px, width=24px → touches spine right and card left edge. - */ - left: -24px; - width: 24px; - } - - @screen md { - /* - spine center = 50% of item. Spine is 2px: left edge at 50%-1px, right at 50%+1px. - Cards occupy [0 .. 50%-24px] (left) or [50%+24px .. 100%] (right). - Left connector: left=50%-24px, width=23px → touches card right edge and spine left. - Right connector: left=50%+1px, width=23px → touches spine right and card left. - */ - .timeline-item--left .timeline-connector { - left: calc(50% - 24px); - width: 23px; - } - .timeline-item--right .timeline-connector { - left: calc(50% + 1px); - width: 23px; - } - } - - /* ---- Node on spine ---- */ - .timeline-node { - @apply absolute rounded-full z-10; - top: 14px; - /* - Mobile: spine center = 21px from <ol> border = 21-46 = -25px from item left. - Node (10px wide): left = -25 - 5 = -30px. - */ - left: -30px; - width: 10px; - height: 10px; - border: 2px solid var(--bg); - } - - @screen md { - .timeline-node { - width: 12px; - height: 12px; - top: 14px; - /* Desktop: spine center = 50% of item. Node center on spine: left = 50% - 6px */ - left: calc(50% - 6px); - } - } - - /* ---- Card wrapper ---- */ - .timeline-card { - @apply flex border rounded-lg overflow-hidden bg-surface; - /* Mobile: column (thumb on top) */ - flex-direction: column; - width: 100%; - transition: box-shadow 0.2s, transform 0.2s; - } - - .timeline-card:hover { - transform: translateY(-2px); - } - - @screen md { - /* Desktop: push card into left or right half via item padding */ - .timeline-item--left { - padding-right: calc(50% + 24px); - } - .timeline-item--right { - padding-left: calc(50% + 24px); - } - /* Left card: thumb outer-left, body inner-right */ - .timeline-item--left .timeline-card { - flex-direction: row; - } - /* Right card: body inner-left, thumb outer-right */ - .timeline-item--right .timeline-card { - flex-direction: row-reverse; - } - } - - /* ---- Thumbnail panel ---- */ - .timeline-thumb { - @apply flex-shrink-0 overflow-hidden; - /* Mobile: full-width banner */ - width: 100%; - height: 90px; - } - - @screen md { - .timeline-thumb { - /* 3:2 landscape: wider than tall */ - width: 40%; - height: auto; - aspect-ratio: 3 / 2; - } - } - - .timeline-thumb img { - @apply w-full h-full object-cover; - transition: transform 0.2s; - } - - .timeline-card:hover .timeline-thumb img { - transform: scale(1.03); - } - - /* ---- Text panel ---- */ - .timeline-body { - @apply flex flex-col gap-2 p-4 flex-1; - } - - /* ---- Meta row (TYPE · date) ---- */ - .timeline-meta { - @apply flex items-center gap-2 text-xs font-mono tracking-widest uppercase; - } - - .timeline-meta-sep { - @apply text-border; - } - - .timeline-date { - @apply text-text-dim normal-case tracking-normal; - } - - /* ---- Title ---- */ - .timeline-title { - @apply font-semibold text-base leading-snug; - } - - .timeline-title a { - @apply hover:text-accent transition-colors; - } - - /* ---- Excerpt ---- */ - .timeline-excerpt { - @apply text-text-dim text-sm line-clamp-3 leading-relaxed; - } - - /* ---- Pinned badge ---- */ - .timeline-pinned { - @apply inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-semibold; - } - - /* ---- Type-color variants (node, connector, card) ---- */ - - /* Tech (purple) */ - .timeline-node--tech { - background-color: var(--type-tech); - box-shadow: 0 0 12px color-mix(in srgb, var(--type-tech) 40%, transparent); - } - .timeline-connector--tech { - background-color: var(--type-tech); - } - .timeline-card--tech { - border-color: color-mix(in srgb, var(--type-tech) 25%, transparent); - box-shadow: 0 0 18px color-mix(in srgb, var(--type-tech) 10%, transparent); - } - - /* Life (amber) */ - .timeline-node--life { - background-color: var(--type-life); - box-shadow: 0 0 12px color-mix(in srgb, var(--type-life) 40%, transparent); - } - .timeline-connector--life { - background-color: var(--type-life); - } - .timeline-card--life { - border-color: color-mix(in srgb, var(--type-life) 25%, transparent); - box-shadow: 0 0 18px color-mix(in srgb, var(--type-life) 10%, transparent); - } - - /* Quote (green) */ - .timeline-node--quote { - background-color: var(--type-quote); - box-shadow: 0 0 12px color-mix(in srgb, var(--type-quote) 40%, transparent); - } - .timeline-connector--quote { - background-color: var(--type-quote); - } - .timeline-card--quote { - border-color: color-mix(in srgb, var(--type-quote) 25%, transparent); - box-shadow: 0 0 18px color-mix(in srgb, var(--type-quote) 10%, transparent); - } - - /* Link (cyan) */ - .timeline-node--link { - background-color: var(--type-link); - box-shadow: 0 0 12px color-mix(in srgb, var(--type-link) 40%, transparent); - } - .timeline-connector--link { - background-color: var(--type-link); - } - .timeline-card--link { - border-color: color-mix(in srgb, var(--type-link) 25%, transparent); - box-shadow: 0 0 18px color-mix(in srgb, var(--type-link) 10%, transparent); - } - - /* Photo (pink) */ - .timeline-node--photo { - background-color: var(--type-photo); - box-shadow: 0 0 12px color-mix(in srgb, var(--type-photo) 40%, transparent); - } - .timeline-connector--photo { - background-color: var(--type-photo); - } - .timeline-card--photo { - border-color: color-mix(in srgb, var(--type-photo) 25%, transparent); - box-shadow: 0 0 18px color-mix(in srgb, var(--type-photo) 10%, transparent); - } - - /* ---- Timeline lazy-reveal (scroll-triggered) ---- */ - .js-lazy-timeline > .timeline-item { - opacity: 0; - transform: translateX(-18px); - transition: opacity 320ms ease-out, transform 320ms ease-out; - } - - @screen md { - .js-lazy-timeline > .timeline-item--right { - transform: translateX(18px); - } - } - - .js-lazy-timeline > .timeline-item.is-visible { - opacity: 1; - transform: translateX(0); - } - - /* Header navigation styling */ - .header { - @apply fixed top-0 left-0 right-0 z-40; - } - - .header-nav { - @apply hidden md:flex items-center gap-6; - } - - .nav-link { - @apply text-text hover:text-accent transition-colors; - } - - .header-actions { - @apply flex items-center gap-4; - } - - /* Mobile menu overlay */ - .menu-overlay { - @apply fixed inset-0 bg-bg z-40 opacity-0 invisible transition-all duration-300; - } - - .menu-overlay.active { - @apply opacity-100 visible; - } - - .menu-nav { - @apply flex flex-col gap-4 p-6 text-lg font-semibold; - } - - .menu-nav a { - @apply text-text hover:text-accent transition-colors; - } - - /* Breadcrumb navigation */ - .breadcrumb { - @apply flex items-center gap-2 text-sm text-text-dim; - } - - .breadcrumb a { - @apply hover:text-accent transition-colors; - } - - .breadcrumb-separator { - @apply opacity-50; - } - - /* Article metadata styling (with icons) */ - .article-meta { - @apply flex flex-wrap items-center gap-4 text-sm text-text-dim; - } - - .article-meta-item { - @apply flex items-center gap-2; - } - - .article-meta-item i { - @apply w-4 h-4 flex-shrink-0; - color: var(--accent2); - } - - /* Hero typography with fluid sizing */ - .hero-title { - font-size: clamp(2rem, 5vw + 1rem, 4.5rem); - } - - .section-title { - font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem); - } - - /* ---- Article prev/next navigation ---- */ - .article-nav { - @apply border-t border-border pt-6; - } - - .article-nav-prompt { - @apply font-mono text-sm mb-2; - color: var(--accent); - } - - .article-nav-links { - @apply flex flex-col md:flex-row md:justify-between md:items-center gap-4 md:gap-0 font-mono text-sm; - } - - .article-nav-link { - @apply hover:text-accent transition-colors text-text; - } - - .article-nav-placeholder { - @apply text-text-dim opacity-40; - } - - /* ---- Footer badge variants ---- */ - .badge-footer-accent { - @apply inline-flex items-center px-2.5 py-1 rounded text-xs font-mono font-semibold whitespace-nowrap; - border: 1px solid rgba(168, 85, 247, 0.35); - background: rgba(168, 85, 247, 0.1); - color: var(--accent); - } - - .badge-footer-accent2 { - @apply inline-flex items-center px-2.5 py-1 rounded text-xs font-mono font-semibold whitespace-nowrap; - border: 1px solid rgba(0, 255, 136, 0.35); - background: rgba(0, 255, 136, 0.1); - color: var(--accent2); - } - - /* Back to top button */ - .back-to-top { - @apply fixed bottom-6 right-6 z-40 w-11 h-11 rounded-full flex items-center justify-center; - background: var(--accent); - box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4); - transition: background 200ms ease, box-shadow 200ms ease; - color: #fff; - } - .back-to-top:hover { - background: var(--accent); - filter: brightness(0.85); - box-shadow: 0 0 20px var(--accent); - } - .back-to-top:focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; - } -} - -/* Prose overrides for light theme */ -html.theme-light .prose, -html.theme-light .prose-invert { - color: var(--text); -} - -html.theme-light .prose a, -html.theme-light .prose-invert a { - color: var(--accent); -} - -html.theme-light .prose strong, -html.theme-light .prose-invert strong { - color: var(--text); -} - -html.theme-light .prose code, -html.theme-light .prose-invert code { - color: var(--accent2); -} - -html.theme-light .prose pre, -html.theme-light .prose-invert pre { - background-color: var(--surface); - color: var(--text); -} - -html.theme-light .prose h1, -html.theme-light .prose h2, -html.theme-light .prose h3, -html.theme-light .prose h4, -html.theme-light .prose h5, -html.theme-light .prose h6, -html.theme-light .prose-invert h1, -html.theme-light .prose-invert h2, -html.theme-light .prose-invert h3, -html.theme-light .prose-invert h4, -html.theme-light .prose-invert h5, -html.theme-light .prose-invert h6 { - color: var(--text); -} - -html.theme-light .prose blockquote, -html.theme-light .prose-invert blockquote { - color: var(--text); - border-left-color: var(--accent); -} - -/* Responsive container utilities - mobile-first */ -.container { - @apply max-w-full px-4; -} - -@media (min-width: 768px) { - .container { - @apply max-w-4xl px-6; - } -} - -@media (min-width: 1060px) { - .container { - @apply max-w-5xl px-8; - } -} - -/* Alpine.js x-cloak - hide content until Alpine initializes */ -[x-cloak] { - display: none !important; -} - -/* Respect user's motion preferences */ -@media (prefers-reduced-motion: reduce) { - *, *::before, *::after { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } -} - -/* Matrix rain canvas background */ -#matrix-rain { - position: fixed; - inset: 0; - width: 100%; - height: 100%; - pointer-events: none; - z-index: 1; -} - -/* Dark theme: 13% opacity (inner pages) */ -html.theme-dark #matrix-rain { - opacity: 0.13; -} - -/* Light theme: 18% opacity (inner pages) */ -html.theme-light #matrix-rain { - opacity: 0.18; -} - -/* Homepage: more prominent background */ -html.theme-dark body[data-page-kind="home"] #matrix-rain { - opacity: 0.28; -} - -html.theme-light body[data-page-kind="home"] #matrix-rain { - opacity: 0.35; -} - -/* Reduced motion: hide canvas entirely */ -@media (prefers-reduced-motion: reduce) { - #matrix-rain { - display: none; - } -} - -/* Content grid background — blocks rain under text, visible in gutters (single pages only) */ -.content-grid { - position: relative; - z-index: 10; - background-color: var(--bg); - padding: 2px; - border: 1px solid var(--border); - box-shadow: 0 0 20px var(--accent-glow); -} - -@media (min-width: 768px) { - .content-grid { - padding: 2rem; - } -} - -/* Article list items — soft glow effect */ -article.border.border-border\/30.rounded-lg.overflow-hidden.group.bg-bg { - border-color: var(--border); - box-shadow: 0 0 20px var(--accent-glow); -} - -/* ============================================ - FORM COMPONENTS (Week 4) - ============================================ */ - -/* Form input base styles */ -.form-input, -.form-textarea, -.form-select { - @apply w-full px-4 py-2 rounded border border-border bg-bg2 text-text font-body transition-all duration-200; -} - -/* Input placeholder styling */ -.form-input::placeholder, -.form-textarea::placeholder { - color: var(--text-dim); - opacity: 0.7; -} - -/* Input focus state */ -.form-input:focus, -.form-textarea:focus, -.form-select:focus { - @apply outline-none border-accent ring-2 ring-accent ring-offset-2; - ring-offset-color: var(--bg); - border-color: var(--accent); -} - -/* Input invalid/error state */ -.form-input:invalid, -.form-textarea:invalid, -.form-select:invalid, -.form-input.error, -.form-textarea.error, -.form-select.error { - @apply border-red-500 ring-red-500; -} - -.form-input:invalid:focus, -.form-textarea:invalid:focus, -.form-select:invalid:focus { - @apply ring-red-500 border-red-500; - ring-offset-color: var(--bg); -} - -/* Input disabled state */ -.form-input:disabled, -.form-textarea:disabled, -.form-select:disabled { - @apply opacity-50 cursor-not-allowed bg-muted; -} - -/* Textarea specific */ -.form-textarea { - @apply min-h-32; - resize: vertical; -} - -.form-textarea.auto-expand { - resize: none; - overflow-y: hidden; -} - -/* Select dropdown */ -.form-select { - cursor: pointer; - appearance: none; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a855f7' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: right 0.75rem center; - padding-right: 2.5rem; -} - -html.theme-light .form-select { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239333ea' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); -} - -/* Checkbox and radio button base */ -.form-checkbox, -.form-radio { - @apply w-5 h-5 cursor-pointer accent-accent transition-all duration-200; - appearance: none; - border: 2px solid var(--border); - border-radius: 0.375rem; - flex-shrink: 0; -} - -.form-radio { - border-radius: 50%; -} - -/* Checkbox/radio focus state */ -.form-checkbox:focus-visible, -.form-radio:focus-visible { - @apply outline-none ring-2 ring-accent ring-offset-2; - ring-offset-color: var(--bg); -} - -/* Checkbox/radio checked state */ -.form-checkbox:checked, -.form-radio:checked { - background-color: var(--accent); - border-color: var(--accent); - background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: center; - background-size: 100%; -} - -.form-radio:checked { - background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3.5'/%3E%3C/svg%3E"); -} - -/* Checkbox/radio disabled state */ -.form-checkbox:disabled, -.form-radio:disabled { - @apply opacity-50 cursor-not-allowed; - border-color: var(--muted); -} - -/* Form group layout */ -.form-group { - @apply space-y-2; -} - -.form-group label { - @apply block text-sm font-semibold text-text; -} - -.form-group.required label::after { - content: ' *'; - color: #ef4444; -} - -.form-group-input { - @apply relative; -} - -.form-group-help { - @apply text-xs text-text-dim; -} - -.form-group.error .form-group-help { - @apply text-red-500; -} - -.form-error { - @apply text-sm text-red-500 mt-1; -} - -/* Form layout utilities */ -.form-row { - @apply flex flex-col md:flex-row gap-4; -} - -.form-row > .form-group { - @apply flex-1; -} - -.form-inline { - @apply flex flex-col sm:flex-row items-end gap-4; -} - -.form-inline .form-group { - @apply flex-1; -} - -.form-inline .btn { - @apply h-10; -} - -/* Character count indicator */ -.form-char-count { - @apply text-xs text-text-dim text-right; -} - -.form-char-count.warning { - @apply text-amber-500; -} - -.form-char-count.error { - @apply text-red-500; -} - -/* ============================================ - FOCUS MANAGEMENT (Week 5) - ============================================ */ - -/* Enhanced :focus-visible with accent color styling */ -:focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; -} - -/* Respect motion preferences for focus indicator */ -@media (prefers-reduced-motion: reduce) { - :focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; - } -} - -/* Button and link hover/focus transitions */ -button, -a.btn, -.btn { - transition: all 150ms ease-out; -} - -button:hover, -a.btn:hover, -.btn:hover { - opacity: 0.8; - transform: translateY(-1px); -} - -button:active, -a.btn:active, -.btn:active { - transform: translateY(0); -} - -/* Form input focus transitions with glow effect */ -input, -textarea, -select { - transition: all 200ms ease-out; -} - -input:focus, -textarea:focus, -select:focus, -input:focus-visible, -textarea:focus-visible, -select:focus-visible { - box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1); -} - -/* ============================================ - MODAL COMPONENTS (Week 4) - ============================================ */ - -/* Modal backdrop */ -.modal-backdrop { - @apply fixed inset-0 bg-black/50 opacity-0 invisible transition-all duration-300 z-40; - backdrop-filter: blur(2px); -} - -.modal-backdrop.active { - @apply opacity-100 visible; -} - -/* Modal container */ -.modal { - @apply fixed inset-0 flex items-center justify-center opacity-0 invisible transition-all duration-300 z-50 p-4; - pointer-events: none; -} - -.modal.active { - @apply opacity-100 visible; - pointer-events: auto; -} - -.modal.active .modal-backdrop { - @apply opacity-100 visible; - pointer-events: auto; -} - -/* Modal content box */ -.modal-content { - @apply bg-bg2 border border-border rounded-lg shadow-2xl max-w-lg w-full max-h-[90vh] flex flex-col; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); - animation: modalSlideUp 0.3s ease-out; -} - -@keyframes fadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - -@keyframes slideUp { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes modalSlideUp { - from { - opacity: 0; - transform: translateY(30px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -/* Modal header */ -.modal-header { - @apply flex items-start justify-between gap-4 p-6 border-b border-border; -} - -.modal-title { - @apply text-xl font-bold text-text; -} - -.modal-close { - @apply flex items-center justify-center w-8 h-8 rounded hover:bg-surface cursor-pointer transition-colors; -} - -.modal-close::before, -.modal-close::after { - content: ''; - @apply absolute w-5 h-0.5 bg-text-dim; -} - -.modal-close::before { - transform: rotate(45deg); -} - -.modal-close::after { - transform: rotate(-45deg); -} - -.modal-close:hover::before, -.modal-close:hover::after { - @apply bg-accent; -} - -/* Modal body */ -.modal-body { - @apply flex-1 overflow-y-auto p-6 space-y-4; -} - -/* Modal footer */ -.modal-footer { - @apply flex items-center justify-end gap-3 p-6 border-t border-border; -} - -/* Modal sizes */ -.modal-content.modal-sm { - @apply max-w-sm; -} - -.modal-content.modal-md { - @apply max-w-md; -} - -.modal-content.modal-lg { - @apply max-w-2xl; -} - -/* Modal variants */ -.modal-content.modal-alert { - @apply max-w-sm; -} - -.modal-content.modal-confirm { - @apply max-w-sm; -} - -/* Modal button styling */ -.modal-footer .btn { - @apply min-w-[100px]; -} - -/* ============================================ - INTERACTIVE PATTERNS (Week 4) - ============================================ */ - -/* Loading spinner */ -.spinner { - @apply inline-block; - width: 1rem; - height: 1rem; - border: 2px solid var(--border); - border-top-color: var(--accent); - border-radius: 50%; - animation: spin 0.6s linear infinite; -} - -@keyframes spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -.spinner-sm { - width: 0.75rem; - height: 0.75rem; - border-width: 1.5px; -} - -.spinner-lg { - width: 1.5rem; - height: 1.5rem; - border-width: 3px; -} - -/* Button with spinner */ -.btn:disabled .spinner { - @apply inline-block mr-2; -} - -/* Toast notification container */ -.toast-container { - @apply fixed bottom-0 right-0 p-4 space-y-3 max-w-sm z-50; -} - -@media (max-width: 640px) { - .toast-container { - @apply left-0 right-0 px-4; - } -} - -/* Toast base */ -.toast { - @apply flex items-start gap-3 p-4 rounded-lg border border-border shadow-lg; - animation: slideInUp 0.3s ease-out; - background-color: var(--bg2); - color: var(--text); -} - -@keyframes slideInUp { - from { - transform: translateY(100%); - opacity: 0; - } - to { - transform: translateY(0); - opacity: 1; - } -} - -/* Animation Utility Classes */ - -.animate-fade-in { - animation: fadeIn 300ms ease-out; -} - -.animate-slide-up { - animation: slideUp 300ms ease-out; -} - -.animate-spin-loader { - animation: spin 600ms linear infinite; -} - -/* Toast variants */ -.toast-success { - border-color: #10b981; - background-color: rgba(16, 185, 129, 0.1); -} - -.toast-success::before { - content: '✓'; - color: #10b981; - font-weight: bold; - flex-shrink: 0; -} - -.toast-error { - border-color: #ef4444; - background-color: rgba(239, 68, 68, 0.1); -} - -.toast-error::before { - content: '✕'; - color: #ef4444; - font-weight: bold; - flex-shrink: 0; -} - -.toast-info { - border-color: #3b82f6; - background-color: rgba(59, 130, 246, 0.1); -} - -.toast-info::before { - content: 'ℹ'; - color: #3b82f6; - flex-shrink: 0; -} - -.toast-warning { - border-color: #f59e0b; - background-color: rgba(245, 158, 11, 0.1); -} - -.toast-warning::before { - content: '⚠'; - color: #f59e0b; - flex-shrink: 0; -} - -.toast-close { - @apply ml-auto flex-shrink-0 w-6 h-6 flex items-center justify-center cursor-pointer hover:bg-surface rounded transition-colors; -} - -/* Tooltip */ -.tooltip { - @apply relative inline-block; -} - -.tooltip-text { - @apply absolute bg-bg2 text-text-dim text-xs rounded px-2 py-1 whitespace-nowrap pointer-events-none opacity-0 invisible transition-all duration-200; - z-index: 50; - bottom: 125%; - left: 50%; - transform: translateX(-50%); -} - -.tooltip:hover .tooltip-text { - @apply opacity-100 visible; -} - -.tooltip-text::after { - content: ''; - @apply absolute w-2 h-2 bg-bg2; - bottom: -4px; - left: 50%; - transform: translateX(-50%) rotate(45deg); -} - -/* Tooltip directions */ -.tooltip-bottom .tooltip-text { - @apply top-[125%] bottom-auto; -} - -.tooltip-bottom .tooltip-text::after { - @apply top-[-4px] bottom-auto; - transform: translateX(-50%) rotate(225deg); -} - -.tooltip-left .tooltip-text { - @apply left-auto right-[125%]; - transform: none; -} - -.tooltip-left .tooltip-text::after { - @apply left-auto right-[-4px]; - transform: rotate(135deg); -} - -.tooltip-right .tooltip-text { - @apply left-[125%]; - transform: none; -} - -.tooltip-right .tooltip-text::after { - @apply left-[-4px] right-auto; - transform: rotate(315deg); -} - -/* Motion Safety - Respect prefers-reduced-motion */ - -@media (prefers-reduced-motion: reduce) { - /* Remove all animations */ - *, - *::before, - *::after { - animation: none !important; - transition: none !important; - } - - /* Ensure focus-visible is still visible */ - :focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; - } -} diff --git a/themes/danix-xyz-hacker/assets/css/main.min.css b/themes/danix-xyz-hacker/assets/css/main.min.css deleted file mode 100644 index 9fbcaa0..0000000 --- a/themes/danix-xyz-hacker/assets/css/main.min.css +++ /dev/null @@ -1,4495 +0,0 @@ -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; -} - -/* -! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -7. Disable tap highlights on iOS -*/ - -html, -:host { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ - -webkit-tap-highlight-color: transparent; - /* 7 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font-family by default. -2. Use the user's configured `mono` font-feature-settings by default. -3. Use the user's configured `mono` font-variation-settings by default. -4. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: JetBrains Mono, monospace; - /* 1 */ - font-feature-settings: normal; - /* 2 */ - font-variation-settings: normal; - /* 3 */ - font-size: 1em; - /* 4 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - letter-spacing: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -input:where([type='button']), -input:where([type='reset']), -input:where([type='submit']) { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden]:where(:not([hidden="until-found"])) { - display: none; -} - -html { - overflow-x: hidden; -} - -body { - overflow-x: hidden; - background-color: var(--bg); - font-family: IBM Plex Sans, sans-serif; - color: var(--text); -} - -articlebody.border.border-border\/30.rounded-lg.overflow-hidden.group { - border-color: var(--border); - box-shadow: 0 0 20px var(--accent-glow); -} - -h1, - h2, - h3, - h4, - h5, - h6 { - font-weight: 700; - font-family: 'Oxanium', monospace; -} - -h1 { - font-size: 1.875rem; - line-height: 2.25rem; -} - -@media (min-width: 768px) { - h1 { - font-size: 2.25rem; - line-height: 2.5rem; - } -} - -h2 { - font-size: 1.5rem; - line-height: 2rem; -} - -@media (min-width: 768px) { - h2 { - font-size: 1.875rem; - line-height: 2.25rem; - } -} - -h3 { - font-size: 1.25rem; - line-height: 1.75rem; -} - -@media (min-width: 768px) { - h3 { - font-size: 1.5rem; - line-height: 2rem; - } -} - -.heading-prefix { - font-family: 'JetBrains Mono', monospace; - font-weight: 400; - font-size: 0.8em; - color: var(--accent); - opacity: 0.7; - margin-right: 0.35em; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} - -a { - color: var(--accent); - transition-property: opacity; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -a:hover { - opacity: 0.8; -} - -code { - border-radius: 0.25rem; - border-width: 1px; - border-color: var(--border); - background-color: var(--surface); - padding-left: 0.375rem; - padding-right: 0.375rem; - padding-top: 0.125rem; - padding-bottom: 0.125rem; - font-family: JetBrains Mono, monospace; - color: var(--accent2); -} - -articlecode.border-border\/30.rounded-lg.overflow-hidden.group.bg-bg { - border-color: var(--border); - box-shadow: 0 0 20px var(--accent-glow); -} - -pre { - background-color: rgba(var(--surface-rgb), 0.8); - overflow-x: auto; - border-radius: 0.25rem; - border-width: 1px; - border-color: var(--border); - padding: 1rem; -} - -articlepre.border-border\/30.rounded-lg.overflow-hidden.group.bg-bg { - border-color: var(--border); - box-shadow: 0 0 20px var(--accent-glow); -} - -pre code { - border-width: 0px; - background-color: transparent; - padding: 0px; - color: var(--text); -} - -*:focus-visible { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); - --tw-ring-color: var(--accent); - --tw-ring-offset-width: 2px; - ring-offset-color: var(--bg); -} - -button, - input, - textarea, - select { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 200ms; -} - -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1060px) { - .container { - max-width: 1060px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - -.prose { - color: var(--tw-prose-body); - max-width: 65ch; -} - -.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.25em; - margin-bottom: 1.25em; -} - -.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-lead); - font-size: 1.25em; - line-height: 1.6; - margin-top: 1.2em; - margin-bottom: 1.2em; -} - -.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-links); - text-decoration: underline; - font-weight: 500; -} - -.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-bold); - font-weight: 600; -} - -.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; -} - -.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; -} - -.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; -} - -.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: decimal; - margin-top: 1.25em; - margin-bottom: 1.25em; - padding-inline-start: 1.625em; -} - -.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: upper-alpha; -} - -.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: lower-alpha; -} - -.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: upper-alpha; -} - -.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: lower-alpha; -} - -.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: upper-roman; -} - -.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: lower-roman; -} - -.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: upper-roman; -} - -.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: lower-roman; -} - -.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: decimal; -} - -.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: disc; - margin-top: 1.25em; - margin-bottom: 1.25em; - padding-inline-start: 1.625em; -} - -.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker { - font-weight: 400; - color: var(--tw-prose-counters); -} - -.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker { - color: var(--tw-prose-bullets); -} - -.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-headings); - font-weight: 600; - margin-top: 1.25em; -} - -.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - border-color: var(--tw-prose-hr); - border-top-width: 1px; - margin-top: 3em; - margin-bottom: 3em; -} - -.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-weight: 500; - font-style: italic; - color: var(--tw-prose-quotes); - border-inline-start-width: 0.25rem; - border-inline-start-color: var(--tw-prose-quote-borders); - quotes: "\201C""\201D""\2018""\2019"; - margin-top: 1.6em; - margin-bottom: 1.6em; - padding-inline-start: 1em; -} - -.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before { - content: open-quote; -} - -.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { - content: close-quote; -} - -.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-headings); - font-weight: 800; - font-size: 2.25em; - margin-top: 0; - margin-bottom: 0.8888889em; - line-height: 1.1111111; -} - -.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-weight: 900; - color: inherit; -} - -.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-headings); - font-weight: 700; - font-size: 1.5em; - margin-top: 2em; - margin-bottom: 1em; - line-height: 1.3333333; -} - -.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-weight: 800; - color: inherit; -} - -.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-headings); - font-weight: 600; - font-size: 1.25em; - margin-top: 1.6em; - margin-bottom: 0.6em; - line-height: 1.6; -} - -.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-weight: 700; - color: inherit; -} - -.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-headings); - font-weight: 600; - margin-top: 1.5em; - margin-bottom: 0.5em; - line-height: 1.5; -} - -.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-weight: 700; - color: inherit; -} - -.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 2em; - margin-bottom: 2em; -} - -.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - display: block; - margin-top: 2em; - margin-bottom: 2em; -} - -.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 2em; - margin-bottom: 2em; -} - -.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-weight: 500; - font-family: inherit; - color: var(--tw-prose-kbd); - box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows); - font-size: 0.875em; - border-radius: 0.3125rem; - padding-top: 0.1875em; - padding-inline-end: 0.375em; - padding-bottom: 0.1875em; - padding-inline-start: 0.375em; -} - -.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-code); - font-weight: 600; - font-size: 0.875em; -} - -.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before { - content: "`"; -} - -.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { - content: "`"; -} - -.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; -} - -.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; -} - -.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; - font-size: 0.875em; -} - -.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; - font-size: 0.9em; -} - -.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; -} - -.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; -} - -.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; -} - -.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-pre-code); - background-color: var(--tw-prose-pre-bg); - overflow-x: auto; - font-weight: 400; - font-size: 0.875em; - line-height: 1.7142857; - margin-top: 1.7142857em; - margin-bottom: 1.7142857em; - border-radius: 0.375rem; - padding-top: 0.8571429em; - padding-inline-end: 1.1428571em; - padding-bottom: 0.8571429em; - padding-inline-start: 1.1428571em; -} - -.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - background-color: transparent; - border-width: 0; - border-radius: 0; - padding: 0; - font-weight: inherit; - color: inherit; - font-size: inherit; - font-family: inherit; - line-height: inherit; -} - -.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before { - content: none; -} - -.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { - content: none; -} - -.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - width: 100%; - table-layout: auto; - margin-top: 2em; - margin-bottom: 2em; - font-size: 0.875em; - line-height: 1.7142857; -} - -.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - border-bottom-width: 1px; - border-bottom-color: var(--tw-prose-th-borders); -} - -.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-headings); - font-weight: 600; - vertical-align: bottom; - padding-inline-end: 0.5714286em; - padding-bottom: 0.5714286em; - padding-inline-start: 0.5714286em; -} - -.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - border-bottom-width: 1px; - border-bottom-color: var(--tw-prose-td-borders); -} - -.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - border-bottom-width: 0; -} - -.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - vertical-align: baseline; -} - -.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - border-top-width: 1px; - border-top-color: var(--tw-prose-th-borders); -} - -.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - vertical-align: top; -} - -.prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - text-align: start; -} - -.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - margin-bottom: 0; -} - -.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-captions); - font-size: 0.875em; - line-height: 1.4285714; - margin-top: 0.8571429em; -} - -.prose { - --tw-prose-body: #374151; - --tw-prose-headings: #111827; - --tw-prose-lead: #4b5563; - --tw-prose-links: #111827; - --tw-prose-bold: #111827; - --tw-prose-counters: #6b7280; - --tw-prose-bullets: #d1d5db; - --tw-prose-hr: #e5e7eb; - --tw-prose-quotes: #111827; - --tw-prose-quote-borders: #e5e7eb; - --tw-prose-captions: #6b7280; - --tw-prose-kbd: #111827; - --tw-prose-kbd-shadows: rgb(17 24 39 / 10%); - --tw-prose-code: #111827; - --tw-prose-pre-code: #e5e7eb; - --tw-prose-pre-bg: #1f2937; - --tw-prose-th-borders: #d1d5db; - --tw-prose-td-borders: #e5e7eb; - --tw-prose-invert-body: #d1d5db; - --tw-prose-invert-headings: #fff; - --tw-prose-invert-lead: #9ca3af; - --tw-prose-invert-links: #fff; - --tw-prose-invert-bold: #fff; - --tw-prose-invert-counters: #9ca3af; - --tw-prose-invert-bullets: #4b5563; - --tw-prose-invert-hr: #374151; - --tw-prose-invert-quotes: #f3f4f6; - --tw-prose-invert-quote-borders: #374151; - --tw-prose-invert-captions: #9ca3af; - --tw-prose-invert-kbd: #fff; - --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%); - --tw-prose-invert-code: #fff; - --tw-prose-invert-pre-code: #d1d5db; - --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%); - --tw-prose-invert-th-borders: #4b5563; - --tw-prose-invert-td-borders: #374151; - font-size: 1rem; - line-height: 1.75; -} - -.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - margin-bottom: 0; -} - -.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0.5em; - margin-bottom: 0.5em; -} - -.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-start: 0.375em; -} - -.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-start: 0.375em; -} - -.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0.75em; - margin-bottom: 0.75em; -} - -.prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.25em; -} - -.prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-bottom: 1.25em; -} - -.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.25em; -} - -.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-bottom: 1.25em; -} - -.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0.75em; - margin-bottom: 0.75em; -} - -.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.25em; - margin-bottom: 1.25em; -} - -.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0.5em; - padding-inline-start: 1.625em; -} - -.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; -} - -.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; -} - -.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; -} - -.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; -} - -.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-start: 0; -} - -.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-end: 0; -} - -.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-top: 0.5714286em; - padding-inline-end: 0.5714286em; - padding-bottom: 0.5714286em; - padding-inline-start: 0.5714286em; -} - -.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-start: 0; -} - -.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-end: 0; -} - -.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 2em; - margin-bottom: 2em; -} - -.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; -} - -.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-bottom: 0; -} - -.prose-invert { - --tw-prose-body: var(--tw-prose-invert-body); - --tw-prose-headings: var(--tw-prose-invert-headings); - --tw-prose-lead: var(--tw-prose-invert-lead); - --tw-prose-links: var(--tw-prose-invert-links); - --tw-prose-bold: var(--tw-prose-invert-bold); - --tw-prose-counters: var(--tw-prose-invert-counters); - --tw-prose-bullets: var(--tw-prose-invert-bullets); - --tw-prose-hr: var(--tw-prose-invert-hr); - --tw-prose-quotes: var(--tw-prose-invert-quotes); - --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders); - --tw-prose-captions: var(--tw-prose-invert-captions); - --tw-prose-kbd: var(--tw-prose-invert-kbd); - --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows); - --tw-prose-code: var(--tw-prose-invert-code); - --tw-prose-pre-code: var(--tw-prose-invert-pre-code); - --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg); - --tw-prose-th-borders: var(--tw-prose-invert-th-borders); - --tw-prose-td-borders: var(--tw-prose-invert-td-borders); -} - -.container { - margin-left: auto; - margin-right: auto; - max-width: 56rem; -} - -/* Background utilities */ - -.bg-bg { - background-color: var(--bg); -} - -.bg-surface { - background-color: var(--surface); -} - -/* Border utilities */ - -.border-border { - border-color: var(--border); -} - -/* Text color utilities */ - -.text-accent { - color: var(--accent); -} - -.text-accent2 { - color: var(--accent2); -} - -.text-text { - color: var(--text); -} - -.text-text-dim { - color: var(--text-dim); -} - -/* Additional semantic utilities */ - -/* Glow effect utility */ - -.glow-accent { - box-shadow: 0 0 20px var(--accent-glow); -} - -/* Frosted glass bar (header/footer) */ - -.frosted-bar { - background-color: rgba(var(--bg2-rgb), 0.75); - -webkit-backdrop-filter: blur(10px); - backdrop-filter: blur(10px); - box-shadow: 0 0 20px var(--accent-glow); - /* border applied via utility classes in templates */ -} - -/* Border utilities for frosted-bar component */ - -.frosted-bar.border-b, - .frosted-bar.border-t { - border-color: var(--border); -} - -/* Button component styles */ - -.btn { - display: inline-flex; - cursor: pointer; - align-items: center; - justify-content: center; - border-radius: 0.25rem; - padding-left: 1rem; - padding-right: 1rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - font-weight: 700; - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 200ms; - background-color: var(--accent); - color: #ffffff; - border: none; - outline: none; -} - -.btn:hover:not(:disabled) { - opacity: 0.85; - transform: translateY(-1px); -} - -.btn:focus-visible { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); - --tw-ring-offset-width: 2px; - ring-color: var(--accent); - ring-offset-color: var(--bg); -} - -.btn:active:not(:disabled) { - transform: translateY(0); - opacity: 0.75; -} - -.btn:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -/* Button variants */ - -.btn-primary { - background-color: var(--accent); - color: #ffffff; -} - -.btn-primary:hover:not(:disabled) { - background-color: var(--accent); -} - -.btn-secondary { - background-color: var(--accent2); - color: var(--bg); - font-weight: 600; -} - -.btn-secondary:hover:not(:disabled) { - background-color: var(--accent2); -} - -.btn-outline { - background-color: transparent; - color: var(--accent); - border: 2px solid var(--accent); -} - -.btn-outline:hover:not(:disabled) { - background-color: var(--accent); - color: #ffffff; -} - -/* Button sizes */ - -.btn-sm { - padding-left: 0.75rem; - padding-right: 0.75rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; - font-size: 0.875rem; - line-height: 1.25rem; -} - -.btn-lg { - padding-left: 1.5rem; - padding-right: 1.5rem; - padding-top: 0.75rem; - padding-bottom: 0.75rem; - font-size: 1.125rem; - line-height: 1.75rem; -} - -/* Icon button (for icons without text) */ - -/* Force Feather icons to match size */ - -/* Sidebar widget — no box, no border */ - -.sidebar-widget { - margin-bottom: 1.5rem; -} - -/* Sidebar widget title — bash comment style */ - -.sidebar-widget-label { - font-family: var(--font-mono, monospace); - font-size: 1rem; - font-weight: bold; - color: var(--accent); - letter-spacing: 0.08em; - margin-bottom: 0.5rem; -} - -/* Sidebar separator */ - -.sidebar-hr { - border: none; - border-top: 1px solid var(--border); - margin-bottom: 1.5rem; -} - -/* ===================== - Tag Cloud Component - ===================== */ - -.tag-cloud { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 0.75rem; - align-items: baseline; - overflow: visible; -} - -.tag-cloud-link { - display: inline-flex; - align-items: center; - gap: 0.375rem; - padding: 0.25rem 0.625rem; - border: 1px solid var(--border); - border-radius: 0.25rem; - font-family: var(--font-mono, 'JetBrains Mono', monospace); - color: var(--text-dim); - text-decoration: none; - background-color: var(--bg2); - transition: border-color 150ms ease-out, color 150ms ease-out, background-color 150ms ease-out, opacity 150ms ease-out; - white-space: nowrap; - line-height: 1.4; -} - -.tag-cloud-link:hover { - border-color: rgba(var(--accent-rgb), 0.5); - color: var(--accent); - background-color: rgba(var(--accent-rgb), 0.1); -} - -.tag-cloud-link:focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; - border-radius: 0.25rem; -} - -.tag-cloud-count { - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0 0.375rem; - border-radius: 9999px; - font-size: 0.65em; - font-weight: 600; - background-color: rgba(var(--accent-rgb), 0.12); - color: var(--accent); - line-height: 1.6; - min-width: 1.2em; -} - -@media (prefers-reduced-motion: reduce) { - .tag-cloud-link { - transition: none; - } -} - -.share-grid { - display: grid; - grid-template-columns: repeat(3, 50px); - justify-content: space-evenly; - justify-items: center; - align-content: space-evenly; - align-items: center; -} - -.btn-share { - display: inline-flex; - align-items: center; - justify-content: center; - width: 50px; - height: 50px; - border-radius: 4px; - border: 1px solid var(--border); - background: var(--surface); - color: var(--text-dim); - cursor: pointer; - transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; - text-decoration: none; -} - -.btn-share svg, - .btn-share i, - .btn-share [data-feather] { - width: 22px !important; - height: 22px !important; - flex-shrink: 0; -} - -.btn-share:hover { - color: var(--accent); - border-color: rgba(var(--accent-rgb), 0.5); - background: rgba(var(--accent-rgb), 0.06); - box-shadow: 0 0 10px var(--accent-glow); -} - -.btn-share:focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; - color: var(--accent); - border-color: var(--accent); -} - -.btn-share--copied { - color: var(--accent2); - border-color: var(--accent2); - background: var(--surface); -} - -@media (prefers-reduced-motion: reduce) { - .btn-share { - transition: none; - } -} - -/* Badge base style */ - -.badge { - display: inline-flex; - align-items: center; - white-space: nowrap; - border-radius: 0.25rem; - padding-left: 0.625rem; - padding-right: 0.625rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; - font-family: JetBrains Mono, monospace; - font-size: 0.875rem; - line-height: 1.25rem; - font-weight: 600; - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 200ms; - border: 1px solid; -} - -/* Article type badge styles */ - -/* Legacy type-* classes for compatibility (with badge styling) */ - -/* Card component */ - -.card { - overflow: hidden; - border-radius: 0.5rem; - border-width: 1px; - border-color: var(--border); - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 200ms; -} - -article.card.border-border\/30.rounded-lg.overflow-hidden.group.bg-bg { - border-color: var(--border); - box-shadow: 0 0 20px var(--accent-glow); -} - -article.border.border-border\/30.card.overflow-hidden.group.bg-bg { - border-color: var(--border); - box-shadow: 0 0 20px var(--accent-glow); -} - -article.border.border-border\/30.rounded-lg.card.group.bg-bg { - border-color: var(--border); - box-shadow: 0 0 20px var(--accent-glow); -} - -.card { - box-shadow: 0 0 20px var(--accent-glow); -} - -.card:hover { - transform: translateY(-2px); - box-shadow: 0 0 30px var(--accent-glow); -} - -.card-image { - aspect-ratio: 16 / 9; - width: 100%; - -o-object-fit: cover; - object-fit: cover; -} - -.card-body > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); -} - -.card-body { - padding: 1.25rem; -} - -@media (min-width: 768px) { - .card-body { - padding: 1.5rem; - } -} - -/* ===================== - Timeline Layout - ===================== */ - -.timeline { - position: relative; - margin-left: auto; - margin-right: auto; - max-width: 64rem; - padding-left: 1rem; - padding-right: 1rem; - padding-top: 3rem; - padding-bottom: 3rem; -} - -/* Vertical spine */ - -.timeline::before { - content: ''; - position: absolute; - top: 0px; - bottom: 0px; - /* Mobile: fixed 20px from container left edge */ - left: 20px; - width: 2px; - background: linear-gradient(to bottom, var(--accent), var(--accent2, var(--accent))); - opacity: 0.7; -} - -@media (min-width: 768px) { - .timeline::before { - left: 50%; - transform: translateX(-50%); - } -} - -/* Each timeline row — block, full width, positioned context for abs children */ - -.timeline-item { - position: relative; - margin-bottom: 2.5rem; - /* - Mobile geometry (.timeline has px-4 = 16px padding): - spine left = 20px from <ol> border → 20-16 = 4px from item's containing block. - We want card to start ~8px right of spine right edge (22px from <ol> = 6px from block). - Use margin-left: 30px so card starts at 16+30=46px from <ol>, 24px right of spine right. - abs children: spine left relative to item = 4 - 30 = -26px. - */ - margin-left: 30px; -} - -@media (min-width: 768px) { - .timeline-item { - margin-left: 0; - } -} - -/* ---- Connector line ---- */ - -.timeline-connector { - position: absolute; - top: 20px; - height: 2px; - /* - Mobile: .timeline px-4(16px) + item margin-left(30px) = 46px from <ol> border. - Spine right edge = 22px from <ol> border = 22-46 = -24px from item left. - Connector: left=-24px, width=24px → touches spine right and card left edge. - */ - left: -24px; - width: 24px; -} - -@media (min-width: 768px) { - /* - spine center = 50% of item. Spine is 2px: left edge at 50%-1px, right at 50%+1px. - Cards occupy [0 .. 50%-24px] (left) or [50%+24px .. 100%] (right). - Left connector: left=50%-24px, width=23px → touches card right edge and spine left. - Right connector: left=50%+1px, width=23px → touches spine right and card left. - */ - - .timeline-item--left .timeline-connector { - left: calc(50% - 24px); - width: 23px; - } - - .timeline-item--right .timeline-connector { - left: calc(50% + 1px); - width: 23px; - } -} - -/* ---- Node on spine ---- */ - -.timeline-node { - position: absolute; - z-index: 10; - border-radius: 9999px; - top: 14px; - /* - Mobile: spine center = 21px from <ol> border = 21-46 = -25px from item left. - Node (10px wide): left = -25 - 5 = -30px. - */ - left: -30px; - width: 10px; - height: 10px; - border: 2px solid var(--bg); -} - -@media (min-width: 768px) { - .timeline-node { - width: 12px; - height: 12px; - top: 14px; - /* Desktop: spine center = 50% of item. Node center on spine: left = 50% - 6px */ - left: calc(50% - 6px); - } -} - -/* ---- Card wrapper ---- */ - -.timeline-card { - display: flex; - overflow: hidden; - border-radius: 0.5rem; - border-width: 1px; - background-color: var(--surface); -} - -article.timeline-card.border-border\/30.rounded-lg.overflow-hidden.group.bg-bg { - border-color: var(--border); - box-shadow: 0 0 20px var(--accent-glow); -} - -article.border.border-border\/30.timeline-card.overflow-hidden.group.bg-bg { - border-color: var(--border); - box-shadow: 0 0 20px var(--accent-glow); -} - -article.border.border-border\/30.rounded-lg.timeline-card.group.bg-bg { - border-color: var(--border); - box-shadow: 0 0 20px var(--accent-glow); -} - -.timeline-card { - /* Mobile: column (thumb on top) */ - flex-direction: column; - width: 100%; - transition: box-shadow 0.2s, transform 0.2s; -} - -.timeline-card:hover { - transform: translateY(-2px); -} - -@media (min-width: 768px) { - /* Desktop: push card into left or right half via item padding */ - - .timeline-item--left { - padding-right: calc(50% + 24px); - } - - .timeline-item--right { - padding-left: calc(50% + 24px); - } - - /* Left card: thumb outer-left, body inner-right */ - - .timeline-item--left .timeline-card { - flex-direction: row; - } - - /* Right card: body inner-left, thumb outer-right */ - - .timeline-item--right .timeline-card { - flex-direction: row-reverse; - } -} - -/* ---- Thumbnail panel ---- */ - -.timeline-thumb { - flex-shrink: 0; - overflow: hidden; -} - -article.border.border-border\/30.rounded-lg.timeline-thumb.group.bg-bg { - border-color: var(--border); - box-shadow: 0 0 20px var(--accent-glow); -} - -.timeline-thumb { - /* Mobile: full-width banner */ - width: 100%; - height: 90px; -} - -@media (min-width: 768px) { - .timeline-thumb { - /* 3:2 landscape: wider than tall */ - width: 40%; - height: auto; - aspect-ratio: 3 / 2; - } -} - -.timeline-thumb img { - height: 100%; - width: 100%; - -o-object-fit: cover; - object-fit: cover; - transition: transform 0.2s; -} - -.timeline-card:hover .timeline-thumb img { - transform: scale(1.03); -} - -/* ---- Text panel ---- */ - -.timeline-body { - display: flex; - flex: 1 1 0%; - flex-direction: column; - gap: 0.5rem; - padding: 1rem; -} - -/* ---- Meta row (TYPE · date) ---- */ - -.timeline-meta { - display: flex; - align-items: center; - gap: 0.5rem; - font-family: JetBrains Mono, monospace; - font-size: 0.75rem; - line-height: 1rem; - text-transform: uppercase; - letter-spacing: 0.1em; -} - -.timeline-meta-sep { - color: var(--border); -} - -.timeline-date { - text-transform: none; - letter-spacing: 0em; - color: var(--text-dim); -} - -/* ---- Title ---- */ - -.timeline-title { - font-size: 1rem; - line-height: 1.5rem; - font-weight: 600; - line-height: 1.375; -} - -.timeline-title a { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.timeline-title a:hover { - color: var(--accent); -} - -/* ---- Excerpt ---- */ - -.timeline-excerpt { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; - font-size: 0.875rem; - line-height: 1.25rem; - line-height: 1.625; - color: var(--text-dim); -} - -/* ---- Pinned badge ---- */ - -.timeline-pinned { - display: inline-flex; - align-items: center; - gap: 0.25rem; - border-radius: 0.25rem; - padding-left: 0.5rem; - padding-right: 0.5rem; - padding-top: 0.125rem; - padding-bottom: 0.125rem; - font-size: 0.75rem; - line-height: 1rem; - font-weight: 600; -} - -/* ---- Type-color variants (node, connector, card) ---- */ - -/* Tech (purple) */ - -/* Life (amber) */ - -/* Quote (green) */ - -/* Link (cyan) */ - -/* Photo (pink) */ - -/* ---- Timeline lazy-reveal (scroll-triggered) ---- */ - -.js-lazy-timeline > .timeline-item { - opacity: 0; - transform: translateX(-18px); - transition: opacity 320ms ease-out, transform 320ms ease-out; -} - -.js-lazy-timeline > .timeline-item.is-visible { - opacity: 1; - transform: translateX(0); -} - -/* Header navigation styling */ - -.header { - position: fixed; - top: 0px; - left: 0px; - right: 0px; - z-index: 40; -} - -/* Mobile menu overlay */ - -.menu-overlay.active { - visibility: visible; - opacity: 1; -} - -/* Breadcrumb navigation */ - -.breadcrumb { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 0.875rem; - line-height: 1.25rem; - color: var(--text-dim); -} - -.breadcrumb a { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.breadcrumb a:hover { - color: var(--accent); -} - -.breadcrumb-separator { - opacity: 0.5; -} - -/* Article metadata styling (with icons) */ - -/* Hero typography with fluid sizing */ - -/* ---- Article prev/next navigation ---- */ - -.article-nav { - border-color: var(--border); -} - - - .frosted-bar.article-nav { - border-color: var(--border); -} - -.article-nav { - border-top-width: 1px; - border-color: var(--border); - padding-top: 1.5rem; -} - -.article-nav-prompt { - margin-bottom: 0.5rem; - font-family: JetBrains Mono, monospace; - font-size: 0.875rem; - line-height: 1.25rem; - color: var(--accent); -} - -.article-nav-links { - display: flex; - flex-direction: column; - gap: 1rem; - font-family: JetBrains Mono, monospace; - font-size: 0.875rem; - line-height: 1.25rem; -} - -@media (min-width: 768px) { - .article-nav-links { - flex-direction: row; - align-items: center; - justify-content: space-between; - gap: 0px; - } -} - -.article-nav-link { - color: var(--text); - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.article-nav-link:hover { - color: var(--accent); -} - -.article-nav-placeholder { - color: var(--text-dim); - opacity: 0.4; -} - -/* ---- Footer badge variants ---- */ - -.badge-footer-accent { - display: inline-flex; - align-items: center; - white-space: nowrap; - border-radius: 0.25rem; - padding-left: 0.625rem; - padding-right: 0.625rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; - font-family: JetBrains Mono, monospace; - font-size: 0.75rem; - line-height: 1rem; - font-weight: 600; - border: 1px solid rgba(168, 85, 247, 0.35); - background: rgba(168, 85, 247, 0.1); - color: var(--accent); -} - -.badge-footer-accent2 { - display: inline-flex; - align-items: center; - white-space: nowrap; - border-radius: 0.25rem; - padding-left: 0.625rem; - padding-right: 0.625rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; - font-family: JetBrains Mono, monospace; - font-size: 0.75rem; - line-height: 1rem; - font-weight: 600; - border: 1px solid rgba(0, 255, 136, 0.35); - background: rgba(0, 255, 136, 0.1); - color: var(--accent2); -} - -/* Back to top button */ - -.back-to-top { - position: fixed; - bottom: 1.5rem; - right: 1.5rem; - z-index: 40; - display: flex; - height: 2.75rem; - width: 2.75rem; - align-items: center; - justify-content: center; - border-radius: 9999px; - background: var(--accent); - box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4); - transition: background 200ms ease, box-shadow 200ms ease; - color: #fff; -} - -.back-to-top:hover { - background: var(--accent); - filter: brightness(0.85); - box-shadow: 0 0 20px var(--accent); -} - -.back-to-top:focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border-width: 0; -} - -.pointer-events-none { - pointer-events: none; -} - -.visible { - visibility: visible; -} - -.invisible { - visibility: hidden; -} - -.static { - position: static; -} - -.fixed { - position: fixed; -} - -.absolute { - position: absolute; -} - -.relative { - position: relative; -} - -.sticky { - position: sticky; -} - -.inset-0 { - inset: 0px; -} - -.bottom-0 { - bottom: 0px; -} - -.left-0 { - left: 0px; -} - -.right-0 { - right: 0px; -} - -.right-3 { - right: 0.75rem; -} - -.right-4 { - right: 1rem; -} - -.top-0 { - top: 0px; -} - -.top-3 { - top: 0.75rem; -} - -.top-4 { - top: 1rem; -} - -.z-10 { - z-index: 10; -} - -.z-20 { - z-index: 20; -} - -.z-40 { - z-index: 40; -} - -.z-50 { - z-index: 50; -} - -.order-last { - order: 9999; -} - -.mx-4 { - margin-left: 1rem; - margin-right: 1rem; -} - -.mx-auto { - margin-left: auto; - margin-right: auto; -} - -.my-12 { - margin-top: 3rem; - margin-bottom: 3rem; -} - -.my-6 { - margin-top: 1.5rem; - margin-bottom: 1.5rem; -} - -.my-8 { - margin-top: 2rem; - margin-bottom: 2rem; -} - -.mb-1 { - margin-bottom: 0.25rem; -} - -.mb-12 { - margin-bottom: 3rem; -} - -.mb-2 { - margin-bottom: 0.5rem; -} - -.mb-3 { - margin-bottom: 0.75rem; -} - -.mb-4 { - margin-bottom: 1rem; -} - -.mb-6 { - margin-bottom: 1.5rem; -} - -.mb-8 { - margin-bottom: 2rem; -} - -.ml-1 { - margin-left: 0.25rem; -} - -.ml-2 { - margin-left: 0.5rem; -} - -.mt-0\.5 { - margin-top: 0.125rem; -} - -.mt-1 { - margin-top: 0.25rem; -} - -.mt-12 { - margin-top: 3rem; -} - -.mt-16 { - margin-top: 4rem; -} - -.mt-2 { - margin-top: 0.5rem; -} - -.mt-20 { - margin-top: 5rem; -} - -.mt-3 { - margin-top: 0.75rem; -} - -.mt-4 { - margin-top: 1rem; -} - -.mt-8 { - margin-top: 2rem; -} - -.mt-auto { - margin-top: auto; -} - -.line-clamp-1 { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 1; -} - -.line-clamp-3 { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; -} - -.block { - display: block; -} - -.inline { - display: inline; -} - -.flex { - display: flex; -} - -.inline-flex { - display: inline-flex; -} - -.grid { - display: grid; -} - -.hidden { - display: none; -} - -.aspect-video { - aspect-ratio: 16 / 9; -} - -.h-1 { - height: 0.25rem; -} - -.h-32 { - height: 8rem; -} - -.h-4 { - height: 1rem; -} - -.h-48 { - height: 12rem; -} - -.h-5 { - height: 1.25rem; -} - -.h-auto { - height: auto; -} - -.h-screen { - height: 100vh; -} - -.max-h-96 { - max-height: 24rem; -} - -.min-h-\[calc\(100vh-200px\)\] { - min-height: calc(100vh - 200px); -} - -.min-h-screen { - min-height: 100vh; -} - -.w-1 { - width: 0.25rem; -} - -.w-20 { - width: 5rem; -} - -.w-32 { - width: 8rem; -} - -.w-4 { - width: 1rem; -} - -.w-5 { - width: 1.25rem; -} - -.w-full { - width: 100%; -} - -.min-w-0 { - min-width: 0px; -} - -.max-w-2xl { - max-width: 42rem; -} - -.max-w-3xl { - max-width: 48rem; -} - -.max-w-4xl { - max-width: 56rem; -} - -.max-w-5xl { - max-width: 64rem; -} - -.max-w-7xl { - max-width: 80rem; -} - -.max-w-lg { - max-width: 32rem; -} - -.max-w-md { - max-width: 28rem; -} - -.max-w-none { - max-width: none; -} - -.max-w-sm { - max-width: 24rem; -} - -.flex-1 { - flex: 1 1 0%; -} - -.flex-shrink-0 { - flex-shrink: 0; -} - -.shrink-0 { - flex-shrink: 0; -} - -.translate-x-0 { - --tw-translate-x: 0px; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.translate-x-full { - --tw-translate-x: 100%; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.translate-y-0 { - --tw-translate-y: 0px; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.translate-y-4 { - --tw-translate-y: 1rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.transform { - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.cursor-pointer { - cursor: pointer; -} - -.resize-none { - resize: none; -} - -.resize { - resize: both; -} - -.grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); -} - -.flex-col { - flex-direction: column; -} - -.flex-wrap { - flex-wrap: wrap; -} - -.items-center { - align-items: center; -} - -.justify-center { - justify-content: center; -} - -.justify-between { - justify-content: space-between; -} - -.gap-1 { - gap: 0.25rem; -} - -.gap-1\.5 { - gap: 0.375rem; -} - -.gap-2 { - gap: 0.5rem; -} - -.gap-3 { - gap: 0.75rem; -} - -.gap-4 { - gap: 1rem; -} - -.gap-6 { - gap: 1.5rem; -} - -.gap-8 { - gap: 2rem; -} - -.space-y-1 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); -} - -.space-y-2 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); -} - -.space-y-3 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); -} - -.space-y-4 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(1rem * var(--tw-space-y-reverse)); -} - -.space-y-6 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); -} - -.space-y-8 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(2rem * var(--tw-space-y-reverse)); -} - -.overflow-hidden { - overflow: hidden; -} - -.overflow-y-auto { - overflow-y: auto; -} - -.truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.whitespace-nowrap { - white-space: nowrap; -} - -.rounded { - border-radius: 0.25rem; -} - -.rounded-full { - border-radius: 9999px; -} - -.rounded-lg { - border-radius: 0.5rem; -} - -.rounded-b-lg { - border-bottom-right-radius: 0.5rem; - border-bottom-left-radius: 0.5rem; -} - -.border { - border-width: 1px; -} - -.border-2 { - border-width: 2px; -} - -.border-4 { - border-width: 4px; -} - -.border-b { - border-bottom-width: 1px; -} - -.border-l { - border-left-width: 1px; -} - -.border-l-2 { - border-left-width: 2px; -} - -.border-l-4 { - border-left-width: 4px; -} - -.border-t { - border-top-width: 1px; -} - -.border-\[--type-quote\] { - border-color: var(--type-quote); -} - -.border-accent { - border-color: var(--accent); -} - -.border-border { - border-color: var(--border); -} - -.bg-accent { - background-color: var(--accent); -} - -.bg-bg { - background-color: var(--bg); -} - -.bg-black\/50 { - background-color: rgb(0 0 0 / 0.5); -} - -.bg-surface { - background-color: var(--surface); -} - -.object-cover { - -o-object-fit: cover; - object-fit: cover; -} - -.p-2 { - padding: 0.5rem; -} - -.p-3 { - padding: 0.75rem; -} - -.p-4 { - padding: 1rem; -} - -.p-6 { - padding: 1.5rem; -} - -.p-8 { - padding: 2rem; -} - -.px-1 { - padding-left: 0.25rem; - padding-right: 0.25rem; -} - -.px-2 { - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.px-2\.5 { - padding-left: 0.625rem; - padding-right: 0.625rem; -} - -.px-3 { - padding-left: 0.75rem; - padding-right: 0.75rem; -} - -.px-4 { - padding-left: 1rem; - padding-right: 1rem; -} - -.px-6 { - padding-left: 1.5rem; - padding-right: 1.5rem; -} - -.py-0\.5 { - padding-top: 0.125rem; - padding-bottom: 0.125rem; -} - -.py-1 { - padding-top: 0.25rem; - padding-bottom: 0.25rem; -} - -.py-1\.5 { - padding-top: 0.375rem; - padding-bottom: 0.375rem; -} - -.py-12 { - padding-top: 3rem; - padding-bottom: 3rem; -} - -.py-2 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.py-3 { - padding-top: 0.75rem; - padding-bottom: 0.75rem; -} - -.py-4 { - padding-top: 1rem; - padding-bottom: 1rem; -} - -.py-8 { - padding-top: 2rem; - padding-bottom: 2rem; -} - -.pb-8 { - padding-bottom: 2rem; -} - -.pl-3 { - padding-left: 0.75rem; -} - -.pl-6 { - padding-left: 1.5rem; -} - -.pt-2 { - padding-top: 0.5rem; -} - -.pt-8 { - padding-top: 2rem; -} - -.text-left { - text-align: left; -} - -.text-center { - text-align: center; -} - -.text-right { - text-align: right; -} - -.font-mono { - font-family: JetBrains Mono, monospace; -} - -.font-oxanium { - font-family: Oxanium, monospace; -} - -.text-2xl { - font-size: 1.5rem; - line-height: 2rem; -} - -.text-3xl { - font-size: 1.875rem; - line-height: 2.25rem; -} - -.text-4xl { - font-size: 2.25rem; - line-height: 2.5rem; -} - -.text-5xl { - font-size: 3rem; - line-height: 1; -} - -.text-7xl { - font-size: 4.5rem; - line-height: 1; -} - -.text-lg { - font-size: 1.125rem; - line-height: 1.75rem; -} - -.text-sm { - font-size: 0.875rem; - line-height: 1.25rem; -} - -.text-xl { - font-size: 1.25rem; - line-height: 1.75rem; -} - -.text-xs { - font-size: 0.75rem; - line-height: 1rem; -} - -.font-bold { - font-weight: 700; -} - -.font-medium { - font-weight: 500; -} - -.font-semibold { - font-weight: 600; -} - -.italic { - font-style: italic; -} - -.not-italic { - font-style: normal; -} - -.leading-relaxed { - line-height: 1.625; -} - -.leading-snug { - line-height: 1.375; -} - -.text-accent { - color: var(--accent); -} - -.text-accent2 { - color: var(--accent2); -} - -.text-bg { - color: var(--bg); -} - -.text-text { - color: var(--text); -} - -.text-text-dim { - color: var(--text-dim); -} - -.text-white { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity, 1)); -} - -.underline { - text-decoration-line: underline; -} - -.line-through { - text-decoration-line: line-through; -} - -.antialiased { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.placeholder-text-dim::-moz-placeholder { - color: var(--text-dim); -} - -.placeholder-text-dim::placeholder { - color: var(--text-dim); -} - -.opacity-0 { - opacity: 0; -} - -.opacity-100 { - opacity: 1; -} - -.opacity-5 { - opacity: 0.05; -} - -.shadow-xl { - --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.outline { - outline-style: solid; -} - -.ring { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); -} - -.backdrop-blur { - --tw-backdrop-blur: blur(8px); - -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); - backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); -} - -.transition { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.transition-all { - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.transition-colors { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.transition-opacity { - transition-property: opacity; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.transition-shadow { - transition-property: box-shadow; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.transition-transform { - transition-property: transform; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.duration-100 { - transition-duration: 100ms; -} - -.duration-200 { - transition-duration: 200ms; -} - -.duration-300 { - transition-duration: 300ms; -} - -.ease-in { - transition-timing-function: cubic-bezier(0.4, 0, 1, 1); -} - -.ease-out { - transition-timing-function: cubic-bezier(0, 0, 0.2, 1); -} - -/* Dark theme (default) - CSS custom properties */ - -:root { - --bg: #060b10; - --bg2: #0c1520; - --bg2-rgb: 12, 21, 32; - --surface: #101e2d; - --surface-rgb: 16, 30, 45; - --border: #182840; - --accent: #a855f7; - --accent-rgb: 168, 85, 247; - --accent2: #00ff88; - --accent-glow: rgba(168, 85, 247, 0.12); - --text: #c4d6e8; - --text-dim: #7a9bb8; - --muted: #304860; - /* Article type colors - dark */ - --type-tech: #a855f7; - --type-life: #f59e0b; - --type-quote: #00ff88; - --type-link: #38bdf8; - --type-photo: #ec4899; - /* Article type text colors - dark (all black for WCAG AA) */ - --type-tech-text: #000000; - --type-life-text: #000000; - --type-quote-text: #000000; - --type-link-text: #000000; - --type-photo-text: #000000; -} - -/* Light theme overrides */ - -html.theme-light { - --bg: #ffffff; - --bg2: #f8f9fa; - --bg2-rgb: 248, 249, 250; - --surface: #f0f3f7; - --surface-rgb: 240, 243, 247; - --border: #d9dfe8; - --accent: #9333ea; - --accent-rgb: 147, 51, 234; - --accent2: #10b981; - --accent-glow: rgba(147, 51, 234, 0.1); - --text: #1f2937; - --text-dim: #374151; - --muted: #d1d5db; - /* Article type colors - light */ - --type-tech: #7c3aed; - --type-life: #d97706; - --type-quote: #008f5a; - --type-link: #0284c7; - --type-photo: #be185d; - /* Article type text colors - light (mixed for WCAG AA) */ - --type-tech-text: #ffffff; - --type-life-text: #000000; - --type-quote-text: #000000; - --type-link-text: #000000; - --type-photo-text: #ffffff; -} - -/* No-JS fallback: prefers-color-scheme light */ - -@media (prefers-color-scheme: light) { - html:not(.theme-dark) { - --bg: #ffffff; - --bg2: #f8f9fa; - --bg2-rgb: 248, 249, 250; - --surface: #f0f3f7; - --surface-rgb: 240, 243, 247; - --border: #d9dfe8; - --accent: #9333ea; - --accent-rgb: 147, 51, 234; - --accent2: #10b981; - --accent-glow: rgba(147, 51, 234, 0.1); - --text: #1f2937; - --text-dim: #374151; - --muted: #d1d5db; - --type-tech: #7c3aed; - --type-life: #d97706; - --type-quote: #008f5a; - --type-link: #0284c7; - --type-photo: #be185d; - --type-tech-text: #ffffff; - --type-life-text: #000000; - --type-quote-text: #000000; - --type-link-text: #000000; - --type-photo-text: #ffffff; - } -} - -/* Theme-aware picture element for default thumbnails */ - -html.theme-light picture img[src="/images/default_thumbnail_dark.png"] { - content: url('/images/default_thumbnail_light.png'); -} - -/* Prose overrides for light theme */ - -html.theme-light .prose, -html.theme-light .prose-invert { - color: var(--text); -} - -html.theme-light .prose a, -html.theme-light .prose-invert a { - color: var(--accent); -} - -html.theme-light .prose strong, -html.theme-light .prose-invert strong { - color: var(--text); -} - -html.theme-light .prose code, -html.theme-light .prose-invert code { - color: var(--accent2); -} - -html.theme-light .prose pre, -html.theme-light .prose-invert pre { - background-color: var(--surface); - color: var(--text); -} - -html.theme-light .prose h1, -html.theme-light .prose h2, -html.theme-light .prose h3, -html.theme-light .prose h4, -html.theme-light .prose h5, -html.theme-light .prose h6, -html.theme-light .prose-invert h1, -html.theme-light .prose-invert h2, -html.theme-light .prose-invert h3, -html.theme-light .prose-invert h4, -html.theme-light .prose-invert h5, -html.theme-light .prose-invert h6 { - color: var(--text); -} - -html.theme-light .prose blockquote, -html.theme-light .prose-invert blockquote { - color: var(--text); - border-left-color: var(--accent); -} - -/* Responsive container utilities - mobile-first */ - -.container { - max-width: 100%; - padding-left: 1rem; - padding-right: 1rem; -} - -@media (min-width: 768px) { - .container { - max-width: 56rem; - padding-left: 1.5rem; - padding-right: 1.5rem; - } -} - -@media (min-width: 1060px) { - .container { - max-width: 64rem; - padding-left: 2rem; - padding-right: 2rem; - } -} - -/* Alpine.js x-cloak - hide content until Alpine initializes */ - -[x-cloak] { - display: none !important; -} - -/* Respect user's motion preferences */ - -@media (prefers-reduced-motion: reduce) { - *, *::before, *::after { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } -} - -/* Matrix rain canvas background */ - -#matrix-rain { - position: fixed; - inset: 0; - width: 100%; - height: 100%; - pointer-events: none; - z-index: 1; -} - -/* Dark theme: 13% opacity (inner pages) */ - -html.theme-dark #matrix-rain { - opacity: 0.13; -} - -/* Light theme: 18% opacity (inner pages) */ - -html.theme-light #matrix-rain { - opacity: 0.18; -} - -/* Homepage: more prominent background */ - -html.theme-dark body[data-page-kind="home"] #matrix-rain { - opacity: 0.28; -} - -html.theme-light body[data-page-kind="home"] #matrix-rain { - opacity: 0.35; -} - -/* Reduced motion: hide canvas entirely */ - -@media (prefers-reduced-motion: reduce) { - #matrix-rain { - display: none; - } -} - -/* Content grid background — blocks rain under text, visible in gutters (single pages only) */ - -.content-grid { - position: relative; - z-index: 10; - background-color: var(--bg); - padding: 2px; - border: 1px solid var(--border); - box-shadow: 0 0 20px var(--accent-glow); -} - -@media (min-width: 768px) { - .content-grid { - padding: 2rem; - } -} - -/* Article list items — soft glow effect */ - -article.border.border-border\/30.rounded-lg.overflow-hidden.group.bg-bg { - border-color: var(--border); - box-shadow: 0 0 20px var(--accent-glow); -} - -/* ============================================ - FORM COMPONENTS (Week 4) - ============================================ */ - -/* Form input base styles */ - -.form-input, -.form-textarea, -.form-select { - width: 100%; - border-radius: 0.25rem; - border-width: 1px; - border-color: var(--border); - background-color: var(--bg2); - padding-left: 1rem; - padding-right: 1rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - font-family: IBM Plex Sans, sans-serif; - color: var(--text); - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 200ms; -} - -article.form-input.border-border\/30.rounded-lg.overflow-hidden.group.bg-bg,article -.form-textarea.border-border\/30.rounded-lg.overflow-hidden.group.bg-bg,article -.form-select.border-border\/30.rounded-lg.overflow-hidden.group.bg-bg { - border-color: var(--border); - box-shadow: 0 0 20px var(--accent-glow); -} - -/* Input placeholder styling */ - -.form-input::-moz-placeholder, .form-textarea::-moz-placeholder { - color: var(--text-dim); - opacity: 0.7; -} - -.form-input::placeholder, -.form-textarea::placeholder { - color: var(--text-dim); - opacity: 0.7; -} - -/* Input focus state */ - -.form-input:focus, -.form-textarea:focus, -.form-select:focus { - outline: 2px solid transparent; - outline-offset: 2px; - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); - --tw-ring-color: var(--accent); - --tw-ring-offset-width: 2px; - ring-offset-color: var(--bg); - border-color: var(--accent); -} - -/* Input invalid/error state */ - -.form-input:invalid, -.form-textarea:invalid, -.form-select:invalid, -.form-input.error, -.form-textarea.error, -.form-select.error { - --tw-border-opacity: 1; - border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)); - --tw-ring-opacity: 1; - --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1)); -} - -.form-input:invalid:focus, -.form-textarea:invalid:focus, -.form-select:invalid:focus { - --tw-border-opacity: 1; - border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)); - --tw-ring-opacity: 1; - --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1)); - ring-offset-color: var(--bg); -} - -/* Input disabled state */ - -.form-input:disabled, -.form-textarea:disabled, -.form-select:disabled { - cursor: not-allowed; - background-color: var(--muted); - opacity: 0.5; -} - -/* Textarea specific */ - -.form-textarea { - min-height: 8rem; - resize: vertical; -} - -.form-textarea.auto-expand { - resize: none; - overflow-y: hidden; -} - -/* Select dropdown */ - -.form-select { - cursor: pointer; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a855f7' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: right 0.75rem center; - padding-right: 2.5rem; -} - -html.theme-light .form-select { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239333ea' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); -} - -/* Checkbox and radio button base */ - -.form-checkbox, -.form-radio { - height: 1.25rem; - width: 1.25rem; - cursor: pointer; - accent-color: var(--accent); - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 200ms; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border: 2px solid var(--border); - border-radius: 0.375rem; - flex-shrink: 0; -} - -.form-radio { - border-radius: 50%; -} - -/* Checkbox/radio focus state */ - -.form-checkbox:focus-visible, -.form-radio:focus-visible { - outline: 2px solid transparent; - outline-offset: 2px; - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); - --tw-ring-color: var(--accent); - --tw-ring-offset-width: 2px; - ring-offset-color: var(--bg); -} - -/* Checkbox/radio checked state */ - -.form-checkbox:checked, -.form-radio:checked { - background-color: var(--accent); - border-color: var(--accent); - background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: center; - background-size: 100%; -} - -.form-radio:checked { - background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3.5'/%3E%3C/svg%3E"); -} - -/* Checkbox/radio disabled state */ - -.form-checkbox:disabled, -.form-radio:disabled { - cursor: not-allowed; - opacity: 0.5; - border-color: var(--muted); -} - -/* Form group layout */ - -.form-group > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); -} - -.form-group label { - display: block; - font-size: 0.875rem; - line-height: 1.25rem; - font-weight: 600; - color: var(--text); -} - -.form-group.required label::after { - content: ' *'; - color: #ef4444; -} - -.form-group-input { - position: relative; -} - -.form-group-help { - font-size: 0.75rem; - line-height: 1rem; - color: var(--text-dim); -} - -.form-group.error .form-group-help { - --tw-text-opacity: 1; - color: rgb(239 68 68 / var(--tw-text-opacity, 1)); -} - -.form-error { - margin-top: 0.25rem; - font-size: 0.875rem; - line-height: 1.25rem; - --tw-text-opacity: 1; - color: rgb(239 68 68 / var(--tw-text-opacity, 1)); -} - -/* Form layout utilities */ - -.form-row { - display: flex; - flex-direction: column; - gap: 1rem; -} - -@media (min-width: 768px) { - .form-row { - flex-direction: row; - } -} - -.form-row > .form-group { - flex: 1 1 0%; -} - -.form-inline { - display: flex; - flex-direction: column; - align-items: flex-end; - gap: 1rem; -} - -@media (min-width: 640px) { - .form-inline { - flex-direction: row; - } -} - -.form-inline .form-group { - flex: 1 1 0%; -} - -.form-inline .btn { - height: 2.5rem; -} - -/* Character count indicator */ - -.form-char-count { - text-align: right; - font-size: 0.75rem; - line-height: 1rem; - color: var(--text-dim); -} - -.form-char-count.warning { - --tw-text-opacity: 1; - color: rgb(245 158 11 / var(--tw-text-opacity, 1)); -} - -.form-char-count.error { - --tw-text-opacity: 1; - color: rgb(239 68 68 / var(--tw-text-opacity, 1)); -} - -/* ============================================ - FOCUS MANAGEMENT (Week 5) - ============================================ */ - -/* Enhanced :focus-visible with accent color styling */ - -:focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; -} - -/* Respect motion preferences for focus indicator */ - -@media (prefers-reduced-motion: reduce) { - :focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; - } -} - -/* Button and link hover/focus transitions */ - -button, -a.btn, -.btn { - transition: all 150ms ease-out; -} - -button:hover, -a.btn:hover, -.btn:hover { - opacity: 0.8; - transform: translateY(-1px); -} - -button:active, -a.btn:active, -.btn:active { - transform: translateY(0); -} - -/* Form input focus transitions with glow effect */ - -input, -textarea, -select { - transition: all 200ms ease-out; -} - -input:focus, -textarea:focus, -select:focus, -input:focus-visible, -textarea:focus-visible, -select:focus-visible { - box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1); -} - -/* ============================================ - MODAL COMPONENTS (Week 4) - ============================================ */ - -/* Modal backdrop */ - -.modal-backdrop { - visibility: hidden; - position: fixed; - inset: 0px; - z-index: 40; - background-color: rgb(0 0 0 / 0.5); - opacity: 0; - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 300ms; - -webkit-backdrop-filter: blur(2px); - backdrop-filter: blur(2px); -} - -.modal-backdrop.active { - visibility: visible; - opacity: 1; -} - -/* Modal container */ - -.modal { - visibility: hidden; - position: fixed; - inset: 0px; - z-index: 50; - display: flex; - align-items: center; - justify-content: center; - padding: 1rem; - opacity: 0; - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 300ms; - pointer-events: none; -} - -.modal.active { - visibility: visible; - opacity: 1; - pointer-events: auto; -} - -.modal.active .modal-backdrop { - visibility: visible; - opacity: 1; - pointer-events: auto; -} - -/* Modal content box */ - -.modal-content { - display: flex; - max-height: 90vh; - width: 100%; - max-width: 32rem; - flex-direction: column; - border-radius: 0.5rem; - border-width: 1px; - border-color: var(--border); - background-color: var(--bg2); - --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); - --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -article.modal-content.border-border\/30.rounded-lg.overflow-hidden.group.bg-bg { - border-color: var(--border); - box-shadow: 0 0 20px var(--accent-glow); -} - -article.border.border-border\/30.modal-content.overflow-hidden.group.bg-bg { - border-color: var(--border); - box-shadow: 0 0 20px var(--accent-glow); -} - -.modal-content { - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); - animation: modalSlideUp 0.3s ease-out; -} - -@keyframes fadeIn { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - -@keyframes slideUp { - from { - opacity: 0; - transform: translateY(20px); - } - - to { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes modalSlideUp { - from { - opacity: 0; - transform: translateY(30px); - } - - to { - opacity: 1; - transform: translateY(0); - } -} - -/* Modal header */ - -.modal-header { - border-color: var(--border); -} - -.frosted-bar.modal-header { - border-color: var(--border); -} - -.modal-header { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 1rem; - border-bottom-width: 1px; - border-color: var(--border); - padding: 1.5rem; -} - -.modal-title { - font-size: 1.25rem; - line-height: 1.75rem; - font-weight: 700; - color: var(--text); -} - -.modal-close { - display: flex; - height: 2rem; - width: 2rem; - cursor: pointer; - align-items: center; - justify-content: center; - border-radius: 0.25rem; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.modal-close:hover { - background-color: var(--surface); -} - -.modal-close::before, -.modal-close::after { - content: ''; - position: absolute; - height: 0.125rem; - width: 1.25rem; - background-color: var(--text-dim); -} - -.modal-close::before { - transform: rotate(45deg); -} - -.modal-close::after { - transform: rotate(-45deg); -} - -.modal-close:hover::before, -.modal-close:hover::after { - background-color: var(--accent); -} - -/* Modal body */ - -.modal-body { - flex: 1 1 0%; -} - -.modal-body > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(1rem * var(--tw-space-y-reverse)); -} - -.modal-body { - overflow-y: auto; - padding: 1.5rem; -} - -/* Modal footer */ - -.modal-footer { - border-color: var(--border); -} - - - .frosted-bar.modal-footer { - border-color: var(--border); -} - -.modal-footer { - display: flex; - align-items: center; - justify-content: flex-end; - gap: 0.75rem; - border-top-width: 1px; - border-color: var(--border); - padding: 1.5rem; -} - -/* Modal sizes */ - -.modal-content.modal-sm { - max-width: 24rem; -} - -.modal-content.modal-md { - max-width: 28rem; -} - -.modal-content.modal-lg { - max-width: 42rem; -} - -/* Modal variants */ - -.modal-content.modal-alert { - max-width: 24rem; -} - -.modal-content.modal-confirm { - max-width: 24rem; -} - -/* Modal button styling */ - -.modal-footer .btn { - min-width: 100px; -} - -/* ============================================ - INTERACTIVE PATTERNS (Week 4) - ============================================ */ - -/* Loading spinner */ - -.spinner { - display: inline-block; - width: 1rem; - height: 1rem; - border: 2px solid var(--border); - border-top-color: var(--accent); - border-radius: 50%; - animation: spin 0.6s linear infinite; -} - -@keyframes spin { - from { - transform: rotate(0deg); - } - - to { - transform: rotate(360deg); - } -} - -.spinner-sm { - width: 0.75rem; - height: 0.75rem; - border-width: 1.5px; -} - -.spinner-lg { - width: 1.5rem; - height: 1.5rem; - border-width: 3px; -} - -/* Button with spinner */ - -.btn:disabled .spinner { - margin-right: 0.5rem; - display: inline-block; -} - -/* Toast notification container */ - -.toast-container { - position: fixed; - bottom: 0px; - right: 0px; - z-index: 50; - max-width: 24rem; -} - -.toast-container > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); -} - -.toast-container { - padding: 1rem; -} - -@media (max-width: 640px) { - .toast-container { - left: 0px; - right: 0px; - padding-left: 1rem; - padding-right: 1rem; - } -} - -/* Toast base */ - -.toast { - display: flex; - align-items: flex-start; - gap: 0.75rem; - border-radius: 0.5rem; - border-width: 1px; - border-color: var(--border); - padding: 1rem; - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -article.border.border-border\/30.toast.overflow-hidden.group.bg-bg { - border-color: var(--border); - box-shadow: 0 0 20px var(--accent-glow); -} - -article.toast.border-border\/30.rounded-lg.overflow-hidden.group.bg-bg { - border-color: var(--border); - box-shadow: 0 0 20px var(--accent-glow); -} - -.toast { - animation: slideInUp 0.3s ease-out; - background-color: var(--bg2); - color: var(--text); -} - -@keyframes slideInUp { - from { - transform: translateY(100%); - opacity: 0; - } - - to { - transform: translateY(0); - opacity: 1; - } -} - -/* Animation Utility Classes */ - -.animate-fade-in { - animation: fadeIn 300ms ease-out; -} - -.animate-slide-up { - animation: slideUp 300ms ease-out; -} - -.animate-spin-loader { - animation: spin 600ms linear infinite; -} - -/* Toast variants */ - -.toast-success { - border-color: #10b981; - background-color: rgba(16, 185, 129, 0.1); -} - -.toast-success::before { - content: '✓'; - color: #10b981; - font-weight: bold; - flex-shrink: 0; -} - -.toast-error { - border-color: #ef4444; - background-color: rgba(239, 68, 68, 0.1); -} - -.toast-error::before { - content: '✕'; - color: #ef4444; - font-weight: bold; - flex-shrink: 0; -} - -.toast-info { - border-color: #3b82f6; - background-color: rgba(59, 130, 246, 0.1); -} - -.toast-info::before { - content: 'ℹ'; - color: #3b82f6; - flex-shrink: 0; -} - -.toast-warning { - border-color: #f59e0b; - background-color: rgba(245, 158, 11, 0.1); -} - -.toast-warning::before { - content: '⚠'; - color: #f59e0b; - flex-shrink: 0; -} - -.toast-close { - margin-left: auto; - display: flex; - height: 1.5rem; - width: 1.5rem; - flex-shrink: 0; - cursor: pointer; - align-items: center; - justify-content: center; - border-radius: 0.25rem; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.toast-close:hover { - background-color: var(--surface); -} - -/* Tooltip */ - -.tooltip { - position: relative; - display: inline-block; -} - -.tooltip-text { - pointer-events: none; - visibility: hidden; - position: absolute; - white-space: nowrap; - border-radius: 0.25rem; - background-color: var(--bg2); - padding-left: 0.5rem; - padding-right: 0.5rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; - font-size: 0.75rem; - line-height: 1rem; - color: var(--text-dim); - opacity: 0; - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 200ms; - z-index: 50; - bottom: 125%; - left: 50%; - transform: translateX(-50%); -} - -.tooltip:hover .tooltip-text { - visibility: visible; - opacity: 1; -} - -.tooltip-text::after { - content: ''; - position: absolute; - height: 0.5rem; - width: 0.5rem; - background-color: var(--bg2); - bottom: -4px; - left: 50%; - transform: translateX(-50%) rotate(45deg); -} - -/* Tooltip directions */ - -.tooltip-bottom .tooltip-text { - top: 125%; - bottom: auto; -} - -.tooltip-bottom .tooltip-text::after { - top: -4px; - bottom: auto; - transform: translateX(-50%) rotate(225deg); -} - -.tooltip-left .tooltip-text { - left: auto; - right: 125%; - transform: none; -} - -.tooltip-left .tooltip-text::after { - left: auto; - right: -4px; - transform: rotate(135deg); -} - -.tooltip-right .tooltip-text { - left: 125%; - transform: none; -} - -.tooltip-right .tooltip-text::after { - left: -4px; - right: auto; - transform: rotate(315deg); -} - -/* Motion Safety - Respect prefers-reduced-motion */ - -@media (prefers-reduced-motion: reduce) { - /* Remove all animations */ - - *, - *::before, - *::after { - animation: none !important; - transition: none !important; - } - - /* Ensure focus-visible is still visible */ - - :focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; - } -} - -.hover\:bg-surface:hover { - background-color: var(--surface); -} - -.hover\:text-accent:hover { - color: var(--accent); -} - -.hover\:text-accent2:hover { - color: var(--accent2); -} - -.hover\:text-text:hover { - color: var(--text); -} - -.group:hover .group-hover\:text-accent { - color: var(--accent); -} - -@media (prefers-color-scheme: dark) { - .dark\:prose-invert { - --tw-prose-body: var(--tw-prose-invert-body); - --tw-prose-headings: var(--tw-prose-invert-headings); - --tw-prose-lead: var(--tw-prose-invert-lead); - --tw-prose-links: var(--tw-prose-invert-links); - --tw-prose-bold: var(--tw-prose-invert-bold); - --tw-prose-counters: var(--tw-prose-invert-counters); - --tw-prose-bullets: var(--tw-prose-invert-bullets); - --tw-prose-hr: var(--tw-prose-invert-hr); - --tw-prose-quotes: var(--tw-prose-invert-quotes); - --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders); - --tw-prose-captions: var(--tw-prose-invert-captions); - --tw-prose-kbd: var(--tw-prose-invert-kbd); - --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows); - --tw-prose-code: var(--tw-prose-invert-code); - --tw-prose-pre-code: var(--tw-prose-invert-pre-code); - --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg); - --tw-prose-th-borders: var(--tw-prose-invert-th-borders); - --tw-prose-td-borders: var(--tw-prose-invert-td-borders); - } - - .dark\:hover\:text-text:hover { - color: var(--text); - } -} - -.first-letter\:text-3xl::first-letter { - font-size: 1.875rem; - line-height: 2.25rem; -} - -.hover\:bg-surface:hover { - background-color: var(--surface); -} - -.hover\:text-accent:hover { - color: var(--accent); -} - -.hover\:text-accent2:hover { - color: var(--accent2); -} - -.hover\:text-text:hover { - color: var(--text); -} - -.hover\:underline:hover { - text-decoration-line: underline; -} - -.hover\:opacity-80:hover { - opacity: 0.8; -} - -.hover\:opacity-90:hover { - opacity: 0.9; -} - -.hover\:shadow-lg:hover { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.focus\:not-sr-only:focus { - position: static; - width: auto; - height: auto; - padding: 0; - margin: 0; - overflow: visible; - clip: auto; - white-space: normal; -} - -.focus\:fixed:focus { - position: fixed; -} - -.focus\:left-4:focus { - left: 1rem; -} - -.focus\:top-4:focus { - top: 1rem; -} - -.focus\:z-50:focus { - z-index: 50; -} - -.focus\:rounded:focus { - border-radius: 0.25rem; -} - -.focus\:border-accent:focus { - border-color: var(--accent); -} - -.focus\:border-transparent:focus { - border-color: transparent; -} - -.focus\:bg-accent:focus { - background-color: var(--accent); -} - -.focus\:px-4:focus { - padding-left: 1rem; - padding-right: 1rem; -} - -.focus\:py-2:focus { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.focus\:text-white:focus { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity, 1)); -} - -.focus\:outline-none:focus { - outline: 2px solid transparent; - outline-offset: 2px; -} - -.focus\:ring-1:focus { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); -} - -.focus\:ring-2:focus { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); -} - -.focus\:ring-accent:focus { - --tw-ring-color: var(--accent); -} - -.disabled\:cursor-not-allowed:disabled { - cursor: not-allowed; -} - -.disabled\:opacity-50:disabled { - opacity: 0.5; -} - -.group:hover .group-hover\:scale-105 { - --tw-scale-x: 1.05; - --tw-scale-y: 1.05; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.group:hover .group-hover\:text-accent { - color: var(--accent); -} - -@media (min-width: 640px) { - .sm\:flex-row { - flex-direction: row; - } -} - -@media (min-width: 768px) { - .md\:order-none { - order: 0; - } - - .md\:col-span-1 { - grid-column: span 1 / span 1; - } - - .md\:col-span-2 { - grid-column: span 2 / span 2; - } - - .md\:inline { - display: inline; - } - - .md\:flex { - display: flex; - } - - .md\:hidden { - display: none; - } - - .md\:h-48 { - height: 12rem; - } - - .md\:w-48 { - width: 12rem; - } - - .md\:max-w-\[45\%\] { - max-width: 45%; - } - - .md\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .md\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - - .md\:gap-6 { - gap: 1.5rem; - } - - .md\:text-4xl { - font-size: 2.25rem; - line-height: 2.5rem; - } - - .md\:text-5xl { - font-size: 3rem; - line-height: 1; - } - - .md\:text-6xl { - font-size: 3.75rem; - line-height: 1; - } - - .md\:text-8xl { - font-size: 6rem; - line-height: 1; - } -} - -@media (min-width: 1060px) { - .lg\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } -} - -@media (prefers-color-scheme: dark) { - .dark\:hover\:text-text:hover { - color: var(--text); - } -} diff --git a/themes/danix-xyz-hacker/assets/js/article-lazy.js b/themes/danix-xyz-hacker/assets/js/article-lazy.js deleted file mode 100644 index 64ca862..0000000 --- a/themes/danix-xyz-hacker/assets/js/article-lazy.js +++ /dev/null @@ -1,34 +0,0 @@ -document.addEventListener('DOMContentLoaded', function () { - var timeline = document.querySelector('ol.timeline'); - if (!timeline) return; - - // Progressive enhancement: activates CSS hidden state - timeline.classList.add('js-lazy-timeline'); - - var items = Array.prototype.slice.call( - timeline.querySelectorAll('.timeline-item') - ); - - function reveal(item) { - item.classList.add('is-visible'); - } - - var observer = new IntersectionObserver( - function (entries) { - entries.forEach(function (entry) { - if (entry.isIntersecting) { - reveal(entry.target); - observer.unobserve(entry.target); - } - }); - }, - { - rootMargin: '-80px 0px 0px 0px', - threshold: 0.12, - } - ); - - items.forEach(function (item) { - observer.observe(item); - }); -}); diff --git a/themes/danix-xyz-hacker/assets/js/code-copy.js b/themes/danix-xyz-hacker/assets/js/code-copy.js deleted file mode 100644 index 8591436..0000000 --- a/themes/danix-xyz-hacker/assets/js/code-copy.js +++ /dev/null @@ -1,79 +0,0 @@ -(function () { - var LANG_NAMES = { - bash: 'Shell', sh: 'Shell', shell: 'Shell', zsh: 'Shell', - js: 'JavaScript', javascript: 'JavaScript', - ts: 'TypeScript', typescript: 'TypeScript', - go: 'Go', - py: 'Python', python: 'Python', - rs: 'Rust', rust: 'Rust', - html: 'HTML', - css: 'CSS', - toml: 'TOML', - yaml: 'YAML', yml: 'YAML', - json: 'JSON', - sql: 'SQL', - md: 'Markdown', markdown: 'Markdown', - c: 'C', - cpp: 'C++', 'c++': 'C++', - java: 'Java', - php: 'PHP', - ruby: 'Ruby', rb: 'Ruby', - swift: 'Swift', - kotlin: 'Kotlin', kt: 'Kotlin', - dockerfile: 'Dockerfile', - makefile: 'Makefile', - text: 'Text', txt: 'Text', - }; - - function prettyName(lang) { - if (!lang) return ''; - var key = lang.toLowerCase(); - return LANG_NAMES[key] || (lang.charAt(0).toUpperCase() + lang.slice(1)); - } - - function getCodeText(wrapper) { - var el = wrapper.querySelector('.lntd:last-child code') - || wrapper.querySelector('.code-body code') - || wrapper.querySelector('.code-body pre'); - return el ? el.innerText : ''; - } - - function initBlock(wrapper) { - var header = wrapper.querySelector('.code-header'); - if (header) { - var label = wrapper.querySelector('.code-lang-label'); - if (label) label.textContent = prettyName(header.getAttribute('data-lang') || ''); - } - - var btn = wrapper.querySelector('[data-copy-target]'); - if (!btn) return; - - btn.addEventListener('click', function () { - var text = getCodeText(wrapper); - if (!text) return; - - navigator.clipboard.writeText(text).then(function () { - var copyIcon = btn.querySelector('.icon-copy'); - var checkIcon = btn.querySelector('.icon-check'); - var liveRegion = wrapper.querySelector('.code-copy-status'); - if (copyIcon) copyIcon.classList.add('hidden'); - if (checkIcon) checkIcon.classList.remove('hidden'); - btn.classList.add('is-copied'); - if (liveRegion) liveRegion.textContent = 'Code copied to clipboard.'; - - setTimeout(function () { - if (copyIcon) copyIcon.classList.remove('hidden'); - if (checkIcon) checkIcon.classList.add('hidden'); - btn.classList.remove('is-copied'); - if (liveRegion) liveRegion.textContent = ''; - }, 2000); - }).catch(function () { - // silent fail for insecure contexts - }); - }); - } - - document.addEventListener('DOMContentLoaded', function () { - document.querySelectorAll('.code-block-wrapper').forEach(initBlock); - }); -})(); diff --git a/themes/danix-xyz-hacker/assets/js/contact-form.js b/themes/danix-xyz-hacker/assets/js/contact-form.js deleted file mode 100644 index 4fa8f55..0000000 --- a/themes/danix-xyz-hacker/assets/js/contact-form.js +++ /dev/null @@ -1,45 +0,0 @@ -document.addEventListener('alpine:init', () => { - Alpine.data('contactForm', () => ({ - formData: { - name: '', - email: '', - message: '' - }, - isSubmitting: false, - statusMessage: '', - statusClass: '', - - async submitContactForm() { - this.isSubmitting = true; - this.statusMessage = ''; - this.statusClass = ''; - - try { - const response = await fetch('/contact.php', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify(this.formData) - }); - - const data = await response.json(); - - if (response.ok) { - this.statusMessage = 'Message sent successfully!'; - this.statusClass = 'bg-green-100 text-green-800 border border-green-300'; - this.formData = { name: '', email: '', message: '' }; - } else { - this.statusMessage = data.error || 'An error occurred. Please try again.'; - this.statusClass = 'bg-red-100 text-red-800 border border-red-300'; - } - } catch (error) { - this.statusMessage = 'An error occurred. Please try again.'; - this.statusClass = 'bg-red-100 text-red-800 border border-red-300'; - console.error('Form submission error:', error); - } finally { - this.isSubmitting = false; - } - } - })); -}); diff --git a/themes/danix-xyz-hacker/assets/js/form-components.js b/themes/danix-xyz-hacker/assets/js/form-components.js deleted file mode 100644 index ffa4260..0000000 --- a/themes/danix-xyz-hacker/assets/js/form-components.js +++ /dev/null @@ -1,127 +0,0 @@ -// Form component utilities and Alpine.js data - -export function formComponentsData() { - return { - // Modal states - showAlertModal: false, - showConfirmModal: false, - showContentModal: false, - - // Toast notification state - toasts: [], - - // Handle confirm modal action - handleConfirm() { - this.showConfirmModal = false; - this.showToast('success', 'Action confirmed!'); - }, - - // Show toast notification - showToast(type = 'success', message = null) { - const messages = { - success: 'Operation completed successfully!', - error: 'An error occurred. Please try again.', - info: 'Here is some information.', - warning: 'Please be careful with this action.' - }; - - const toastMessage = message || messages[type] || messages.success; - const toastId = Date.now(); - - // Add toast to list - this.toasts.push({ - id: toastId, - type: type, - message: toastMessage - }); - - // Auto-remove after 5 seconds - setTimeout(() => { - this.toasts = this.toasts.filter(t => t.id !== toastId); - }, 5000); - }, - - // Remove toast manually - removeToast(id) { - this.toasts = this.toasts.filter(t => t.id !== id); - }, - - // Form validation utilities - validateEmail(email) { - const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; - return regex.test(email); - }, - - validatePassword(password) { - return password.length >= 8; - }, - - // Auto-expand textarea - autoExpandTextarea(event) { - const textarea = event.target; - textarea.style.height = 'auto'; - textarea.style.height = (textarea.scrollHeight) + 'px'; - } - }; -} - -// Toast container component for Alpine.js -export function renderToastContainer(Alpine) { - if (!Alpine) return; - - // This can be used in templates via Alpine - window.formUtils = { - formatCharCount(current, max) { - if (max) { - return `${current}/${max}`; - } - return current; - }, - - isCharCountWarning(current, max) { - if (!max) return false; - return current > (max * 0.8); - }, - - isCharCountError(current, max) { - if (!max) return false; - return current >= max; - } - }; -} - -// Focus Trap for Modals - Week 5 -function createFocusTrap(modalElement) { - const focusableElements = modalElement.querySelectorAll( - 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' - ); - - if (focusableElements.length === 0) return; - - const firstElement = focusableElements[0]; - const lastElement = focusableElements[focusableElements.length - 1]; - - modalElement.addEventListener('keydown', (e) => { - if (e.key !== 'Tab') return; - - if (e.shiftKey) { - // Shift + Tab - if (document.activeElement === firstElement) { - e.preventDefault(); - lastElement.focus(); - } - } else { - // Tab - if (document.activeElement === lastElement) { - e.preventDefault(); - firstElement.focus(); - } - } - }); - - // Set initial focus - firstElement.focus(); -} - -// Export for use in Alpine.js -window.createFocusTrap = createFocusTrap; diff --git a/themes/danix-xyz-hacker/assets/js/fortune.js b/themes/danix-xyz-hacker/assets/js/fortune.js deleted file mode 100644 index d4f981b..0000000 --- a/themes/danix-xyz-hacker/assets/js/fortune.js +++ /dev/null @@ -1,9 +0,0 @@ -(function() { - const el = document.getElementById('fortune-quote'); - if (!el) return; - const quotes = JSON.parse(el.dataset.quotes); - if (!quotes || quotes.length === 0) return; - const q = quotes[Math.floor(Math.random() * quotes.length)]; - el.querySelector('.fortune-text').textContent = '"' + q.text + '"'; - el.querySelector('.fortune-author').textContent = '— ' + q.author; -})(); diff --git a/themes/danix-xyz-hacker/assets/js/matrix-rain.js b/themes/danix-xyz-hacker/assets/js/matrix-rain.js deleted file mode 100644 index 53c55d8..0000000 --- a/themes/danix-xyz-hacker/assets/js/matrix-rain.js +++ /dev/null @@ -1,157 +0,0 @@ -// Matrix rain background effect -(function() { - // Bail out if user prefers reduced motion - if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { - return; - } - - // Canvas and context - let canvas = document.getElementById('matrix-rain'); - if (!canvas) return; - const ctx = canvas.getContext('2d'); - - // State - let columns = []; - let frameCount = 0; - let colors = { accent: '#a855f7', accent2: '#00ff88', bg: '#060b10', head: '#ffffff' }; - - // Character set: 30% ASCII, 70% katakana - const ASCII = Array.from({ length: 94 }, (_, i) => String.fromCharCode(33 + i)); - const KATA = Array.from({ length: 96 }, (_, i) => String.fromCodePoint(0x30a0 + i)); - const CHARS = shuffle([...ASCII, ...KATA, ...KATA, ...KATA]); - - // Utility: shuffle array - function shuffle(arr) { - for (let i = arr.length - 1; i > 0; i--) { - const j = Math.floor(Math.random() * (i + 1)); - [arr[i], arr[j]] = [arr[j], arr[i]]; - } - return arr; - } - - // Utility: convert hex or rgb color to rgba string - function hexToRgba(color, alpha) { - const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/); - if (rgbMatch) { - return `rgba(${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}, ${alpha})`; - } - const hex = color.replace('#', ''); - const r = parseInt(hex.substring(0, 2), 16); - const g = parseInt(hex.substring(2, 4), 16); - const b = parseInt(hex.substring(4, 6), 16); - return `rgba(${r}, ${g}, ${b}, ${alpha})`; - } - - // Sample CSS variables based on current theme - function sampleColors() { - const style = getComputedStyle(document.documentElement); - const isDark = document.documentElement.classList.contains('theme-dark'); - colors.accent = style.getPropertyValue('--accent').trim(); - colors.accent2 = style.getPropertyValue('--accent2').trim(); - colors.bg = style.getPropertyValue('--bg').trim(); - // Head char: bright white in dark mode, deep purple-black in light mode - colors.head = isDark ? '#ffffff' : '#1a0533'; - } - - // Resize canvas to window dimensions - function resizeCanvas() { - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; - ctx.font = '14px "JetBrains Mono", monospace'; - ctx.textBaseline = 'top'; - initColumns(); - } - - // Initialize columns for the current canvas width - function initColumns() { - columns = []; - const columnWidth = 14; - const columnCount = Math.floor(canvas.width / columnWidth); - - for (let i = 0; i < columnCount; i++) { - columns.push({ - x: i * columnWidth, - y: -Math.floor(Math.random() * 40), // stagger start above viewport - speed: 2 + Math.floor(Math.random() * 3), // 2-4 frames between drops - color: Math.random() < 0.6 ? 'accent2' : 'accent', // 60% green, 40% purple - charIndex: Math.floor(Math.random() * CHARS.length), - length: 8 + Math.floor(Math.random() * 13), // trail length 8-20 - }); - } - } - - // Set up MutationObserver for theme switching - function setupThemeObserver() { - const observer = new MutationObserver(function(mutations) { - for (const m of mutations) { - if (m.attributeName === 'class') { - sampleColors(); - break; - } - } - }); - observer.observe(document.documentElement, { - attributes: true, - attributeFilter: ['class'], - }); - } - - // Main animation loop - function drawFrame() { - frameCount++; - - // Fade layer: semi-transparent background fill - ctx.fillStyle = hexToRgba(colors.bg, 0.085); - ctx.fillRect(0, 0, canvas.width, canvas.height); - - // Draw each column - for (const col of columns) { - // Skip if not time to drop yet (per-column throttle) - if (frameCount % col.speed !== 0) continue; - - // Draw explicit trail in column color - ctx.fillStyle = colors[col.color]; - for (let i = 1; i <= col.length; i++) { - const trailY = (col.y - i) * 14; - if (trailY < 0) continue; - const trailCharIndex = (col.charIndex - i + CHARS.length) % CHARS.length; - ctx.fillText(CHARS[trailCharIndex], col.x, trailY); - } - - // Draw head character (bright) - ctx.fillStyle = colors.head; - const headCharIndex = col.charIndex % CHARS.length; - ctx.fillText(CHARS[headCharIndex], col.x, col.y * 14); - - // Advance column - col.y++; - col.charIndex = (col.charIndex + 1) % CHARS.length; - - // Reset when scrolled off screen - if (col.y * 14 > canvas.height + col.length * 14) { - col.y = -Math.floor(Math.random() * 20); - col.charIndex = Math.floor(Math.random() * CHARS.length); - col.color = Math.random() < 0.6 ? 'accent2' : 'accent'; - } - } - - requestAnimationFrame(drawFrame); - } - - // Initialize - sampleColors(); - resizeCanvas(); - setupThemeObserver(); - - // Debounced resize handler - let resizeTimer; - window.addEventListener('resize', function() { - clearTimeout(resizeTimer); - resizeTimer = setTimeout(resizeCanvas, 150); - }); - - // Start animation when fonts are ready - document.fonts.ready.then(function() { - requestAnimationFrame(drawFrame); - }); -})(); diff --git a/themes/danix-xyz-hacker/assets/js/menu.js b/themes/danix-xyz-hacker/assets/js/menu.js deleted file mode 100644 index 3f32642..0000000 --- a/themes/danix-xyz-hacker/assets/js/menu.js +++ /dev/null @@ -1,112 +0,0 @@ -document.addEventListener('DOMContentLoaded', () => { - const menuToggle = document.getElementById('menu-toggle'); - const menuOverlay = document.getElementById('menu-overlay'); - const menuPanel = document.getElementById('hamburger-menu'); - - function openMenu() { - if (!menuOverlay || !menuPanel) return; - - // Show overlay - menuOverlay.classList.remove('opacity-0'); - menuOverlay.classList.remove('invisible'); - - // Slide menu in - menuPanel.classList.remove('translate-x-full'); - - // Manage accessibility - menuToggle.setAttribute('aria-expanded', 'true'); - menuPanel.removeAttribute('aria-hidden'); - - // Control body overflow - document.body.style.overflow = 'hidden'; - - // Focus first focusable element in menu - const firstFocusable = menuPanel.querySelector('a, button'); - if (firstFocusable) { - setTimeout(() => firstFocusable.focus(), 50); - } - } - - function closeMenu() { - if (!menuOverlay || menuOverlay.classList.contains('opacity-0')) return; - - // Hide overlay - menuOverlay.classList.add('opacity-0'); - menuOverlay.classList.add('invisible'); - - // Slide menu out - menuPanel.classList.add('translate-x-full'); - - // Manage accessibility - menuToggle.setAttribute('aria-expanded', 'false'); - menuPanel.setAttribute('aria-hidden', 'true'); - - // Restore body overflow - document.body.style.overflow = ''; - - // Return focus to toggle button - menuToggle.focus(); - } - - function toggleMenu() { - if (menuOverlay && menuOverlay.classList.contains('opacity-0')) { - openMenu(); - } else { - closeMenu(); - } - } - - // Toggle menu when clicking the hamburger button - if (menuToggle) { - menuToggle.addEventListener('click', toggleMenu); - } - - // Close menu when clicking on the overlay - if (menuOverlay) { - menuOverlay.addEventListener('click', (e) => { - if (e.target === menuOverlay) { - closeMenu(); - } - }); - } - - // Close menu when clicking menu items - const menuLinks = document.querySelectorAll('#hamburger-menu a, #hamburger-menu button'); - menuLinks.forEach(link => { - link.addEventListener('click', closeMenu); - }); - - // Close menu on Escape key - document.addEventListener('keydown', (e) => { - if (e.key === 'Escape' && menuOverlay && !menuOverlay.classList.contains('opacity-0')) { - closeMenu(); - } - }); - - // Focus trap: keep tab within menu when open - if (menuPanel) { - menuPanel.addEventListener('keydown', (e) => { - if (e.key !== 'Tab') return; - - const focusableElements = menuPanel.querySelectorAll('a, button, [tabindex]:not([tabindex="-1"])'); - if (focusableElements.length === 0) return; - - const firstElement = focusableElements[0]; - const lastElement = focusableElements[focusableElements.length - 1]; - const isMenuOpen = !menuOverlay.classList.contains('opacity-0'); - - if (!isMenuOpen) return; - - // Shift+Tab on first element: move to last - if (e.shiftKey && document.activeElement === firstElement) { - e.preventDefault(); - lastElement.focus(); - } - // Tab on last element: move to first - else if (!e.shiftKey && document.activeElement === lastElement) { - e.preventDefault(); - firstElement.focus(); - } - }); - } -}); diff --git a/themes/danix-xyz-hacker/assets/js/not-found-page.js b/themes/danix-xyz-hacker/assets/js/not-found-page.js deleted file mode 100644 index 2b4f676..0000000 --- a/themes/danix-xyz-hacker/assets/js/not-found-page.js +++ /dev/null @@ -1,9 +0,0 @@ -// 404 page: initialize shared notFoundPage Alpine component -document.addEventListener('alpine:init', () => { - // Ensure search index is preloaded on 404 page - const notFoundElement = document.querySelector('[x-data*="notFoundPage"]'); - if (notFoundElement && notFoundElement.__x) { - notFoundElement.__x.$data.init(); - } - console.log('404 page initialized with shared search functionality'); -}); diff --git a/themes/danix-xyz-hacker/assets/js/reading-progress.js b/themes/danix-xyz-hacker/assets/js/reading-progress.js deleted file mode 100644 index ee1192f..0000000 --- a/themes/danix-xyz-hacker/assets/js/reading-progress.js +++ /dev/null @@ -1,29 +0,0 @@ -// Reading progress bar for single pages/articles -(function() { - const progressBar = document.getElementById('reading-progress'); - - if (!progressBar) return; - - function updateProgress() { - const windowHeight = window.innerHeight; - const documentHeight = document.documentElement.scrollHeight - windowHeight; - const scrollProgress = documentHeight > 0 ? (window.scrollY / documentHeight) * 100 : 0; - progressBar.style.width = scrollProgress + '%'; - } - - // Throttle the scroll event for better performance - let ticking = false; - - window.addEventListener('scroll', function() { - if (!ticking) { - window.requestAnimationFrame(function() { - updateProgress(); - ticking = false; - }); - ticking = true; - } - }, false); - - // Initial call - updateProgress(); -})(); diff --git a/themes/danix-xyz-hacker/assets/js/search.js b/themes/danix-xyz-hacker/assets/js/search.js deleted file mode 100644 index 8fb6262..0000000 --- a/themes/danix-xyz-hacker/assets/js/search.js +++ /dev/null @@ -1,134 +0,0 @@ -// Lazy-load search index from JSON file (language-aware) -async function loadSearchIndex() { - if (window.searchIndex) { - return window.searchIndex; - } - try { - // Detect current language from URL - const isItalian = window.location.pathname.startsWith('/it/'); - const indexPath = isItalian ? '/it/search-index.json' : '/search-index.json'; - - const response = await fetch(indexPath); - if (!response.ok) throw new Error('Failed to load search index'); - window.searchIndex = await response.json(); - return window.searchIndex; - } catch (error) { - console.error('Error loading search index:', error); - return []; - } -} - -// Filter articles by query (case-insensitive, max 5 results) -function filterArticles(query, articles) { - if (!query.trim()) { - return []; - } - const lowerQuery = query.toLowerCase(); - return articles - .filter(article => - article.title.toLowerCase().includes(lowerQuery) || - article.summary.toLowerCase().includes(lowerQuery) - ) - .slice(0, 5); -} - -// Register Alpine.js components -document.addEventListener('alpine:init', () => { - // Desktop search modal component - Alpine.data('searchOverlay', () => ({ - isOpen: false, - searchQuery: '', - filteredArticles: [], - allArticles: [], - indexLoaded: false, - - async open() { - this.isOpen = true; - await this.ensureIndexLoaded(); - this.$nextTick(() => { - const input = this.$el.querySelector('#search-input-desktop'); - if (input) input.focus(); - }); - }, - - close() { - this.isOpen = false; - this.searchQuery = ''; - this.filteredArticles = []; - }, - - async ensureIndexLoaded() { - if (!this.indexLoaded) { - this.allArticles = await loadSearchIndex(); - this.indexLoaded = true; - } - }, - - filterArticles(query) { - this.searchQuery = query; - this.filteredArticles = filterArticles(query, this.allArticles); - }, - - handleEscape(event) { - if (event.key === 'Escape') { - this.close(); - } - } - })); - - // Mobile search component (integrated into hamburger menu) - Alpine.data('mobileSearch', () => ({ - searchQuery: '', - filteredArticles: [], - allArticles: [], - indexLoaded: false, - - async ensureIndexLoaded() { - if (!this.indexLoaded) { - this.allArticles = await loadSearchIndex(); - this.indexLoaded = true; - } - }, - - filterArticles(query) { - this.searchQuery = query; - this.filteredArticles = filterArticles(query, this.allArticles); - } - })); - - // Refactored 404 page component - Alpine.data('notFoundPage', () => ({ - showEasterEgg: false, - searchQuery: '', - filteredArticles: [], - allArticles: [], - indexLoaded: false, - - async init() { - await this.ensureIndexLoaded(); - }, - - async ensureIndexLoaded() { - if (!this.indexLoaded) { - this.allArticles = await loadSearchIndex(); - this.indexLoaded = true; - } - }, - - filterArticles(query) { - this.searchQuery = query; - this.filteredArticles = filterArticles(query, this.allArticles); - }, - - toggleEasterEgg() { - this.showEasterEgg = !this.showEasterEgg; - }, - - goToRandomArticle() { - if (this.allArticles.length > 0) { - const randomArticle = this.allArticles[Math.floor(Math.random() * this.allArticles.length)]; - window.location.href = randomArticle.url; - } - } - })); -}); diff --git a/themes/danix-xyz-hacker/assets/js/tag-cloud-spiral.js b/themes/danix-xyz-hacker/assets/js/tag-cloud-spiral.js deleted file mode 100644 index bed4645..0000000 --- a/themes/danix-xyz-hacker/assets/js/tag-cloud-spiral.js +++ /dev/null @@ -1,122 +0,0 @@ -document.addEventListener('DOMContentLoaded', function () { - var containers = document.querySelectorAll('[data-tag-cloud]'); - if (!containers.length) return; - - Array.prototype.forEach.call(containers, function (container) { - if (container.offsetWidth < 400) return; - - var links = Array.prototype.slice.call( - container.querySelectorAll('.tag-cloud-link') - ); - if (!links.length) return; - - // Sort descending by weight (biggest first = placed near center) - links.sort(function (a, b) { - return parseFloat(b.dataset.weight) - parseFloat(a.dataset.weight); - }); - - // String hash → deterministic angle seed (0..2π) - function hashAngle(str) { - var h = 0; - for (var i = 0; i < str.length; i++) { - h = (h * 31 + str.charCodeAt(i)) & 0xffffffff; - } - return ((h >>> 0) / 0xffffffff) * 2 * Math.PI; - } - - // AABB collision check - function overlaps(a, b) { - return !( - a.right < b.left || - a.left > b.right || - a.bottom < b.top || - a.top > b.bottom - ); - } - - var placed = []; - var containerWidth = container.offsetWidth; - var cx = containerWidth / 2; - - // Measure each tag before repositioning - var sizes = links.map(function (link) { - var rect = link.getBoundingClientRect(); - return { w: rect.width, h: rect.height }; - }); - - // Switch container to relative positioning and remove flex layout - container.style.position = 'relative'; - container.style.display = 'block'; - container.classList.remove('flex', 'flex-wrap'); - - var padding = -2; // px gap between tags (negative allows ~2px edge overlap) - var aStep = 0.2; // radians per spiral step - var rScale = (containerWidth * 0.013); // spiral tightness - - var minTop = Infinity, maxBottom = -Infinity; - - links.forEach(function (link, i) { - var w = sizes[i].w; - var h = sizes[i].h; - var seed = hashAngle(link.href); - var theta = seed; - var placed_rect; - - // Step along spiral until no collision - for (var attempt = 0; attempt < 3000; attempt++) { - var r = rScale * theta; - var x = cx + r * Math.cos(theta) - w / 2; - var y = r * Math.sin(theta) - h / 2; - - var candidate = { left: x, top: y, right: x + w, bottom: y + h }; - var collision = false; - - for (var j = 0; j < placed.length; j++) { - var p = placed[j]; - var padded = { - left: p.left - padding, - top: p.top - padding, - right: p.right + padding, - bottom: p.bottom + padding - }; - if (overlaps(candidate, padded)) { - collision = true; - break; - } - } - - if (!collision) { - placed_rect = candidate; - break; - } - theta += aStep; - } - - if (!placed_rect) { - // Fallback: just append to flow if spiral exhausted - link.style.position = 'static'; - return; - } - - placed.push(placed_rect); - - link.style.position = 'absolute'; - link.style.left = Math.round(placed_rect.left) + 'px'; - link.style.top = Math.round(placed_rect.top) + 'px'; - - if (placed_rect.top < minTop) minTop = placed_rect.top; - if (placed_rect.bottom > maxBottom) maxBottom = placed_rect.bottom; - }); - - // Normalize: shift all tags so topmost is at y=16px - var offset = 16 - minTop; - links.forEach(function (link) { - if (link.style.position === 'absolute') { - link.style.top = (parseInt(link.style.top) + offset) + 'px'; - } - }); - - // Set container height to fit all tags + 2rem bottom padding (32px) - container.style.height = (maxBottom - minTop + 48) + 'px'; - }); -}); diff --git a/themes/danix-xyz-hacker/assets/js/theme-toggle.js b/themes/danix-xyz-hacker/assets/js/theme-toggle.js deleted file mode 100644 index bb95b2a..0000000 --- a/themes/danix-xyz-hacker/assets/js/theme-toggle.js +++ /dev/null @@ -1,53 +0,0 @@ -document.addEventListener('DOMContentLoaded', function() { - const themeToggle = document.getElementById('theme-toggle'); - const sunIcon = document.getElementById('theme-icon-sun'); - const moonIcon = document.getElementById('theme-icon-moon'); - - function updateThemeIcon() { - const isDark = document.documentElement.classList.contains('theme-dark'); - if (sunIcon && moonIcon) { - if (isDark) { - sunIcon.style.display = 'block'; - moonIcon.style.display = 'none'; - } else { - sunIcon.style.display = 'none'; - moonIcon.style.display = 'block'; - } - } - } - - // Update icon on initial load - if (sunIcon && moonIcon) { - updateThemeIcon(); - } - - if (!themeToggle) { - return; - } - - themeToggle.addEventListener('click', function(e) { - e.preventDefault(); - - // Get current theme from html element - const htmlElement = document.documentElement; - const isDark = htmlElement.classList.contains('theme-dark'); - const newTheme = isDark ? 'light' : 'dark'; - - // Remove both theme classes - htmlElement.classList.remove('theme-light', 'theme-dark'); - - // Add the new theme class - htmlElement.classList.add(`theme-${newTheme}`); - - // Persist to localStorage - localStorage.setItem('theme', newTheme); - - // Update icon display - updateThemeIcon(); - - // Update Feather Icons if available - if (window.feather) { - window.feather.replace(); - } - }); -}); |