From 1a6ecd82abe89e1686538c42b31826ccc8a43b2d Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Fri, 9 Feb 2024 00:44:28 +0330
Subject: [PATCH] style: decorate paragraphs

---
 src/components/about/about.module.css | 61 ++++++++++++++++++++++++---
 1 file changed, 54 insertions(+), 7 deletions(-)

diff --git a/src/components/about/about.module.css b/src/components/about/about.module.css
index 5c4d90b..4cb8917 100644
--- a/src/components/about/about.module.css
+++ b/src/components/about/about.module.css
@@ -35,19 +35,66 @@
   }
 
   & .desc {
+    position: relative;
     width: 100%;
-    max-width: 450px;
+    max-width: 500px;
+    padding: 24px 0;
+    padding-left: 24px;
     margin: 0 auto;
-    line-height: 1.6;
+    line-height: 1.65;
     color: var(--color-foreground-subtle);
-    text-align: center;
+    text-align: left;
+    background: linear-gradient(90deg, rgb(24 24 27 / 70%), transparent);
+    border-radius: 20px;
 
-    &:not(:last-of-type) {
-      margin-bottom: 24px;
+    &:first-of-type {
+      border-top: none;
     }
+
+    &:nth-of-type(odd)::after {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: 1px;
+      height: 70%;
+      content: '';
+      background: linear-gradient(
+        transparent,
+        var(--color-neutral-300),
+        transparent
+      );
+      transform: translateY(-50%);
+    }
+
+    &:nth-of-type(even) {
+      padding-right: 24px;
+      padding-left: 0;
+      text-align: right;
+      background: linear-gradient(90deg, transparent, rgb(24 24 27 / 70%));
+      border-left: none;
+    }
+
+    &:nth-of-type(even)::after {
+      position: absolute;
+      top: 50%;
+      right: 0;
+      width: 1px;
+      height: 70%;
+      content: '';
+      background: linear-gradient(
+        transparent,
+        var(--color-neutral-300),
+        transparent
+      );
+      transform: translateY(-50%);
+    }
+
+    /* &:not(:last-of-type) {
+      margin-bottom: 24px;
+    } */
   }
 
-  & .divider {
+  /* & .divider {
     width: 80px;
     height: 1px;
     margin: 0 auto 24px;
@@ -57,5 +104,5 @@
       var(--color-neutral-300),
       transparent
     );
-  }
+  } */
 }