amend font sizes

This commit is contained in:
María
2025-09-16 15:39:30 +02:00
committed by María
parent bdbccbb8fa
commit 22ff72f4a8
15 changed files with 75 additions and 79 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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">
<h4 class="text-5.5 font-semibold uppercase">{{ title }}</h4>
<p class="text-base" v-html="description"></p>
<div class="flex flex-col gap-2 bg-white px-6 py-8 rounded-b-xl mt-14 min-h-48">
<h4 class="font-semibold uppercase">{{ title }}</h4>
<p class="text-base-custom" v-html="description"></p>
</div>
</div>
</template>

View File

@@ -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>
<p class="text-center text-base max-w-xl" v-html="description"></p>
<h4 class="font-semibold uppercase">{{ title }}</h4>
<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>
<p class="text-center text-base" v-html="description"></p>
<h4 class="font-semibold uppercase">{{ title }}</h4>
<p class="text-center text-base-custom" v-html="description"></p>
</div>
</div>
</div>

View File

@@ -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>
<ul class="space-y-3 text-left">
<h3 class="font-semibold text-lg-custom mb-6">Herramientas</h3>
<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">
<p><span>{{ year }}</span> © kit-ECO.SOCIAL | Diseñado y desarrollado por Enreda Coop</p>
<div class="border-t border-background-extra-light mt-8 pt-4 text-center">
<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>
<style>
.text-12 {
font-size: 12px;
}
</style>
</script>

View File

@@ -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>
<p class="text-24 max-w-2xl">{{ subtitle }}</p>
<h1 class="font-bold">{{ title }}</h1>
<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>
<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>
</script>

View File

@@ -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 }}

View File

@@ -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>
<p class="text-lg text-center">{{ description }}</p>
<h3 class="font-bold mb-6">{{ title }}</h3>
<p class="text-lg-custom text-center">{{ description }}</p>
</div>
<ul class="grid grid-cols-12 gap-8">

View File

@@ -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>

View File

@@ -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="{

View File

@@ -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">

View File

@@ -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>

View File

@@ -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">