summaryrefslogtreecommitdiffstats
path: root/assets/css/components/timeline.css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/components/timeline.css')
-rw-r--r--assets/css/components/timeline.css336
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;
- }
-}