fix: some colors customized (-> card component)

package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "vanillaos-website",
+  "name": "parchlinux-website",
   "version": "2.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "vanillaos-website",
+      "name": "parchlinux-website",
       "version": "2.0.0",
       "dependencies": {
         "@types/marked": "^5.0.1",

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "vanillaos-website",
+  "name": "parchlinux-website",
   "version": "2.0.0",
   "type": "module",
   "private": true,

public/assets/css/colors/dark.css

@@ -1,5 +1,10 @@
 @media (prefers-color-scheme:dark) {
     :root {
+        /* ParchLinux Colors */
+        --parch-color: linear-gradient(90deg, #3b82f6 0%, #382dbd 100%);
+        --parch-hover-color: linear-gradient(90deg, #4075c9 0%, #291db4 100%);
+        --parch-text-color: #f0f3f7;
+
         /* Generic Colors */
         --generic-green-1: #26D959;
         --generic-gree-2: #20A746;
@@ -50,16 +55,16 @@
         --text-color: #c8c8c8;
         --text-color-deep: #ffffff;
         --text-color-dimmed: #8f8f8f;
-        --text-color-alt: #1e1e1e;
+        --text-color-alt: #0d0d0d;
         --body-bg-color: var(--text-color-alt);
-        --secondary-bg-color: #2c2c2c;
-        --secondary-bg-color-alt: #262626;
+        --secondary-bg-color: #1f1f1f;
+        --secondary-bg-color-alt: #141414;
         --primary-bg-color: #ffffff;
         --dark-bg-color: var(--body-bg-color);
         --dark-color: var(--text-color);
         --light-bg-color: #ffffff;
         --light-color: #232220;
-        --backdrop-bg-color: #1e1e1ed6;
+        --backdrop-bg-color: #0d0d0d;
         --link-color: #ebebeb;
         --link-hover-color: #0f6db5;
         --link-focus-color: #99a1e2;

public/assets/css/colors/default.css

@@ -19,7 +19,7 @@
     --accent-yellow-bg-color-light: #FFF6E5;
     --accent-yellow-bg-color-deep: #ccb892;
     --accent-yellow-text-color: #221d15;
-    --accent-blue-bg-color: #C2CDD8;
+    --accent-blue-bg-color: #317bf7;
     --accent-blue-bg-color-vivid: #3c7bc2;
     --accent-blue-bg-color-light: #d3dbe4;
     --accent-blue-bg-color-deep: #b2bbc5;
@@ -72,4 +72,4 @@
     .on-dark {
         display: none;
     }
-}
+}

public/assets/css/components/card.css

@@ -2,15 +2,18 @@
     --card-bg-color: var(--body-bg-color);
     --card-bg-dark: var(--dark-bg-color);
     --card-color-dark: var(--dark-color);
+
     --card-bg-light: var(--light-bg-color);
     --card-color-light: var(--light-color);
     --card-color: var(--text-color);
+
     --card-type-adv-bg-color: var(--accent-yellow-bg-color);
     --card-type-adv-color: var(--accent-blue-text-color);
     --card-type-funnyletter-bg-color: var(--accent-blue-bg-color);
     --card-type-funnyletter-color: var(--accent-blue-text-color);
     --card-type-dev-bg-color: var(--accent-brown-bg-color);
     --card-type-dev-color: var(--accent-brown-text-color);
+
     --card-green-bg-color: var(--accent-green-bg-color);
     --card-green-color: var(--accent-green-text-color);
     --card-blue-bg-color: var(--accent-blue-bg-color);
@@ -23,6 +26,7 @@
     --card-purple-color: var(--accent-purple-text-color);
     --card-red-bg-color: var(--accent-red-bg-color);
     --card-red-color: var(--accent-red-text-color);
+
     --card-clickable-hover-bg-color: var(--secondary-bg-color-alt);
     --card-clickable-green-hover-bg-color: var(--accent-green-bg-color-deep);
     --card-clickable-blue-hover-bg-color: var(--accent-blue-bg-color-deep);
@@ -184,6 +188,7 @@
 .card.card--clickable {
     text-decoration: none;
     cursor: pointer;
+    background-color: var;
 }
 
 .card.card--clickable:hover {
@@ -200,8 +205,8 @@
 }
 
 .card.card--blue {
-    background-color: var(--card-blue-bg-color);
-    color: var(--card-blue-color);
+    background: var(--parch-color);
+    color: var(--parch-text-color);
 }
 
 .card.card--clickable.card--blue:hover {
@@ -356,4 +361,4 @@
         font-size: 24px;
         line-height: 1.35;
     }
-}
+}

public/assets/css/components/hero.css

@@ -1,5 +1,5 @@
 .hero {
-    --hero-heading-color: var(--accent-yellow-bg-color-vivid);
+    --hero-heading-color: var(--parch-color);
     --hero-heading-sub-color: var(--text-color);
     --hero-gn-purple-color: var(--text-color-alt);
     --hero-gn-purple-start: #201026;
@@ -7,7 +7,11 @@
 }
 
 .hero-heading {
-    color: var(--hero-heading-color);
+    padding-top: 15px;
+
+    background: var(--hero-heading-color);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
 }
 
 .hero-wrapper {
@@ -237,4 +241,4 @@
         display: flex;
         align-items: center;
     }
-}
+}

