diff options
Diffstat (limited to 'assets/css/components/timeline.css')
| -rw-r--r-- | assets/css/components/timeline.css | 336 |
1 files changed, 0 insertions, 336 deletions
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; - } -} |
