css class

home/_includes/cta.html

@@ -3,7 +3,7 @@
     <div class="container px-5 py-24 mx-auto">
   {% endunless %}
       <div class="lg:w-2/3 flex flex-col sm:flex-row sm:items-center items-start mx-auto">
-        <h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">{{ include.cta.text }}</h1>
+        <h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font cm-lgt-txt">{{ include.cta.text }}</h1>
         {% for item in include.cta.btn %}
         <button href="{{ item.link }}" class="flex-shrink-0 text-white bg-primarylg border-0 py-2 px-8 focus:outline-none hover:bg-primary rounded text-lg mt-10 sm:mt-0">{{ item.text }}</button>
         {% endfor %}

home/_includes/features.html

@@ -2,7 +2,7 @@
     <div class="container px-5 py-24 mx-auto">
       <div class="flex flex-wrap w-full mb-4">
         <div class="lg:w-1/2 w-full mb-6 lg:mb-0">
-          <h1 class="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900">{{ include.data.header.title }}</h1>
+          <h1 class="sm:text-3xl text-2xl font-medium title-font mb-2 cm-lgt-txt">{{ include.data.header.title }}</h1>
           <div class="h-1 w-20 bg-primarylg rounded"></div>
         </div>
         <p class="lg:w-1/2 w-full leading-relaxed text-gray-500">{{ include.data.header.text }}</p>
@@ -13,7 +13,7 @@
         <div class="xl:w-1/4 md:w-1/2 p-4">
           <div class="bg-gray-100 p-6 rounded-lg">
             <h3 class="tracking-widest text-purple-500 text-xs font-medium title-font">{{ item.subtitle }}</h3>
-            <h2 class="text-lg text-gray-900 font-medium title-font mb-4">{{ item.title }}</h2>
+            <h2 class="text-lg cm-lgt-txt font-medium title-font mb-4">{{ item.title }}</h2>
             <p class="leading-relaxed text-base">{{ item.tagline }}</p>
           </div>
         </div>

home/_includes/footer.html

@@ -1,7 +1,7 @@
 <footer class="cm-text-body">
     <div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
       <div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left">
-        <a class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
+        <a class="flex title-font font-medium items-center md:justify-start justify-center cm-lgt-txt">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-primarylg rounded-full" viewBox="0 0 24 24">
             <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
           </svg>

home/_includes/header.html

@@ -1,14 +1,14 @@
 <header class="cm-text-body">
     <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
-      <a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
+      <a class="flex title-font font-medium items-center cm-lgt-txt mb-4 md:mb-0">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-primary rounded-full" viewBox="0 0 24 24">
           <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
         </svg>
         <span class="ml-3 text-xl">{{ site.title }}</span>
       </a>
       <nav class="md:ml-auto flex flex-wrap items-center text-base justify-center">
-        <a class="mr-5 hover:text-gray-900">for buisnesses</a>
+        <a class="mr-5 hover:cm-lgt-txt">for buisnesses</a>
-        <a class="mr-5 hover:text-gray-900">for hobbyists</a>
+        <a class="mr-5 hover:cm-lgt-txt">for hobbyists</a>
       </nav>
       <button href="{{site.demo-link}}" class="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">
         Open demo

home/_includes/hero.html

@@ -1,7 +1,7 @@
 <section class="cm-text-body">
     <div class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
       <div class="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
-        <h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">Before they sold out
+        <h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium cm-lgt-txt">Before they sold out
           <br class="hidden lg:inline-block">readymade gluten
         </h1>
         <p class="mb-8 leading-relaxed">Copper mug try-hard pitchfork pour-over freegan heirloom neutra air plant cold-pressed tacos poke beard tote bag. Heirloom echo park mlkshk tote bag selvage hot chicken authentic tumeric truffaut hexagon try-hard chambray.</p>

home/_layouts/default.html

@@ -5,7 +5,7 @@
     {% include head.html %}
 </head>
 
-<body class="antialiased text-gray-900 min-h-screen">
+<body class="antialiased cm-lgt-txt min-h-screen">
     {% include header.html %}
 
     {{ content }}

home/styles/index.css

@@ -17,7 +17,7 @@
     }
 
     .footer-categorie {
-        @apply font-medium text-gray-900 tracking-widest text-sm mb-3
+        @apply title-font font-medium text-gray-900 tracking-widest text-sm mb-3
         /*
         @apply title-font font-medium text-gray-900 tracking-widest text-sm mb-3
         */
@@ -26,6 +26,10 @@
     .cm-text-body {
         @apply text-gray-600 body-font
     }
+
+    .cm-lgt-txt {
+        @apply text-gray-900
+    }
 }
 
 .bg-primary {