amend font sizes

assets/css/main.css

@@ -81,11 +81,11 @@
     --font-size-H3: 32px;
     --font-size-H4: 22px;
     --font-size-H5: 16px;
-    --font-size-2xl: 24px;
+    --font-size-2xl-custom: 24px;
-    --font-size-lg: 18px;
+    --font-size-lg-custom: 18px;
-    --font-size-base: 16px;
+    --font-size-base-custom: 16px;
-    --font-size-sm: 14px;
+    --font-size-sm-custom: 14px;
-    --font-size-xs: 12px;
+    --font-size-xs-custom: 12px;
     --font-size-button-base: 16px;
   }
 }
@@ -101,11 +101,11 @@
     --font-size-H3: 24px;
     --font-size-H4: 22px;
     --font-size-H5: 16px;
-    --font-size-2xl: 20px;
+    --font-size-2xl-custom: 20px;
-    --font-size-lg: 16px;
+    --font-size-lg-custom: 16px;
-    --font-size-base: 16px;
+    --font-size-base-custom: 16px;
-    --font-size-sm: 14px;
+    --font-size-sm-custom: 14px;
-    --font-size-xs: 12px;
+    --font-size-xs-custom: 12px;
     --font-size-button-base: 14px;
   }
 }
@@ -121,11 +121,11 @@
     --font-size-H3: 24px;
     --font-size-H4: 22px;
     --font-size-H5: 16px;
-    --font-size-2xl: 18px;
+    --font-size-2xl-custom: 18px;
-    --font-size-lg: 16px;
+    --font-size-lg-custom: 16px;
-    --font-size-base: 16px;
+    --font-size-base-custom: 16px;
-    --font-size-sm: 14px;
+    --font-size-sm-custom: 14px;
-    --font-size-xs: 12px;
+    --font-size-xs-custom: 12px;
     --font-size-button-base: 14px;
   }
 }
@@ -215,6 +215,26 @@ h5 {
 }
 
 .text-2xl-custom {
+  font-size: var(--font-size-2xl-custom);
+}
+
+.text-lg-custom {
+  font-size: var(--font-size-lg-custom);
+}
+
+.text-base-custom {
+  font-size: var(--font-size-base-custom);
+}
+
+.text-sm-custom {
+  font-size: var(--font-size-sm-custom);
+}
+
+.text-xs-custom {
+  font-size: var(--font-size-xs-custom);
+}
+
+/* .text-2xl-custom {
   font-size: var(--font-size-2xl);
 }
 .text-lg {
@@ -228,7 +248,7 @@ h5 {
 }
 .text-xs-custom {
   font-size: var(--font-size-xs);
-}
+} */
 
 .text-button-base {
   font-size: var(--font-size-button-base);

components/ButtonCTA.vue

@@ -1,5 +1,5 @@
 <template>
-  <button type="button" class="flex items-center justify-center cursor-pointer"
+  <button type="button" class="flex items-center justify-center cursor-pointer text-button-base"
     :disabled="disabled" :class="buttonClasses" @click="handleClick">
     <slot></slot>
   </button>

components/CardCompany.vue

@@ -12,7 +12,7 @@
         <!-- TODO: Add a fallback image -->
       </div>
       <div class="flex flex-col gap-4 items-center text-center">
-        <p class="text-center text-base" v-html="description"></p>
+        <p class="text-center text-base-custom" v-html="description"></p>
           <NuxtLink v-if="link" :to="link.url">
             <p class="text-button hover:text-button-hover">{{ link.label }}</p>
           </NuxtLink>

components/CardCourse.vue

@@ -1,6 +1,6 @@
 <template>
   <div 
-  class="flex flex-col rounded-3xl border-4 border-white min-h-68 max-h-full max-w-80 sm:max-w-full"
+  class="flex flex-col rounded-3xl border-4 border-white min-h-56 max-h-full max-w-80 sm:max-w-full"
   :class="{
     'bg-consumo-extra-light': color === 'consumo',
       'bg-iguales-extra-light': color === 'iguales',
@@ -9,9 +9,9 @@
       'bg-foro-extra-light': color === 'foro',
       'bg-ods-extra-light': color === 'ods',
     }">
-    <div class="flex flex-col gap-2 bg-white px-6 py-8 rounded-b-xl mt-14 min-h-56">
+    <div class="flex flex-col gap-2 bg-white px-6 py-8 rounded-b-xl mt-14 min-h-48">
-      <h4 class="text-5.5 font-semibold uppercase">{{ title }}</h4>
+      <h4 class="font-semibold uppercase">{{ title }}</h4>
-      <p class="text-base" v-html="description"></p>
+      <p class="text-base-custom" v-html="description"></p>
     </div>
   </div>
 </template>

components/CardTool.vue

