feat(lineNumbers): refactor line number generation and enhance element metrics handling

src/styles/post.scss

@@ -135,12 +135,12 @@
 
   &-line-gutter {
     position: absolute;
-    left: -60px;
+    left: -80px;
     top: 0;
-    width: 40px;
+    width: 60px;
     user-select: none;
     opacity: 0.5;
-    border-right: 1px solid var(--foreground);
+    border-right: 1px solid color-mix(in srgb, var(--foreground) 15%, transparent);
 
     @media (max-width: $tablet-max-width) {
       display: none;
@@ -152,13 +152,38 @@
       display: flex;
       align-items: center;
       justify-content: flex-end;
+      padding-right: 10px;
       font-size: 0.75rem;
       color: var(--foreground);
       font-family: Hack, Monaco, Consolas, monospace;
+      transition: opacity 0.15s ease;
+      opacity: 0.8;
+
+      &:hover {
+        opacity: 1;
+      }
     }
 
     .line-number--gap {
-      opacity: 0.6;
+      opacity: 0.5;
+    }
+
+    .line-number--breakpoint {
+      cursor: pointer;
+
+      .line-breakpoint {
+        position: absolute;
+        top: -1px;
+        right: -3px;
+        color: #e51400;
+        font-size: 0.875rem;
+        transition: transform 0.15s ease, filter 0.15s ease;
+      }
+
+      &:hover .line-breakpoint {
+        transform: scale(1.2);
+        filter: brightness(1.2);
+      }
     }
   }