src/App.vue

@@ -4,7 +4,6 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { useHead } from 'unhead'
 
 export default defineComponent({
   name: "App",
@@ -14,4 +13,4 @@ export default defineComponent({
     };
   },
 });
-</script>
+</script>

src/components/Footer.vue

@@ -53,7 +53,7 @@
                     <li><router-link :to="{ name: 'components-lifecycle' }">Components Lifecycle</router-link></li>
                     <li><router-link :to="{ name: 'nerd-info' }">Information for Nerds</router-link></li>
                     <li class="spacer"></li>
-                    <li><b>Get Vanilla OS</b></li>
+                    <li><b>Get Parch OS</b></li>
                     <li><router-link :to="{ name: 'download' }">Download</router-link></li>
                     <li><router-link :to="{ name: 'download' }">System Requirements</router-link></li>
                     <!--<li><router-link :to="{ name: 'download' }">Release Notes</router-link></li>-->

src/components/NotMailNotChimp.vue

@@ -4,7 +4,7 @@
         <div class="modal-wrapper card">
             <div class="card-header">
                 <h3>Subscribe to the Newsletter</h3>
-                <p>Get the latest news and updates from Vanilla OS.</p>
+                <p>Get the latest news and updates from Parch Linux.</p>
             </div>
             <form
                 action="https://vanillaos.us9.list-manage.com/subscribe/post?u=a988825202ae676e78fd240c5&amp;id=ef015d988e&amp;f_id=00c618e1f0"
@@ -47,7 +47,7 @@
         </div>
     </div>
 </template>
-  
+
 <script lang="ts">
 import { defineComponent } from "vue";
 

src/views/Help.vue

@@ -3,7 +3,7 @@
         <card v-for="(item, index) in helpItems" :key="index" :item="item" />
     </div>
 </template>
-  
+
 <script lang="ts">
 import { defineComponent } from 'vue';
 
@@ -69,11 +69,10 @@ export default defineComponent({
                     icon: 'support',
                     title: 'Enterprise Support',
                     description: 'Get enterprise support for Vanilla OS from fabricatorsltd.',
-                    extraClasses: ['card--green']
+                    extraClasses: ['card--blue']
                 },
             ],
         };
     },
 });
 </script>
-  

src/views/Home.vue

@@ -7,7 +7,7 @@
         src="/assets/images/backgrounds/vos-orchid-laptop-frame-dark.svg" alt="Vanilla OS 2 Orchid" />
       <article class="hero-content">
         <header class="hero-heading">
-          <h2>Vanilla OS <span>is your next Operating System.</span></h2>
+          <h2>Parch Linux <span>is your next Operating System.</span></h2>
         </header>
         <div class="hero-footer">
           <div class="flexList">
@@ -16,7 +16,7 @@
               <span>Download Now</span>
             </router-link>
             <div class="text text--dimmed">
-              <small>Vanilla OS works out of the box on a large set of devices,
+              <small>Parch Linux works out of the box on a large set of devices,
                 <a href="https://docs.vanillaos.org/handbook/en/installation" target="_blank">
                   learn how to install it.
                 </a>
@@ -29,7 +29,6 @@
   </section>
 
   <nav class="navigationBar" aria-label="go to sections">
-    <h2 class="text text--dimmed" aria-labelledby=""> Vanilla OS is</h2>
     <ul>
       <li :class="{ 'active': activeSection === 'work' }">
         <button @click="scrollTo('#work')">Work</button>