colors and fonts config
This commit is contained in:
María
BIN
assets/Fonts/Barlow/Barlow-Bold.ttf
Normal file
BIN
assets/Fonts/Barlow/Barlow-Bold.ttf
Normal file
Binary file not shown.
BIN
assets/Fonts/Barlow/Barlow-Light.ttf
Normal file
BIN
assets/Fonts/Barlow/Barlow-Light.ttf
Normal file
Binary file not shown.
BIN
assets/Fonts/Barlow/Barlow-Regular.ttf
Normal file
BIN
assets/Fonts/Barlow/Barlow-Regular.ttf
Normal file
Binary file not shown.
BIN
assets/Fonts/Barlow/Barlow-SemiBold.ttf
Normal file
BIN
assets/Fonts/Barlow/Barlow-SemiBold.ttf
Normal file
Binary file not shown.
BIN
assets/Fonts/BarlowSemiCondensed/BarlowSemiCondensed-Bold.ttf
Normal file
BIN
assets/Fonts/BarlowSemiCondensed/BarlowSemiCondensed-Bold.ttf
Normal file
Binary file not shown.
@@ -1 +1,113 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--font-barlow: 'Barlow', sans-serif;
|
||||
--font-barlow-semi-condensed: 'BarlowSemiCondensed', sans-serif;
|
||||
|
||||
/* Color base */
|
||||
--color-consumo-base: #F28C8C;
|
||||
--color-consumo-light: #F6B1B1;
|
||||
--color-consumo-extra-light: #FAD1D1;
|
||||
--color-iguales-base: #C98EEF;
|
||||
--color-iguales-light: #DAB2F4;
|
||||
--color-iguales-extra-light: #E9D2F9;
|
||||
--color-aula-base: #5CAACC;
|
||||
--color-aula-light: #90C5DC;
|
||||
--color-aula-extra-light: #BEDDEB;
|
||||
--color-certifica-base: #CAF03F;
|
||||
--color-certifica-light: #DFF68C;
|
||||
--color-certifica-extra-light: #ECFABC;
|
||||
--color-foro-base: #E2CA64;
|
||||
--color-foro-light: #EBDB96;
|
||||
--color-foro-extra-light: #F3EAC1;
|
||||
--color-ods-base: #2FB384;
|
||||
--color-ods-light: #72CBAB;
|
||||
--color-ods-extra-light: #ACE1CE;
|
||||
/* Color background */
|
||||
--color-background-dark: #091B3D;
|
||||
--color-background-dark-2: #0D2758;
|
||||
--color-background-light: #F9F4F2;
|
||||
--color-background-extra-light: #FDFCFB;
|
||||
/* Color button */
|
||||
--color-button: #143E8C;
|
||||
--color-button-hover: #1E58C7;
|
||||
|
||||
--color-error: #B40502;
|
||||
--color-success: #039B65;
|
||||
|
||||
/* Breakpoints */
|
||||
--breakpoint-large: 480rem; /* Super desktop 1920px */
|
||||
|
||||
/* Font sizes */
|
||||
--text-5.5: 1.375rem; /* 22px */
|
||||
--text-8: 2rem; /* 32px */
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "BarlowSemiCondensed";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local("Barlow SemiCondensed Bold"), local("BarlowBarlowSemiCondensed-Bold"),
|
||||
url(../fonts/Barlow/BarlowSemiCondensed-Bold.ttf) format("opentype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Barlow";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local("Barlow Bold"), local("Barlow-Bold"),
|
||||
url(../fonts/Barlow/Barlow-Bold.ttf) format("opentype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Barlow";
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: local("Barlow Semibold"), local("Barlow-Semibold"),
|
||||
url(../fonts/Barlow/Barlow-Semibold.ttf) format("opentype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Barlow";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local("Barlow Medium"), local("Barlow-Medium"),
|
||||
url(../fonts/Barlow/Barlow-Medium.ttf) format("opentype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Barlow";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Barlow Regular"), local("Barlow-Regular"),
|
||||
url(../fonts/Barlow/Barlow-Regular.ttf) format("opentype");
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
font-family: var(--font-barlow);
|
||||
font-size: 18px;
|
||||
height: 100dvh;
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
body footer {
|
||||
position: sticky;
|
||||
top: 100dvh;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.min-h-screen-header {
|
||||
min-height: calc(100dvh - 15rem);
|
||||
}
|
||||
|
||||
.max-h-sidebar {
|
||||
max-height: calc(100dvh - 8rem);
|
||||
}
|
||||
|
||||
.body-overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
228
pages/typography-and-colours.vue
Normal file
228
pages/typography-and-colours.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<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>
|
||||
0
tailwind.config.js
Normal file
0
tailwind.config.js
Normal file
Reference in New Issue
Block a user