update thing at bottom of page

KTibow · Aug 15, 2024 · ac48b9e · ac48b9e
1 parent 9ddeb23
commit ac48b9e
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 13 deletions.
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import iconLightbulb from "@ktibow/iconset-material-symbols/lightbulb-outline";
-  import iconHeart from "@ktibow/iconset-material-symbols/favorite-outline";
+  import iconMore from "@ktibow/iconset-material-symbols/arrows-more-up-rounded";
   import Icon from "$lib/misc/_icon.svelte";
   import Hero from "./Hero.svelte";
   import ButtonCard from "./ButtonCard.svelte";
@@ -52,14 +51,16 @@
   <ChipCard />
   <TabsCard />
 </div>
-<div class="tip">
-  <Icon width="1.5rem" height="1.5rem" icon={iconLightbulb} />
-  If you use the theme page, your theme will show up here
-</div>
-<a href="https://github.com/sponsors/KTibow" class="tip">
-  <Icon width="1.5rem" height="1.5rem" icon={iconHeart} />
-  If I've saved you $5 of time, consider a sponsor
-</a>
+<ul>
+  <li>Wow! You made it all the way down here!</li>
+  <li class="h-center">
+    <Icon icon={iconMore} />
+    Next steps:
+  </li>
+  <li>Join the M3 Svelte community on <a href="https://discord.gg/gS8T5RnMmA">Discord</a>.</li>
+  <li>Make a theme on the Theme page, and come back here to try it out.</li>
+  <li>Maybe even <a href="https://github.com/sponsors/KTibow">be my first public sponsor</a>.</li>
+</ul>
 
 <style>
   .cards {
@@ -71,14 +72,32 @@
       grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
     }
   }
-  .tip {
+
+  ul {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    gap: 1rem;
+
+    padding: 0;
+    margin-top: 2rem;
+    list-style-type: none;
+  }
+  ul > li {
+    background-color: rgb(var(--m3-scheme-primary-container) / 0.5);
+    color: rgb(var(--m3-scheme-on-primary-container));
+    padding: 0.75rem 1rem;
+    border-radius: 1rem 1rem 1rem 0;
+  }
+  .h-center {
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    margin-top: 2rem;
   }
   a {
     color: rgb(var(--m3-scheme-primary));
+  }
+  a:not(:hover) {
     text-decoration: none;
   }
 </style>
diff --git a/src/routes/Hero.svelte b/src/routes/Hero.svelte
@@ -19,7 +19,7 @@
   </p>
   <div class="pill m3-font-label-large">
     <Icon icon={iconStar} />
-    Celebrating 200+ stars
+    Celebrating almost 220 stars
   </div>
 </div>
 <div class="items">