@@ -25,11 +25,11 @@
         <!-- TODO: Add a fallback image -->
       </div>
       <div class="flex flex-col gap-2 items-center">
-        <h4 class="text-5.5 font-semibold uppercase">{{ title }}</h4>
+        <h4 class="font-semibold uppercase">{{ title }}</h4>
-        <p class="text-center text-base max-w-xl" v-html="description"></p>
+        <p class="text-center max-w-xl text-base-custom" v-html="description"></p>
       </div>
     </NuxtLink>
-    <div v-if="!link" class="flex flex-col gap-4 p-8 items-center">
+    <div v-if="!link" class="flex flex-col gap-4 px-8 py-12 items-center">
       <div v-if="image" class="h-25 w-25">
         <img 
           :src="`/img/${image.src}`"
@@ -44,8 +44,8 @@
         {{ number }}</h3>
       </div>
       <div class="flex flex-col gap-2 items-center text-center">
-        <h4 class="text-5.5 font-semibold uppercase">{{ title }}</h4>
+        <h4 class="font-semibold uppercase">{{ title }}</h4>
-        <p class="text-center text-base" v-html="description"></p>
+        <p class="text-center text-base-custom" v-html="description"></p>
       </div>
     </div>
   </div>

components/Footer.vue

@@ -6,7 +6,7 @@
         <div class="mb-4">
           <img src="/assets/svg/logo.svg" alt="Kit-ECO.SOCIAL Logo" class="h-15 w-auto">
         </div>
-        <p class="mb-4 text-center md:text-start">Síguenos y entérate de los próximos eventos, novedades y recursos.</p>
+        <p class=" text-lg-custom mb-4 text-center md:text-start">Síguenos y entérate de los próximos eventos, novedades y recursos.</p>
         <ul class="flex space-x-4">
           <li class="h-12 lg:h-8 w-12 lg:w-8 rounded-full border border-white hover:bg-white hover:text-background-dark">
             <NuxtLink to="#" class="flex items-center justify-center h-full w-full">
@@ -35,8 +35,8 @@
       <div class="flex flex-col md:flex-row justify-between gap-16 md:gap-0 lg:gap-16 w-full lg:w-5/6">
         <div class="flex md:w-2/3 lg:w-1/2">
           <div class="flex flex-col w-1/2">
-            <h3 class="font-semibold text-lg mb-6">Herramientas</h3>
+            <h3 class="font-semibold text-lg-custom mb-6">Herramientas</h3>
-            <ul class="space-y-3 text-left">
+            <ul class="space-y-3 text-left text-lg-custom">
               <li><NuxtLink :to="`/${langcode}/consumo-cuidado`" class="hover:font-semibold">Consumo Cuidado</NuxtLink></li>
               <li><NuxtLink :to="`/${langcode}/aula-virtual`" class="hover:font-semibold">Aula Virtual</NuxtLink></li>
               <li><NuxtLink :to="`/${langcode}/iguales`" class="hover:font-semibold">Iguales</NuxtLink></li>
@@ -47,7 +47,7 @@
           </div>
   
           <div class="flex flex-col w-1/2">
-            <h3 class="font-semibold text-lg mb-6">Enlaces rápidos</h3>
+            <h3 class="font-semibold text-lg-custom mb-6">Enlaces rápidos</h3>
             <ul class="space-y-3 text-left">
               <li><a href="#" class="hover:underline">Nosotras</a></li>
               <li><a href="#" class="hover:underline">Contactanos</a></li>
@@ -58,7 +58,7 @@
           </div>
         </div>
         <div class="flex flex-col items-center md:items-end md:w-1/3 lg:w-1/2">
-          <h3 class="font-semibold text-lg mb-4">Proyecto financiado por:</h3>
+          <h3 class="font-semibold text-lg-custom mb-4">Proyecto financiado por:</h3>
           <div class="grid grid-cols-12 gap-y-3 w-full">
             <img src="/assets/img/uelogo 1.png" alt="Financiado por la Unión Europea - NextGenerationEU" class="h-12 lg:h-14 col-span-6 md:col-span-12 mx-auto md:mx-0 md:ml-auto">
             <img src="/assets/img/logotipo_ministerio.png" alt="Gobierno de España" class="h-12 lg:h-14 col-span-6 md:col-span-12 mx-auto md:mx-0 md:ml-auto">
@@ -68,8 +68,8 @@
       </div>
     </div>
 
-    <div class="border-t border-extra-light mt-8 pt-4 text-center text-xs-custom">
+    <div class="border-t border-background-extra-light mt-8 pt-4 text-center">
-      <p><span>{{ year }}</span> © kit-ECO.SOCIAL | Diseñado y desarrollado por Enreda Coop</p>
+      <p class="text-xs-custom"><span>{{ year }}</span> © kit-ECO.SOCIAL | Diseñado y desarrollado por <a href="https://enreda.coop">Enreda Coop</a></p>
     </div>
   </footer>
 </template>
