src/components/WelcomeItem.vue

@@ -1,37 +1,22 @@
 <template>
-  <div class="item-wrapper">
+  <div class="item">
-    <div class="item">
+    <i>
-      <i>
+      <slot name="icon"></slot>
-        <slot name="icon"></slot>
+    </i>
-      </i>
+    <div class="details">
-      <div class="details">
+      <h3>
-        <h3>
+        <slot name="heading"></slot>
-          <slot name="heading"></slot>
+      </h3>
-        </h3>
+      <slot></slot>
-        <slot></slot>
-      </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-.item-wrapper {
-  background: var(--color-background-soft);
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 1.5rem;
-  margin-bottom: 1.5rem;
-  transition: border-color 0.3s ease;
-}
-
-.item-wrapper:hover {
-  border-color: var(--color-border-hover);
-}
-
 .item {
+  margin-top: 2rem;
   display: flex;
   position: relative;
-  margin: 0;
 }
 
 .details {
@@ -45,8 +30,8 @@ i {
   place-content: center;
   width: 32px;
   height: 32px;
+
   color: var(--color-text);
-  flex-shrink: 0;
 }
 
 h3 {
@@ -57,20 +42,46 @@ h3 {
 }
 
 @media (min-width: 1024px) {
-  .item-wrapper {
-    margin-bottom: 2rem;
-  }
-  
   .item {
-    padding: 0;
+    margin-top: 0;
+    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
   }
 
   i {
-    width: 50px;
+    top: calc(50% - 25px);
-    height: 50px;
+    left: -26px;
+    position: absolute;
     border: 1px solid var(--color-border);
     background: var(--color-background);
     border-radius: 8px;
+    width: 50px;
+    height: 50px;
+  }
+
+  .item:before {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    bottom: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:after {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    top: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:first-of-type:before {
+    display: none;
+  }
+
+  .item:last-of-type:after {
+    display: none;
   }
 }
-</style>
+</style>