From 5299986ed17198d42301602cc480a433fed83f82 Mon Sep 17 00:00:00 2001
From: chapoi <101828855+chapoi@users.noreply.github.com>
Date: Wed, 9 Apr 2025 00:31:10 +0800
Subject: [PATCH] UX:  iteration for the timeline scroll design (#116)

Attempt to make the timeline less eye-drawing, while still enhancing the
feel of "this is a draggable area" by emphasising the handle. Also added
a slight decrease of width.

| Before | After |
|--------|--------|
| ![CleanShot 2025-04-07 at 20 17
29@2x](https://github.com/user-attachments/assets/7997a797-1ffa-43b7-94fa-010974aeae51)
| ![CleanShot 2025-04-07 at 20 17
02@2x](https://github.com/user-attachments/assets/7372e1e2-8530-4045-bcdf-0ef73aa6698e)
|
---
 scss/topic.scss | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/scss/topic.scss b/scss/topic.scss
index 6e15c32..135e4ac 100644
--- a/scss/topic.scss
+++ b/scss/topic.scss
@@ -21,20 +21,11 @@
 
     .timeline-scroller {
       @include breakpoint("medium", $rule: min-width) {
-        padding: 0.25em;
-        border: 1px solid var(--accent-color);
-        border-radius: 0.75em;
-        padding-left: 0.5em;
-        margin-left: calc(-0.5em - 2.5px);
+        margin-left: -4.5px;
         background: var(--d-content-background);
         height: 40px !important; // height is coming from element style have no other choice
       }
 
-      .timeline-scroller-content {
-        // display: flex;
-        // flex-direction: column;
-        // gap: 0.25em;
-      }
       .timeline-replies,
       .timeline-ago {
         line-height: 1;
@@ -43,8 +34,8 @@
     .timeline-handle {
       background-color: var(--accent-color);
       @include breakpoint("medium", $rule: min-width) {
-        width: 3px;
-        border-radius: 2px;
+        width: 8px;
+        border-radius: 10px;
         height: calc(100% - 6px);
       }
     }
@@ -70,7 +61,7 @@
 }
 
 .container.posts {
-  grid-template-columns: auto 150px;
+  grid-template-columns: auto 8em;
   @media screen and (max-width: 924px) {
     grid-template-columns: auto auto;
   }