@@ -86,10 +86,4 @@ export default {
     },
   },
 };
-</script>
+</script>
-
-<style>
-.text-12 {
-  font-size: 12px;
-}
-</style>

components/HeroHome.vue

@@ -15,8 +15,8 @@
       class="absolute right-0 top-0 h-60 md:h-25.6" >
 
     <div class=" flex flex-col items-center z-10 gap-6 px-4 max-w-3xl">
-      <h1 class="text-32 md:text-40 lg:text-5xl font-bold">{{ title }}</h1>
+      <h1 class="font-bold">{{ title }}</h1>
-      <p class="text-24 max-w-2xl">{{ subtitle }}</p>
+      <p class="text-2xl-custom max-w-2xl">{{ subtitle }}</p>
       <NuxtLink v-if="button" :to="button.link">
         <ButtonCTA :color="button.color" class="uppercase mt-6">
           {{ button.label }}
@@ -59,22 +59,4 @@ export default {
   },
   
 };
-</script>
+</script>
-
-<style>
-p {
-  font-size: 24px;
-}
-
-text-24 {
-  @media screen and (min-width: 1023px) {
-    font-size: 24px;
-  }
-  @media screen and (max-width: 1023px) {
-    font-size: 20px;
-  }
-  @media screen and (max-width: 640px) {
-    font-size: 18px;
-  }
-}
-</style>

components/HeroPages.vue

@@ -21,7 +21,7 @@
 
     <div class=" flex flex-col items-center z-10 gap-6">
       <h1 class="font-bold max-w-4xl">{{ title }}</h1>
-      <p class="text-2xl max-w-3xl" v-html="subtitle"></p>
+      <p class="text-2xl-custom max-w-3xl" v-html="subtitle"></p>
       <NuxtLink v-if="button" :to="button.link">
         <ButtonCTA :color="button.color" class="uppercase mt-6">
           {{ button.label }}

components/LogosWithText.vue

@@ -3,8 +3,8 @@
   :id="id"
   class="flex flex-col gap-12 mb-8 px-4 pt-8 pb-16 max-w-3xl mx-auto">
     <div class="flex flex-col justify-center items-center w-full">
-      <h2 class=" font-bold mb-6">{{ title }}</h2>
+      <h3 class="font-bold mb-6">{{ title }}</h3>
-      <p class="text-lg text-center">{{ description }}</p>
+      <p class="text-lg-custom text-center">{{ description }}</p>
     </div>
 
     <ul  class="grid grid-cols-12 gap-8">

components/NavBar.vue

@@ -12,7 +12,7 @@
       </NuxtLink>
 
       <!-- Desktop menu -->
-      <ul class="hidden lg:flex items-center gap-6 font-semibold text-sm">
+      <ul class="hidden lg:flex items-center gap-6 font-semibold text-sm-custom">
         <li><NuxtLink :to="`/${langcode}/`" class="hover:bg-button-hover hover:text-white p-2 rounded-lg">INICIO</NuxtLink></li>
         <li><NuxtLink :to="`/${langcode}/nosotras`" class="hover:bg-button-hover hover:text-white p-2 rounded-lg">NOSOTRAS</NuxtLink></li>
 
@@ -33,7 +33,7 @@
           >
             <ul
               v-show="dropdownOpen"
-              class="absolute right-0 mt-2 w-56 bg-white rounded-3xl shadow-lg p-4 space-y-2 z-50 text-sm text-center"
+              class="absolute right-0 mt-2 w-56 bg-white rounded-3xl shadow-lg p-4 space-y-2 z-50 text-sm-custom text-center"
             >
               <li><NuxtLink :to="`/${langcode}/consumo-cuidado`" class="block hover:bg-button hover:text-white px-2 py-1 rounded-t-2xl">CONSUMO CUIDADO</NuxtLink></li>
               <li><NuxtLink :to="`/${langcode}/aula-virtual`" class="block hover:bg-button hover:text-white px-2 py-1">AULA VIRTUAL</NuxtLink></li>
@@ -74,7 +74,7 @@
       leave-to-class="opacity-0 translate-x-2"
     >
     <div v-show="menuIsOpen" class="lg:hidden p-5 bg-gradient-conic rounded-3xl min-h-svh">
-        <ul class="space-y-4 text-sm text-end w-fit ml-auto">
+        <ul class="space-y-4 text-sm-custom text-end w-fit ml-auto">
           <li class="p-2"><NuxtLink :to="`/${langcode}/`">INICIO</NuxtLink></li>
           <li class="p-2"><NuxtLink :to="`/${langcode}/nosotras`">NOSOTRAS</NuxtLink></li>
           <li class="p-2 border-b">HERRAMIENTAS</li>

