chore: add color

PreMiD · Jan 7, 2024 · 60c1998 · 60c1998
1 parent d4e8903
commit 60c1998
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 23 deletions.
diff --git a/pages/index.vue b/pages/index.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup></script>
 
 <template>
-  <section
-    class="h-full justify-center items-center flex-wrap gap-2 flex mx-2 mt-20"
+  <main
+    class="h-full justify-center items-center flex-wrap gap-2 flex mx-2 mt-20 xl:mt-40 lg:mt-30"
   >
-    <div class="xs:pr-10">
+    <div class="xl:pr-10">
       <div>
         <img
           src="/assets/images/logo-wordmark.png"
@@ -13,31 +13,31 @@
         />
         <div class="flex justify-center">
           <p
-            class="w-1/1 mt-5 text-center font-semibold whitespace-pre-wrap max-w-screen xs:max-w-120 text-5"
+            class="xs:max-w-120 w-1/1 mt-5 text-center font-semibold whitespace-pre-wrap max-w-screen text-5"
           >
             <span class="color-primary">PreMiD</span> is a simple, configurable
             utility that allows you to show what you're doing on the web in your
             Discord now playing status.
           </p>
         </div>
       </div>
-      <div class="flex gap-4 justify-center lt-sm:flex-col m-10">
+      <div class="flex justify-center gap-4 lt-sm:flex-col m-10">
         <a
           href="#features"
-          class="font-semibold text-nowrap bg-primary text-center py-3 rounded-full uppercase font-inter text-4 px-10"
+          class="font-semibold text-center text-nowrap bg-primary py-3 rounded-full uppercase font-inter text-4 px-10"
         >
           <FAIcon class="w-4 mr-1 h-4" :icon="'fa-solid fa-stream'" />{{
             $t("header.links.features")
           }}</a
         >
         <a
           href="/downloads"
-          class="font-semibold text-nowrap text-center bg-btn-grey py-3 rounded-full uppercase font-inter text-4 px-10"
+          class="font-semibold text-nowrap text-center py-3 rounded-full uppercase font-inter text-4 px-10 bg-btn-gray"
         >
           <FAIcon class="w-4 mr-1 h-4" :icon="'fa-solid fa-download'" />{{
             $t("header.links.downloads")
-          }}</a
-        >
+          }}
+        </a>
       </div>
     </div>
     <section class="flex-col">
@@ -62,45 +62,47 @@
           },
         ]"
         :key="presenceData.name"
-        class="h-65 bg-primary m-4 rounded-t-2 rounded-b-4 justify-center w-md"
+        class="bg-primary justify-center h-65 m-4 rounded-t-2 rounded-b-4 w-md"
       >
         <div class="flex items-center">
           <img
             class="rounded-full h-20 m-5"
             src="https://cdn.discordapp.com/avatars/503557087041683458/0e08c6c7ecd491094f443a86e53f1b13.png?size=1024"
           />
           <div>
-            <h1 class="font-semibold subpixel-antialiased text-5 font-inter">
+            <h1 class="font-semibold text-5 font-inter subpixel-antialiased">
               PreMiD
             </h1>
             <FAIcon
-              class="h-5 mt-1 h-fit mr-1 w-5"
+              class="mr-1 h-5 mt-1 h-fit w-5"
               :icon="'fa-solid fa-download'"
             />
           </div>
         </div>
-        <div class="h-37 bg-primary brightness-95 w-full rounded-b-2 top-1/2">
+        <div class="bg-primary h-37 brightness-95 w-full rounded-b-2 top-1/2">
           <div class="pt-4 pl-4">
-            <h1 class="font-extrabold uppercase text-3">Playing a game</h1>
-            <div class="flex flex-wrap mt-4 h-fit">
+            <h1 class="uppercase font-extrabold text-3">Playing a game</h1>
+            <div class="flex flex-wrap h-fit mt-4">
               <span class="max-h-22">
                 <img
                   class="rounded-md h-22"
                   src="https://cdn.discordapp.com/avatars/503557087041683458/0e08c6c7ecd491094f443a86e53f1b13.png?size=1024"
                 />
 
                 <div
-                  class="rounded-full relative bottom-8 bg-primary w-9 h-9 left-15"
+                  class="rounded-full bg-primary relative bottom-8 w-9 h-9 left-15"
                 >
                   <img
-                    class="w-8 h-8 rounded-full m-0.5"
+                    class="rounded-full w-8 h-8 m-0.5"
                     src="https://cdn.discordapp.com/avatars/503557087041683458/0e08c6c7ecd491094f443a86e53f1b13.png?size=1024"
                   />
                 </div>
               </span>
               <div class="pl-5 my-a">
-                <h1 class="font-bold text-sm pb-.5">{{ presenceData.name }}</h1>
-                <p class="text-xs font-extralight pb-.5">
+                <h1 class="font-bold text-sm pb-.5">
+                  {{ presenceData.name }}
+                </h1>
+                <p class="pb-.5 text-xs font-extralight">
                   {{ presenceData.state }}
                 </p>
                 <p class="text-xs font-extralight pb-.5">
@@ -115,7 +117,11 @@
         </div>
       </div>
     </section>
-  </section>
+  </main>
+  <!-- <hr class="mt-50" /> -->
+  <!-- <section class="flex justify-center bg-bg-blue-gray">
+    <h1 class="font-bold text-5xl">You will love these features!</h1>
+  </section> -->
 </template>
 
 <style scoped></style>
diff --git a/uno.config.ts b/uno.config.ts
@@ -13,11 +13,12 @@ export default defineConfig({
     },
     colors: {
       bg: {
-        primary: "hsl(227, 18 %, 8 %)",
-        secondary: "hsl(227, 18 %, 12 %)",
+        blueGray: "hsl(218, 9%, 17%)",
+        primary: "hsl(227, 18%, 8%)",
+        secondary: "hsl(227, 18%, 12%)",
       },
       btn: {
-        grey: "#212530",
+        gray: "#212530",
       },
       link: {
         icon: {