css/index.css

@@ -1,9 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer base {
-    :root {
-        --color-kamilcraft-green: 162 207 0;
-    }
-}

src/components/FooterComponent.vue

@@ -2,7 +2,7 @@
   <footer class="bg-neutral-800 py-8">
     <div class="flex items-center justify-between max-w-screen-xl mx-auto">
       <div class="bg-neutral-600 text-white pl-10 pr-5 py-2.5 text-logo-size leading-normal font-thasadith">
-        Kamil<span class="text-kamilcraft-green">Craft</span>
+        Kamil<span class="text-lime-500">Craft</span>
       </div>
       <ul class="flex gap-5 pr-3 text-lg">
         <li

src/components/NavigationHeader.vue

@@ -9,7 +9,7 @@
         :class="{ 'clicked-logo': isClicked }"
         @click="linkClicked"
       >
-        Kamil<span class="text-kamilcraft-green">Craft</span>
+        Kamil<span class="text-lime-500">Craft</span>
       </div>
     </RouterLink>
     <nav>
@@ -44,8 +44,8 @@
           >
             <a
               :href="href"
-              class="hover:text-kamilcraft-green"
+              class="hover:text-lime-500"
-              :class="[ (!isActive && isHomePage && !isClicked) ? 'text-white' : (isActive ? 'text-kamilcraft-green' : 'text-gray-500') ]"
+              :class="[ (!isActive && isHomePage && !isClicked) ? 'text-white' : (isActive ? 'text-lime-500' : 'text-gray-500') ]"
               @click="navigate"
             >
               {{ menuItem.title }}

src/components/SiteHeader.vue

@@ -3,12 +3,10 @@
     <Navigation :is-home-page="isHome" />
     <div
       v-if="isTitle"
-      class="max-w-screen-header-content mx-auto text-center px-2.5 py-10"
+      class="header-info"
-      :class="{ 'text-white': isHome }"
+      :class="{ 'header-info-home': isHome }"
     >
-      <h1 class="mb-6 relative font-light text-[2.5rem] leading-[3.5rem] after:block after:absolute after:w-24 after:h-0.5 after:bg-kamilcraft-green after:left-1/2 after:-ml-12">
+      <h1>{{ getTitle }}</h1>
-        {{ getTitle }}
-      </h1>
       <p v-if="isDescription && descriptionType === 'string'">
         {{ getDescription }}
       </p>
@@ -44,11 +42,38 @@ const descriptionType = computed(() => {
 })
 </script>
 
-<style scoped>
+<style lang="scss">
 .home-page {
   background: linear-gradient(237.74deg, #1199A5 0%, #436DA7 83%);
 }
 .sub-page {
   background-color: #EFEFEF;
 }
+.header-info {
+  text-align: center;
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 40px 10px;
+  h1 {
+    position: relative;
+    font-weight: lighter;
+    font-size: 2.5em;
+    line-height: 1.5em;
+    margin-bottom: 25px;
+
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      width: 100px;
+      height: 2px;
+      background-color: #A2CF00;
+      left: 50%;
+      margin-left: -50px;
+    }
+  }
+  &-home {
+    color: white;
+  }
+}
 </style>

tailwind.config.js

@@ -5,22 +5,26 @@ module.exports = {
   ],
   darkMode: true,
   theme: {
-    extend: {
+    fontFamily: {
-      fontFamily: {
+      'arial': ['Arial', 'sans-serif'],
-        'arial': ['Arial', 'sans-serif'],
+      'roboto': ['Roboto', 'sans-serif'],
-        'roboto': ['Roboto', 'sans-serif'],
+      'thasadith': ['Thasadith', 'sans-serif']
-        'thasadith': ['Thasadith', 'sans-serif']
-      },
-      fontSize: {
-        'logo-size': '2.5rem',
-      },
-      screens: {
-        'header-content': '900px'
-      },
-      colors: {
-        'kamilcraft-green': 'rgb(var(--color-kamilcraft-green) / <alpha-value>)'
-      }
     },
+    fontSize: {
+      'logo-size': '2.5rem',
+      'xs': '.75rem',
+      'sm': '.875rem',
+      'tiny': '.875rem',
+      'base': '1rem',
+      'lg': '1.125rem',
+      'xl': '1.25rem',
+      '2xl': '1.5rem',
+      '3xl': '1.875rem',
+      '4xl': '2.25rem',
+      '5xl': '3rem',
+      '6xl': '4rem',
+      '7xl': '5rem'
+    }
   },
   plugins: [],
 }