updated header style - tailwind

css/index.css

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

src/components/SiteHeader.vue

@@ -3,10 +3,12 @@
     <Navigation :is-home-page="isHome" />
     <div
       v-if="isTitle"
-      class="header-info"
+      class="max-w-screen-header-content mx-auto text-center px-2.5 py-10"
-      :class="{ 'header-info-home': isHome }"
+      :class="{ 'text-white': isHome }"
     >
-      <h1>{{ getTitle }}</h1>
+      <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">
+        {{ getTitle }}
+      </h1>
       <p v-if="isDescription && descriptionType === 'string'">
         {{ getDescription }}
       </p>
@@ -42,38 +44,11 @@ const descriptionType = computed(() => {
 })
 </script>
 
-<style lang="scss">
+<style scoped>
 .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,26 +5,22 @@ module.exports = {
   ],
   darkMode: true,
   theme: {
-    fontFamily: {
+    extend: {
-      'arial': ['Arial', 'sans-serif'],
+      fontFamily: {
-      'roboto': ['Roboto', 'sans-serif'],
+        'arial': ['Arial', 'sans-serif'],
-      'thasadith': ['Thasadith', 'sans-serif']
+        'roboto': ['Roboto', '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: [],
 }