style on the welcome page.

src/App.vue

@@ -121,7 +121,7 @@ import OverlayBadge from 'primevue/overlaybadge';
           </li>
         </ul>
       </div>
-      <div class="p-8 flex flex-col flex-auto">
+      <div class="p-4 flex flex-col flex-auto">
         <div class="border-2 border-dashed border-surface rounded-border bg-surface-0 dark:bg-surface-950 flex-auto">
           <RouterView />
         </div>

src/components/TheWelcome.vue

@@ -8,23 +8,21 @@ import SupportIcon from './icons/IconSupport.vue'
 </script>
 
 <template>
+  <div class="list">
     <WelcomeItem>
       <template #icon>
         <DocumentationIcon />
       </template>
       <template #heading>Documentation</template>
-
       Vue’s
       <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
       provides you with all information you need to get started.
     </WelcomeItem>
-
     <WelcomeItem>
       <template #icon>
         <ToolingIcon />
       </template>
       <template #heading>Tooling</template>
-
       This project is served and bundled with
       <a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
       recommended IDE setup is
@@ -37,18 +35,12 @@ import SupportIcon from './icons/IconSupport.vue'
       <a href="https://on.cypress.io/component" target="_blank" rel="noopener"
       >Cypress Component Testing</a
       >.
-
-    <br />
-
-    More instructions are available in <code>README.md</code>.
     </WelcomeItem>
-
     <WelcomeItem>
       <template #icon>
         <EcosystemIcon />
       </template>
       <template #heading>Ecosystem</template>
-
       Get official tools and libraries for your project:
       <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
       <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
@@ -58,13 +50,11 @@ import SupportIcon from './icons/IconSupport.vue'
       <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
       a visit.
     </WelcomeItem>
-
     <WelcomeItem>
       <template #icon>
         <CommunityIcon />
       </template>
       <template #heading>Community</template>
-
       Got stuck? Ask your question on
       <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
       Discord server, or
@@ -76,15 +66,24 @@ import SupportIcon from './icons/IconSupport.vue'
       <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
       twitter account for latest news in the Vue world.
     </WelcomeItem>
-
     <WelcomeItem>
       <template #icon>
         <SupportIcon />
       </template>
       <template #heading>Support Vue</template>
-
       As an independent project, Vue relies on community backing for its sustainability. You can help
       us by
       <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
     </WelcomeItem>
+  </div>
 </template>
+
+<style scoped>
+.list {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: 2rem;
+  padding: 10px;
+}
+</style>

src/components/WelcomeItem.vue

@@ -14,9 +14,7 @@
 
 <style scoped>
 .item {
-  margin-top: 2rem;
   display: flex;
-  position: relative;
 }
 
 .details {
@@ -30,7 +28,6 @@ i {
   place-content: center;
   width: 32px;
   height: 32px;
-
   color: var(--color-text);
 }
 
@@ -40,48 +37,4 @@ h3 {
   margin-bottom: 0.4rem;
   color: var(--color-heading);
 }
-
-@media (min-width: 1024px) {
-  .item {
-    margin-top: 0;
-    padding: 0.4rem 0 1rem 80px;
-  }
-
-  i {
-    top: calc(50% - 25px);
-    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>