components/SectionWithCards.vue

@@ -19,10 +19,10 @@
       'flex flex-col items-start w-full': titlePosition === 'left',
     }">
       <h2 class="font-bold mb-6">{{ title }}</h2>
-      <p v-if="description" class="text-lg max-w-4xl" v-html="description"></p>
+      <p v-if="description" class="text-lg-custom max-w-4xl" v-html="description"></p>
     </div>
 
-    <ul  class="grid grid-cols-12 gap-8 max-w-5xl">
+    <ul  class="grid grid-cols-12 gap-8 ">
       <li 
         v-for="(item, index) in cards" :key="`cards-${id}-${index}`" class=""
         :class="{

components/TextWithIconAndButtons.vue

@@ -20,7 +20,7 @@
     <div class=" flex flex-col items-center z-10 gap-6">
       <img v-if="icon" :src="`/svg/${icon}`" :alt="`icon-${icon}`" class="w-15 h-15" />
       <h2 class="font-bold max-w-4xl">{{ title }}</h2>
-      <p class="text-2xl max-w-4xl" v-html="subtitle"></p>
+      <p class="text-2xl-custom max-w-4xl" v-html="subtitle"></p>
       <div class="flex flex-col md:flex-row items-center justify-center gap-4">
         <NuxtLink v-if="button" :to="button.link">
           <ButtonCTA :color="button.color" class="uppercase mt-6">

components/TextWithImage.vue

@@ -37,7 +37,7 @@
           />
         </div>
         <div v-if="imageCTA" class="flex flex-col items-end">
-          <p v-if="imageCTA.description" class="text-lg mt-2">{{ imageCTA.description }}</p>
+          <p v-if="imageCTA.description" class="text-lg-custom mt-2">{{ imageCTA.description }}</p>
           <NuxtLink v-if="imageCTA.button" :to="imageCTA.button.url">
             <ButtonCTA size="md" class="uppercase mt-4">{{ imageCTA.button.label }}</ButtonCTA>
           </NuxtLink>
@@ -53,11 +53,11 @@
         <h2 class="font-bold ">{{ title }}</h2>
         <ul v-if="paragraphs" class="flex flex-col gap-6">
           <li v-for="(paragraph, index) in paragraphs" :key="`paragraph-${id}-${index}`">
-            <p class="text-lg" v-html="paragraph"></p>
+            <p class="text-lg-custom" v-html="paragraph"></p>
           </li>
         </ul>
         <div v-for="(list, index) in lists" :key="`list-${index}-${index}`" class="">
-          <p v-if="list.description" class="text-lg mb-4">{{ list.description }}</p>
+          <p v-if="list.description" class="text-lg-custom mb-4">{{ list.description }}</p>
           <ul v-if="list.items" class="flex flex-col gap-4">
             <li
               v-for="(item, index) in list.items" 
@@ -65,11 +65,11 @@
               :class="{
                 'list-disc ml-6': hasBullets,
               }">
-              <p class="text-lg" v-html="item"></p>
+              <p class="text-lg-custom" v-html="item"></p>
             </li>
           </ul>
         </div>
-        <p class="text-lg" v-html="finalParagraph"></p>
+        <p class="text-lg-custom" v-html="finalParagraph"></p>
       </div>
     </div>
   </section>

components/WhatIs.vue

@@ -5,13 +5,13 @@
     <div class="flex flex-col lg:w-3/5">
       <div class="flex flex-col">
         <h2 class="text-4xl font-bold mb-6">{{ title }}</h2>
-        <p class="mb-8 text-lg" v-html="description"></p>
+        <p class="mb-8 text-lg-custom" v-html="description"></p>
       </div>
 
       <ul  class="flex flex-col gap-4 mb-8">
         <li v-for="(item, index) in items" :key="`item-${index}`" class="flex items-center gap-4">
           <img v-if="item.icon" :src="`/svg/${item.icon}`" :alt="`icon-${item.icon}`" class="w-8 h-8" />
-          <p class="text-lg" v-html="item.content"></p>
+          <p class="text-lg-custom" v-html="item.content"></p>
         </li>
       </ul>
       <NuxtLink v-if="button" :to="`/${langcode}/${button.link}`" class=" w-fit">

data/es/foro.json

@@ -40,7 +40,7 @@
       "id": "tu-red-de-apoyo",
       "title": "Tu red de apoyo y conocimiento",
       "description": "Un lugar para encontrar respuestas, aportar ideas y sumar experiencias.",
-      "display": "col-3-transparent",
+      "display": "col-3",
       "bgColor": "foro",
       "cardsType": "transparent",
       "cards": [