From a7c6513231e6d2983cc80bb164548311316f61aa Mon Sep 17 00:00:00 2001
From: Brian DeRocher <brian@derocher.org>
Date: Sat, 16 Nov 2024 16:01:03 -0500
Subject: [PATCH] style on the welcome page.

---
 src/App.vue                    |   2 +-
 src/components/TheWelcome.vue  | 153 ++++++++++++++++-----------------
 src/components/WelcomeItem.vue |  47 ----------
 3 files changed, 77 insertions(+), 125 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6316970..3a755bc 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue
index 3d4eecd..e7907fc 100644
--- a/src/components/TheWelcome.vue
+++ b/src/components/TheWelcome.vue
@@ -8,83 +8,82 @@ import SupportIcon from './icons/IconSupport.vue'
 </script>
 
 <template>
-  <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
-    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
-    +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
-    you need to test your components and web pages, check out
-    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
-    and
-    <a href="https://on.cypress.io/component" target="_blank" rel="noopener"
+  <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
+      <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
+      +
+      <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
+      you need to test your components and web pages, check out
+      <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
+      and
+      <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>,
-    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
-    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
-    you need more resources, we suggest paying
-    <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
-    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
+      >.
+    </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>,
+      <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
+      <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
+      you need more resources, we suggest paying
+      <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
+      <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
       >StackOverflow</a
-    >. You should also subscribe to
-    <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a>
-    and follow the official
-    <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>
+      >. You should also subscribe to
+      <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a>
+      and follow the official
+      <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>
diff --git a/src/components/WelcomeItem.vue b/src/components/WelcomeItem.vue
index 7ee5203..401ca5c 100644
--- a/src/components/WelcomeItem.vue
+++ b/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>