about layout

src/components/AboutItem.vue

@@ -14,13 +14,14 @@
 
 <style scoped>
 .item {
-  margin-top: 2rem;
   display: flex;
 }
 
 .details {
   flex: 1;
-  margin-left: 1rem;
+  margin-left: 1em;
+  border-left: 1px solid var(--bs-border-color);
+  padding: 2em;
 }
 
 i {
@@ -29,36 +30,30 @@ i {
   place-content: center;
   width: 32px;
   height: 32px;
-  color: var(--color-text);
+  margin-top: 2.5em;
+  color: var(--bs-body-color);
 }
 
 h3 {
   font-size: 1.2rem;
   font-weight: 500;
   margin-bottom: 0.4rem;
-  color: var(--color-heading);
+  volor: var(--bs-body-color);
 }
 
 @media (min-width: 1024px) {
-  .item {
-    margin-top: 0;
-    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
-  }
 
   i {
-    top: calc(50% - 25px);
+    border: 1px solid var(--bs-border-color);
-    left: -26px;
-    position: absolute;
-    border: 1px solid var(--color-border);
-    background: var(--color-background);
     border-radius: 8px;
     width: 50px;
     height: 50px;
+    margin-right: 2em;
   }
 
   .item:before {
     content: ' ';
-    border-left: 1px solid var(--color-border);
+    border-left: 1px solid var(--bs-border-color);
     position: absolute;
     left: 0;
     bottom: calc(50% + 25px);
@@ -67,7 +62,7 @@ h3 {
 
   .item:after {
     content: ' ';
-    border-left: 1px solid var(--color-border);
+    border-left: 1px solid var(--bs-border-color);
     position: absolute;
     left: 0;
     top: calc(50% + 25px);

src/views/AboutView.vue

@@ -4,9 +4,7 @@ import TheAbout from '../components/TheAbout.vue'
 </script>
 
 <template>
-  <main>
+  <TheAbout />
-    <TheAbout />
-  </main>
 </template>
 
 <style>