228 lines
9.7 KiB
Vue
228 lines
9.7 KiB
Vue
<template>
|
|
<main class="p-5 container mx-auto">
|
|
<NuxtLink to="/" class="my-16">Back</NuxtLink>
|
|
<section class="text-sm">
|
|
<h2 class="my-4 text-center text-4xl">Colours</h2>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-8">
|
|
<!-- Consumo -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-2">Consumo</h3>
|
|
<ul class="flex flex-col gap-2">
|
|
<li class="flex items-center gap-2">
|
|
<div class="h-4 w-4 bg-consumo-base"></div>
|
|
<p>consumo-base</p>
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<div class="h-4 w-4 bg-consumo-light"></div>
|
|
<p>consumo-light</p>
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<div class="h-4 w-4 bg-consumo-extra-light"></div>
|
|
<p>consumo-extra-light</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Iguales -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-2">Iguales</h3>
|
|
<ul class="flex flex-col gap-2">
|
|
<li class="flex items-center gap-2">
|
|
<div class="h-4 w-4 bg-iguales-base"></div>
|
|
<p>iguales-base</p>
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<div class="h-4 w-4 bg-iguales-light"></div>
|
|
<p>iguales-light</p>
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<div class="h-4 w-4 bg-iguales-extra-light"></div>
|
|
<p>iguales-extra-light</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Aula -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-2">Aula</h3>
|
|
<ul class="flex flex-col gap-2">
|
|
<li class="flex items-center gap-2">
|
|
<div class="h-4 w-4 bg-aula-base"></div>
|
|
<p>aula-base</p>
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<div class="h-4 w-4 bg-aula-light"></div>
|
|
<p>aula-light</p>
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<div class="h-4 w-4 bg-aula-extra-light"></div>
|
|
<p>aula-extra-light</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Certifica -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-2">Certifica</h3>
|
|
<ul class="flex flex-col gap-2">
|
|
<li class="flex items-center gap-2">
|
|
<div class="h-4 w-4 bg-certifica-base"></div>
|
|
<p>certifica-base</p>
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<div class="h-4 w-4 bg-certifica-light"></div>
|
|
<p>certifica-light</p>
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<div class="h-4 w-4 bg-certifica-extra-light"></div>
|
|
<p>certifica-extra-light</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Foro -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-2">Foro</h3>
|
|
<ul class="flex flex-col gap-2">
|
|
<li class="flex items-center gap-2">
|
|
<div class="h-4 w-4 bg-foro-base"></div>
|
|
<p>foro-base</p>
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<div class="h-4 w-4 bg-foro-light"></div>
|
|
<p>foro-light</p>
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<div class="h-4 w-4 bg-foro-extra-light"></div>
|
|
<p>foro-extra-light</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- ODS -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-2">ODS</h3>
|
|
<ul class="flex flex-col gap-2">
|
|
<li class="flex items-center gap-2">
|
|
<div class="h-4 w-4 bg-ods-base"></div>
|
|
<p>ods-base</p>
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<div class="h-4 w-4 bg-ods-light"></div>
|
|
<p>ods-light</p>
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<div class="h-4 w-4 bg-ods-extra-light"></div>
|
|
<p>ods-extra-light</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- Background -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-2">Background</h3>
|
|
<ul class="flex flex-col gap-2">
|
|
<li class="flex items-center gap-2">
|
|
<div class="h-4 w-4 bg-background-dark"></div>
|
|
<p>background-dark</p>
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<div class="h-4 w-4 bg-background-dark-2"></div>
|
|
<p>background-dark-2</p>
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<div class="h-4 w-4 bg-background-light"></div>
|
|
<p>background-light</p>
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<div class="h-4 w-4 bg-background-extra-light"></div>
|
|
<p>background-extra-light</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- Buttons -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-2">Buttons</h3>
|
|
<ul class="flex flex-col gap-2">
|
|
<li class="flex items-center gap-2">
|
|
<div class="h-4 w-4 bg-button"></div>
|
|
<p>button</p>
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<div class="h-4 w-4 bg-button-hover"></div>
|
|
<p>button-hover</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="text-sm mt-16">
|
|
<h2 class="my-4 text-center text-4xl">Fonts</h2>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-2">Barlow Semi Condensed</h3>
|
|
<p class="font-barlow-semi-condensed text-base">This is a sample text in Barlow Semi Condensed.</p>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-2">Barlow</h3>
|
|
<p class="font-barlow text-base">This is a sample text in Barlow.</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-8">
|
|
<h3 class="text-lg font-semibold mb-2">Font Sizes</h3>
|
|
<ul class="flex flex-col gap-4">
|
|
<li class="flex justify-between py-2 border-t border-t-black">
|
|
<h4 class="text-lg w-1/3">Heading H1 (48px) - <span class="italic text-gray-400">Tailwind Text 5XL</span></h4>
|
|
<p class="text-5xl w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
|
|
</li>
|
|
<li class="flex justify-between py-2 border-t border-t-black">
|
|
<h4 class="text-lg w-1/3">Heading H2 (36px) - <span class="italic text-gray-400">Tailwind Text 4XL</span></h4>
|
|
<p class="text-4xl w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
|
|
</li>
|
|
<li class="flex justify-between py-2 border-t border-t-black">
|
|
<h4 class="text-lg w-1/3">Heading H3 (32px) - <span class="italic text-gray-400">Tailwind Text 8</span></h4>
|
|
<p class="text-8 w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
|
|
</li>
|
|
<li class="flex justify-between py-2 border-t border-t-black">
|
|
<h4 class="text-lg w-1/3">Heading H4 (22px) - <span class="italic text-gray-400">Tailwind Text 5.5</span></h4>
|
|
<p class="text-5.5 w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
|
|
</li>
|
|
<li class="flex justify-between py-2 border-t border-t-black">
|
|
<h4 class="text-lg w-1/3">Heading H5 (16px) - <span class="italic text-gray-400">Tailwind Text Base</span></h4>
|
|
<p class="text-base w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
|
|
</li>
|
|
<li class="flex justify-between py-2 border-t border-t-black">
|
|
<h4 class="text-lg w-1/3">Body-Text-2-Extra-Large (24px) - <span class="italic text-gray-400">Tailwind Text 2XL</span></h4>
|
|
<p class="text-2xl w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
|
|
</li>
|
|
<li class="flex justify-between py-2 border-t border-t-black">
|
|
<h4 class="text-lg w-1/3">Body-Text-Extra-Large (18px) - <span class="italic text-gray-400">Tailwind Text LG</span></h4>
|
|
<p class="text-lg w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
|
|
</li>
|
|
<li class="flex justify-between py-2 border-t border-t-black">
|
|
<h4 class="text-lg w-1/3">Body-Text-Large (16px) - <span class="italic text-gray-400">Tailwind Text Base</span></h4>
|
|
<p class="text-base w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
|
|
</li>
|
|
<li class="flex justify-between py-2 border-t border-t-black">
|
|
<h4 class="text-lg w-1/3">Body-Text-Medium (14px) - <span class="italic text-gray-400">Tailwind Text SM</span></h4>
|
|
<p class="text-sm w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
|
|
</li>
|
|
<li class="flex justify-between py-2 border-t border-t-black">
|
|
<h4 class="text-lg w-1/3">Body-Text-Small (12px) - <span class="italic text-gray-400">Tailwind Text XS</span></h4>
|
|
<p class="text-xs w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
|
|
</li>
|
|
<li class="flex justify-between py-2 border-t border-t-black">
|
|
<h4 class="text-lg w-1/3">Text Button (16px) - <span class="italic text-gray-400">Tailwind Text Base</span></h4>
|
|
<p class="text-base w-2/3">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam</p>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
|
|
}
|
|
</script> |