feat(ui): implement line numbering feature for post content with dynamic updates

src/styles/main.scss

@@ -173,15 +173,6 @@ blockquote {
     padding-right: 0;
   }
 
-  &:before {
-    content: '”';
-    font-family: Georgia, serif;
-    font-size: 3.875rem;
-    position: absolute;
-    left: -40px;
-    top: -20px;
-  }
-
   p:first-of-type {
     margin-top: 0;
   }

src/styles/post.scss

@@ -128,9 +128,43 @@
     }
   }
 
-  &-content {
+  &-body {
+    position: relative;
     margin-top: 30px;
+  }
+
+  &-line-gutter {
+    position: absolute;
+    left: -60px;
+    top: 0;
+    width: 40px;
+    user-select: none;
+    opacity: 0.5;
+    border-right: 1px solid var(--foreground);
+
+    @media (max-width: $tablet-max-width) {
+      display: none;
+    }
+
+    .line-number {
+      position: absolute;
+      right: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      font-size: 0.75rem;
+      color: var(--foreground);
+      font-family: Hack, Monaco, Consolas, monospace;
+    }
+
+    .line-number--gap {
+      opacity: 0.6;
+    }
+  }
+
+  &-content {
     font-family: Hack, Monaco, Consolas, 'Ubuntu Mono', PingHei, 'PingFang SC', 'Microsoft YaHei', monospace;
+    line-height: 1.54;
   }
 
   &-cover {