--- /dev/null
+[submodule "themes/danix-xyz-hacker"]
+ path = themes/danix-xyz-hacker
+ url = danix_git:danix2-hugo-theme
--- /dev/null
+Subproject commit 631547a75142326a7c71bdf123e1475217a5ad73
+++ /dev/null
-/* === 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;
-}
+++ /dev/null
-@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;
- }
-}
+++ /dev/null
-*, ::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);
- }
-}
+++ /dev/null
-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);
- });
-});
+++ /dev/null
-(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);
- });
-})();
+++ /dev/null
-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;
- }
- }
- }));
-});
+++ /dev/null
-// 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;
+++ /dev/null
-(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;
-})();
+++ /dev/null
-// 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);
- });
-})();
+++ /dev/null
-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();
- }
- });
- }
-});
+++ /dev/null
-// 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');
-});
+++ /dev/null
-// 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();
-})();
+++ /dev/null
-// 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;
- }
- }
- }));
-});
+++ /dev/null
-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';
- });
-});
+++ /dev/null
-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();
- }
- });
-});
+++ /dev/null
-# Navigation & UI
-home: "Home"
-articles: "Articles"
-about: "About"
-here: "Contact"
-repo: "Repo"
-legal: "Privacy"
-language: "Language"
-toggleTheme: "Theme"
-toggleMenu: "Menu"
-closeMenu: "Close"
-skipToContent: "Skip to main content"
-email: "Email"
-contact: "Contact"
-links: "Links"
-allRightsReserved: "All rights reserved."
-footer_built_with: "built with"
-footer_features: "features"
-footer_made_with: "Made with"
-footer_lack_of: "lack of"
-footer_lots_of: "lots of"
-footer_by: "by"
-footer_love: "love"
-footer_sleep: "sleep"
-footer_coffee: "coffee"
-footer_about_name: "Name"
-footer_about_role: "role"
-footer_about_cert: "cert"
-footer_about_os: "os"
-footer_about_focus: "focus"
-footer_about_role_value: "Cybersecurity Specialist"
-footer_about_os_value: "Slackware"
-footer_about_os_year: "2005–present"
-footer_about_focus_value: "open-source · privacy"
-searchArticles: "Search Articles"
-searchPlaceholder: "Search by title or content..."
-noSearchResults: "No articles found matching your search."
-
-# Articles
-readMore: "Read more"
-published: "Published"
-updated: "Updated"
-readingTime: "reading time"
-min: "min"
-author: "Author"
-category: "Category"
-categories: "Categories"
-tag: "Tag"
-tags: "Tags"
-relatedPosts: "Related articles"
-noRelated: "No related articles."
-postCount:
- one: "1 post"
- other: "{{ . }} posts"
-
-# Article types
-life: "Life"
-photo: "Photo"
-link: "Link"
-quote: "Quote"
-tech: "Tech"
-
-# Sharing
-share: "Share"
-shareOn: "Share on"
-copyLink: "Copy link"
-twitter: "Twitter"
-facebook: "Facebook"
-reddit: "Reddit"
-pinterest: "Pinterest"
-whatsapp: "WhatsApp"
-telegram: "Telegram"
-signal: "Signal"
-shareViaEmail: "Share via email"
-linkCopied: "Link copied!"
-back_to_top: "Back to top"
-
-# Forms
-name: "Name"
-message: "Message"
-submit: "Send"
-sending: "Sending..."
-success: "Message sent successfully!"
-error: "An error occurred. Please try again."
-
-# Form Components
-form_invalid_email: "Please enter a valid email address"
-form_password_help: "Must be at least 8 characters"
-form_agree_terms: "I agree to the terms and conditions"
-form_select_interests: "Select your interests"
-form_interest_tech: "Technology"
-form_interest_design: "Design"
-form_select_preference: "Select a preference"
-form_option_a: "Option A"
-form_option_b: "Option B"
-form_first_name: "First Name"
-form_last_name: "Last Name"
-form_search: "Search"
-form_search_btn: "Search"
-form_open_alert: "Open Alert Modal"
-form_open_confirm: "Open Confirm Modal"
-form_open_content: "Open Content Modal"
-form_alert_title: "Alert"
-form_alert_message: "This is an alert modal. Click OK to dismiss."
-form_ok: "OK"
-form_confirm_title: "Confirm Action"
-form_confirm_message: "Are you sure you want to continue?"
-form_cancel: "Cancel"
-form_confirm: "Confirm"
-form_content_title: "Modal with Content"
-form_content_message: "This modal contains detailed content. You can add forms, lists, or any HTML here."
-form_close: "Close"
-form_save: "Save"
-
-# Social
-follow: "Follow me"
-contactMe: "Contact me"
-
-# 404 Page
-notFound:
- other: "Page Not Found"
-notFoundHeading:
- other: "404"
-notFoundMessage:
- other: "Sorry, the page you're looking for doesn't exist. Try searching or browse the articles below."
-searchButton:
- other: "Search"
-recentArticles:
- other: "Recent Articles"
-goHome:
- other: "Go Home"
-browseArticles:
- other: "Browse Articles"
-contactSupport:
- other: "Get in Touch"
-followWhiteRabbit:
- other: "Follow the white rabbit"
-bluePill:
- other: "Stay Here"
-redPill:
- other: "Show Me More"
-easterEggTitle:
- other: "Choose Your Path"
-
-# Repository Page
-repositoryTitle:
- other: "Slackware Repository"
-repositorySubtitle:
- other: "Download and install my curated Slackware packages"
-quickStartTitle:
- other: "Quick Start"
-copyCommand:
- other: "Copy"
-copiedMessage:
- other: "Copied to clipboard!"
-installationTitle:
- other: "Installation"
-usageTitle:
- other: "Usage"
-availablePackagesTitle:
- other: "Available Packages"
-githubReposTitle:
- other: "GitHub SlackBuild Repositories"
-visitGithub:
- other: "Visit GitHub"
-repo_example_1_desc:
- other: "SlackBuild scripts for Example Package 1. Build system and tools for Slackware package management."
-repo_example_2_desc:
- other: "SlackBuild scripts for Example Package 2. A comprehensive package with full documentation and support."
-repo_example_3_desc:
- other: "SlackBuild scripts for Example Package 3. Utility package for system administration and configuration."
+++ /dev/null
-# Navigation & UI
-home: "Home"
-articles: "Articoli"
-about: "Chi Sono"
-here: "Contatti"
-repo: "Repo"
-legal: "Privacy"
-language: "Lingua"
-toggleTheme: "Tema"
-toggleMenu: "Menu"
-closeMenu: "Chiudi"
-skipToContent: "Salta al contenuto principale"
-email: "Email"
-contact: "Contatti"
-links: "Link"
-allRightsReserved: "Tutti i diritti riservati."
-footer_built_with: "costruito con"
-footer_features: "caratteristiche"
-footer_made_with: "Fatto con"
-footer_lack_of: "mancanza di"
-footer_lots_of: "molti"
-footer_by: "da"
-footer_love: "amore"
-footer_sleep: "sonno"
-footer_coffee: "caffè"
-footer_about_name: "Nome"
-footer_about_role: "ruolo"
-footer_about_cert: "cert"
-footer_about_os: "os"
-footer_about_focus: "focus"
-footer_about_role_value: "Specialista in Cybersecurity"
-footer_about_os_value: "Slackware"
-footer_about_os_year: "2005–presente"
-footer_about_focus_value: "open-source · privacy"
-searchArticles: "Cerca Articoli"
-searchPlaceholder: "Cerca per titolo o contenuto..."
-noSearchResults: "Nessun articolo trovato per la tua ricerca."
-
-# Articles
-readMore: "Continua a leggere"
-published: "Pubblicato"
-updated: "Aggiornato"
-readingTime: "tempo di lettura"
-min: "min"
-author: "Autore"
-category: "Categoria"
-categories: "Categorie"
-tag: "Tag"
-tags: "Tag"
-relatedPosts: "Articoli correlati"
-noRelated: "Nessun articolo correlato."
-postCount:
- one: "1 articolo"
- other: "{{ . }} articoli"
-
-# Article types
-life: "Vita"
-photo: "Foto"
-link: "Link"
-quote: "Citazioni"
-tech: "Tech"
-
-# Sharing
-share: "Condividi"
-shareOn: "Condividi su"
-copyLink: "Copia link"
-twitter: "Twitter"
-facebook: "Facebook"
-reddit: "Reddit"
-pinterest: "Pinterest"
-whatsapp: "WhatsApp"
-telegram: "Telegram"
-signal: "Signal"
-shareViaEmail: "Condividi via email"
-linkCopied: "Link copiato!"
-back_to_top: "Torna in cima"
-
-# Forms
-name: "Nome"
-message: "Messaggio"
-submit: "Invia"
-sending: "Invio in corso..."
-success: "Messaggio inviato con successo!"
-error: "Si è verificato un errore. Riprova."
-
-# Form Components
-form_invalid_email: "Inserire un indirizzo email valido"
-form_password_help: "Deve avere almeno 8 caratteri"
-form_agree_terms: "Accetto i termini e le condizioni"
-form_select_interests: "Seleziona i tuoi interessi"
-form_interest_tech: "Tecnologia"
-form_interest_design: "Design"
-form_select_preference: "Seleziona una preferenza"
-form_option_a: "Opzione A"
-form_option_b: "Opzione B"
-form_first_name: "Nome"
-form_last_name: "Cognome"
-form_search: "Cerca"
-form_search_btn: "Cerca"
-form_open_alert: "Apri modale di avviso"
-form_open_confirm: "Apri modale di conferma"
-form_open_content: "Apri modale contenuto"
-form_alert_title: "Avviso"
-form_alert_message: "Questo è un modale di avviso. Fai clic su OK per chiudere."
-form_ok: "OK"
-form_confirm_title: "Conferma azione"
-form_confirm_message: "Sei sicuro di voler continuare?"
-form_cancel: "Annulla"
-form_confirm: "Conferma"
-form_content_title: "Modale con contenuto"
-form_content_message: "Questo modale contiene contenuti dettagliati. Puoi aggiungere moduli, elenchi o qualsiasi HTML qui."
-form_close: "Chiudi"
-form_save: "Salva"
-
-# Social
-follow: "Seguimi"
-contactMe: "Contattami"
-
-# 404 Page
-notFound:
- other: "Pagina Non Trovata"
-notFoundHeading:
- other: "404"
-notFoundMessage:
- other: "Mi dispiace, la pagina che stai cercando non esiste. Prova a cercare o sfoglia gli articoli qui sotto."
-searchButton:
- other: "Cerca"
-recentArticles:
- other: "Articoli Recenti"
-goHome:
- other: "Torna a Casa"
-browseArticles:
- other: "Sfoglia Articoli"
-contactSupport:
- other: "Contattami"
-followWhiteRabbit:
- other: "Segui il coniglio bianco"
-bluePill:
- other: "Rimani Qui"
-redPill:
- other: "Mostrami di Più"
-easterEggTitle:
- other: "Scegli il Tuo Percorso"
-
-# Repository Page
-repositoryTitle:
- other: "Repository Slackware"
-repositorySubtitle:
- other: "Scarica e installa i miei pacchetti Slackware curati"
-quickStartTitle:
- other: "Inizio Rapido"
-copyCommand:
- other: "Copia"
-copiedMessage:
- other: "Copiato negli appunti!"
-installationTitle:
- other: "Installazione"
-usageTitle:
- other: "Utilizzo"
-availablePackagesTitle:
- other: "Pacchetti Disponibili"
-githubReposTitle:
- other: "Repository GitHub SlackBuild"
-visitGithub:
- other: "Visita GitHub"
-
-# Repository Descriptions
-repo_example_1_desc:
- other: "Script SlackBuild per Pacchetto Esempio 1. Sistema di compilazione e strumenti per la gestione dei pacchetti Slackware."
-repo_example_2_desc:
- other: "Script SlackBuild per Pacchetto Esempio 2. Un pacchetto completo con documentazione e supporto completi."
-repo_example_3_desc:
- other: "Script SlackBuild per Pacchetto Esempio 3. Pacchetto di utilità per amministrazione di sistema e configurazione."
+++ /dev/null
-{{ define "main" }}
-
-<main class="min-h-screen px-4 py-12">
- <div class="mx-auto px-4 py-12 max-w-4xl border border-border glow-accent rounded-lg bg-bg p-8" x-data="notFoundPage()">
- <div class="text-center">
- <!-- 404 Heading -->
- <h1 class="text-7xl md:text-8xl font-bold text-accent mb-4 animate-fade-in">
- 404
- </h1>
-
- <!-- Error Message -->
- <h2 class="text-3xl md:text-4xl font-bold mb-6">
- {{ i18n "notFound" }}
- </h2>
-
- <p class="text-lg text-text-dim mb-8">
- {{ i18n "notFoundMessage" }}
- </p>
-
- <!-- Search Box -->
- <div class="mb-12">
- <form id="search-form" class="flex flex-col gap-4">
- <label for="search-input" class="sr-only">{{ i18n "searchPlaceholder" }}</label>
- <input
- id="search-input"
- type="text"
- placeholder="{{ (i18n "searchPlaceholder") }}"
- class="px-4 py-3 border-2 border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent bg-bg text-text"
- @input="filterArticles($el.value)"
- />
- </form>
- <div id="search-results" class="mt-4 text-left space-y-3" x-show="filteredArticles.length > 0">
- <template x-for="article in filteredArticles" :key="article.title">
- <div class="p-4 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 transition-colors">
- <a :href="article.url" class="block text-left">
- <h4 class="font-bold text-accent hover:underline" x-text="article.title"></h4>
- <p class="text-sm text-text-dim mt-1" x-text="article.date"></p>
- </a>
- </div>
- </template>
- </div>
- <div x-show="searchQuery && filteredArticles.length === 0" class="mt-4 text-text-dim">
- {{ i18n "noSearchResults" }}
- </div>
- </div>
-
- <!-- Recent Articles Section -->
- <div class="mb-12">
- <h3 class="text-2xl font-bold mb-6">{{ i18n "recentArticles" }}</h3>
- <div class="space-y-4">
- {{ range first 5 (where .Site.RegularPages "Section" "articles") }}
- <div class="p-4 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 transition-colors">
- <a href="{{ .Permalink }}" class="block text-left">
- <h4 class="font-bold text-accent hover:underline">{{ .Title }}</h4>
- <p class="text-sm text-text-dim mt-1">
- {{ .Date.Format "Jan 02, 2006" }}
- </p>
- </a>
- </div>
- {{ end }}
- </div>
- </div>
-
- <!-- Explore Topics -->
- <div class="mb-12 text-left">
- {{ partial "tag-cloud.html" (dict "page" . "showCount" true "wrapInWidget" false "headingLevel" "h3") }}
- </div>
-
- <!-- Navigation Links -->
- <div class="space-y-4 flex flex-col items-center mb-12">
- <a href="/" class="btn btn-primary">
- {{ i18n "goHome" }}
- </a>
- <a href="/articles/" class="btn btn-secondary">
- {{ i18n "browseArticles" }}
- </a>
- <a href="/is/here/" class="btn btn-outline">
- {{ i18n "contactSupport" }}
- </a>
- </div>
-
- <!-- Easter Egg Trigger -->
- <div class="mt-12 pt-8 border-t border-border">
- <button
- type="button"
- @click="toggleEasterEgg()"
- class="text-sm text-text-dim hover:text-accent transition-colors underline"
- >
- {{ i18n "followWhiteRabbit" }}
- </button>
- </div>
-
- <!-- Easter Egg Modal (Hidden by default) -->
- <div
- class="fixed inset-0 z-50"
- :class="{ 'flex items-center justify-center': showEasterEgg, 'hidden': !showEasterEgg }"
- x-show="showEasterEgg"
- x-cloak
- >
- <!-- Overlay -->
- <div
- class="absolute inset-0 bg-black/50"
- @click="showEasterEgg = false"
- ></div>
-
- <!-- Modal Content -->
- <div class="relative bg-bg border-2 border-accent p-8 rounded-lg shadow-xl max-w-md mx-4">
- <h2 class="text-2xl font-bold mb-6 text-accent">{{ i18n "easterEggTitle" }}</h2>
-
- <div class="space-y-4">
- <button
- type="button"
- @click="showEasterEgg = false; window.location.href = '{{ .Site.BaseURL }}'"
- class="w-full btn btn-primary"
- >
- 💊 {{ i18n "bluePill" }}
- </button>
-
- <button
- type="button"
- @click="goToRandomArticle()"
- class="w-full btn btn-secondary"
- >
- 🐰 {{ i18n "redPill" }}
- </button>
- </div>
-
- <button
- type="button"
- @click="showEasterEgg = false"
- class="absolute top-4 right-4 text-text-dim hover:text-text dark:hover:text-text transition-colors"
- aria-label="Close modal"
- >
- ✕
- </button>
- </div>
- </div>
- </div>
- </div>
-</main>
-
-{{ end }}
+++ /dev/null
-{{ define "main" }}
-
-<main class="min-h-screen px-4 py-12">
- <div class="mx-auto px-4 py-12 max-w-4xl border border-border glow-accent rounded-lg bg-bg p-8" x-data="notFoundPage()">
- <div class="text-center">
- <!-- 404 Heading -->
- <h1 class="text-7xl md:text-8xl font-bold text-accent mb-4 animate-fade-in">
- 404
- </h1>
-
- <!-- Error Message -->
- <h2 class="text-3xl md:text-4xl font-bold mb-6">
- {{ i18n "notFound" }}
- </h2>
-
- <p class="text-lg text-text-dim mb-8">
- {{ i18n "notFoundMessage" }}
- </p>
-
- <!-- Search Box -->
- <div class="mb-12">
- <form id="search-form" class="flex flex-col gap-4">
- <label for="search-input" class="sr-only">{{ i18n "searchPlaceholder" }}</label>
- <input
- id="search-input"
- type="text"
- placeholder="{{ (i18n "searchPlaceholder") }}"
- class="px-4 py-3 border-2 border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent bg-bg text-text"
- @input="filterArticles($el.value)"
- />
- </form>
- <div id="search-results" class="mt-4 text-left space-y-3" x-show="filteredArticles.length > 0">
- <template x-for="article in filteredArticles" :key="article.title">
- <div class="p-4 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 transition-colors">
- <a :href="article.url" class="block text-left">
- <h4 class="font-bold text-accent hover:underline" x-text="article.title"></h4>
- <p class="text-sm text-text-dim mt-1" x-text="article.date"></p>
- </a>
- </div>
- </template>
- </div>
- <div x-show="searchQuery && filteredArticles.length === 0" class="mt-4 text-text-dim">
- {{ i18n "noSearchResults" }}
- </div>
- </div>
-
- <!-- Recent Articles Section -->
- <div class="mb-12">
- <h3 class="text-2xl font-bold mb-6">{{ i18n "recentArticles" }}</h3>
- <div class="space-y-4">
- {{ range first 5 (where .Site.RegularPages "Section" "articles") }}
- <div class="p-4 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 transition-colors">
- <a href="{{ .Permalink }}" class="block text-left">
- <h4 class="font-bold text-accent hover:underline">{{ .Title }}</h4>
- <p class="text-sm text-text-dim mt-1">
- {{ .Date.Format "Jan 02, 2006" }}
- </p>
- </a>
- </div>
- {{ end }}
- </div>
- </div>
-
- <!-- Explore Topics -->
- <div class="mb-12 text-left">
- {{ partial "tag-cloud.html" (dict "page" . "showCount" true "wrapInWidget" false "headingLevel" "h3") }}
- </div>
-
- <!-- Navigation Links -->
- <div class="space-y-4 flex flex-col items-center mb-12">
- <a href="/it/" class="btn btn-primary">
- {{ i18n "goHome" }}
- </a>
- <a href="/it/articles/" class="btn btn-secondary">
- {{ i18n "browseArticles" }}
- </a>
- <a href="/it/is/here/" class="btn btn-outline">
- {{ i18n "contactSupport" }}
- </a>
- </div>
-
- <!-- Easter Egg Trigger -->
- <div class="mt-12 pt-8 border-t border-border">
- <button
- type="button"
- @click="toggleEasterEgg()"
- class="text-sm text-text-dim hover:text-accent transition-colors underline"
- >
- {{ i18n "followWhiteRabbit" }}
- </button>
- </div>
-
- <!-- Easter Egg Modal (Hidden by default) -->
- <div
- class="fixed inset-0 z-50"
- :class="{ 'flex items-center justify-center': showEasterEgg, 'hidden': !showEasterEgg }"
- x-show="showEasterEgg"
- x-cloak
- >
- <!-- Overlay -->
- <div
- class="absolute inset-0 bg-black/50"
- @click="showEasterEgg = false"
- ></div>
-
- <!-- Modal Content -->
- <div class="relative bg-bg border-2 border-accent p-8 rounded-lg shadow-xl max-w-md mx-4">
- <h2 class="text-2xl font-bold mb-6 text-accent">{{ i18n "easterEggTitle" }}</h2>
-
- <div class="space-y-4">
- <button
- type="button"
- @click="showEasterEgg = false; window.location.href = '{{ .Site.BaseURL }}it/'"
- class="w-full btn btn-primary"
- >
- 💊 {{ i18n "bluePill" }}
- </button>
-
- <button
- type="button"
- @click="goToRandomArticle()"
- class="w-full btn btn-secondary"
- >
- 🐰 {{ i18n "redPill" }}
- </button>
- </div>
-
- <button
- type="button"
- @click="showEasterEgg = false"
- class="absolute top-4 right-4 text-text-dim hover:text-text dark:hover:text-text transition-colors"
- aria-label="Close modal"
- >
- ✕
- </button>
- </div>
- </div>
- </div>
- </div>
-</main>
-
-{{ end }}
+++ /dev/null
-{{- $lang := .Type -}}
-{{- $hasLang := gt (len $lang) 0 -}}
-{{- $highlightLang := $lang -}}
-{{- if not $hasLang -}}{{- $highlightLang = "text" -}}{{- end -}}
-{{- $opts := dict "lineNos" true "lineNumbersInTable" true -}}
-
-<div class="code-block-wrapper not-prose">
- {{- if $hasLang -}}
- <div class="code-header" data-lang="{{ $lang }}">
- <span class="code-lang-label">{{ $lang }}</span>
- <div class="code-copy-wrapper">
- <span role="status" aria-live="polite" class="sr-only code-copy-status"></span>
- <button class="code-copy-btn" aria-label="Copy code" data-copy-target>
- <i data-feather="copy" class="icon-copy" aria-hidden="true"></i>
- <i data-feather="check" class="icon-check hidden" aria-hidden="true"></i>
- </button>
- </div>
- </div>
- {{- end -}}
- <div class="code-body">
-{{- highlight .Inner $highlightLang $opts -}}
- </div>
-</div>
+++ /dev/null
-{{- if eq .Level 1 -}}
-<h1 id="{{ .Anchor }}">{{ .Text | safeHTML }}</h1>
-{{- else -}}
-<h{{ .Level }} id="{{ .Anchor }}"><span aria-hidden="true" class="heading-prefix">//</span> {{ .Text | safeHTML }}</h{{ .Level }}>
-{{- end -}}
+++ /dev/null
-<!DOCTYPE html>
-<html lang="{{ .Lang }}" class="theme-dark">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- {{ partial "head-meta.html" . }}
- <title>{{ .Title }}{{ if ne .Title .Site.Title }} — {{ .Site.Title }}{{ end }}</title>
-
- <!-- Favicon -->
- <link rel="icon" type="image/png" href="/images/fav.png">
-
- <!-- Fonts -->
- <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&family=Oxanium:wght@400;600;700&display=swap" rel="stylesheet">
-
- <!-- Feather Icons -->
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.css">
-
- <!-- Tailwind CSS -->
- {{ $css := resources.Get "css/main.min.css" }}
- <link rel="stylesheet" href="{{ $css.RelPermalink }}">
-
- <!-- Syntax highlighting (Chroma) -->
- {{ $chroma := resources.Get "css/chroma-custom.css" | minify }}
- <link rel="stylesheet" href="{{ $chroma.RelPermalink }}">
-</head>
-<body class="bg-bg text-text antialiased" data-page-kind="{{ if .IsHome }}home{{ else }}other{{ end }}">
- <!-- Reading progress bar (only on single pages/articles) -->
- {{ if eq .Kind "page" }}
- <div
- id="reading-progress"
- class="fixed top-0 left-0 h-1 transition-all duration-100"
- style="width: 0%; background: linear-gradient(to right, var(--accent), var(--accent2)); z-index: 9999;"
- ></div>
- {{ partial "back-to-top.html" . }}
- {{ end }}
- <!-- Skip to main content link -->
- <a href="#main" class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-accent focus:text-white focus:rounded">
- {{ i18n "skipToContent" }}
- </a>
-
- <!-- Dot grid background pattern -->
- <div class="fixed inset-0 pointer-events-none opacity-5 dot-grid" style="
- background-image: radial-gradient(circle, currentColor 1px, transparent 1px);
- background-size: 30px 30px;
- z-index: -1;
- "></div>
-
- <!-- Matrix rain canvas background -->
- <canvas id="matrix-rain" aria-hidden="true"></canvas>
-
- <!-- Theme toggle & language toggle (before Alpine loads to prevent flash) -->
- <script>
- (function() {
- const theme = localStorage.getItem('theme') || 'dark';
- const html = document.documentElement;
- html.classList.remove('theme-light', 'theme-dark');
- html.classList.add('theme-' + theme);
- })();
- </script>
-
- <!-- Navigation -->
- {{ partial "header.html" . }}
-
- <!-- Main content (spaced for fixed header) -->
- <main id="main" class="mt-20 relative z-10">
- {{ block "main" . }}{{ end }}
- </main>
-
- <!-- Footer -->
- {{ partial "footer.html" . }}
-
- <!-- Search modal (desktop and mobile) -->
- {{ partial "search-modal.html" . }}
-
- <!-- Alpine.js -->
- <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
-
- <!-- Feather Icons initialization -->
- <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
- <script>feather.replace();</script>
-
- <!-- Theme toggle script -->
- {{ $themeScript := resources.Get "js/theme-toggle.js" | minify }}
- <script src="{{ $themeScript.RelPermalink }}"></script>
-
- <!-- Menu script -->
- {{ $menuScript := resources.Get "js/menu.js" | minify }}
- <script src="{{ $menuScript.RelPermalink }}"></script>
-
- <!-- Contact form script -->
- {{ $contactScript := resources.Get "js/contact-form.js" | minify }}
- <script src="{{ $contactScript.RelPermalink }}"></script>
-
- <!-- 404 Not Found page script -->
- {{ $notFoundScript := resources.Get "js/not-found-page.js" | minify }}
- <script src="{{ $notFoundScript.RelPermalink }}"></script>
-
- <!-- Reading progress bar script (on single pages/articles) -->
- {{ if eq .Kind "page" }}
- {{ $progressScript := resources.Get "js/reading-progress.js" | minify }}
- <script src="{{ $progressScript.RelPermalink }}"></script>
- {{ end }}
-
- <!-- Code block copy button -->
- {{ if eq .Kind "page" }}
- {{ $codeScript := resources.Get "js/code-copy.js" | minify }}
- <script src="{{ $codeScript.RelPermalink }}"></script>
- {{ end }}
-
- <!-- Matrix rain background effect -->
- {{ with resources.Get "js/matrix-rain.js" }}
- {{ $s := . | minify }}
- <script src="{{ $s.RelPermalink }}"></script>
- {{ end }}
-
- <!-- Search functionality script -->
- {{ $searchScript := resources.Get "js/search.js" | minify }}
- <script src="{{ $searchScript.RelPermalink }}"></script>
-
- <!-- Timeline lazy-reveal (scroll-triggered reveal animation) -->
- {{ if eq .Kind "section" }}
- {{ $lazyScript := resources.Get "js/article-lazy.js" | minify }}
- <script src="{{ $lazyScript.RelPermalink }}"></script>
- {{ end }}
-
- <!-- Tag cloud spiral layout -->
- {{ $tagCloudScript := resources.Get "js/tag-cloud-spiral.js" | minify }}
- <script src="{{ $tagCloudScript.RelPermalink }}"></script>
-</body>
-</html>
+++ /dev/null
-{{ define "main" }}
-<div class="mx-auto px-4 py-12 max-w-5xl">
- <h1 class="text-4xl md:text-5xl font-bold text-accent mb-12">
- {{ .Title }}
- </h1>
-
- {{ $pinned := where .Pages "Params.pinned" true }}
- {{ $unpinned := where .Pages "Params.pinned" false }}
- {{ if eq (len $unpinned) 0 }}
- {{ $unpinned = where .Pages "Params.pinned" nil }}
- {{ if eq (len $unpinned) 0 }}
- {{ $unpinned = where .Pages "Params.pinned" "" }}
- {{ end }}
- {{ end }}
-
- {{ $allPages := ($pinned | append $unpinned) }}
-
- {{ if eq (len $allPages) 0 }}
- <div class="py-12 text-center text-text-dim">
- {{ i18n "noRelated" }}
- </div>
- {{ else }}
- <ol class="timeline" aria-label="{{ .Title }}">
- {{ range $i, $page := (sort $pinned "Date" "desc") }}
- {{ $side := "left" }}
- {{ if eq (mod $i 2) 0 }}{{ $side = "left" }}{{ else }}{{ $side = "right" }}{{ end }}
- {{ partial "article-list-item.html" (dict "Page" $page "side" $side) }}
- {{ end }}
- {{ $offset := len $pinned }}
- {{ range $i, $page := (sort $unpinned "Date" "desc") }}
- {{ $idx := add $i $offset }}
- {{ $side := "left" }}
- {{ if eq (mod $idx 2) 0 }}{{ $side = "left" }}{{ else }}{{ $side = "right" }}{{ end }}
- {{ partial "article-list-item.html" (dict "Page" $page "side" $side) }}
- {{ end }}
- </ol>
- {{ end }}
-</div>
-{{ end }}
+++ /dev/null
-{{ define "main" }}
-<article class="mx-auto px-4 py-12 max-w-7xl">
- <div class="grid md:grid-cols-3 gap-8 content-grid">
- <!-- Article section -->
- <div class="md:col-span-2 min-w-0">
- <!-- Top article navigation (articles only) -->
- {{ if eq .Section "articles" }}
- {{ partial "article-nav.html" (dict "page" . "variant" "top") }}
- {{ end }}
-
- <!-- Breadcrumb -->
- {{ partial "breadcrumb.html" . }}
-
- <!-- Article header -->
- {{ partial "article-header.html" . }}
-
- <!-- Article content -->
- <div class="prose prose-invert max-w-none mb-12">
- {{ .Content }}
- </div>
-
- <!-- Tags section -->
- {{ if .Params.tags }}
- <div class="border-t border-border pt-8">
- <h3 class="text-lg font-semibold text-accent mb-4">{{ i18n "tags" }}</h3>
- <div class="flex flex-wrap gap-2">
- {{ $lang := .Lang }}
- {{ range .Params.tags }}
- {{ $tagUrl := printf "/tags/%s/" (. | urlize) }}
- {{ if eq $lang "it" }}
- {{ $tagUrl = printf "/it/tags/%s/" (. | urlize) }}
- {{ end }}
- <a
- href="{{ $tagUrl }}"
- class="inline-flex items-center px-3 py-1 border border-border/30 rounded hover:border-accent/50 hover:text-accent transition-colors text-sm"
- >
- {{ . }}
- </a>
- {{ end }}
- </div>
- </div>
- {{ end }}
-
- <!-- Bottom article navigation (articles only) -->
- {{ if eq .Section "articles" }}
- {{ partial "article-nav.html" (dict "page" . "variant" "bottom") }}
- {{ end }}
- </div>
-
- <!-- Sidebar -->
- {{ partial "sidebar.html" . }}
- </div>
-</article>
-{{ end }}
+++ /dev/null
-{{ define "main" }}
-{{ $articleType := .Params.type | default "life" }}
-{{ $template := printf "article-types/%s.html" $articleType }}
-<article class="mx-auto px-4 py-12">
- <div class="grid md:grid-cols-3 gap-8 max-w-7xl mx-auto content-grid">
- <!-- Article section -->
- <div class="md:col-span-2">
- <!-- Top article navigation -->
- {{ partial "article-nav.html" (dict "page" . "variant" "top") }}
-
- <!-- Breadcrumb -->
- {{ partial "breadcrumb.html" . }}
-
- <!-- Article header -->
- {{ partial "article-header.html" . }}
-
- <!-- Type-specific content -->
- {{ partial $template . }}
-
- <!-- Tags section -->
- {{ if .Params.tags }}
- <div class="border-t border-border pt-8">
- <h3 class="text-lg font-semibold text-accent mb-4">{{ i18n "tags" }}</h3>
- <div class="flex flex-wrap gap-2">
- {{ $lang := .Lang }}
- {{ range .Params.tags }}
- {{ $tagUrl := printf "/tags/%s/" (. | urlize) }}
- {{ if eq $lang "it" }}
- {{ $tagUrl = printf "/it/tags/%s/" (. | urlize) }}
- {{ end }}
- <a
- href="{{ $tagUrl }}"
- class="inline-flex items-center px-3 py-1 border border-border/30 rounded hover:border-accent/50 hover:text-accent transition-colors text-sm"
- >
- {{ . }}
- </a>
- {{ end }}
- </div>
- </div>
- {{ end }}
-
- <!-- Bottom article navigation -->
- {{ partial "article-nav.html" (dict "page" . "variant" "bottom") }}
- </div>
-
- <!-- Sidebar -->
- {{ partial "sidebar.html" . }}
- </div>
-</article>
-{{ end }}
+++ /dev/null
-{{ define "main" }}
-<section class="min-h-[calc(100vh-200px)] flex items-center justify-center px-4 py-12">
- <div class="max-w-4xl w-full">
- <!-- Profile Image (optional) -->
- {{ if .Params.image }}
- <div class="flex justify-center mb-8">
- <img
- src="{{ .Params.image }}"
- alt="{{ .Site.Params.author }}"
- loading="lazy"
- class="w-32 h-32 md:w-48 md:h-48 rounded-full border-4 border-accent object-cover"
- >
- </div>
- {{ end }}
-
- <!-- Author Name -->
-<!-- <h1 class="text-4xl md:text-5xl font-bold text-accent text-center mb-4">
- {{ .Site.Params.author }}
- </h1>
- -->
- <!-- Bio (from page content) -->
- <div class="text-xl text-text-dim text-center mb-8 leading-relaxed prose prose-invert max-w-none">
- {{ .Content }}
- </div>
-
- <!-- Call-to-Action Buttons -->
- <div class="flex flex-col sm:flex-row gap-4 justify-center">
- {{ $lang := .Lang }}
- {{ $articlesUrl := "/articles/" }}
- {{ $contactUrl := "/is/here/" }}
- {{ if eq $lang "it" }}
- {{ $articlesUrl = "/it/articles/" }}
- {{ $contactUrl = "/it/is/here/" }}
- {{ end }}
-
- <!-- Articles Button (Primary) -->
- <a
- href="{{ $articlesUrl }}"
- class="btn btn-primary btn-lg"
- >
- {{ i18n "articles" }}
- </a>
-
- <!-- Contact Button (Outline) -->
- <a
- href="{{ $contactUrl }}"
- class="btn btn-outline btn-lg"
- >
- {{ i18n "contact" }}
- </a>
- </div>
-
- <!-- Tag Cloud Section -->
- <div class="mt-16 pt-8 border-t border-border">
- {{ partial "tag-cloud.html" (dict "page" . "showCount" true "wrapInWidget" false) }}
- </div>
- </div>
-</section>
-{{ end }}
+++ /dev/null
-{{- $articles := where .Site.RegularPages "Section" "articles" -}}
-{{- $articles = $articles.ByDate.Reverse -}}
-[
- {{- range $index, $article := $articles -}}
- {
- "title": {{ $article.Title | jsonify }},
- "url": {{ $article.Permalink | jsonify }},
- "date": {{ $article.Date.Format "Jan 02, 2006" | jsonify }},
- "summary": {{ substr ($article.Summary | plainify) 0 160 | jsonify }}
- }
- {{- if ne (add $index 1) (len $articles) }},{{ end }}
- {{- end }}
-]
+++ /dev/null
-{{ define "main" }}
-<div class="mx-auto px-4 py-12">
- <div class="grid md:grid-cols-3 gap-8 max-w-7xl mx-auto content-grid">
- <!-- Article section -->
- <div class="md:col-span-2">
- <!-- Breadcrumb -->
- {{ partial "breadcrumb.html" . }}
-
- <!-- Article header -->
- {{ partial "article-header.html" . }}
-
- <!-- Article content -->
- <div class="prose prose-invert max-w-none mb-12">
- {{ .Content }}
- </div>
- </div>
-
- <!-- Sidebar -->
- {{ partial "sidebar.html" . }}
- </div>
-</div>
-{{ end }}
+++ /dev/null
-{{ $articleType := .Params.type | default "life" }}
-{{ $typeConfig := .Site.Params.articleTypes }}
-{{ $typeData := index $typeConfig $articleType }}
-{{ $excerpt := .Description | default .Summary }}
-
-{{ $imageURL := "" }}
-{{ $useDefaultThumbnail := false }}
-{{ if .Params.image }}
- {{ $resource := .Resources.GetMatch .Params.image }}
- {{ if $resource }}
- {{ $imageURL = $resource.RelPermalink }}
- {{ else }}
- {{ $imageURL = .Params.image }}
- {{ end }}
-{{ else }}
- {{ $useDefaultThumbnail = true }}
-{{ end }}
-
-<article class="card group bg-bg">
- <!-- Thumbnail -->
- {{ if or $imageURL $useDefaultThumbnail }}
- <a href="{{ .RelPermalink }}" class="block overflow-hidden bg-surface/50 relative" tabindex="-1">
- {{ if $useDefaultThumbnail }}
- <picture>
- <source srcset="/images/default_thumbnail_light.png" media="(prefers-color-scheme: light)" />
- <img
- src="/images/default_thumbnail_dark.png"
- alt="{{ .Title }}"
- class="card-image group-hover:scale-105 transition-transform duration-200"
- loading="lazy"
- />
- </picture>
- {{ else }}
- <img
- src="{{ $imageURL }}"
- alt="{{ .Title }}"
- class="card-image group-hover:scale-105 transition-transform duration-200"
- loading="lazy"
- />
- {{ end }}
- <!-- Type badge pill overlay -->
- {{ if $typeData }}
- <div
- class="absolute top-3 right-3 px-3 py-1.5 rounded-full text-xs font-semibold transition-opacity"
- style="background-color: var(--type-{{ $articleType }}); color: var(--type-{{ $articleType }}-text);"
- >
- {{ i18n $articleType }}
- </div>
- {{ end }}
- </a>
- {{ end }}
-
- <!-- Content -->
- <div class="card-body">
- <!-- Pinned badge -->
- {{ if .Params.pinned }}
- <div class="inline-flex items-center gap-1 px-2 py-1 rounded text-sm font-semibold" style="color: {{ .Site.Params.secondaryAccent }};">
- 📌 PINNED
- </div>
- {{ end }}
-
- <!-- Title -->
- <h3 class="text-xl font-semibold">
- <a href="{{ .RelPermalink }}" class="group-hover:text-accent transition-colors">
- {{ .Title }}
- </a>
- </h3>
-
- <!-- Metadata -->
- <div class="flex flex-wrap items-center gap-3 text-sm text-text-dim">
- <time datetime="{{ .PublishDate.Format "2006-01-02T15:04:05Z07:00" }}">
- {{ .PublishDate.Format "Jan 2, 2006" }}
- </time>
- </div>
-
- <!-- Excerpt -->
- {{ if $excerpt }}
- <p class="text-text-dim text-sm line-clamp-3 leading-relaxed">
- {{ $excerpt | plainify }}
- </p>
- {{ end }}
-
- <!-- CTA Button -->
- <a
- href="{{ .RelPermalink }}"
- class="btn btn-sm mt-2"
- >
- {{ i18n "readMore" }}
- <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
- </a>
- </div>
-</article>
+++ /dev/null
-{{ $articleType := .Params.type | default "life" }}
-{{ $typeConfig := .Site.Params.articleTypes }}
-{{ $typeData := index $typeConfig $articleType }}
-{{ $hasType := .Params.type }}
-
-<div class="mb-8 pb-8 border-b border-border">
- <!-- Title with accent corner -->
- <div class="relative mb-6">
- <!-- Vertical accent line (left side) -->
- {{ if and $typeData $hasType }}
- <div
- class="absolute left-0 top-0 bottom-0 w-1 rounded-full"
- style="background-color: var(--type-{{ $articleType }});"
- ></div>
- {{ end }}
-
- <!-- Horizontal accent line (bottom, 50% width with fade) -->
- {{ if and $typeData $hasType }}
- <div
- class="absolute left-0 bottom-0 h-1 rounded-full"
- style="width: 50%; background: linear-gradient(to right, var(--type-{{ $articleType }}), var(--type-{{ $articleType }}) 0%, transparent 100%);"
- ></div>
- {{ end }}
-
- <h1 class="text-4xl md:text-5xl font-bold text-accent pl-6 pt-2">
- {{ .Title }}
- </h1>
- </div>
-
- <!-- Metadata -->
- <div class="flex flex-wrap items-center gap-4 text-sm text-text-dim">
- <!-- Publish date -->
- {{ if .PublishDate }}
- <div class="flex items-center gap-1">
- <i data-feather="calendar" class="w-4 h-4"></i>
- <time datetime="{{ .PublishDate.Format "2006-01-02T15:04:05Z07:00" }}">
- {{ .PublishDate.Format "Jan 2, 2006" }}
- </time>
- </div>
- {{ end }}
-
- <!-- Update date if different -->
- {{ if .Lastmod }}
- {{ $lastmodDate := .Lastmod.Format "2006-01-02" }}
- {{ $pubDate := .PublishDate.Format "2006-01-02" }}
- {{ if ne $lastmodDate $pubDate }}
- <div class="flex items-center gap-1">
- <i data-feather="edit-2" class="w-4 h-4"></i>
- <time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" }}">
- {{ .Lastmod.Format "Jan 2, 2006" }}
- </time>
- </div>
- {{ end }}
- {{ end }}
-
- <!-- Reading time -->
- {{ if .Site.Params.readingTime }}
- <div class="flex items-center gap-1">
- <i data-feather="clock" class="w-4 h-4"></i>
- <span>{{ .ReadingTime }} {{ i18n "min" }} {{ i18n "readingTime" }}</span>
- </div>
- {{ end }}
-
- <!-- Type badge -->
- {{ if and $typeData $hasType }}
- <span class="inline-flex items-center px-2.5 py-1 rounded text-sm font-mono font-semibold whitespace-nowrap transition-all duration-200" style="background-color: var(--type-{{ $articleType }}); border: 1px solid var(--type-{{ $articleType }}); color: var(--type-{{ $articleType }}-text);">
- {{ i18n $articleType }}
- </span>
- {{ end }}
- </div>
-</div>
+++ /dev/null
-{{/* Handle both calling conventions: dict with .Page/.side or direct page */}}
-{{ $page := . }}
-{{ $side := "left" }}
-
-{{ if reflect.IsMap . }}
- {{ $page = .Page }}
- {{ $side = .side | default "left" }}
-{{ end }}
-
-{{ $articleType := $page.Params.type | default "life" }}
-{{ $typeConfig := $page.Site.Params.articleTypes }}
-{{ $typeData := index $typeConfig $articleType }}
-{{ $excerpt := $page.Description | default $page.Summary }}
-
-{{ $imageURL := "" }}
-{{ $useDefaultThumbnail := false }}
-{{ if $page.Params.image }}
- {{ $resource := $page.Resources.GetMatch $page.Params.image }}
- {{ if $resource }}
- {{ $imageURL = $resource.RelPermalink }}
- {{ else }}
- {{ $imageURL = $page.Params.image }}
- {{ end }}
-{{ else }}
- {{ $useDefaultThumbnail = true }}
-{{ end }}
-
-<li class="timeline-item timeline-item--{{ $side }}" style="--type-color: var(--type-{{ $articleType }});">
- {{/* Decorative connector line */}}
- <div class="timeline-connector" aria-hidden="true"
- style="background-color: var(--type-{{ $articleType }});"></div>
-
- {{/* Node on spine */}}
- <div class="timeline-node" aria-hidden="true"
- style="background-color: var(--type-{{ $articleType }}); box-shadow: 0 0 10px color-mix(in srgb, var(--type-{{ $articleType }}) 50%, transparent);"></div>
-
- <article class="timeline-card group"
- style="border-color: color-mix(in srgb, var(--type-{{ $articleType }}) 25%, transparent);
- box-shadow: 0 0 18px color-mix(in srgb, var(--type-{{ $articleType }}) 10%, transparent);">
-
- {{/* Thumbnail */}}
- <a href="{{ $page.RelPermalink }}" class="timeline-thumb" tabindex="-1" aria-hidden="true">
- {{ if $useDefaultThumbnail }}
- <picture>
- <source srcset="/images/default_thumbnail_light.png" media="(prefers-color-scheme: light)" />
- <img src="/images/default_thumbnail_dark.png"
- alt=""
- loading="lazy" />
- </picture>
- {{ else }}
- <img src="{{ $imageURL }}"
- alt=""
- loading="lazy" />
- {{ end }}
- </a>
-
- {{/* Text body */}}
- <div class="timeline-body">
-
- {{/* Pinned badge */}}
- {{ if $page.Params.pinned }}
- <div class="timeline-pinned" style="color: {{ $page.Site.Params.secondaryAccent }};">
- 📌 {{ i18n "pinned" | default "PINNED" }}
- </div>
- {{ end }}
-
- {{/* Type + date meta row */}}
- <div class="timeline-meta" style="color: var(--type-{{ $articleType }});">
- {{ i18n $articleType | upper }}
- <span class="timeline-meta-sep" aria-hidden="true">·</span>
- <time class="timeline-date"
- datetime="{{ $page.PublishDate.Format "2006-01-02T15:04:05Z07:00" }}">
- {{ $page.PublishDate.Format "Jan 2, 2006" }}
- </time>
- </div>
-
- {{/* Title */}}
- <h3 class="timeline-title">
- <a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a>
- </h3>
-
- {{/* Excerpt */}}
- {{ if $excerpt }}
- <p class="timeline-excerpt">{{ $excerpt | plainify }}</p>
- {{ end }}
-
- {{/* CTA */}}
- <a href="{{ $page.RelPermalink }}" class="btn btn-sm mt-auto">
- {{ i18n "readMore" }}
- <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
- </a>
-
- </div>
- </article>
-</li>
+++ /dev/null
-{{ $page := .page }}
-{{ $variant := .variant | default "bottom" }}
-{{ $prev := $page.PrevInSection }}
-{{ $next := $page.NextInSection }}
-
-{{/* Shell prompt command varies by position */}}
-{{ $cmd := "ls ../" }}
-{{ if eq $variant "top" }}
- {{ $cmd = "cd" }}
-{{ end }}
-
-<nav class="article-nav {{ if eq $variant "bottom" }}mt-8{{ else }}mb-8{{ end }}"
- aria-label="Article navigation">
- <p class="article-nav-prompt" aria-hidden="true">
- [visitor@danix.xyz articles]$ {{ $cmd }}
- </p>
- <div class="article-nav-links">
- {{/* ---- Previous (left side) ---- */}}
- {{ if $prev }}
- <a href="{{ $prev.Permalink }}"
- class="article-nav-link truncate md:max-w-[45%] text-left"
- rel="prev"
- title="{{ $prev.Title }}">
- ◄ {{ $prev.Title }}
- </a>
- {{ else }}
- <span class="article-nav-placeholder text-left" aria-label="Beginning of articles">
- ◄ (beginning)
- </span>
- {{ end }}
-
- {{/* ---- Next (right side) ---- */}}
- {{ if $next }}
- <a href="{{ $next.Permalink }}"
- class="article-nav-link truncate md:max-w-[45%] text-right"
- rel="next"
- title="{{ $next.Title }}">
- {{ $next.Title }} ►
- </a>
- {{ else }}
- <span class="article-nav-placeholder text-right" aria-label="End of articles">
- (end) ►
- </span>
- {{ end }}
- </div>
-</nav>
+++ /dev/null
-<div class="prose prose-invert max-w-none mb-12">
- {{ .Content }}
-</div>
+++ /dev/null
-<div class="mb-8 p-6 bg-surface/30 border border-accent/30 rounded-lg">
- <a
- href="{{ .Params.external_url }}"
- target="_blank"
- rel="noopener noreferrer"
- class="inline-flex items-center gap-2 px-6 py-3 bg-accent text-white rounded font-semibold hover:opacity-90 transition-opacity"
- >
- {{ .Params.link_title | default (i18n "readMore") }}
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
- </svg>
- </a>
-</div>
-
-<div class="prose prose-invert max-w-none mb-12">
- {{ .Content }}
-</div>
+++ /dev/null
-{{ if .Params.featured_image }}
-<figure class="mb-8">
- <img
- src="{{ .Params.featured_image }}"
- alt="{{ .Title }}"
- loading="lazy"
- class="w-full h-auto rounded-lg border border-border/30"
- />
- {{ if .Params.featured_image_caption }}
- <figcaption class="bg-surface/30 p-4 text-sm text-text-dim rounded-b-lg">
- {{ .Params.featured_image_caption }}
- </figcaption>
- {{ end }}
-</figure>
-{{ end }}
-
-<div class="prose prose-invert max-w-none mb-12">
- {{ .Content }}
-</div>
+++ /dev/null
-<blockquote class="mb-8 pl-6 border-l-4 border-[--type-quote] italic text-2xl text-text">
- "{{ .Params.quote_text }}"
-</blockquote>
-
-{{ if .Params.quote_author }}
-<div class="text-right text-text-dim mb-12">
- — {{ .Params.quote_author }}
-</div>
-{{ end }}
-
-{{ if .Content }}
-<div class="prose prose-invert max-w-none">
- {{ .Content }}
-</div>
-{{ end }}
+++ /dev/null
-<div class="prose prose-invert max-w-none mb-12">
- {{ .Content }}
-</div>
+++ /dev/null
-<div
- x-data="{ visible: false }"
- @scroll.window="visible = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) >= 0.33"
->
- <button
- x-show="visible"
- x-cloak
- x-transition:enter="transition ease-out duration-300"
- x-transition:enter-start="opacity-0 translate-y-4"
- x-transition:enter-end="opacity-100 translate-y-0"
- x-transition:leave="transition ease-in duration-200"
- x-transition:leave-start="opacity-100 translate-y-0"
- x-transition:leave-end="opacity-0 translate-y-4"
- class="back-to-top"
- aria-label="{{ i18n "back_to_top" | default "Back to top" }}"
- type="button"
- @click="window.scrollTo({ top: 0, behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' })"
- >
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
- <polyline points="18 15 12 9 6 15"></polyline>
- </svg>
- </button>
-</div>
+++ /dev/null
-{{- $homeURL := absURL "/" -}}
-{{- $homeName := i18n "home" -}}
-{{- if eq .Lang "it" -}}
- {{- $homeURL = absURL "/it/" -}}
-{{- end -}}
-<script type="application/ld+json">
-{
- "@context": "https://schema.org",
- "@type": "BreadcrumbList",
- "itemListElement": [
- {
- "@type": "ListItem",
- "position": 1,
- "name": "{{ $homeName }}",
- "item": "{{ $homeURL }}"
- }
- {{- $pos := 1 -}}
- {{- range .Ancestors.Reverse -}}
- {{- if ne .Kind "home" -}}
- {{- $pos = add $pos 1 -}}
- ,{
- "@type": "ListItem",
- "position": {{ $pos }},
- "name": "{{ .Title }}",
- "item": "{{ .Permalink }}"
- }
- {{- end -}}
- {{- end -}}
- ,{
- "@type": "ListItem",
- "position": {{ add $pos 1 }},
- "name": "{{ .Title }}"
- }
- ]
-}
-</script>
+++ /dev/null
-{{ $homeLink := "/" }}
-{{ if eq .Lang "it" }}
- {{ $homeLink = "/it/" }}
-{{ end }}
-
-<nav class="breadcrumb mb-6" aria-label="Breadcrumb">
- <a href="{{ $homeLink }}">{{ i18n "home" }}</a>
- {{ range .Ancestors.Reverse }}
- {{ if ne .Kind "home" }}
- <span class="breadcrumb-separator">/</span>
- <a href="{{ .RelPermalink }}">{{ .Title }}</a>
- {{ end }}
- {{ end }}
- <span class="breadcrumb-separator">/</span>
- <span>{{ .Title }}</span>
-</nav>
+++ /dev/null
-{{- $quotes := .Site.Data.quotes.quotes -}}
-
-<footer class="mt-16 frosted-bar border-t py-12 relative z-20">
- <div class="container mx-auto px-4">
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
-
- <!-- Column 1: Fortune Cookie -->
- <div>
- <p class="font-mono text-xs text-text-dim mb-2">$ fortune</p>
- <div id="fortune-quote" aria-live="polite" data-quotes='{{ $quotes | jsonify }}'>
- <blockquote>
- <p class="fortune-text font-mono text-sm text-text italic leading-relaxed">
- "{{ (index $quotes 0).text }}"
- </p>
- <cite class="fortune-author font-mono text-xs text-text-dim not-italic mt-2 block text-right">
- — {{ (index $quotes 0).author }}
- </cite>
- </blockquote>
- </div>
- </div>
- <hr class="md:hidden border-border my-6" />
-
- <!-- Column 2: Stack & Feature Badges -->
- <div>
- <p class="text-text-dim font-mono text-xs mb-1">{{ i18n "footer_built_with" }}</p>
- <div class="flex flex-wrap gap-1.5 mb-3">
- <span class="badge-footer-accent">Hugo</span>
- <span class="badge-footer-accent">Tailwind CSS</span>
- <span class="badge-footer-accent">Alpine.js</span>
- <span class="badge-footer-accent">HTML5</span>
- <span class="badge-footer-accent">CSS3</span>
- <span class="badge-footer-accent">JavaScript</span>
- <span class="badge-footer-accent">Claude Code</span>
- </div>
-
- <p class="text-text-dim font-mono text-xs mb-1">{{ i18n "footer_features" }}</p>
- <div class="flex flex-wrap gap-1.5">
- <a href="{{ .Site.LanguagePrefix }}/is/a11y-compliant/" class="badge-footer-accent2 hover:opacity-80 transition-opacity">WCAG 2.1 AA</a>
- <span class="badge-footer-accent2">Open Source</span>
- <span class="badge-footer-accent2">Privacy Friendly</span>
- <span class="badge-footer-accent2">Keyboard Accessible</span>
- <span class="badge-footer-accent2">Screen Reader Compatible</span>
- </div>
- </div>
- <hr class="md:hidden border-border my-6" />
-
- <!-- Column 3: About (Terminal Readout) -->
- <div>
- <dl class="space-y-1">
- <div class="flex gap-2">
- <dt class="text-text-dim font-mono text-xs w-20 shrink-0">{{ i18n "footer_about_name" }}:</dt>
- <dd class="text-text font-mono text-xs">{{ .Site.Params.author }}</dd>
- </div>
- <div class="flex gap-2">
- <dt class="text-text-dim font-mono text-xs w-20 shrink-0">{{ i18n "footer_about_role" }}:</dt>
- <dd class="text-text font-mono text-xs">{{ i18n "footer_about_role_value" }}</dd>
- </div>
- <div class="flex gap-2">
- <dt class="text-text-dim font-mono text-xs w-20 shrink-0">{{ i18n "footer_about_cert" }}:</dt>
- <dd class="text-accent2 font-mono text-xs font-semibold">eJPT</dd>
- </div>
- <div class="flex gap-2">
- <dt class="text-text-dim font-mono text-xs w-20 shrink-0">{{ i18n "footer_about_os" }}:</dt>
- <dd class="text-text font-mono text-xs">{{ i18n "footer_about_os_value" }} <span class="text-text-dim">({{ i18n "footer_about_os_year" }})</span></dd>
- </div>
- <div class="flex gap-2">
- <dt class="text-text-dim font-mono text-xs w-20 shrink-0">{{ i18n "footer_about_focus" }}:</dt>
- <dd class="text-text font-mono text-xs">{{ i18n "footer_about_focus_value" }}</dd>
- </div>
- </dl>
- </div>
- </div>
-
- <!-- Copyright Bar -->
- <div class="pt-8 border-t border-border text-center text-xs text-text-dim space-y-1">
- <p>
- {{ i18n "footer_made_with" }} <span aria-hidden="true">❤️</span><span class="sr-only">{{ i18n "footer_love" }}</span>,
- {{ i18n "footer_lack_of" }} <span aria-hidden="true">🛏️</span><span class="sr-only">{{ i18n "footer_sleep" }}</span>,
- {{ i18n "footer_lots_of" }} <span aria-hidden="true">☕</span><span class="sr-only">{{ i18n "footer_coffee" }}</span>
- {{ i18n "footer_by" }} <a href="{{ .Site.LanguagePrefix }}/is/" class="text-accent hover:text-accent2 transition-colors py-2 px-1">danix</a>
- </p>
- <p>© {{ now.Year }} {{ .Site.Params.author }}. {{ i18n "allRightsReserved" }}</p>
- </div>
- </div>
-
- <!-- Fortune.js: Pick a random quote on each page load -->
- {{- $fortuneJS := resources.Get "js/fortune.js" | minify -}}
- <script src="{{ $fortuneJS.RelPermalink }}"></script>
-</footer>
+++ /dev/null
-{{ define "form-components" }}
-
-<!-- ============================================
- FORM INPUT EXAMPLES
- ============================================ -->
-
-<section class="my-12 space-y-8">
- <h2>Form Components</h2>
-
- <!-- Basic Form Group -->
- <div class="form-group">
- <label for="input-text">Text Input</label>
- <input type="text" id="input-text" class="form-input" placeholder="Enter text...">
- </div>
-
- <!-- Form Group with Error -->
- <div class="form-group error">
- <label for="input-email">Email (with error)</label>
- <input type="email" id="input-email" class="form-input error" value="invalid-email">
- <div class="form-error">{{ i18n "form_invalid_email" }}</div>
- </div>
-
- <!-- Form Group with Help Text -->
- <div class="form-group">
- <label for="input-password" class="">Password</label>
- <input type="password" id="input-password" class="form-input" placeholder="••••••">
- <div class="form-group-help">{{ i18n "form_password_help" | default "Must be at least 8 characters" }}</div>
- </div>
-
- <!-- Disabled Input -->
- <div class="form-group">
- <label for="input-disabled">Disabled Input</label>
- <input type="text" id="input-disabled" class="form-input" value="Cannot edit" disabled>
- </div>
-
- <!-- ============================================
- TEXTAREA EXAMPLES
- ============================================ -->
-
- <div class="form-group">
- <label for="textarea-message">Message</label>
- <textarea id="textarea-message" class="form-textarea" placeholder="Enter your message..."></textarea>
- </div>
-
- <!-- ============================================
- SELECT EXAMPLES
- ============================================ -->
-
- <div class="form-group">
- <label for="select-option">Select an option</label>
- <select id="select-option" class="form-select">
- <option>Choose...</option>
- <option>Option 1</option>
- <option>Option 2</option>
- <option>Option 3</option>
- </select>
- </div>
-
- <!-- ============================================
- CHECKBOX EXAMPLES
- ============================================ -->
-
- <div class="form-group">
- <label for="agree-terms" class="flex items-center gap-3 cursor-pointer">
- <input type="checkbox" id="agree-terms" class="form-checkbox">
- <span>{{ i18n "form_agree_terms" | default "I agree to the terms" }}</span>
- </label>
- </div>
-
- <!-- Multiple Checkboxes -->
- <div class="form-group space-y-2">
- <p class="font-semibold">{{ i18n "form_select_interests" | default "Select your interests" }}</p>
- <label for="interest-tech" class="flex items-center gap-3 cursor-pointer">
- <input type="checkbox" id="interest-tech" class="form-checkbox" name="interests">
- <span>{{ i18n "form_interest_tech" | default "Technology" }}</span>
- </label>
- <label for="interest-design" class="flex items-center gap-3 cursor-pointer">
- <input type="checkbox" id="interest-design" class="form-checkbox" name="interests">
- <span>{{ i18n "form_interest_design" | default "Design" }}</span>
- </label>
- </div>
-
- <!-- ============================================
- RADIO BUTTON EXAMPLES
- ============================================ -->
-
- <div class="form-group space-y-2">
- <p class="font-semibold">{{ i18n "form_select_preference" | default "Select a preference" }}</p>
- <label for="preference-option-a" class="flex items-center gap-3 cursor-pointer">
- <input type="radio" id="preference-option-a" name="preference" class="form-radio">
- <span>{{ i18n "form_option_a" | default "Option A" }}</span>
- </label>
- <label for="preference-option-b" class="flex items-center gap-3 cursor-pointer">
- <input type="radio" id="preference-option-b" name="preference" class="form-radio">
- <span>{{ i18n "form_option_b" | default "Option B" }}</span>
- </label>
- </div>
-
- <!-- ============================================
- FORM ROWS (MULTI-COLUMN)
- ============================================ -->
-
- <div class="form-row">
- <div class="form-group">
- <label for="first-name">{{ i18n "form_first_name" | default "First Name" }}</label>
- <input type="text" id="first-name" class="form-input" placeholder="John">
- </div>
- <div class="form-group">
- <label for="last-name">{{ i18n "form_last_name" | default "Last Name" }}</label>
- <input type="text" id="last-name" class="form-input" placeholder="Doe">
- </div>
- </div>
-
- <!-- ============================================
- INLINE FORMS
- ============================================ -->
-
- <div class="form-inline">
- <div class="form-group">
- <label for="search-input">{{ i18n "form_search" | default "Search" }}</label>
- <input type="text" id="search-input" class="form-input" placeholder="Type to search...">
- </div>
- <button class="btn btn-primary">{{ i18n "form_search_btn" | default "Search" }}</button>
- </div>
-
- <!-- ============================================
- MODALS (DEMO BUTTONS)
- ============================================ -->
-
- <div class="space-y-3 mt-8">
- <h3>Modal Examples</h3>
- <button class="btn btn-primary" @click="showAlertModal = true">{{ i18n "form_open_alert" | default "Open Alert Modal" }}</button>
- <button class="btn btn-secondary" @click="showConfirmModal = true">{{ i18n "form_open_confirm" | default "Open Confirm Modal" }}</button>
- <button class="btn btn-outline" @click="showContentModal = true">{{ i18n "form_open_content" | default "Open Content Modal" }}</button>
- </div>
-
- <!-- ============================================
- NOTIFICATIONS (DEMO BUTTONS)
- ============================================ -->
-
- <div class="space-y-3 mt-8">
- <h3>Notifications</h3>
- <button class="btn btn-primary btn-sm" @click="showToast('success')">Success Toast</button>
- <button class="btn btn-secondary btn-sm" @click="showToast('error')">Error Toast</button>
- <button class="btn btn-sm" style="background-color: #3b82f6; color: white;" @click="showToast('info')">Info Toast</button>
- <button class="btn btn-sm" style="background-color: #f59e0b; color: white;" @click="showToast('warning')">Warning Toast</button>
- </div>
-
-</section>
-
-<!-- ============================================
- ALERT MODAL
- ============================================ -->
-
-<div class="modal" :class="{ active: showAlertModal }" x-show="showAlertModal">
- <div class="modal-backdrop" @click="showAlertModal = false" aria-hidden="true"></div>
- <div class="modal-content modal-sm" role="dialog" aria-labelledby="alert-modal-title" aria-modal="true" @x-show.transition.in="createFocusTrap($el)">
- <div class="modal-header">
- <h3 class="modal-title" id="alert-modal-title">{{ i18n "form_alert_title" | default "Alert" }}</h3>
- <div class="modal-close" @click="showAlertModal = false" aria-label="{{ i18n "closeMenu" }}"></div>
- </div>
- <div class="modal-body">
- <p>{{ i18n "form_alert_message" | default "This is an alert modal. Click OK to dismiss." }}</p>
- </div>
- <div class="modal-footer">
- <button class="btn btn-primary" @click="showAlertModal = false">{{ i18n "form_ok" | default "OK" }}</button>
- </div>
- </div>
-</div>
-
-<!-- ============================================
- CONFIRM MODAL
- ============================================ -->
-
-<div class="modal" :class="{ active: showConfirmModal }" x-show="showConfirmModal">
- <div class="modal-backdrop" @click="showConfirmModal = false" aria-hidden="true"></div>
- <div class="modal-content modal-sm" role="dialog" aria-labelledby="confirm-modal-title" aria-modal="true" @x-show.transition.in="createFocusTrap($el)">
- <div class="modal-header">
- <h3 class="modal-title" id="confirm-modal-title">{{ i18n "form_confirm_title" | default "Confirm Action" }}</h3>
- <div class="modal-close" @click="showConfirmModal = false" aria-label="{{ i18n "closeMenu" }}"></div>
- </div>
- <div class="modal-body">
- <p>{{ i18n "form_confirm_message" | default "Are you sure you want to continue?" }}</p>
- </div>
- <div class="modal-footer">
- <button class="btn btn-outline" @click="showConfirmModal = false">{{ i18n "form_cancel" | default "Cancel" }}</button>
- <button class="btn btn-primary" @click="handleConfirm()">{{ i18n "form_confirm" | default "Confirm" }}</button>
- </div>
- </div>
-</div>
-
-<!-- ============================================
- CONTENT MODAL
- ============================================ -->
-
-<div class="modal" :class="{ active: showContentModal }" x-show="showContentModal">
- <div class="modal-backdrop" @click="showContentModal = false" aria-hidden="true"></div>
- <div class="modal-content modal-md" role="dialog" aria-labelledby="content-modal-title" aria-modal="true" @x-show.transition.in="createFocusTrap($el)">
- <div class="modal-header">
- <h3 class="modal-title" id="content-modal-title">{{ i18n "form_content_title" | default "Modal with Content" }}</h3>
- <div class="modal-close" @click="showContentModal = false" aria-label="{{ i18n "closeMenu" }}"></div>
- </div>
- <div class="modal-body">
- <p>{{ i18n "form_content_message" | default "This modal contains detailed content. You can add forms, lists, or any HTML here." }}</p>
- <div class="mt-4">
- <div class="form-group">
- <label for="modal-input">Input in Modal</label>
- <input type="text" id="modal-input" class="form-input" placeholder="Type here...">
- </div>
- </div>
- </div>
- <div class="modal-footer">
- <button class="btn btn-outline" @click="showContentModal = false">{{ i18n "form_close" | default "Close" }}</button>
- <button class="btn btn-primary">{{ i18n "form_save" | default "Save" }}</button>
- </div>
- </div>
-</div>
-
-{{ end }}
+++ /dev/null
-<!-- Mobile menu overlay (Alpine.js controlled) -->
-<div
- x-cloak
- x-data="{ menuOpen: false }"
- @toggle-menu.window="menuOpen = !menuOpen"
- @keydown.escape.window="menuOpen = false"
- :class="{ 'opacity-0 invisible': !menuOpen, 'opacity-100 visible': menuOpen }"
- class="fixed inset-0 bg-black/50 backdrop-blur transition-all duration-300 z-40"
- :aria-hidden="!menuOpen"
- @click="if ($event.target === $el) menuOpen = false"
->
- <div
- class="fixed top-0 right-0 h-screen w-full max-w-sm bg-bg border-l border-border overflow-y-auto transform transition-transform duration-300 z-50"
- :class="{ 'translate-x-full': !menuOpen, 'translate-x-0': menuOpen }"
- >
- <!-- Close button -->
- <div class="flex items-center justify-between p-6 border-b border-border">
- <span class="font-bold text-lg text-accent font-oxanium">Menu</span>
- <button
- @click="menuOpen = false"
- aria-label="{{ i18n "closeMenu" }}"
- class="p-2 hover:bg-surface rounded transition-colors"
- >
- <i data-feather="x" class="w-5 h-5"></i>
- </button>
- </div>
-
- <!-- Menu items -->
- <nav class="p-6" role="navigation" aria-label="{{ i18n "mainMenu" }}">
- {{ $currentPath := strings.TrimSuffix "/" .RelPermalink }}
- {{ range .Site.Menus.main }}
- {{ $menuPath := strings.TrimSuffix "/" .URL }}
- {{ $isActive := eq $menuPath $currentPath }}
- <a
- href="{{ .URL }}"
- @click="menuOpen = false"
- class="block py-4 text-lg font-medium transition-colors border-b border-border/30 {{ if $isActive }}text-accent font-bold{{ else }}hover:text-accent{{ end }}"
- {{ if $isActive }}aria-current="page"{{ end }}
- >
- {{ i18n .Name }}
- </a>
- {{ end }}
- </nav>
-
- <!-- Mobile search bar -->
- <div class="p-6 border-b border-border" x-data="mobileSearch()">
- <label for="search-input-mobile" class="sr-only">
- {{ i18n "searchPlaceholder" }}
- </label>
- <input
- id="search-input-mobile"
- type="text"
- :value="searchQuery"
- @input="filterArticles($el.value); ensureIndexLoaded()"
- placeholder="{{ i18n "searchPlaceholder" }}"
- class="w-full px-4 py-2 border-2 border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent bg-bg text-text text-sm"
- aria-describedby="mobile-search-results"
- />
-
- <!-- Mobile search results -->
- <div id="mobile-search-results" class="mt-3 space-y-2" x-show="filteredArticles.length > 0" role="region" aria-live="polite">
- <template x-for="article in filteredArticles" :key="article.url">
- <div class="p-3 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 transition-colors rounded text-sm">
- <a :href="article.url" @click="menuOpen = false" class="block focus:outline-none focus:ring-2 focus:ring-accent rounded px-1 py-1">
- <h4 class="font-bold text-accent" x-text="article.title"></h4>
- <p class="text-xs text-text-dim mt-0.5" x-text="article.date"></p>
- </a>
- </div>
- </template>
- </div>
-
- <!-- Empty state -->
- <div
- x-show="searchQuery && filteredArticles.length === 0"
- class="mt-3 text-sm text-text-dim"
- role="status"
- >
- {{ i18n "noSearchResults" }}
- </div>
- </div>
-
- <!-- Language switcher -->
- <div class="p-6">
- <div class="text-sm text-text-dim mb-3">{{ i18n "language" }}</div>
- <div class="flex gap-2">
- {{ $currentLang := .Page.Language }}
- {{ $currentPath := .RelPermalink }}
- {{ range .Site.Languages }}
- {{ $langCode := .Lang }}
- {{ $langName := .LanguageName }}
- {{ $current := eq $langCode $currentLang }}
- <!-- Build the translated URL by replacing language prefix -->
- {{ $url := $currentPath }}
- {{ if eq $langCode "en" }}
- {{ if hasPrefix $currentPath "/it/" }}
- {{ $url = strings.TrimPrefix "/it" $currentPath }}
- {{ end }}
- {{ else }}
- {{ if not (hasPrefix $currentPath "/it/") }}
- {{ $url = printf "/it%s" $currentPath }}
- {{ end }}
- {{ end }}
- <a
- href="{{ $url }}"
- @click="menuOpen = false"
- class="flex-1 py-2 px-3 text-center rounded transition-colors {{ if $current }}bg-accent text-white{{ else }}bg-surface hover:bg-surface/80{{ end }}"
- >
- {{ $langName }}
- </a>
- {{ end }}
- </div>
- </div>
-
- </div>
-</div>
-
-<script>
- // Close menu before page navigation to prevent flicker
- window.addEventListener('beforeunload', () => {
- const overlay = document.querySelector('[x-data*="menuOpen"]');
- if (overlay && overlay.__x) {
- overlay.__x.$data.menuOpen = false;
- }
- });
-</script>
+++ /dev/null
-{{/* description: per-page excerpt wins over site-wide description */}}
-{{ $description := .Site.Language.Params.siteDescription }}
-{{ with .Params.excerpt }}{{ $description = . }}{{ end }}
-
-{{/* og:type: "article" only for single content pages that have a date */}}
-{{ $ogType := "website" }}
-{{ if and (eq .Kind "page") .Date }}{{ $ogType = "article" }}{{ end }}
-
-{{/* og:image: page image wins; fall back to lamp for homepage, dark thumbnail for articles */}}
-{{ $defaultImage := "images/default_thumbnail_dark.png" }}
-{{ if .IsHome }}{{ $defaultImage = "images/lampD.png" }}{{ end }}
-{{ $ogImage := printf "%s%s" .Site.BaseURL $defaultImage }}
-{{ with .Params.image }}{{ $ogImage = printf "%s%s" $.Site.BaseURL (strings.TrimLeft "/" .) }}{{ end }}
-
-{{/* author: page-level param wins; fall back to site param */}}
-{{ $author := .Site.Params.author }}
-{{ with .Params.author }}{{ $author = . }}{{ end }}
-
-<meta name="description" content="{{ $description }}">
-
-<meta property="og:title" content="{{ .Title }}">
-<meta property="og:description" content="{{ $description }}">
-<meta property="og:type" content="{{ $ogType }}">
-<meta property="og:url" content="{{ .Permalink }}">
-<meta property="og:site_name" content="{{ .Site.Title }}">
-<meta property="og:locale" content="{{ .Site.Language.Params.locale }}">
-<meta property="og:image" content="{{ $ogImage }}">
-
-{{ if eq $ogType "article" }}
-<meta property="article:published_time" content="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">
-<meta property="article:author" content="{{ $author }}">
-{{ end }}
-
-<meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:title" content="{{ .Title }}">
-<meta name="twitter:description" content="{{ $description }}">
-<meta name="twitter:image" content="{{ $ogImage }}">
-{{ with .Site.Params.twitterHandle }}
-<meta name="twitter:site" content="@{{ . }}">
-{{ end }}
-
-{{/* SEO: Self-referencing canonical */}}
-<link rel="canonical" href="{{ .Permalink }}">
-
-{{/* SEO: hreflang alternates for all language variants */}}
-{{ range .AllTranslations }}
-<link rel="alternate" hreflang="{{ .Language.Lang }}" href="{{ .Permalink }}">
-{{ end }}
-{{/* x-default: EN version (served at root /) */}}
-{{ range .AllTranslations }}
- {{ if eq .Language.Lang "en" }}
-<link rel="alternate" hreflang="x-default" href="{{ .Permalink }}">
- {{ end }}
-{{ end }}
-
-{{/* Structured data: BreadcrumbList JSON-LD (single pages and named sections) */}}
-{{ if or (eq .Kind "page") (eq .Kind "section") }}{{ partial "breadcrumb-jsonld.html" . }}{{ end }}
+++ /dev/null
-<header class="fixed top-0 left-0 right-0 z-50 frosted-bar border-b">
- <nav class="container mx-auto px-4 py-4 flex items-center justify-between">
- <!-- Logo and Site Name -->
- {{ $homeLink := "/" }}
- {{ if eq .Lang "it" }}
- {{ $homeLink = "/it/" }}
- {{ end }}
- <a href="{{ $homeLink }}" class="flex items-center gap-2 hover:opacity-80 transition-opacity">
- <img src="/images/lampD.png" alt="Logo" style="width: 40px; height: 40px; max-width: none;" class="flex-shrink-0">
- <span class="hidden md:inline font-bold text-lg text-accent font-oxanium">danix.xyz</span>
- </a>
-
- <!-- Desktop menu (hidden on mobile) -->
- <div class="hidden md:flex items-center gap-8">
- {{ $currentPath := strings.TrimSuffix "/" .RelPermalink }}
- {{ range .Site.Menus.main }}
- {{ $menuPath := strings.TrimSuffix "/" .URL }}
- {{ $isActive := eq $menuPath $currentPath }}
- <a
- href="{{ .URL }}"
- class="text-sm transition-colors {{ if $isActive }}text-accent font-bold{{ else }}hover:text-accent{{ end }}"
- {{ if $isActive }}aria-current="page"{{ end }}
- >
- {{ i18n .Name }}
- </a>
- {{ end }}
- </div>
-
- <!-- Right side controls: Search, Language, Theme, Menu -->
- <div class="flex items-center gap-4 md:gap-6">
- <!-- Search button (desktop only) -->
- <button
- x-data
- @click="$dispatch('open-search')"
- aria-label="{{ i18n "searchArticles" }}"
- class="hidden md:flex p-2 rounded hover:bg-surface transition-colors focus:outline-none focus:ring-2 focus:ring-accent"
- >
- <i data-feather="search" class="w-5 h-5" aria-hidden="true"></i>
- </button>
-
- <!-- Language switcher (desktop) -->
- <div class="hidden md:flex gap-2">
- {{ $currentLang := .Page.Language }}
- {{ $currentPath := .RelPermalink }}
- {{ range .Site.Languages }}
- {{ $langCode := .Lang }}
- {{ $langName := .LanguageName }}
- {{ $current := eq $langCode $currentLang }}
- <!-- Build the translated URL by replacing language prefix -->
- {{ $url := $currentPath }}
- {{ if eq $langCode "en" }}
- {{ if hasPrefix $currentPath "/it/" }}
- {{ $url = strings.TrimPrefix "/it" $currentPath }}
- {{ end }}
- {{ else }}
- {{ if not (hasPrefix $currentPath "/it/") }}
- {{ $url = printf "/it%s" $currentPath }}
- {{ end }}
- {{ end }}
- <a
- href="{{ $url }}"
- class="px-2 py-1 text-sm rounded transition-colors {{ if $current }}bg-accent text-white{{ else }}hover:bg-surface{{ end }}"
- >
- {{ $langName }}
- </a>
- {{ end }}
- </div>
-
- <!-- Theme toggle button -->
- <button
- id="theme-toggle"
- aria-label="{{ i18n "toggleTheme" }}"
- class="p-2 rounded hover:bg-surface transition-colors"
- >
- <i id="theme-icon-sun" data-feather="sun" class="w-5 h-5" aria-hidden="true"></i>
- <i id="theme-icon-moon" data-feather="moon" class="w-5 h-5" aria-hidden="true"></i>
- </button>
-
- <!-- Hamburger menu button (mobile only) -->
- <button
- x-data
- @click="$dispatch('toggle-menu')"
- aria-label="{{ i18n "toggleMenu" }}"
- aria-controls="hamburger-menu"
- class="md:hidden p-2 rounded hover:bg-surface transition-colors"
- >
- <i data-feather="menu" class="w-5 h-5"></i>
- </button>
- </div>
- </nav>
-
- <!-- Mobile hamburger overlay menu -->
- {{ partial "hamburger-menu.html" . }}
-</header>
+++ /dev/null
-<!-- Desktop Search Modal (hidden on mobile, shown via Alpine) -->
-<div
- x-cloak
- x-data="searchOverlay()"
- @keydown.escape.window="handleEscape($event)"
- @open-search.window="open()"
- class="fixed inset-0 z-50"
- :class="{ 'flex items-center justify-center': isOpen, 'hidden': !isOpen }"
- x-show="isOpen"
->
- <!-- Overlay backdrop -->
- <div
- class="absolute inset-0 bg-black/50"
- @click="close()"
- aria-hidden="true"
- ></div>
-
- <!-- Modal content -->
- <div
- class="relative bg-bg border-2 border-accent rounded-lg shadow-xl max-w-2xl mx-4 w-full"
- role="dialog"
- aria-labelledby="search-modal-title"
- aria-modal="true"
- >
- <!-- Header with close button -->
- <div class="flex items-center justify-between p-6 border-b border-border">
- <h2 id="search-modal-title" class="text-xl font-bold text-accent">
- {{ i18n "searchArticles" }}
- </h2>
- <button
- @click="close()"
- aria-label="Close search"
- class="p-2 rounded hover:bg-surface transition-colors focus:outline-none focus:ring-2 focus:ring-accent"
- >
- <i data-feather="x" class="w-5 h-5" aria-hidden="true"></i>
- </button>
- </div>
-
- <!-- Search input -->
- <div class="p-6 border-b border-border">
- <label for="search-input-desktop" class="sr-only">
- {{ i18n "searchPlaceholder" }}
- </label>
- <input
- id="search-input-desktop"
- type="text"
- :value="searchQuery"
- @input="filterArticles($el.value)"
- placeholder="{{ i18n "searchPlaceholder" }}"
- class="w-full px-4 py-3 border-2 border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent bg-bg text-text"
- aria-describedby="search-results"
- />
- </div>
-
- <!-- Results container -->
- <div id="search-results" class="max-h-96 overflow-y-auto p-6">
- <!-- Results list -->
- <div x-show="filteredArticles.length > 0" class="space-y-3" role="region" aria-live="polite">
- <template x-for="article in filteredArticles" :key="article.url">
- <div class="p-4 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 transition-colors rounded">
- <a :href="article.url" class="block focus:outline-none focus:ring-2 focus:ring-accent rounded px-2 py-1">
- <h3 class="font-bold text-accent hover:underline" x-text="article.title"></h3>
- <p class="text-sm text-text-dim mt-1" x-text="article.date"></p>
- </a>
- </div>
- </template>
- </div>
-
- <!-- Empty state -->
- <div
- x-show="searchQuery && filteredArticles.length === 0"
- class="text-center py-8 text-text-dim"
- role="status"
- >
- {{ i18n "noSearchResults" }}
- </div>
-
- <!-- No query state -->
- <div
- x-show="!searchQuery"
- class="text-center py-8 text-text-dim"
- >
- {{ i18n "searchPlaceholder" }}
- </div>
- </div>
- </div>
-</div>
+++ /dev/null
-<aside class="order-last md:order-none md:col-span-1">
- <!-- Author info widget (optional - can be expanded) -->
- <div class="sidebar-widget">
- <p class="sidebar-widget-label"># {{ i18n "author" }}</p>
- <p class="text-text-dim text-sm leading-relaxed">
- {{ .Site.Params.author }}
- </p>
- </div>
-
- <hr class="sidebar-hr">
-
- <!-- Social sharing widget -->
- {{ partial "social-share.html" (dict "page" . "mode" "sidebar") }}
-
- <!-- Related posts widget (articles only) -->
- {{ if and .Site.Params.relatedPosts (eq .Section "articles") }}
- {{ $related := first 5 (.Site.RegularPages.Related .) }}
- <hr class="sidebar-hr">
- <div class="sidebar-widget">
- <p class="sidebar-widget-label"># {{ i18n "relatedPosts" }}</p>
- {{ if $related }}
- <ul class="space-y-3">
- {{ range $related }}
- {{ $articleType := .Params.type | default "life" }}
- {{ $excerpt := .Description | default .Summary }}
- <li
- class="pl-3 border-l-2"
- style="border-color: var(--type-{{ $articleType }});"
- >
- <a href="{{ .RelPermalink }}" class="text-sm hover:text-accent transition-colors leading-snug block">
- {{ .Title }}
- <time class="text-text-dim/60 ml-1" datetime="{{ .PublishDate.Format "2006-01-02T15:04:05Z07:00" }}">
- · {{ .PublishDate.Format "Jan 2006" }}
- </time>
- </a>
- {{ if $excerpt }}
- <p class="text-xs text-text-dim/70 leading-snug mt-0.5 line-clamp-1">
- {{ $excerpt | plainify | truncate 60 }}
- </p>
- {{ end }}
- </li>
- {{ end }}
- </ul>
- {{ else }}
- <p class="text-sm text-text-dim">{{ i18n "noRelated" }}</p>
- {{ end }}
- </div>
- {{ end }}
-
- <hr class="sidebar-hr">
-
- <!-- Tag Cloud Widget -->
- {{ partial "tag-cloud.html" (dict "page" . "showCount" false "wrapInWidget" true "maxTags" 15) }}
-</aside>
+++ /dev/null
-{{ $page := .page }}
-{{ $mode := .mode | default "sidebar" }}
-{{ $url := $page.Permalink | urlquery }}
-{{ $title := $page.Title | urlquery }}
-
-{{ $gridClass := "share-grid gap-1" }}
-{{ if eq $mode "inline" }}
- {{ $gridClass = "flex flex-wrap justify-center gap-1" }}
-{{ end }}
-
-<div class="sidebar-widget">
- <p class="sidebar-widget-label"># {{ i18n "share" }}</p>
- <nav aria-label="{{ i18n "share" }}">
- <div class="{{ $gridClass }}">
-
- <!-- Copy link -->
- <div x-data="{ copied: false }">
- <button
- @click="navigator.clipboard.writeText('{{ $page.Permalink }}').then(() => { copied = true; setTimeout(() => copied = false, 2000) })"
- :aria-label="copied ? '{{ i18n "linkCopied" }}' : '{{ i18n "copyLink" }}'"
- :class="copied ? 'btn-share btn-share--copied' : 'btn-share'"
- >
- <i x-show="!copied" data-feather="copy" aria-hidden="true"></i>
- <i x-show="copied" data-feather="check" aria-hidden="true"></i>
- </button>
- </div>
-
- <!-- Email -->
- <a
- href="mailto:?subject={{ $title }}&body={{ $title }}%0A%0A{{ $page.Permalink | urlquery }}"
- aria-label="{{ i18n "shareViaEmail" }}"
- class="btn-share"
- >
- <i data-feather="mail" aria-hidden="true"></i>
- </a>
-
- <!-- Facebook -->
- <a
- href="https://www.facebook.com/sharer/sharer.php?u={{ $url }}"
- target="_blank" rel="noopener noreferrer"
- aria-label="{{ i18n "facebook" }}"
- class="btn-share"
- >
- <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
- <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
- </svg>
- </a>
-
- <!-- Twitter / X -->
- <a
- href="https://twitter.com/intent/tweet?url={{ $url }}&text={{ $title }}"
- target="_blank" rel="noopener noreferrer"
- aria-label="{{ i18n "twitter" }}"
- class="btn-share"
- >
- <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" focusable="false">
- <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
- </svg>
- </a>
-
- <!-- Reddit -->
- <a
- href="https://www.reddit.com/submit?url={{ $url }}&title={{ $title }}"
- target="_blank" rel="noopener noreferrer"
- aria-label="{{ i18n "reddit" }}"
- class="btn-share"
- >
- <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" focusable="false">
- <path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/>
- </svg>
- </a>
-
- <!-- Pinterest -->
- <a
- href="https://pinterest.com/pin/create/button/?url={{ $url }}&description={{ $title }}"
- target="_blank" rel="noopener noreferrer"
- aria-label="{{ i18n "pinterest" }}"
- class="btn-share"
- >
- <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" focusable="false">
- <path d="M12 0C5.373 0 0 5.373 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 0 1 .083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.632-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0z"/>
- </svg>
- </a>
-
- <!-- WhatsApp -->
- <a
- href="https://api.whatsapp.com/send?text={{ $title }}%20{{ $page.Permalink | urlquery }}"
- target="_blank" rel="noopener noreferrer"
- aria-label="{{ i18n "whatsapp" }}"
- class="btn-share"
- >
- <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" focusable="false">
- <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/>
- </svg>
- </a>
-
- <!-- Telegram -->
- <a
- href="https://t.me/share/url?url={{ $url }}&text={{ $title }}"
- target="_blank" rel="noopener noreferrer"
- aria-label="{{ i18n "telegram" }}"
- class="btn-share"
- >
- <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" focusable="false">
- <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
- </svg>
- </a>
-
- <!-- Signal -->
- <a
- href="https://signal.me/#p/{{ $page.Permalink | urlquery }}"
- target="_blank" rel="noopener noreferrer"
- aria-label="{{ i18n "signal" }}"
- class="btn-share"
- >
- <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" focusable="false">
- <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm.157 5.32a6.68 6.68 0 0 1 6.143 4.032l.734-.267.55 1.513-.717.261a6.71 6.71 0 0 1 .133 1.327 6.68 6.68 0 0 1-.176 1.51l.69.252-.55 1.513-.707-.258A6.68 6.68 0 0 1 12 18.68a6.68 6.68 0 0 1-6.294-4.455l-.66.24-.55-1.513.677-.247A6.71 6.71 0 0 1 5 12.187a6.71 6.71 0 0 1 .16-1.438l-.698-.254.55-1.513.725.264A6.68 6.68 0 0 1 12.157 5.32zM12 7.2a4.8 4.8 0 1 0 0 9.6A4.8 4.8 0 0 0 12 7.2z"/>
- </svg>
- </a>
-
- </div>
- </nav>
-</div>
+++ /dev/null
-{{/* tag-cloud.html
- Reusable tag cloud partial for homepage, sidebar, and 404 pages.
-
- Params (dict):
- page Page required — calling page context (provides .Site.Taxonomies.tags, .Lang)
- showCount bool optional — show post count per tag (default true)
- heading string optional — heading text override (default: i18n "tagCloud")
- headingLevel string optional — h2|h3|p for non-widget mode (default "h2")
- wrapInWidget bool optional — wrap in .sidebar-widget for sidebar placement (default false)
- maxTags int optional — max tags to show, 0 = all (default 0)
-*/}}
-
-{{- $page := .page -}}
-{{- $showCount := .showCount | default true -}}
-{{- $heading := .heading | default (i18n "tagCloud") -}}
-{{- $headingLevel := .headingLevel -}}
-{{- $wrapInWidget := .wrapInWidget | default false -}}
-{{- $maxTags := .maxTags | default 0 -}}
-
-{{- $tags := $page.Site.Taxonomies.tags -}}
-
-{{/* Early exit if no tags */}}
-{{- if $tags -}}
-
-{{/* Compute max count for continuous scaling */}}
-{{- $maxCount := 0 -}}
-{{- range $tags -}}
- {{- if gt .Count $maxCount -}}{{- $maxCount = .Count -}}{{- end -}}
-{{- end -}}
-
-{{/* Ordered tag list (descending by count) */}}
-{{- $orderedTags := $tags.ByCount -}}
-{{- if gt $maxTags 0 -}}
- {{- $orderedTags = first $maxTags $orderedTags -}}
-{{- end -}}
-
-{{/* Render based on placement mode */}}
-{{- if $wrapInWidget -}}
-<div class="sidebar-widget">
- <p class="sidebar-widget-label"># {{ i18n "topTags" }}</p>
- <nav aria-label="{{ i18n "exploreTopics" }}">
- <div class="tag-cloud" data-tag-cloud>
-{{- else -}}
-<section {{- if $headingLevel }} aria-labelledby="tag-cloud-heading"{{ end }}>
- {{- if $headingLevel -}}
- {{- if eq $headingLevel "h2" -}}
- <h2 id="tag-cloud-heading" class="text-lg font-semibold text-accent mb-4">{{ $heading }}</h2>
- {{- else if eq $headingLevel "h3" -}}
- <h3 id="tag-cloud-heading" class="text-lg font-semibold text-accent mb-4">{{ $heading }}</h3>
- {{- else -}}
- <p id="tag-cloud-heading" class="text-lg font-semibold text-accent mb-4">{{ $heading }}</p>
- {{- end -}}
- {{- end -}}
- <nav aria-label="{{ i18n "exploreTopics" }}">
- <div class="tag-cloud" data-tag-cloud>
-{{- end -}}
-
- {{- range $orderedTags -}}
- {{- $count := .Count -}}
- {{- $ratio := (div (float $count) (float $maxCount)) -}}
- {{- $size := (add 0.6 (mul $ratio 1.2)) -}}
- {{- $opacity := (add 0.7 (mul $ratio 0.3)) -}}
- <a
- href="{{ .Page.RelPermalink }}"
- class="tag-cloud-link"
- data-weight="{{ printf "%.4f" $ratio }}"
- {{- if ge $ratio 0.5 }}
- style="font-size: {{ $size }}rem; color: var(--accent); opacity: {{ $opacity }};"
- {{- else }}
- style="font-size: {{ $size }}rem; color: var(--text-dim); opacity: {{ $opacity }};"
- {{- end }}
- aria-label="{{ .Name }}{{- if $showCount }} ({{ i18n "postCount" $count }}){{- end -}}"
- >
- {{- .Name -}}
- {{- if $showCount -}}
- <span class="tag-cloud-count" aria-hidden="true">{{ $count }}</span>
- {{- end -}}
- </a>
- {{- end -}}
-
- </div>
- </nav>
-
-{{- if $wrapInWidget -}}
-</div>
-{{- else -}}
-</section>
-{{- end -}}
-
-{{- end -}}{{/* end if $tags */}}
+++ /dev/null
-{{ define "toast-container" }}
-
-<!-- Toast notification container with Alpine.js integration -->
-<div class="toast-container" x-data="formComponentsData()">
- <template x-for="toast in toasts" :key="toast.id">
- <div class="toast" :class="`toast-${toast.type}`" x-show="toasts.length > 0">
- <span x-text="toast.message"></span>
- <button class="toast-close" @click="removeToast(toast.id)" type="button" aria-label="Close notification"></button>
- </div>
- </template>
-</div>
-
-{{ end }}
+++ /dev/null
-{{ define "main" }}
-<article class="mx-auto px-4 py-12 max-w-7xl">
- <div class="content-grid">
- <!-- Breadcrumb -->
- {{ partial "breadcrumb.html" . }}
-
- <!-- Page Title (Hero) -->
- <div class="mb-12">
- <h1 class="text-5xl md:text-6xl font-bold mb-4 text-accent animate-fade-in">
- {{ i18n "repositoryTitle" }}
- </h1>
- <p class="text-xl text-text-dim animate-fade-in-delay">
- {{ i18n "repositorySubtitle" }}
- </p>
- </div>
-
- <!-- Page Content (markdown sections) -->
- <div class="prose dark:prose-invert max-w-none mb-12">
- {{ .Content }}
- </div>
-
- <!-- Social sharing (inline mode) -->
- <div class="mb-12">
- {{ partial "social-share.html" (dict "page" . "mode" "inline") }}
- </div>
-
- <!-- Repository Cards Section -->
- <section class="mt-16">
- <h2 class="text-3xl font-bold mb-8">{{ i18n "githubReposTitle" }}</h2>
-
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
- {{ range $.Site.Data.repos.repos }}
- <div class="border border-border rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
- <!-- Card Image -->
- <img
- src="{{ .image }}"
- alt="{{ .name }}"
- class="w-full h-48 object-cover"
- loading="lazy"
- />
-
- <!-- Card Content -->
- <div class="p-6">
- <h3 class="text-xl font-bold mb-2">{{ .name }}</h3>
-
- <p class="text-text-dim mb-4">
- {{ i18n .description_key }}
- </p>
-
- <!-- Tags -->
- {{ if .tags }}
- <div class="flex flex-wrap gap-2 mb-4">
- {{ range .tags }}
- <span class="text-xs px-2 py-1 bg-border/20 rounded">
- {{ . }}
- </span>
- {{ end }}
- </div>
- {{ end }}
-
- <!-- GitHub Link -->
- <a
- href="{{ .github_url }}"
- target="_blank"
- rel="noopener noreferrer"
- class="btn btn-primary w-full text-center"
- >
- {{ i18n "visitGithub" }} →
- </a>
- </div>
- </div>
- {{ end }}
- </div>
- </section>
- </div>
-</article>
-{{ end }}
+++ /dev/null
-User-agent: *
-Disallow: /search-index.json
-Disallow: /it/search-index.json
-
-Sitemap: {{ .Site.BaseURL }}sitemap.xml
+++ /dev/null
-{{- $url := .Get "url" -}}
-{{- $desc := .Get "desc" | default "Download" -}}
-{{- $outclass := .Get "outclass" | default "" -}}
-{{- $inclass := .Get "inclass" | default "" -}}
-
-{{- if $url -}}
-<div class="my-6 {{ $outclass }}">
- <a
- href="{{ $url }}"
- class="inline-flex items-center gap-2 px-4 py-2 rounded border border-accent/30 text-accent font-medium hover:border-accent/50 hover:bg-accent/10 transition-colors {{ $inclass }}"
- download
- >
- <i data-feather="download" class="w-4 h-4"></i>
- {{ $desc }}
- </a>
-</div>
-{{- else -}}
- {{- errorf "actions shortcode: 'url' parameter is required" -}}
-{{- end -}}
+++ /dev/null
-<form id="contact-form" x-data="contactForm()" @submit.prevent="submitContactForm" class="space-y-6">
- <!-- Name Field -->
- <div>
- <label for="name" class="block text-sm font-medium text-text mb-2">
- {{ i18n "name" }}
- </label>
- <input
- id="name"
- type="text"
- x-model="formData.name"
- required
- class="w-full px-4 py-2 bg-bg border border-border/50 rounded-lg text-text placeholder-text-dim focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition-colors"
- :aria-busy="isSubmitting"
- />
- </div>
-
- <!-- Email Field -->
- <div>
- <label for="email" class="block text-sm font-medium text-text mb-2">
- {{ i18n "email" }}
- </label>
- <input
- id="email"
- type="email"
- x-model="formData.email"
- required
- class="w-full px-4 py-2 bg-bg border border-border/50 rounded-lg text-text placeholder-text-dim focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition-colors"
- :aria-busy="isSubmitting"
- />
- </div>
-
- <!-- Message Field -->
- <div>
- <label for="message" class="block text-sm font-medium text-text mb-2">
- {{ i18n "message" }}
- </label>
- <textarea
- id="message"
- x-model="formData.message"
- rows="5"
- required
- class="w-full px-4 py-2 bg-bg border border-border/50 rounded-lg text-text placeholder-text-dim focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition-colors resize-none"
- :aria-busy="isSubmitting"
- ></textarea>
- </div>
-
- <!-- Status Message -->
- <div
- x-show="statusMessage"
- x-text="statusMessage"
- :class="statusClass"
- class="px-4 py-3 rounded-lg text-sm transition-all"
- ></div>
-
- <!-- Submit Button -->
- <button
- type="submit"
- :disabled="isSubmitting"
- class="w-full px-4 py-2 bg-accent text-bg font-medium rounded-lg hover:bg-accent/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
- >
- <span x-show="!isSubmitting">{{ i18n "submit" }}</span>
- <span x-show="isSubmitting">{{ i18n "sending" }}</span>
- </button>
-</form>
-
+++ /dev/null
-<span class="text-2xl font-bold first-letter:text-3xl">{{ .Inner }}</span>
+++ /dev/null
-<em>{{ .Inner }}</em>
+++ /dev/null
-{{- $cols := .Get "cols" | default "2" -}}
-
-<div class="my-8 grid gap-4" style="grid-template-columns: repeat({{ $cols }}, 1fr)">
- {{- range $line := strings.Split .Inner "\n" -}}
- {{- if strings.Contains $line "![" -}}
- {{- $image := strings.TrimSpace $line -}}
- {{- if $image -}}
- {{ $image | markdownify | safeHTML }}
- {{- end -}}
- {{- end -}}
- {{- end -}}
-</div>
+++ /dev/null
-{{- $email := .Get "email" -}}
-{{- $size := .Get "size" | default "256" | int -}}
-{{- $alt := .Get "alt" | default "User avatar" -}}
-{{- $class := .Get "class" | default "w-32 h-32 rounded-full" -}}
-
-{{- if $email -}}
- {{- $hash := md5 (strings.TrimSpace (strings.ToLower $email)) -}}
- {{- $gravatarURL := printf "https://www.gravatar.com/avatar/%s?s=%d&d=identicon" $hash $size -}}
- <img
- src="{{ $gravatarURL }}"
- alt="{{ $alt }}"
- class="{{ $class }}"
- loading="lazy"
- />
-{{- else -}}
- {{- errorf "gravatar shortcode: 'email' parameter is required" -}}
-{{- end -}}
+++ /dev/null
-{{- $src := .Get "src" -}}
-{{- $alt := .Get "alt" | default "Image" -}}
-{{- $caption := .Get "caption" -}}
-{{- $class := .Get "class" | default "w-full h-auto rounded-lg border border-border" -}}
-{{- $link := .Get "link" -}}
-{{- $figureClass := .Get "figure-class" -}}
-
-{{- if or $src .Inner -}}
- <figure class="my-8{{- with $figureClass }} {{ . }}{{- end -}}">
- {{- if .Inner -}}
- {{- .Inner -}}
- {{- else -}}
- {{- if $link -}}<a href="{{ $link }}">{{- end -}}
- <img src="{{ $src }}" alt="{{ $alt }}" class="{{ $class }}" loading="lazy" />
- {{- if $link -}}</a>{{- end -}}
- {{- end -}}
- {{- if $caption -}}
- <figcaption class="mt-3 text-center text-sm text-text-dim italic">{{ $caption }}</figcaption>
- {{- end -}}
- </figure>
-{{- else -}}
- {{- errorf "image shortcode: 'src' parameter or inner content is required" -}}
-{{- end -}}
+++ /dev/null
-{{- $source := .Get "source" -}}
-{{- $src := .Get "src" -}}
-
-<blockquote class="my-8 pl-6 border-l-4 border-accent/50 italic text-text-dim">
- <p class="text-lg">{{ .Inner }}</p>
- {{- if $source -}}
- <footer class="mt-4 text-sm not-italic text-text-dim">
- {{- if $src -}}
- — <a href="{{ $src }}" class="text-accent hover:underline">{{ $source }}</a>
- {{- else -}}
- — {{ $source }}
- {{- end -}}
- </footer>
- {{- end -}}
-</blockquote>
+++ /dev/null
-<s>{{ .Inner }}</s>
+++ /dev/null
-{{- $src := .Get "src" -}}
-{{- $id := .Get "id" -}}
-{{- $title := .Get "title" | default "Video" -}}
-{{- $class := .Get "class" | default "" -}}
-
-{{- if $id -}}
- <div class="my-6{{- with $class }} {{ . }}{{- end -}}">
- <iframe
- class="w-full aspect-video"
- src="https://www.youtube.com/embed/{{ $id }}"
- title="{{ $title }}"
- allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
- allowfullscreen
- ></iframe>
- </div>
-{{- else if $src -}}
- {{- $ext := $src | path.Ext -}}
- {{- $filetype := slicestr $ext 1 -}}
- {{- $videoURL := $src -}}
- {{- $resource := .Page.Resources.GetMatch $src -}}
- {{- if $resource -}}{{- $videoURL = $resource.RelPermalink -}}{{- end -}}
- <video
- {{- with $class }} class="{{ . }}"{{ end }}
- controls
- preload="auto"
- playsinline
- {{- with .Get "width" }} width="{{ . }}"{{ end }}
- {{- with .Get "height" }} height="{{ . }}"{{ end }}
- {{- if eq (.Get "autoplay") "true" }} autoplay{{ end }}
- {{- if eq (.Get "loop") "true" }} loop{{ end }}
- {{- if eq (.Get "muted") "true" }} muted{{ end }}
- >
- <source src="{{ $videoURL }}" type="video/{{ $filetype }}">
- </video>
-{{- else -}}
- {{- errorf "video shortcode: either 'src' or 'id' parameter is required" -}}
-{{- end -}}
+++ /dev/null
-{{ define "main" }}
-<div class="mx-auto px-4 py-12 max-w-4xl">
- <!-- Page title with taxonomy name -->
- <h1 class="text-4xl md:text-5xl font-bold text-accent mb-12">
- {{ i18n .Data.Plural }}
- </h1>
-
- <!-- Articles list -->
- <div class="space-y-6 max-w-3xl">
- {{ $pinned := where .Pages "Params.pinned" true }}
- {{ $unpinned := where .Pages "Params.pinned" false }}
-
- <!-- If no unpinned posts found (because param is undefined), get all non-pinned pages -->
- {{ if eq (len $unpinned) 0 }}
- {{ $unpinned = where .Pages "Params.pinned" nil }}
- {{ if eq (len $unpinned) 0 }}
- {{ $unpinned = where .Pages "Params.pinned" "" }}
- {{ end }}
- {{ end }}
-
- <!-- Pinned posts first -->
- {{ range (sort $pinned "Date" "desc") }}
- <div class="relative">
- {{ partial "article-card.html" . }}
- <span class="absolute top-4 right-4 px-2 py-0.5 rounded text-xs font-mono bg-surface text-text-dim border border-border/30">
- {{ i18n "postCount" .Pages.Len }}
- </span>
- </div>
- {{ end }}
-
- <!-- Regular posts -->
- {{ range (sort $unpinned "Date" "desc") }}
- <div class="relative">
- {{ partial "article-card.html" . }}
- <span class="absolute top-4 right-4 px-2 py-0.5 rounded text-xs font-mono bg-surface text-text-dim border border-border/30">
- {{ i18n "postCount" .Pages.Len }}
- </span>
- </div>
- {{ end }}
-
- <!-- Empty state -->
- {{ if eq (len .Pages) 0 }}
- <div class="py-12 text-center text-text-dim">
- {{ i18n "noRelated" }}
- </div>
- {{ end }}
- </div>
-</div>
-{{ end }}
+++ /dev/null
-{{ define "main" }}
-<div class="mx-auto px-4 py-12 max-w-4xl">
- <!-- Page title with taxonomy type -->
- <h1 class="text-4xl md:text-5xl font-bold text-accent mb-2">
- {{ i18n .Data.Singular }}
- </h1>
-
- <!-- Current term heading -->
- <p class="text-lg text-text-dim mb-12">
- <span class="inline-flex items-center px-3 py-1 rounded text-sm font-medium border border-accent/30 text-accent">
- {{ .Title }}
- </span>
- </p>
-
- <!-- Articles list -->
- <div class="space-y-6 max-w-3xl">
- {{ $pinned := where .Pages "Params.pinned" true }}
- {{ $unpinned := where .Pages "Params.pinned" false }}
-
- <!-- If no unpinned posts found (because param is undefined), get all non-pinned pages -->
- {{ if eq (len $unpinned) 0 }}
- {{ $unpinned = where .Pages "Params.pinned" nil }}
- {{ if eq (len $unpinned) 0 }}
- {{ $unpinned = where .Pages "Params.pinned" "" }}
- {{ end }}
- {{ end }}
-
- <!-- Pinned posts first -->
- {{ range (sort $pinned "Date" "desc") }}
- {{ partial "article-card.html" . }}
- {{ end }}
-
- <!-- Regular posts -->
- {{ range (sort $unpinned "Date" "desc") }}
- {{ partial "article-card.html" . }}
- {{ end }}
-
- <!-- Empty state -->
- {{ if eq (len .Pages) 0 }}
- <div class="py-12 text-center text-text-dim">
- {{ i18n "noRelated" }}
- </div>
- {{ end }}
- </div>
-</div>
-{{ end }}
+++ /dev/null
-name = "danix.xyz Hacker"
-license = "MIT"
-licenselink = "https://opensource.org/licenses/MIT"
-description = "Bilingual portfolio/blog theme with hacker/open-source aesthetic, responsive sidebar, 5 article types, and configuration-driven structure."
-homepage = "https://github.com/danix/danix-xyz-hacker-theme"
-demosite = "https://danix.xyz"
-author = "Danilo Macrì"
-authorlink = "https://danix.xyz"
-version = "1.0.0"
-
-[params]
- minVersion = "0.100.0"
-
-[[minfeaturesVersion]]
- description = "Hugo extended required for Tailwind CSS via Pipes"
- version = "0.100.0"
-
-[[features]]
- name = "Bilingual (i18n)"
-
-[[features]]
- name = "Responsive Design"
-
-[[features]]
- name = "Dark/Light Theme Toggle"
-
-[[features]]
- name = "Article Types (5)"
-
-[[features]]
- name = "Shortcode System"
-
-[[features]]
- name = "Alpine.js Interactions"
-
-[[exampleSiteRepo]]
- url = "https://github.com/danix/danix.xyz"
