summaryrefslogtreecommitdiffstats
path: root/assets/css/components
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/components')
-rw-r--r--assets/css/components/404.css247
-rw-r--r--assets/css/components/article-hero.css225
-rw-r--r--assets/css/components/card.css254
-rw-r--r--assets/css/components/code.css138
-rw-r--r--assets/css/components/feed.css101
-rw-r--r--assets/css/components/footer.css64
-rw-r--r--assets/css/components/hamburger.css189
-rw-r--r--assets/css/components/header.css89
-rw-r--r--assets/css/components/hero.css354
-rw-r--r--assets/css/components/lightbox.css170
-rw-r--r--assets/css/components/progress-bar.css19
-rw-r--r--assets/css/components/share-sidebar.css107
-rw-r--r--assets/css/components/timeline.css336
13 files changed, 0 insertions, 2293 deletions
diff --git a/assets/css/components/404.css b/assets/css/components/404.css
deleted file mode 100644
index 3db099f..0000000
--- a/assets/css/components/404.css
+++ /dev/null
@@ -1,247 +0,0 @@
-/* 404.css */
-
-.hero--404 {
- position: relative;
- min-height: 100vh;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 2rem;
-}
-
-.content-wrapper {
- display: grid;
- grid-template-columns: 65% 35%;
- gap: 3rem;
- max-width: 1200px;
- width: 100%;
-}
-
-@media (max-width: 900px) {
- .content-wrapper {
- grid-template-columns: 1fr;
- gap: 2rem;
- }
-}
-
-/* Quote Section */
-.quote-section {
- margin-bottom: 3rem;
- padding: 2rem;
- background: var(--surface);
- border: 1px solid var(--border);
- border-radius: 8px;
- position: relative;
-}
-
-.quote-mark {
- font-size: 4rem;
- color: var(--accent);
- opacity: 0.3;
- margin-bottom: -0.5rem;
-}
-
-.quote-text {
- font-family: var(--font-body);
- font-size: 1.3rem;
- font-weight: 400;
- line-height: 1.8;
- color: var(--text);
- margin-bottom: 1rem;
-}
-
-.quote-author {
- font-family: var(--font-mono);
- font-size: 0.85rem;
- text-transform: uppercase;
- letter-spacing: 0.08em;
- color: var(--text-dim);
-}
-
-/* Search Box */
-.search-box {
- display: flex;
- gap: 0;
- margin-bottom: 3rem;
- overflow: hidden;
- border-radius: 4px;
- border: 1px solid var(--border);
-}
-
-.search-box input {
- flex: 1;
- padding: 0.75rem 1rem;
- background: var(--surface);
- border: none;
- color: var(--text);
- font-family: var(--font-mono);
- font-size: 0.9rem;
-}
-
-.search-box input::placeholder {
- color: var(--text-dim);
-}
-
-.search-box button {
- padding: 0.75rem 1rem;
- background: var(--accent);
- border: none;
- color: #000;
- cursor: pointer;
- transition: all var(--duration-base) ease;
-}
-
-.search-box button:hover {
- background: var(--accent2);
-}
-
-/* Quick Nav */
-.quick-nav {
- margin-bottom: 2rem;
-}
-
-.quick-nav h3 {
- font-size: 1rem;
- margin-bottom: 1rem;
-}
-
-.quick-nav ul {
- list-style: none;
- display: flex;
- flex-direction: column;
- gap: 0.75rem;
-}
-
-.quick-nav a {
- display: flex;
- align-items: center;
- gap: 0.75rem;
- padding: 0.75rem 1rem;
- border: 1px solid var(--border);
- border-radius: 4px;
- color: var(--text);
- text-decoration: none;
- transition: all var(--duration-base) ease;
-}
-
-.quick-nav a:hover {
- border-color: var(--accent);
- background: rgba(168, 85, 247, 0.05);
- padding-left: 1.25rem;
-}
-
-/* Right Column */
-.hero-right-404 {
- display: flex;
- flex-direction: column;
- gap: 2rem;
-}
-
-.recent-articles,
-.terminal-widget {
- background: var(--surface);
- border: 1px solid var(--border);
- border-radius: 8px;
- overflow: hidden;
-}
-
-.recent-articles h3,
-.terminal-widget .terminal-bar {
- padding: 1rem;
- background: var(--bg2);
- font-size: 0.9rem;
- font-weight: 700;
-}
-
-.terminal-widget .terminal-bar {
- display: flex;
- gap: 0.75rem;
- align-items: center;
-}
-
-.terminal-dot {
- width: 12px;
- height: 12px;
- border-radius: 50%;
- display: inline-block;
-}
-
-.recent-articles ul {
- list-style: none;
- padding: 0;
- margin: 0;
-}
-
-.recent-articles li {
- border-bottom: 1px solid var(--border);
- padding: 0;
- margin: 0;
-}
-
-.recent-articles li:last-child {
- border-bottom: none;
-}
-
-.article-link {
- display: block;
- padding: 0.75rem 1rem;
- color: var(--text);
- text-decoration: none;
- font-size: 0.9rem;
- transition: all var(--duration-base) ease;
- border-left: 2px solid transparent;
-}
-
-.article-link:hover {
- background: rgba(168, 85, 247, 0.05);
- border-left-color: var(--accent);
- padding-left: 1.25rem;
-}
-
-.article-link[data-type="tech"] {
- color: var(--type-tech);
-}
-
-.article-link[data-type="life"] {
- color: var(--type-life);
-}
-
-.article-link[data-type="quote"] {
- color: var(--type-quote);
-}
-
-.article-link[data-type="link"] {
- color: var(--type-link);
-}
-
-.article-link[data-type="photo"] {
- color: var(--type-photo);
-}
-
-.terminal-content {
- padding: 1rem;
- font-family: var(--font-mono);
- font-size: 0.75rem;
- color: var(--terminal-text);
- line-height: 1.6;
-}
-
-.terminal-content div {
- white-space: pre-wrap;
- word-wrap: break-word;
-}
-
-.terminal-prompt {
- color: var(--terminal-prompt);
-}
-
-#terminal-files {
- margin-top: 0.5rem;
- color: var(--terminal-accent, #38bdf8);
-}
-
-@media (prefers-reduced-motion: reduce) {
- .article-link:hover {
- padding-left: 1rem;
- }
-}
diff --git a/assets/css/components/article-hero.css b/assets/css/components/article-hero.css
deleted file mode 100644
index cc9e180..0000000
--- a/assets/css/components/article-hero.css
+++ /dev/null
@@ -1,225 +0,0 @@
-/* article-hero.css */
-
-.article-hero {
- position: relative;
- min-height: 400px;
- background-size: cover;
- background-position: center;
- display: flex;
- align-items: flex-end;
- padding: 3rem 2rem;
- margin-bottom: 2rem;
-}
-
-.article-hero-overlay {
- position: absolute;
- inset: 0;
- background: linear-gradient(180deg, rgba(6, 11, 16, 0.3) 0%, rgba(6, 11, 16, 0.8) 100%);
-}
-
-.article-hero-content {
- position: relative;
- z-index: 2;
- width: 100%;
- max-width: var(--container-max);
- margin: 0 auto;
- padding: 0 1.5rem;
-}
-
-.article-breadcrumb {
- display: flex;
- align-items: center;
- gap: 0.5rem;
- font-family: var(--font-mono);
- font-size: 0.85rem;
- color: var(--text-dim);
- margin-bottom: 1.5rem;
-}
-
-.article-breadcrumb a {
- color: var(--accent);
- text-decoration: none;
- transition: color var(--duration-base) ease;
-}
-
-.article-breadcrumb a:hover {
- color: var(--accent2);
-}
-
-.article-hero-content h1 {
- font-size: clamp(2rem, 6vw, 3.5rem);
- margin: 0;
-}
-
-.article-meta-bar {
- position: sticky;
- top: 0;
- z-index: 50;
- background: rgba(6, 11, 16, 0.95);
- backdrop-filter: blur(4px);
- padding: 1rem 2rem;
- border-bottom: 1px solid var(--border);
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
-
-.article-meta {
- display: flex;
- align-items: center;
- gap: 1.5rem;
- font-size: 0.85rem;
- font-family: var(--font-mono);
- text-transform: uppercase;
- letter-spacing: 0.08em;
-}
-
-.article-type-badge {
- padding: 0.4rem 0.8rem;
- border-radius: 4px;
- font-weight: 600;
- background: color-mix(in srgb, currentColor 15%, transparent);
- border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
-}
-
-.article-type-badge.type-tech {
- color: var(--type-tech);
-}
-
-.article-type-badge.type-life {
- color: var(--type-life);
-}
-
-.article-type-badge.type-quote {
- color: var(--type-quote);
-}
-
-.article-type-badge.type-link {
- color: var(--type-link);
-}
-
-.article-type-badge.type-photo {
- color: var(--type-photo);
-}
-
-.article-date,
-.article-read-time {
- color: var(--text-dim);
-}
-
-/* Article Body */
-.article-body {
- padding: 2rem 1.5rem;
- max-width: 800px;
- margin: 0 auto;
-}
-
-/* Article Footer Nav */
-.article-footer-nav {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 2rem;
- padding: 2rem;
- max-width: var(--container-max);
- margin: 3rem auto 0;
- border-top: 1px solid var(--border);
-}
-
-@media (max-width: 768px) {
- .article-footer-nav {
- grid-template-columns: 1fr;
- }
-}
-
-.nav-prev,
-.nav-next {
- padding: 1.5rem;
- background: var(--surface);
- border: 1px solid var(--border);
- border-radius: 4px;
- text-decoration: none;
- transition: all var(--duration-base) ease;
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
-}
-
-.nav-prev:hover,
-.nav-next:hover {
- border-color: var(--accent);
- background: rgba(168, 85, 247, 0.05);
- transform: translateY(-2px);
-}
-
-.nav-label {
- font-family: var(--font-mono);
- font-size: 0.75rem;
- text-transform: uppercase;
- letter-spacing: 0.1em;
- color: var(--accent);
-}
-
-.nav-title {
- font-family: var(--font-head);
- font-size: 1.1rem;
- font-weight: 700;
- color: var(--text);
-}
-
-/* Static Page */
-.page-hero {
- position: relative;
- height: 40vh;
- background: linear-gradient(135deg, var(--accent), var(--accent2));
- display: flex;
- align-items: flex-end;
- padding: 3rem 2rem;
- margin-bottom: 2rem;
-}
-
-.page-hero-overlay {
- position: absolute;
- inset: 0;
- background: rgba(6, 11, 16, 0.3);
-}
-
-.page-hero-content {
- position: relative;
- z-index: 2;
- width: 100%;
- max-width: var(--container-max);
- margin: 0 auto;
- padding: 0 1.5rem;
-}
-
-.page-hero-content h1 {
- font-size: clamp(2rem, 5vw, 3rem);
- margin: 0;
-}
-
-.page-content {
- padding: 2rem 1.5rem;
-}
-
-.page-nav ul {
- display: flex;
- flex-direction: column;
- gap: 0.75rem;
-}
-
-.page-nav a {
- padding: 0.75rem 1rem;
- border-radius: 4px;
- transition: all var(--duration-base) ease;
- display: block;
-}
-
-.page-nav a:hover {
- background: var(--surface);
- padding-left: 1.25rem;
-}
-
-.page-nav a.active {
- font-weight: 700;
- color: var(--accent);
-}
diff --git a/assets/css/components/card.css b/assets/css/components/card.css
deleted file mode 100644
index 3d218bc..0000000
--- a/assets/css/components/card.css
+++ /dev/null
@@ -1,254 +0,0 @@
-/* card.css */
-.post-card {
- background: var(--surface);
- border: 1px solid var(--border);
- border-radius: 8px;
- overflow: hidden;
- transition: var(--transition);
- display: flex;
- gap: var(--gap-md);
-}
-
-.post-card:hover {
- border-color: var(--accent);
- box-shadow: 0 0 20px rgba(168, 85, 247, 0.2);
-}
-
-.post-card-image {
- width: 120px;
- height: 100px;
- flex-shrink: 0;
- object-fit: cover;
- background: linear-gradient(135deg, var(--border), var(--bg2));
- border-right: 1px solid var(--border);
-}
-
-@media (min-width: 768px) {
- .post-card-image {
- width: 160px;
- height: 120px;
- }
-}
-
-.post-card-body {
- padding: var(--gap-md);
- display: flex;
- flex-direction: column;
- justify-content: center;
- flex-grow: 1;
-}
-
-.post-type-badge {
- display: inline-block;
- font-family: var(--font-mono);
- font-size: var(--fs-badge);
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.1em;
- padding: 0.35rem 0.7rem;
- border-radius: 20px;
- margin-bottom: 0.5rem;
- width: fit-content;
-}
-
-/* Type-specific badge colors */
-.post-type-badge.tech {
- background: color-mix(in srgb, var(--type-tech) 15%, transparent);
- border: 1px solid color-mix(in srgb, var(--type-tech) 30%, transparent);
- color: var(--type-tech);
-}
-
-.post-type-badge.life {
- background: color-mix(in srgb, var(--type-life) 15%, transparent);
- border: 1px solid color-mix(in srgb, var(--type-life) 30%, transparent);
- color: var(--type-life);
-}
-
-.post-type-badge.quote {
- background: color-mix(in srgb, var(--type-quote) 15%, transparent);
- border: 1px solid color-mix(in srgb, var(--type-quote) 30%, transparent);
- color: var(--type-quote);
-}
-
-.post-type-badge.link {
- background: color-mix(in srgb, var(--type-link) 15%, transparent);
- border: 1px solid color-mix(in srgb, var(--type-link) 30%, transparent);
- color: var(--type-link);
-}
-
-.post-type-badge.photo {
- background: color-mix(in srgb, var(--type-photo) 15%, transparent);
- border: 1px solid color-mix(in srgb, var(--type-photo) 30%, transparent);
- color: var(--type-photo);
-}
-
-.post-card-title {
- font-family: var(--font-head);
- font-size: 1.1rem;
- font-weight: 700;
- line-height: 1.3;
- margin-bottom: 0.5rem;
- color: var(--text);
-}
-
-.post-card-title a {
- color: var(--text);
- text-decoration: none;
-}
-
-.post-card-title a:hover {
- color: var(--accent);
-}
-
-.post-card-excerpt {
- color: var(--text-dim);
- font-size: 0.9rem;
- line-height: 1.6;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- overflow: hidden;
- margin-bottom: 0.5rem;
-}
-
-.post-card-meta {
- display: flex;
- gap: 1rem;
- font-family: var(--font-mono);
- font-size: 0.75rem;
- color: var(--muted);
- text-transform: uppercase;
- letter-spacing: 0.08em;
-}
-
-/* Featured card in grid */
-.post-card.featured {
- grid-row: span 2;
-}
-
-.post-card.featured .post-card-image {
- width: 100%;
- height: 180px;
- border-right: none;
- border-bottom: 1px solid var(--border);
-}
-
-.post-card.featured .post-card-body {
- padding: var(--gap-lg);
-}
-
-@media (max-width: 768px) {
- .post-card {
- flex-direction: column;
- }
-
- .post-card-image {
- width: 100%;
- height: 150px;
- border-right: none;
- border-bottom: 1px solid var(--border);
- }
-
- .post-card.featured .post-card-image {
- height: 150px;
- }
-}
-
-/* ─── Homepage article cards ─────────────────────────────── */
-
-.articles-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
- gap: 1.5rem;
- margin-bottom: 2rem;
-}
-
-@media (max-width: 768px) {
- .articles-grid { grid-template-columns: 1fr; }
-}
-
-.article-card {
- background: var(--surface);
- border: 1px solid var(--border);
- border-radius: 0;
- overflow: hidden;
- display: flex;
- flex-direction: column;
- transition: var(--transition);
-}
-
-.article-card:hover {
- transform: translate(0, -4px);
- box-shadow: 0 8px 30px var(--accent-glow);
- border-color: var(--accent);
-}
-
-/* Badge background set via inline style in template using var(--type-*) */
-.article-type {
- font-family: var(--font-mono);
- font-size: var(--fs-badge);
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.1em;
- padding: 0.4rem 1rem;
- color: var(--bg);
- width: fit-content;
- border-radius: 3px;
- margin: 1rem 1rem 0;
-}
-
-.article-content {
- padding: 1rem 1rem 1.5rem;
- display: flex;
- flex-direction: column;
- flex: 1;
-}
-
-.article-title {
- font-family: var(--font-head);
- font-size: 1.1rem;
- font-weight: 700;
- line-height: 1.3;
- margin-bottom: 0.5rem;
- letter-spacing: -0.025em;
-}
-
-.article-title a { color: var(--text); text-decoration: none; }
-.article-title a:hover { color: var(--accent); }
-
-.article-excerpt {
- color: var(--text-dim);
- font-size: 0.9rem;
- line-height: 1.6;
- flex: 1;
- margin-bottom: 1rem;
- display: -webkit-box;
- -webkit-line-clamp: 3;
- -webkit-box-orient: vertical;
- overflow: hidden;
-}
-
-.article-meta {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding-top: 1rem;
- border-top: 1px solid var(--border);
- font-family: var(--font-mono);
- font-size: 0.75rem;
- color: var(--muted);
- text-transform: uppercase;
- letter-spacing: 0.08em;
- margin-top: auto;
-}
-
-/* .article-read named distinctly from .article-link (used in 404.css) */
-.article-read {
- color: var(--accent);
- text-decoration: none;
- font-weight: 600;
- letter-spacing: 0.05em;
- transition: color var(--duration-fast) ease;
-}
-
-.article-read:hover { color: var(--accent2); }
diff --git a/assets/css/components/code.css b/assets/css/components/code.css
deleted file mode 100644
index 4cdc57b..0000000
--- a/assets/css/components/code.css
+++ /dev/null
@@ -1,138 +0,0 @@
-/* code.css */
-pre {
- background: var(--surface);
- border: 1px solid var(--border);
- border-left: 3px solid var(--accent);
- border-radius: 6px;
- padding: 1rem;
- overflow-x: auto;
- position: relative;
- margin: 1.5rem 0;
-}
-
-pre code {
- font-family: var(--font-mono);
- font-size: 0.9rem;
- line-height: 1.6;
- color: var(--text);
-}
-
-/* Chroma syntax highlighting */
-.highlight {
- background: var(--surface);
- border: 1px solid var(--border);
- border-left: 3px solid var(--accent);
- border-radius: 6px;
- padding: 1rem;
- overflow-x: auto;
- margin: 1.5rem 0;
- position: relative;
-}
-
-.highlight code {
- background: none;
- padding: 0;
- border-radius: 0;
- color: inherit;
-}
-
-/* Chroma color overrides for dark theme */
-.highlight .k { color: #f59e0b; }
-.highlight .kn { color: #f59e0b; }
-.highlight .kp { color: #f59e0b; }
-.highlight .kr { color: #f59e0b; }
-.highlight .kt { color: #a855f7; }
-.highlight .n { color: #c4d6e8; }
-.highlight .na { color: #38bdf8; }
-.highlight .nb { color: #38bdf8; }
-.highlight .nc { color: #a855f7; }
-.highlight .no { color: #00ff88; }
-.highlight .nd { color: #f59e0b; }
-.highlight .ni { color: #a855f7; }
-.highlight .ne { color: #f59e0b; }
-.highlight .nf { color: #38bdf8; }
-.highlight .nl { color: #a855f7; }
-.highlight .nn { color: #a855f7; }
-.highlight .nt { color: #f59e0b; }
-.highlight .nv { color: #c4d6e8; }
-.highlight .s { color: #00ff88; }
-.highlight .sa { color: #00ff88; }
-.highlight .sb { color: #00ff88; }
-.highlight .sc { color: #00ff88; }
-.highlight .s1 { color: #00ff88; }
-.highlight .s2 { color: #00ff88; }
-.highlight .se { color: #f59e0b; }
-.highlight .sh { color: #00ff88; }
-.highlight .si { color: #f59e0b; }
-.highlight .sx { color: #00ff88; }
-.highlight .sr { color: #00ff88; }
-.highlight .ss { color: #00ff88; }
-.highlight .m { color: #38bdf8; }
-.highlight .mb { color: #38bdf8; }
-.highlight .mf { color: #38bdf8; }
-.highlight .mh { color: #38bdf8; }
-.highlight .mi { color: #38bdf8; }
-.highlight .il { color: #38bdf8; }
-.highlight .mo { color: #38bdf8; }
-.highlight .o { color: #c4d6e8; }
-.highlight .ow { color: #a855f7; }
-.highlight .c { color: #7a9bb8; }
-.highlight .c1 { color: #7a9bb8; }
-.highlight .ch { color: #7a9bb8; }
-.highlight .cm { color: #7a9bb8; }
-.highlight .cp { color: #f59e0b; }
-.highlight .cpf { color: #f59e0b; }
-
-html.theme-light .highlight {
- background: var(--surface);
- border-left-color: var(--accent);
-}
-
-html.theme-light .highlight .c { color: #6a7fa0; }
-
-/* Copy button for code blocks */
-.code-copy-btn {
- position: absolute;
- top: 0.75rem;
- right: 0.75rem;
- background: var(--accent);
- color: #fff;
- border: none;
- padding: 0.4rem 0.8rem;
- border-radius: 4px;
- font-family: var(--font-mono);
- font-size: 0.75rem;
- cursor: pointer;
- opacity: 0;
- transition: var(--transition);
- text-transform: uppercase;
- letter-spacing: 0.08em;
-}
-
-.highlight:hover .code-copy-btn,
-pre:hover .code-copy-btn {
- opacity: 1;
-}
-
-.code-copy-btn:hover {
- background: var(--accent2);
- color: var(--bg);
-}
-
-.code-copy-btn.copied {
- background: var(--accent2);
-}
-
-/* Inline code */
-code {
- font-family: var(--font-mono);
- background: var(--surface);
- padding: 0.25rem 0.5rem;
- border-radius: 4px;
- font-size: 0.9em;
- color: var(--accent2);
-}
-
-p code {
- border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
-}
diff --git a/assets/css/components/feed.css b/assets/css/components/feed.css
deleted file mode 100644
index 0902198..0000000
--- a/assets/css/components/feed.css
+++ /dev/null
@@ -1,101 +0,0 @@
-/* feed.css */
-.feed-section {
- padding: var(--section-py-mobile) 0;
-}
-
-@media (min-width: 768px) {
- .feed-section {
- padding: var(--section-py-desktop) 0;
- }
-}
-
-.feed-label {
- font-family: var(--font-mono);
- font-size: 0.75rem;
- letter-spacing: 0.15em;
- text-transform: uppercase;
- color: var(--accent);
- margin-bottom: 1.5rem;
-}
-
-.feed-grid {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
- gap: var(--gap-md);
- margin-bottom: var(--gap-xl);
-}
-
-@media (min-width: 768px) {
- .feed-grid {
- grid-template-columns: repeat(2, 1fr);
- }
-}
-
-@media (min-width: 1200px) {
- .feed-grid {
- grid-template-columns: repeat(3, 1fr);
- }
-}
-
-.feed-list {
- display: flex;
- flex-direction: column;
- gap: var(--gap-md);
-}
-
-.feed-list .post-card {
- flex-direction: row;
-}
-
-/* Filter bar */
-.filter-bar {
- display: flex;
- gap: var(--gap-sm);
- margin-bottom: var(--gap-lg);
- flex-wrap: wrap;
-}
-
-.filter-btn {
- font-family: var(--font-mono);
- font-size: var(--fs-badge);
- padding: 0.4rem 1rem;
- border: 1px solid var(--border);
- border-radius: 20px;
- background: transparent;
- color: var(--text-dim);
- text-transform: uppercase;
- letter-spacing: 0.1em;
- cursor: pointer;
- transition: var(--transition);
-}
-
-.filter-btn:hover {
- border-color: var(--accent);
- color: var(--accent);
-}
-
-.filter-btn.active {
- background: var(--accent);
- color: #fff;
- border-color: var(--accent);
-}
-
-/* View all link */
-.feed-cta {
- display: inline-block;
- padding: 0.75rem 1.5rem;
- background: var(--accent);
- color: #fff;
- border-radius: 4px;
- font-family: var(--font-mono);
- font-size: var(--fs-btn);
- text-transform: uppercase;
- letter-spacing: 0.1em;
- text-decoration: none;
- transition: var(--transition);
-}
-
-.feed-cta:hover {
- background: var(--accent2);
- color: var(--bg);
-}
diff --git a/assets/css/components/footer.css b/assets/css/components/footer.css
deleted file mode 100644
index 17946ec..0000000
--- a/assets/css/components/footer.css
+++ /dev/null
@@ -1,64 +0,0 @@
-/* footer.css */
-footer {
- background: var(--bg2);
- border-top: 1px solid var(--border);
- margin-top: var(--gap-xl);
- padding: 2rem 0 1rem;
- font-size: 0.85rem;
-}
-
-.footer-container {
- max-width: var(--container-max);
- margin: 0 auto;
- padding: 0 1.5rem;
- text-align: center;
- color: var(--text-dim);
-}
-
-.footer-container a {
- color: var(--accent);
-}
-
-.footer-container a:hover {
- color: var(--accent2);
-}
-
-.footer-content {
- display: flex;
- justify-content: space-between;
- align-items: center;
- flex-wrap: wrap;
- gap: 1rem;
- margin-bottom: 1rem;
-}
-
-.footer-nav {
- list-style: none;
- display: flex;
- gap: 2rem;
- margin: 0;
-}
-
-.footer-nav a {
- font-family: var(--font-mono);
- font-size: 0.75rem;
- text-transform: uppercase;
- letter-spacing: 0.08em;
-}
-
-.footer-copyright {
- color: var(--muted);
- font-family: var(--font-mono);
- font-size: 0.75rem;
-}
-
-@media (max-width: 600px) {
- .footer-content {
- flex-direction: column;
- }
-
- .footer-nav {
- flex-direction: column;
- gap: 0.5rem;
- }
-}
diff --git a/assets/css/components/hamburger.css b/assets/css/components/hamburger.css
deleted file mode 100644
index 2c868d8..0000000
--- a/assets/css/components/hamburger.css
+++ /dev/null
@@ -1,189 +0,0 @@
-/* hamburger.css */
-
-.nav-header {
- position: fixed;
- top: 0;
- right: 0;
- z-index: var(--z-nav);
- padding: var(--sp-6) var(--sp-8);
-}
-
-/* Hamburger Button */
-.hamburger {
- background: none;
- border: none;
- cursor: pointer;
- display: flex;
- flex-direction: column;
- gap: 0.4rem;
- padding: 0.5rem;
- transition: all var(--duration-base) ease;
- width: 32px;
- height: 32px;
- align-items: center;
- justify-content: center;
-}
-
-.hamburger span {
- display: block;
- width: 24px;
- height: 2px;
- background-color: var(--text);
- border-radius: 2px;
- transition: all var(--duration-base) ease;
- transform-origin: center;
-}
-
-.hamburger.active span:nth-child(1) {
- transform: translateY(10px) rotate(45deg);
-}
-
-.hamburger.active span:nth-child(2) {
- opacity: 0;
-}
-
-.hamburger.active span:nth-child(3) {
- transform: translateY(-10px) rotate(-45deg);
-}
-
-/* Menu Overlay */
-.menu-overlay {
- position: fixed;
- top: 0;
- left: 0;
- width: 100vw;
- height: 100vh;
- background: rgba(6, 11, 16, 0.95);
- backdrop-filter: blur(4px);
- z-index: var(--z-menu);
- opacity: 0;
- visibility: hidden;
- transition: opacity var(--duration-base) ease, visibility var(--duration-base) ease;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.menu-overlay.active {
- opacity: 1;
- visibility: visible;
-}
-
-/* Menu Items */
-.menu-items {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: var(--sp-12);
- width: 90%;
- max-width: 600px;
- padding: var(--sp-8);
-}
-
-.menu-logo {
- font-family: var(--font-head);
- font-size: 1.5rem;
- font-weight: 700;
- color: var(--text);
- text-decoration: none;
- margin-bottom: var(--sp-4);
-}
-
-.menu-links {
- list-style: none;
- display: flex;
- flex-direction: column;
- gap: var(--sp-6);
- text-align: center;
-}
-
-.menu-links a {
- color: var(--text);
- text-decoration: none;
- font-family: var(--font-mono);
- font-size: 1.2rem;
- padding: var(--sp-3) var(--sp-4);
- border-radius: 4px;
- transition: all var(--duration-base) ease;
-}
-
-.menu-links a:hover {
- color: var(--accent);
-}
-
-.menu-links a[aria-current="page"] {
- color: var(--accent);
- font-weight: 700;
-}
-
-/* Menu Footer */
-.menu-footer {
- display: flex;
- justify-content: center;
- margin-top: var(--sp-8);
-}
-
-/* Theme Switch Button */
-.theme-switch {
- background: var(--surface);
- border: 1px solid var(--border);
- cursor: pointer;
- width: 50px;
- height: 26px;
- border-radius: 20px;
- padding: 2px;
- position: relative;
- transition: all var(--duration-base) ease;
- display: flex;
- align-items: center;
- justify-content: flex-start;
-}
-
-.theme-switch:hover {
- border-color: var(--accent);
-}
-
-.theme-switch-dot {
- width: 20px;
- height: 20px;
- background-color: var(--text);
- border-radius: 50%;
- display: block;
- transition: transform var(--duration-base) ease;
-}
-
-.theme-switch.light {
- justify-content: flex-end;
-}
-
-.theme-switch.light .theme-switch-dot {
- transform: translateX(24px);
-}
-
-/* Keyboard Focus */
-.hamburger:focus-visible,
-.menu-links a:focus-visible,
-.theme-switch:focus-visible {
- outline: 2px solid var(--accent);
- outline-offset: 2px;
-}
-
-/* Skip Link */
-.skip-link {
- position: fixed;
- top: 0;
- left: 0;
- background: var(--accent);
- color: var(--bg);
- padding: var(--sp-3) var(--sp-4);
- z-index: var(--z-modal);
- text-decoration: none;
- font-family: var(--font-mono);
- font-size: 0.9rem;
- transform: translateY(-100%);
- transition: transform var(--duration-base) ease;
-}
-
-.skip-link:focus {
- transform: translateY(0);
-}
diff --git a/assets/css/components/header.css b/assets/css/components/header.css
deleted file mode 100644
index acb009d..0000000
--- a/assets/css/components/header.css
+++ /dev/null
@@ -1,89 +0,0 @@
-/* header.css */
-header {
- background: var(--bg);
- border-bottom: 1px solid var(--border);
- padding: 1rem 0;
- position: sticky;
- top: 0;
- z-index: 100;
-}
-
-.header-container {
- max-width: var(--container-max);
- margin: 0 auto;
- padding: 0 1.5rem;
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-
-.site-title {
- font-family: var(--font-head);
- font-size: 1rem;
- font-weight: 800;
- color: var(--accent);
- text-decoration: none;
- margin: 0;
-}
-
-.header-controls {
- display: flex;
- gap: 1.5rem;
- align-items: center;
-}
-
-nav ul {
- list-style: none;
- display: flex;
- gap: 2rem;
- margin: 0;
-}
-
-nav a {
- font-family: var(--font-mono);
- font-size: var(--fs-nav);
- text-transform: uppercase;
- letter-spacing: 0.08em;
- color: var(--text-dim);
- transition: var(--transition);
-}
-
-nav a:hover,
-nav a.active {
- color: var(--accent);
-}
-
-.theme-toggle {
- background: var(--surface);
- border: 1px solid var(--border);
- color: var(--text);
- padding: 0.5rem 1rem;
- border-radius: 4px;
- cursor: pointer;
- font-family: var(--font-mono);
- font-size: var(--fs-nav);
- transition: var(--transition);
-}
-
-.theme-toggle:hover {
- background: var(--border);
- color: var(--accent);
-}
-
-@media (max-width: 768px) {
- .header-container {
- flex-wrap: wrap;
- gap: 1rem;
- }
-
- nav ul {
- order: 3;
- width: 100%;
- gap: 1rem;
- flex-wrap: wrap;
- }
-
- .header-controls {
- gap: 1rem;
- }
-}
diff --git a/assets/css/components/hero.css b/assets/css/components/hero.css
deleted file mode 100644
index 53f30b3..0000000
--- a/assets/css/components/hero.css
+++ /dev/null
@@ -1,354 +0,0 @@
-/* hero.css */
-
-.hero {
- position: relative;
- height: 100vh;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- align-items: stretch;
- padding: 6rem 2rem 2rem;
- overflow: hidden;
-}
-
-.hero-container {
- position: relative;
- z-index: 2;
- display: flex;
- align-items: center;
- gap: 3rem;
- max-width: 1080px;
- width: 100%;
- margin: 0 auto;
- flex: 1;
-}
-
-#matrix-canvas {
- position: absolute;
- inset: 0;
- opacity: 0.13;
- pointer-events: none;
- z-index: 1;
-}
-
-html.theme-light #matrix-canvas {
- opacity: 0.08;
-}
-
-html.theme-light #matrix-canvas {
- opacity: 0.08;
-}
-
-.hero-left {
- flex: 1;
- min-width: 0;
-}
-
-.hero-prompt {
- font-size: 0.75rem;
- letter-spacing: 0.16em;
- text-transform: uppercase;
- color: var(--accent);
- margin-bottom: 0.5rem;
- font-weight: 500;
- font-family: var(--font-mono);
-}
-
-.hero-name {
- font-family: var(--font-head);
- font-size: clamp(3rem, 12vw, 7rem);
- font-weight: 800;
- letter-spacing: -0.04em;
- line-height: 1;
- margin-bottom: 1rem;
- position: relative;
- display: inline-block;
-}
-
-/* Glitch effect on hero name */
-.hero-name::before,
-.hero-name::after {
- content: attr(data-text);
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- opacity: 0;
- pointer-events: none;
- overflow: hidden;
- font-family: inherit;
- font-size: inherit;
- font-weight: inherit;
- letter-spacing: inherit;
- line-height: inherit;
-}
-
-.hero-name::before {
- color: #ff2b6d;
-}
-
-.hero-name::after {
- color: #00e5ff;
-}
-
-.hero-name.is-glitching::before {
- opacity: 0.8;
- animation: glitch-red 0.45s steps(3) forwards;
-}
-
-.hero-name.is-glitching::after {
- opacity: 0.8;
- animation: glitch-cyn 0.45s steps(3) forwards;
-}
-
-@keyframes glitch-red {
- 0% { clip-path: inset(0 0 0 0); transform: translate(0); }
- 20% { clip-path: inset(0 0 65% 0); transform: translate(-0.05em, -0.03em); }
- 40% { clip-path: inset(28% 0 58% 0); transform: translate(0.05em, 0.03em); }
- 60% { clip-path: inset(44% 0 58% 0); transform: translate(-0.05em, -0.02em); }
- 80% { clip-path: inset(12% 0 85% 0); transform: translate(0.05em, 0.02em); }
- 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
-}
-
-@keyframes glitch-cyn {
- 0% { clip-path: inset(0 0 0 0); transform: translate(0); }
- 20% { clip-path: inset(0 0 60% 0); transform: translate(0.05em, 0.02em); }
- 40% { clip-path: inset(38% 0 58% 0); transform: translate(-0.05em, 0.01em); }
- 60% { clip-path: inset(19% 0 40% 0); transform: translate(0.025em, -0.02em); }
- 80% { clip-path: inset(1% 0 58% 0); transform: translate(-0.05em, -0.02em); }
- 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
-}
-
-.hero-role {
- font-size: clamp(0.85rem, 3vw, 1rem);
- letter-spacing: 0.05em;
- margin-bottom: 1.5rem;
- color: var(--accent);
- font-weight: 400;
- min-height: 1.5em;
- font-family: var(--font-mono);
-}
-
-.cursor {
- display: inline-block;
- width: 0.15em;
- height: 1em;
- background: var(--accent);
- margin-left: 0.1em;
- animation: cursor-blink 1s step-end infinite;
-}
-
-@keyframes cursor-blink {
- 0%, 49% { opacity: 1; }
- 50%, 100% { opacity: 0; }
-}
-
-.hero-tagline {
- font-family: var(--font-body);
- font-size: 1rem;
- font-weight: 400;
- line-height: 1.95;
- color: var(--text-dim);
- margin-bottom: 2rem;
- max-width: 90%;
-}
-
-/* Buttons */
-.hero-buttons {
- display: flex;
- gap: 1rem;
- flex-wrap: wrap;
- margin-bottom: 2rem;
-}
-
-.btn {
- padding: 0.75rem 1.5rem;
- font-size: 0.8rem;
- font-family: var(--font-mono);
- letter-spacing: 0.1em;
- text-transform: uppercase;
- font-weight: 500;
- cursor: pointer;
- border: none;
- transition: all var(--duration-base) ease;
- text-decoration: none;
- display: inline-block;
- border-radius: 0;
-}
-
-.btn-primary {
- background: var(--accent);
- color: #000;
- font-weight: 600;
-}
-
-.btn-primary:hover {
- box-shadow: 0 0 24px rgba(168, 85, 247, 0.45);
- transform: translate(0, -2px);
-}
-
-.btn-outline {
- background: transparent;
- color: var(--accent);
- border: 1px solid var(--border);
-}
-
-.btn-outline:hover {
- background: var(--accent);
- color: #000;
- box-shadow: 0 0 24px rgba(168, 85, 247, 0.45);
-}
-
-/* Right column: terminal widget */
-.hero-right {
- flex: 0 0 auto;
- width: 320px;
- display: none;
-}
-
-@media (min-width: 900px) {
- .hero-right {
- display: block;
- }
-}
-
-.hero-terminal {
- background: rgba(6, 11, 16, 0.85);
- border: 1px solid rgba(168, 85, 247, 0.3);
- border-radius: 8px;
- overflow: hidden;
- font-size: 0.75rem;
- line-height: 1.7;
-}
-
-.terminal-bar {
- background: var(--surface);
- padding: 0.5rem 1rem;
- border-bottom: 1px solid var(--border);
- display: flex;
- align-items: center;
- gap: 0.75rem;
-}
-
-.terminal-dot {
- width: 12px;
- height: 12px;
- border-radius: 50%;
- display: inline-block;
-}
-
-.terminal-title {
- margin-left: auto;
- font-family: var(--font-mono);
- font-size: 0.7rem;
- color: var(--text-dim);
-}
-
-.terminal-content {
- padding: 1rem;
- font-family: var(--font-mono);
- color: var(--terminal-text);
- font-size: 0.75rem;
- line-height: 1.7;
-}
-
-.terminal-content .tl {
- white-space: nowrap;
- word-wrap: break-word;
-}
-
-/* Terminal color classes */
-.tc-dim { color: var(--muted); }
-.tc-ok { color: var(--accent2); }
-.tc-key { color: var(--accent); }
-
-/* Terminal stagger animation */
-@keyframes terminal-fade-in {
- from {
- opacity: 0;
- transform: translateY(4px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-
-.tl {
- opacity: 0;
- animation: terminal-fade-in 0.4s ease forwards;
-}
-
-.tl-d1 { animation-delay: 0ms; }
-.tl-d2 { animation-delay: 150ms; }
-.tl-d3 { animation-delay: 300ms; }
-.tl-d4 { animation-delay: 450ms; }
-.tl-d5 { animation-delay: 600ms; }
-.tl-d6 { animation-delay: 750ms; }
-.tl-d7 { animation-delay: 900ms; }
-.tl-d8 { animation-delay: 1050ms; }
-.tl-d9 { animation-delay: 1200ms; }
-
-.terminal-prompt {
- color: var(--terminal-prompt);
-}
-
-/* Scroll Indicator */
-.scroll-indicator {
- position: absolute;
- bottom: 2rem;
- left: 50%;
- transform: translateX(-50%);
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 0.5rem;
- font-family: var(--font-mono);
- font-size: 0.7rem;
- letter-spacing: 0.1em;
- text-transform: uppercase;
- color: var(--text-dim);
- z-index: 2;
-}
-
-.scroll-line {
- width: 1px;
- height: 40px;
- background: var(--accent);
- animation: scroll-line-pulse 2s ease-in-out infinite;
-}
-
-@keyframes scroll-line-pulse {
- 0%, 100% { opacity: 0.3; transform: scaleY(1); }
- 50% { opacity: 1; transform: scaleY(1.15); }
-}
-
-/* Mobile */
-@media (max-width: 900px) {
- .hero {
- height: auto;
- min-height: 100vh;
- padding-top: 6rem;
- }
-
- .hero-container {
- flex-direction: column;
- }
-
- .hero-tagline {
- max-width: 100%;
- }
-
- .scroll-indicator {
- display: none;
- }
-}
-
-@media (prefers-reduced-motion: reduce) {
- .hero-name.is-glitching::before,
- .hero-name.is-glitching::after { animation: none; }
- .cursor { animation: none; }
- .scroll-line { animation: none; opacity: 0.6; }
- .tl { animation: none; opacity: 1; }
-}
diff --git a/assets/css/components/lightbox.css b/assets/css/components/lightbox.css
deleted file mode 100644
index ad34e84..0000000
--- a/assets/css/components/lightbox.css
+++ /dev/null
@@ -1,170 +0,0 @@
-/* lightbox.css */
-
-.photo-grid {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
- gap: 1.5rem;
- margin: 2rem 0;
-}
-
-.photo-card {
- position: relative;
- cursor: pointer;
- overflow: hidden;
- border-radius: 4px;
- border: 1px solid var(--border);
- transition: all var(--duration-base) ease;
-}
-
-.photo-card:hover {
- border-color: var(--accent);
- box-shadow: 0 0 20px rgba(168, 85, 247, 0.2);
- transform: translateY(-4px);
-}
-
-.photo-card img {
- width: 100%;
- height: 200px;
- object-fit: cover;
- display: block;
- transition: transform var(--duration-base) ease;
-}
-
-.photo-card:hover img {
- transform: scale(1.05);
-}
-
-.photo-card figcaption {
- padding: 1rem;
- background: var(--surface);
- font-size: 0.9rem;
- color: var(--text-dim);
-}
-
-/* Lightbox Modal */
-.photo-lightbox {
- position: fixed;
- inset: 0;
- z-index: 200;
- display: none;
- background: rgba(6, 11, 16, 0.95);
- backdrop-filter: blur(4px);
-}
-
-.photo-lightbox.active {
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.photo-lightbox-backdrop {
- position: absolute;
- inset: 0;
- cursor: pointer;
-}
-
-.photo-lightbox-content {
- position: relative;
- z-index: 201;
- max-width: 90vw;
- max-height: 90vh;
- display: flex;
- flex-direction: column;
- gap: 1rem;
-}
-
-.photo-lightbox-image {
- max-width: 100%;
- max-height: 70vh;
- object-fit: contain;
-}
-
-.photo-lightbox-controls {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 1rem;
- background: var(--surface);
- border-radius: 4px;
-}
-
-.photo-lightbox-nav {
- display: flex;
- gap: 1rem;
-}
-
-.photo-lightbox-nav button {
- padding: 0.5rem 1rem;
- background: var(--accent);
- color: #000;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- font-weight: 600;
- transition: all var(--duration-base) ease;
-}
-
-.photo-lightbox-nav button:disabled {
- opacity: 0.5;
- cursor: not-allowed;
-}
-
-.photo-lightbox-nav button:not(:disabled):hover {
- box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
- transform: translateY(-2px);
-}
-
-.photo-lightbox-close {
- position: absolute;
- top: 1rem;
- right: 1rem;
- background: var(--surface);
- border: 1px solid var(--border);
- width: 44px;
- height: 44px;
- border-radius: 50%;
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 1.5rem;
- color: var(--text);
- transition: all var(--duration-base) ease;
- z-index: 202;
-}
-
-.photo-lightbox-close:hover {
- background: var(--accent);
- color: #000;
- border-color: var(--accent);
-}
-
-.photo-metadata {
- padding: 1rem;
- background: var(--surface);
- border-radius: 4px;
- font-size: 0.9rem;
- color: var(--text-dim);
-}
-
-.photo-metadata dt {
- font-weight: 600;
- color: var(--text);
- margin-top: 0.5rem;
-}
-
-.photo-metadata dt:first-child {
- margin-top: 0;
-}
-
-.photo-metadata dd {
- margin-left: 1rem;
- font-family: var(--font-mono);
-}
-
-@media (prefers-reduced-motion: reduce) {
- .photo-card:hover img,
- .photo-lightbox-nav button:hover {
- transform: none;
- }
-}
diff --git a/assets/css/components/progress-bar.css b/assets/css/components/progress-bar.css
deleted file mode 100644
index ee17fcc..0000000
--- a/assets/css/components/progress-bar.css
+++ /dev/null
@@ -1,19 +0,0 @@
-/* progress-bar.css */
-
-.progress-bar {
- position: fixed;
- top: 0;
- left: 0;
- height: 2px;
- background: linear-gradient(to right, var(--accent), var(--accent2));
- box-shadow: 0 0 10px var(--accent-glow);
- z-index: var(--z-progress);
- width: 0%;
- transition: width var(--duration-base) ease;
-}
-
-@media (prefers-reduced-motion: reduce) {
- .progress-bar {
- transition: none;
- }
-}
diff --git a/assets/css/components/share-sidebar.css b/assets/css/components/share-sidebar.css
deleted file mode 100644
index 8bc8d1d..0000000
--- a/assets/css/components/share-sidebar.css
+++ /dev/null
@@ -1,107 +0,0 @@
-/* share-sidebar.css */
-
-.share-sidebar {
- position: fixed;
- right: 2rem;
- bottom: 50%;
- transform: translateY(50%);
- z-index: 30;
- display: none;
-}
-
-@media (min-width: 1200px) {
- .share-sidebar {
- display: block;
- }
-}
-
-.share-buttons {
- display: flex;
- flex-direction: column;
- gap: 1rem;
-}
-
-.share-btn {
- width: 44px;
- height: 44px;
- border-radius: 50%;
- background: var(--surface);
- border: 1px solid var(--border);
- color: var(--text);
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
- transition: all var(--duration-base) ease;
- position: relative;
-}
-
-.share-btn:hover {
- background: var(--accent);
- border-color: var(--accent);
- color: #000;
- transform: scale(1.1);
-}
-
-.share-btn svg {
- width: 20px;
- height: 20px;
-}
-
-/* Tooltip */
-.share-btn::after {
- content: attr(data-label);
- position: absolute;
- right: 100%;
- top: 50%;
- transform: translateY(-50%);
- margin-right: 0.75rem;
- background: var(--surface);
- border: 1px solid var(--border);
- padding: 0.4rem 0.8rem;
- border-radius: 4px;
- white-space: nowrap;
- font-size: 0.75rem;
- color: var(--text-dim);
- opacity: 0;
- visibility: hidden;
- transition: all var(--duration-base) ease;
- pointer-events: none;
-}
-
-.share-btn:hover::after {
- opacity: 1;
- visibility: visible;
- margin-right: 1rem;
-}
-
-/* Mobile: horizontal strip below article */
-@media (max-width: 1199px) {
- .share-sidebar {
- position: static;
- transform: none;
- display: flex;
- justify-content: center;
- margin: 2rem 0;
- padding: 2rem 1.5rem;
- border-top: 1px solid var(--border);
- border-bottom: 1px solid var(--border);
- }
-
- .share-buttons {
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: center;
- }
-}
-
-@media (prefers-reduced-motion: reduce) {
- .share-btn,
- .share-btn::after {
- transition: none;
- }
-
- .share-btn:hover {
- transform: none;
- }
-}
diff --git a/assets/css/components/timeline.css b/assets/css/components/timeline.css
deleted file mode 100644
index c4a3678..0000000
--- a/assets/css/components/timeline.css
+++ /dev/null
@@ -1,336 +0,0 @@
-/* timeline.css */
-
-.page-header {
- padding: 4rem 2rem 2rem;
- max-width: var(--container-max);
- margin: 0 auto;
- text-align: center;
-}
-
-.page-header h1 {
- margin-bottom: 2rem;
-}
-
-.filter-buttons {
- display: flex;
- justify-content: center;
- gap: 1rem;
- flex-wrap: wrap;
-}
-
-.filter-btn {
- padding: 0.6rem 1.2rem;
- font-family: var(--font-mono);
- font-size: 0.75rem;
- text-transform: uppercase;
- letter-spacing: 0.1em;
- background: transparent;
- border: 1px solid var(--border);
- color: var(--text);
- cursor: pointer;
- border-radius: 4px;
- transition: all var(--duration-base) ease;
-}
-
-.filter-btn:hover {
- border-color: var(--accent);
- color: var(--accent);
-}
-
-.filter-btn.active {
- background: var(--accent);
- color: #000;
- border-color: var(--accent);
- font-weight: 600;
-}
-
-/* Featured Article */
-.featured-article {
- max-width: var(--container-max);
- margin: 3rem auto;
- padding: 2rem;
- background: var(--surface);
- border: 2px solid transparent;
- border-image: linear-gradient(135deg, var(--accent), var(--accent2)) 1;
- border-radius: 8px;
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 2rem;
- align-items: center;
-}
-
-@media (max-width: 768px) {
- .featured-article {
- grid-template-columns: 1fr;
- }
-}
-
-.featured-image {
- width: 100%;
- overflow: hidden;
- border-radius: 4px;
-}
-
-.featured-image img {
- width: 100%;
- height: 300px;
- object-fit: cover;
-}
-
-.featured-body {
- display: flex;
- flex-direction: column;
- gap: 1rem;
-}
-
-.featured-header {
- display: flex;
- gap: 1rem;
- align-items: center;
- font-size: 0.75rem;
- text-transform: uppercase;
- letter-spacing: 0.1em;
-}
-
-.featured-type-badge {
- font-weight: 600;
-}
-
-.featured-date {
- color: var(--text-dim);
-}
-
-.featured-title {
- font-size: clamp(1.5rem, 4vw, 2.5rem);
- line-height: 1.2;
- margin-bottom: 1rem;
-}
-
-.featured-excerpt {
- color: var(--text-dim);
- line-height: 1.8;
- margin-bottom: 1rem;
-}
-
-.featured-link {
- color: var(--accent);
- text-decoration: none;
- font-family: var(--font-mono);
- font-size: 0.9rem;
- transition: all var(--duration-base) ease;
-}
-
-.featured-link:hover {
- color: var(--accent2);
- transform: translateX(4px);
-}
-
-/* Timeline */
-.timeline-section {
- position: relative;
- max-width: var(--container-max);
- margin: 4rem auto;
- padding: 0 2rem;
-}
-
-.timeline-line {
- position: absolute;
- left: 50%;
- top: 0;
- bottom: 0;
- width: 2px;
- background: linear-gradient(to bottom, var(--accent), transparent);
- transform: translateX(-50%);
-}
-
-@media (max-width: 900px) {
- .timeline-line {
- left: 0;
- }
-}
-
-.timeline-feed {
- position: relative;
- padding: 2rem 0;
-}
-
-.timeline-item {
- position: relative;
- margin-bottom: 3rem;
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 2rem;
- align-items: center;
-}
-
-.timeline-item.left {
- grid-template-columns: 1fr 1fr;
-}
-
-.timeline-item.right {
- grid-template-columns: 1fr 1fr;
- direction: rtl;
-}
-
-.timeline-item.right > * {
- direction: ltr;
-}
-
-@media (max-width: 900px) {
- .timeline-item,
- .timeline-item.left,
- .timeline-item.right {
- grid-template-columns: 1fr;
- direction: ltr;
- }
-
- .timeline-item.right > * {
- direction: ltr;
- }
-}
-
-.timeline-dot {
- position: absolute;
- left: 50%;
- top: 2rem;
- width: 16px;
- height: 16px;
- background: var(--accent);
- border: 3px solid var(--bg);
- border-radius: 50%;
- transform: translateX(-50%);
- z-index: 2;
-}
-
-@media (max-width: 900px) {
- .timeline-dot {
- left: -8px;
- }
-}
-
-.article-card {
- background: var(--surface);
- border: 1px solid var(--border);
- border-radius: 8px;
- overflow: hidden;
- transition: all var(--duration-base) ease;
- cursor: pointer;
-}
-
-.article-card:hover {
- border-color: var(--accent);
- box-shadow: 0 0 20px rgba(168, 85, 247, 0.2);
- transform: translateY(-4px);
-}
-
-.article-card-image {
- width: 100%;
- height: 200px;
- overflow: hidden;
-}
-
-.article-card-image img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- transition: transform var(--duration-base) ease;
-}
-
-.article-card:hover .article-card-image img {
- transform: scale(1.05);
-}
-
-.article-card-body {
- padding: 1.5rem;
- display: flex;
- flex-direction: column;
- gap: 0.75rem;
-}
-
-.article-card-header {
- display: flex;
- gap: 1rem;
- align-items: center;
- font-size: 0.75rem;
- text-transform: uppercase;
- letter-spacing: 0.1em;
-}
-
-.article-type-badge {
- font-weight: 600;
- padding: 0.3rem 0.6rem;
- border-radius: 4px;
- background: color-mix(in srgb, currentColor 15%, transparent);
- border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
-}
-
-.article-type-badge.type-tech {
- color: var(--type-tech);
-}
-
-.article-type-badge.type-life {
- color: var(--type-life);
-}
-
-.article-type-badge.type-quote {
- color: var(--type-quote);
-}
-
-.article-type-badge.type-link {
- color: var(--type-link);
-}
-
-.article-type-badge.type-photo {
- color: var(--type-photo);
-}
-
-.article-date {
- color: var(--text-dim);
-}
-
-.article-card-title {
- font-size: 1.3rem;
- font-weight: 700;
- line-height: 1.3;
- margin: 0.5rem 0;
-}
-
-.article-card-title a {
- color: var(--text);
- text-decoration: none;
- transition: color var(--duration-base) ease;
-}
-
-.article-card-title a:hover {
- color: var(--accent);
-}
-
-.article-card-excerpt {
- color: var(--text-dim);
- font-size: 0.95rem;
- line-height: 1.6;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- overflow: hidden;
-}
-
-/* Hide/show articles based on filter */
-.timeline-item[data-type] {
- display: none;
-}
-
-.timeline-item[data-type].visible,
-.timeline-item[data-filter="all"].visible {
- display: grid;
-}
-
-@media (prefers-reduced-motion: reduce) {
- .article-card:hover {
- transform: none;
- }
-
- .article-card-image img {
- transition: none;
- }
-}