Add Style Guide page
This commit is contained in:
Daniel Egger
parent
424af03ce1
commit
19cc0c2af3
|
|
@ -5,6 +5,7 @@
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vite App</title>
|
<title>Vite App</title>
|
||||||
|
<link href="/static/fonts/BuenosAires/stylesheet.css" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
@font-face {
|
|
||||||
font-family: 'BuenosAires';
|
|
||||||
font-style: normal;
|
|
||||||
src: url("/static/fonts/BuenosAires-Regular.woff2") format("woff2"),
|
|
||||||
url("/static/fonts/BuenosAires-Regular.woff") format("woff");
|
|
||||||
font-weight: 400;
|
|
||||||
font-style: normal;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
@ -1,2 +1 @@
|
||||||
@import "fonts";
|
|
||||||
@import "../../../../server/vbv_lernwelt/static/css/tailwind.css";
|
@import "../../../../server/vbv_lernwelt/static/css/tailwind.css";
|
||||||
|
|
|
||||||
|
|
@ -35,6 +35,10 @@ const router = createRouter({
|
||||||
path: '/profile',
|
path: '/profile',
|
||||||
component: () => import('../views/ProfileView.vue'),
|
component: () => import('../views/ProfileView.vue'),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/styleguide',
|
||||||
|
component: () => import('../views/StyelGuideView.vue'),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/:pathMatch(.*)*',
|
path: '/:pathMatch(.*)*',
|
||||||
component: () => import('../views/404View.vue'),
|
component: () => import('../views/404View.vue'),
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import {defineComponent} from 'vue'
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
colors: ['blue', 'sky', 'orange', 'green', 'red', 'gray',],
|
||||||
|
colorValues: [100, 300, 500, 700, 900],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
colorBgClass(color: string, value: integer) {
|
||||||
|
return `bg-${color}-${value}`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<main class="container mx-auto mt-4">
|
||||||
|
<h1>Style Guide</h1>
|
||||||
|
|
||||||
|
<div class="border-b text-gray-700 pb-2 mt-8">
|
||||||
|
<h2 class="heading-1">Colors</h2>
|
||||||
|
</div>
|
||||||
|
<table class="text-gray-700">
|
||||||
|
<tr class="h-12 md:h-18 xl:h-24">
|
||||||
|
<td></td>
|
||||||
|
<td class="text-center" v-for="value in colorValues">{{value}}</td>
|
||||||
|
</tr>
|
||||||
|
<tr v-for="color in colors" class="h-12 md:h-18 xl:h-24">
|
||||||
|
<td>{{color}}</td>
|
||||||
|
<td v-for="value in colorValues" class="px-2">
|
||||||
|
<div class="w-8 h-8 md:w-12 md:h-12 xl:w-16 xl:h-16 rounded-full" :class="[colorBgClass(color, value)]"></div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<div class="border-b text-gray-700 pb-2 mt-12">
|
||||||
|
<h2 class="heading-1">Typography</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="mt-8">Heading 1</h1>
|
||||||
|
<h2 class="mt-8">Heading 2</h2>
|
||||||
|
<h3 class="mt-8">Heading 3</h3>
|
||||||
|
|
||||||
|
<div class="mt-8 text-xl font-bold">Text Large Bold</div>
|
||||||
|
<div class="mt-8 text-xl">Text Large</div>
|
||||||
|
<div class="mt-8 underline underline-offset-2">Link Large</div>
|
||||||
|
<div class="mt-8 font-bold">Text Bold</div>
|
||||||
|
<div class="mt-8">Text</div>
|
||||||
|
<div class="mt-8 underline underline-offset-2">Link</div>
|
||||||
|
<div class="mt-8 text-sm">Text Small</div>
|
||||||
|
<div class="mt-8 text-sm underline underline-offset-2">Link Small</div>
|
||||||
|
|
||||||
|
<div class="border-b text-gray-700 pb-2 mt-12">
|
||||||
|
<h2 class="heading-1">Components</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 class="mt-8 mb-8">Buttons</h2>
|
||||||
|
|
||||||
|
<div class="flex w-128 content-center justify-between mb-16">
|
||||||
|
<button class="btn-primary">Primary</button>
|
||||||
|
<a class="btn-primary inline-block" href="/">Primary Link</a>
|
||||||
|
<button class="btn-secondary">Secondary</button>
|
||||||
|
<button class="btn-blue">Blue</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
</style>
|
||||||
|
|
@ -1,21 +1,16 @@
|
||||||
# Create your models here.
|
# Create your models here.
|
||||||
|
|
||||||
|
from collections import OrderedDict
|
||||||
|
|
||||||
from django.utils.text import slugify
|
from django.utils.text import slugify
|
||||||
|
from grapple.helpers import register_query_field
|
||||||
|
from wagtail.api import APIField
|
||||||
from wagtail.core.blocks import StreamBlock
|
from wagtail.core.blocks import StreamBlock
|
||||||
from wagtail.core.fields import StreamField
|
from wagtail.core.fields import StreamField
|
||||||
from wagtail.core.models import Page, Orderable
|
from wagtail.core.models import Page, Orderable
|
||||||
from wagtail.api import APIField
|
|
||||||
|
|
||||||
from vbv_lernwelt.learnpath.models_competences import *
|
from vbv_lernwelt.learnpath.models_competences import *
|
||||||
from vbv_lernwelt.learnpath.models_learning_unit_content import WebBasedTrainingBlock, VideoBlock
|
from vbv_lernwelt.learnpath.models_learning_unit_content import WebBasedTrainingBlock, VideoBlock
|
||||||
from grapple.helpers import register_query_field
|
|
||||||
from collections import OrderedDict
|
|
||||||
import graphene
|
|
||||||
|
|
||||||
from grapple.models import (
|
|
||||||
GraphQLString, GraphQLPage,
|
|
||||||
GraphQLStreamfield, GraphQLBoolean, GraphQLInt, GraphQLForeignKey, GraphQLField
|
|
||||||
)
|
|
||||||
|
|
||||||
|
|
||||||
@register_query_field("learning_path")
|
@register_query_field("learning_path")
|
||||||
|
|
@ -102,7 +97,7 @@ class Circle(Page, Orderable):
|
||||||
APIField('title'),
|
APIField('title'),
|
||||||
APIField('description'),
|
APIField('description'),
|
||||||
APIField('topic'),
|
APIField('topic'),
|
||||||
APIField('content_structure'),
|
# APIField('content_structure'),
|
||||||
]
|
]
|
||||||
|
|
||||||
@property
|
@property
|
||||||
|
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,569 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="robots" content="noindex, noarchive">
|
||||||
|
<meta name="format-detection" content="telephone=no">
|
||||||
|
<title>Transfonter demo</title>
|
||||||
|
<link href="stylesheet.css" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
/*
|
||||||
|
http://meyerweb.com/eric/tools/css/reset/
|
||||||
|
v2.0 | 20110126
|
||||||
|
License: none (public domain)
|
||||||
|
*/
|
||||||
|
html, body, div, span, applet, object, iframe,
|
||||||
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||||
|
a, abbr, acronym, address, big, cite, code,
|
||||||
|
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||||
|
small, strike, strong, sub, sup, tt, var,
|
||||||
|
b, u, i, center,
|
||||||
|
dl, dt, dd, ol, ul, li,
|
||||||
|
fieldset, form, label, legend,
|
||||||
|
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||||
|
article, aside, canvas, details, embed,
|
||||||
|
figure, figcaption, footer, header, hgroup,
|
||||||
|
menu, nav, output, ruby, section, summary,
|
||||||
|
time, mark, audio, video {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
font-size: 100%;
|
||||||
|
font: inherit;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
/* HTML5 display-role reset for older browsers */
|
||||||
|
article, aside, details, figcaption, figure,
|
||||||
|
footer, header, hgroup, menu, nav, section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
ol, ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
blockquote, q {
|
||||||
|
quotes: none;
|
||||||
|
}
|
||||||
|
blockquote:before, blockquote:after,
|
||||||
|
q:before, q:after {
|
||||||
|
content: '';
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
/* demo styles */
|
||||||
|
body {
|
||||||
|
background: #f0f0f0;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
.page {
|
||||||
|
background: #fff;
|
||||||
|
width: 920px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px 20px 0 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.font-container {
|
||||||
|
overflow-x: auto;
|
||||||
|
overflow-y: hidden;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
line-height: 1.3;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
position: relative;
|
||||||
|
background: #444;
|
||||||
|
font-size: 32px;
|
||||||
|
color: #fff;
|
||||||
|
padding: 10px 20px;
|
||||||
|
margin: 0 -20px 12px -20px;
|
||||||
|
}
|
||||||
|
.letters {
|
||||||
|
font-size: 25px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.s10:before {
|
||||||
|
content: '10px';
|
||||||
|
}
|
||||||
|
.s11:before {
|
||||||
|
content: '11px';
|
||||||
|
}
|
||||||
|
.s12:before {
|
||||||
|
content: '12px';
|
||||||
|
}
|
||||||
|
.s14:before {
|
||||||
|
content: '14px';
|
||||||
|
}
|
||||||
|
.s18:before {
|
||||||
|
content: '18px';
|
||||||
|
}
|
||||||
|
.s24:before {
|
||||||
|
content: '24px';
|
||||||
|
}
|
||||||
|
.s30:before {
|
||||||
|
content: '30px';
|
||||||
|
}
|
||||||
|
.s36:before {
|
||||||
|
content: '36px';
|
||||||
|
}
|
||||||
|
.s48:before {
|
||||||
|
content: '48px';
|
||||||
|
}
|
||||||
|
.s60:before {
|
||||||
|
content: '60px';
|
||||||
|
}
|
||||||
|
.s72:before {
|
||||||
|
content: '72px';
|
||||||
|
}
|
||||||
|
.s10:before, .s11:before, .s12:before, .s14:before,
|
||||||
|
.s18:before, .s24:before, .s30:before, .s36:before,
|
||||||
|
.s48:before, .s60:before, .s72:before {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
color: #999;
|
||||||
|
padding-right: 6px;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
display: block;
|
||||||
|
padding: 9px;
|
||||||
|
margin: 0 0 12px;
|
||||||
|
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.428571429;
|
||||||
|
color: #333;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
overflow-x: auto;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
/* responsive */
|
||||||
|
@media (max-width: 959px) {
|
||||||
|
.page {
|
||||||
|
width: auto;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page">
|
||||||
|
<div class="demo">
|
||||||
|
<h1 style="font-family: 'Buenos Aires'; font-weight: bold; font-style: normal;">Buenos Aires Bold</h1>
|
||||||
|
<pre title="Usage">.your-style {
|
||||||
|
font-family: 'Buenos Aires';
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: normal;
|
||||||
|
}</pre>
|
||||||
|
<pre title="Preload (optional)">
|
||||||
|
<link rel="preload" href="BuenosAires-Bold.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||||
|
<div class="font-container" style="font-family: 'Buenos Aires'; font-weight: bold; font-style: normal;">
|
||||||
|
<p class="letters">
|
||||||
|
abcdefghijklmnopqrstuvwxyz<br>
|
||||||
|
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
||||||
|
0123456789.:,;()*!?'@#<>$%&^+-=~
|
||||||
|
</p>
|
||||||
|
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="demo">
|
||||||
|
<h1 style="font-family: 'Buenos Aires'; font-weight: 300; font-style: italic;">Buenos Aires Light Italic</h1>
|
||||||
|
<pre title="Usage">.your-style {
|
||||||
|
font-family: 'Buenos Aires';
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: italic;
|
||||||
|
}</pre>
|
||||||
|
<pre title="Preload (optional)">
|
||||||
|
<link rel="preload" href="BuenosAires-LightItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||||
|
<div class="font-container" style="font-family: 'Buenos Aires'; font-weight: 300; font-style: italic;">
|
||||||
|
<p class="letters">
|
||||||
|
abcdefghijklmnopqrstuvwxyz<br>
|
||||||
|
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
||||||
|
0123456789.:,;()*!?'@#<>$%&^+-=~
|
||||||
|
</p>
|
||||||
|
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="demo">
|
||||||
|
<h1 style="font-family: 'Buenos Aires'; font-weight: normal; font-style: normal;">Buenos Aires Regular</h1>
|
||||||
|
<pre title="Usage">.your-style {
|
||||||
|
font-family: 'Buenos Aires';
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}</pre>
|
||||||
|
<pre title="Preload (optional)">
|
||||||
|
<link rel="preload" href="BuenosAires-Regular.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||||
|
<div class="font-container" style="font-family: 'Buenos Aires'; font-weight: normal; font-style: normal;">
|
||||||
|
<p class="letters">
|
||||||
|
abcdefghijklmnopqrstuvwxyz<br>
|
||||||
|
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
||||||
|
0123456789.:,;()*!?'@#<>$%&^+-=~
|
||||||
|
</p>
|
||||||
|
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="demo">
|
||||||
|
<h1 style="font-family: 'Buenos Aires'; font-weight: bold; font-style: italic;">Buenos Aires Bold Italic</h1>
|
||||||
|
<pre title="Usage">.your-style {
|
||||||
|
font-family: 'Buenos Aires';
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: italic;
|
||||||
|
}</pre>
|
||||||
|
<pre title="Preload (optional)">
|
||||||
|
<link rel="preload" href="BuenosAires-BoldItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||||
|
<div class="font-container" style="font-family: 'Buenos Aires'; font-weight: bold; font-style: italic;">
|
||||||
|
<p class="letters">
|
||||||
|
abcdefghijklmnopqrstuvwxyz<br>
|
||||||
|
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
||||||
|
0123456789.:,;()*!?'@#<>$%&^+-=~
|
||||||
|
</p>
|
||||||
|
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="demo">
|
||||||
|
<h1 style="font-family: 'Buenos Aires'; font-weight: 600; font-style: normal;">Buenos Aires SemiBold</h1>
|
||||||
|
<pre title="Usage">.your-style {
|
||||||
|
font-family: 'Buenos Aires';
|
||||||
|
font-weight: 600;
|
||||||
|
font-style: normal;
|
||||||
|
}</pre>
|
||||||
|
<pre title="Preload (optional)">
|
||||||
|
<link rel="preload" href="BuenosAires-SemiBold.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||||
|
<div class="font-container" style="font-family: 'Buenos Aires'; font-weight: 600; font-style: normal;">
|
||||||
|
<p class="letters">
|
||||||
|
abcdefghijklmnopqrstuvwxyz<br>
|
||||||
|
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
||||||
|
0123456789.:,;()*!?'@#<>$%&^+-=~
|
||||||
|
</p>
|
||||||
|
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="demo">
|
||||||
|
<h1 style="font-family: 'Buenos Aires'; font-weight: 600; font-style: italic;">Buenos Aires SemiBold Italic</h1>
|
||||||
|
<pre title="Usage">.your-style {
|
||||||
|
font-family: 'Buenos Aires';
|
||||||
|
font-weight: 600;
|
||||||
|
font-style: italic;
|
||||||
|
}</pre>
|
||||||
|
<pre title="Preload (optional)">
|
||||||
|
<link rel="preload" href="BuenosAires-SemiBoldItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||||
|
<div class="font-container" style="font-family: 'Buenos Aires'; font-weight: 600; font-style: italic;">
|
||||||
|
<p class="letters">
|
||||||
|
abcdefghijklmnopqrstuvwxyz<br>
|
||||||
|
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
||||||
|
0123456789.:,;()*!?'@#<>$%&^+-=~
|
||||||
|
</p>
|
||||||
|
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="demo">
|
||||||
|
<h1 style="font-family: 'Buenos Aires'; font-weight: 100; font-style: normal;">Buenos Aires Thin</h1>
|
||||||
|
<pre title="Usage">.your-style {
|
||||||
|
font-family: 'Buenos Aires';
|
||||||
|
font-weight: 100;
|
||||||
|
font-style: normal;
|
||||||
|
}</pre>
|
||||||
|
<pre title="Preload (optional)">
|
||||||
|
<link rel="preload" href="BuenosAires-Thin.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||||
|
<div class="font-container" style="font-family: 'Buenos Aires'; font-weight: 100; font-style: normal;">
|
||||||
|
<p class="letters">
|
||||||
|
abcdefghijklmnopqrstuvwxyz<br>
|
||||||
|
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
||||||
|
0123456789.:,;()*!?'@#<>$%&^+-=~
|
||||||
|
</p>
|
||||||
|
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="demo">
|
||||||
|
<h1 style="font-family: 'Buenos Aires'; font-weight: 100; font-style: italic;">Buenos Aires Thin Italic</h1>
|
||||||
|
<pre title="Usage">.your-style {
|
||||||
|
font-family: 'Buenos Aires';
|
||||||
|
font-weight: 100;
|
||||||
|
font-style: italic;
|
||||||
|
}</pre>
|
||||||
|
<pre title="Preload (optional)">
|
||||||
|
<link rel="preload" href="BuenosAires-ThinItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||||
|
<div class="font-container" style="font-family: 'Buenos Aires'; font-weight: 100; font-style: italic;">
|
||||||
|
<p class="letters">
|
||||||
|
abcdefghijklmnopqrstuvwxyz<br>
|
||||||
|
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
||||||
|
0123456789.:,;()*!?'@#<>$%&^+-=~
|
||||||
|
</p>
|
||||||
|
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="demo">
|
||||||
|
<h1 style="font-family: 'Buenos Aires'; font-weight: 300; font-style: normal;">Buenos Aires Book</h1>
|
||||||
|
<pre title="Usage">.your-style {
|
||||||
|
font-family: 'Buenos Aires';
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: normal;
|
||||||
|
}</pre>
|
||||||
|
<pre title="Preload (optional)">
|
||||||
|
<link rel="preload" href="BuenosAires-Book.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||||
|
<div class="font-container" style="font-family: 'Buenos Aires'; font-weight: 300; font-style: normal;">
|
||||||
|
<p class="letters">
|
||||||
|
abcdefghijklmnopqrstuvwxyz<br>
|
||||||
|
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
||||||
|
0123456789.:,;()*!?'@#<>$%&^+-=~
|
||||||
|
</p>
|
||||||
|
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="demo">
|
||||||
|
<h1 style="font-family: 'Buenos Aires'; font-weight: 300; font-style: italic;">Buenos Aires Book Italic</h1>
|
||||||
|
<pre title="Usage">.your-style {
|
||||||
|
font-family: 'Buenos Aires';
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: italic;
|
||||||
|
}</pre>
|
||||||
|
<pre title="Preload (optional)">
|
||||||
|
<link rel="preload" href="BuenosAires-BookItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||||
|
<div class="font-container" style="font-family: 'Buenos Aires'; font-weight: 300; font-style: italic;">
|
||||||
|
<p class="letters">
|
||||||
|
abcdefghijklmnopqrstuvwxyz<br>
|
||||||
|
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
||||||
|
0123456789.:,;()*!?'@#<>$%&^+-=~
|
||||||
|
</p>
|
||||||
|
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="demo">
|
||||||
|
<h1 style="font-family: 'Buenos Aires'; font-weight: 300; font-style: normal;">Buenos Aires Light</h1>
|
||||||
|
<pre title="Usage">.your-style {
|
||||||
|
font-family: 'Buenos Aires';
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: normal;
|
||||||
|
}</pre>
|
||||||
|
<pre title="Preload (optional)">
|
||||||
|
<link rel="preload" href="BuenosAires-Light.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||||
|
<div class="font-container" style="font-family: 'Buenos Aires'; font-weight: 300; font-style: normal;">
|
||||||
|
<p class="letters">
|
||||||
|
abcdefghijklmnopqrstuvwxyz<br>
|
||||||
|
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
||||||
|
0123456789.:,;()*!?'@#<>$%&^+-=~
|
||||||
|
</p>
|
||||||
|
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="demo">
|
||||||
|
<h1 style="font-family: 'Buenos Aires'; font-weight: 900; font-style: normal;">Buenos Aires Black</h1>
|
||||||
|
<pre title="Usage">.your-style {
|
||||||
|
font-family: 'Buenos Aires';
|
||||||
|
font-weight: 900;
|
||||||
|
font-style: normal;
|
||||||
|
}</pre>
|
||||||
|
<pre title="Preload (optional)">
|
||||||
|
<link rel="preload" href="BuenosAires-Black.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||||
|
<div class="font-container" style="font-family: 'Buenos Aires'; font-weight: 900; font-style: normal;">
|
||||||
|
<p class="letters">
|
||||||
|
abcdefghijklmnopqrstuvwxyz<br>
|
||||||
|
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
||||||
|
0123456789.:,;()*!?'@#<>$%&^+-=~
|
||||||
|
</p>
|
||||||
|
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="demo">
|
||||||
|
<h1 style="font-family: 'Buenos Aires'; font-weight: 900; font-style: italic;">Buenos Aires Black Italic</h1>
|
||||||
|
<pre title="Usage">.your-style {
|
||||||
|
font-family: 'Buenos Aires';
|
||||||
|
font-weight: 900;
|
||||||
|
font-style: italic;
|
||||||
|
}</pre>
|
||||||
|
<pre title="Preload (optional)">
|
||||||
|
<link rel="preload" href="BuenosAires-BlackItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||||
|
<div class="font-container" style="font-family: 'Buenos Aires'; font-weight: 900; font-style: italic;">
|
||||||
|
<p class="letters">
|
||||||
|
abcdefghijklmnopqrstuvwxyz<br>
|
||||||
|
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
||||||
|
0123456789.:,;()*!?'@#<>$%&^+-=~
|
||||||
|
</p>
|
||||||
|
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="demo">
|
||||||
|
<h1 style="font-family: 'Buenos Aires'; font-weight: normal; font-style: italic;">Buenos Aires Regular Italic</h1>
|
||||||
|
<pre title="Usage">.your-style {
|
||||||
|
font-family: 'Buenos Aires';
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: italic;
|
||||||
|
}</pre>
|
||||||
|
<pre title="Preload (optional)">
|
||||||
|
<link rel="preload" href="BuenosAires-RegularItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||||
|
<div class="font-container" style="font-family: 'Buenos Aires'; font-weight: normal; font-style: italic;">
|
||||||
|
<p class="letters">
|
||||||
|
abcdefghijklmnopqrstuvwxyz<br>
|
||||||
|
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
||||||
|
0123456789.:,;()*!?'@#<>$%&^+-=~
|
||||||
|
</p>
|
||||||
|
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,182 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Buenos Aires';
|
||||||
|
src: url('BuenosAires-Bold.eot');
|
||||||
|
src: local('Buenos Aires Bold'), local('BuenosAires-Bold'),
|
||||||
|
url('BuenosAires-Bold.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('BuenosAires-Bold.woff2') format('woff2'),
|
||||||
|
url('BuenosAires-Bold.woff') format('woff'),
|
||||||
|
url('BuenosAires-Bold.ttf') format('truetype');
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Buenos Aires';
|
||||||
|
src: url('BuenosAires-LightItalic.eot');
|
||||||
|
src: local('Buenos Aires Light Italic'), local('BuenosAires-LightItalic'),
|
||||||
|
url('BuenosAires-LightItalic.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('BuenosAires-LightItalic.woff2') format('woff2'),
|
||||||
|
url('BuenosAires-LightItalic.woff') format('woff'),
|
||||||
|
url('BuenosAires-LightItalic.ttf') format('truetype');
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: italic;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*@font-face {*/
|
||||||
|
/* font-family: 'Buenos Aires';*/
|
||||||
|
/* src: url('BuenosAires-Regular.eot');*/
|
||||||
|
/* src: local('Buenos Aires Regular'), local('BuenosAires-Regular'),*/
|
||||||
|
/* url('BuenosAires-Regular.eot?#iefix') format('embedded-opentype'),*/
|
||||||
|
/* url('BuenosAires-Regular.woff2') format('woff2'),*/
|
||||||
|
/* url('BuenosAires-Regular.woff') format('woff'),*/
|
||||||
|
/* url('BuenosAires-Regular.ttf') format('truetype');*/
|
||||||
|
/* font-weight: normal;*/
|
||||||
|
/* font-style: normal;*/
|
||||||
|
/* font-display: swap;*/
|
||||||
|
/*}*/
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Buenos Aires';
|
||||||
|
src: url('BuenosAires-BoldItalic.eot');
|
||||||
|
src: local('Buenos Aires Bold Italic'), local('BuenosAires-BoldItalic'),
|
||||||
|
url('BuenosAires-BoldItalic.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('BuenosAires-BoldItalic.woff2') format('woff2'),
|
||||||
|
url('BuenosAires-BoldItalic.woff') format('woff'),
|
||||||
|
url('BuenosAires-BoldItalic.ttf') format('truetype');
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: italic;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Buenos Aires';
|
||||||
|
src: url('BuenosAires-SemiBold.eot');
|
||||||
|
src: local('Buenos Aires SemiBold'), local('BuenosAires-SemiBold'),
|
||||||
|
url('BuenosAires-SemiBold.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('BuenosAires-SemiBold.woff2') format('woff2'),
|
||||||
|
url('BuenosAires-SemiBold.woff') format('woff'),
|
||||||
|
url('BuenosAires-SemiBold.ttf') format('truetype');
|
||||||
|
font-weight: 600;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Buenos Aires';
|
||||||
|
src: url('BuenosAires-SemiBoldItalic.eot');
|
||||||
|
src: local('Buenos Aires SemiBold Italic'), local('BuenosAires-SemiBoldItalic'),
|
||||||
|
url('BuenosAires-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('BuenosAires-SemiBoldItalic.woff2') format('woff2'),
|
||||||
|
url('BuenosAires-SemiBoldItalic.woff') format('woff'),
|
||||||
|
url('BuenosAires-SemiBoldItalic.ttf') format('truetype');
|
||||||
|
font-weight: 600;
|
||||||
|
font-style: italic;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Buenos Aires';
|
||||||
|
src: url('BuenosAires-Thin.eot');
|
||||||
|
src: local('Buenos Aires Thin'), local('BuenosAires-Thin'),
|
||||||
|
url('BuenosAires-Thin.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('BuenosAires-Thin.woff2') format('woff2'),
|
||||||
|
url('BuenosAires-Thin.woff') format('woff'),
|
||||||
|
url('BuenosAires-Thin.ttf') format('truetype');
|
||||||
|
font-weight: 100;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Buenos Aires';
|
||||||
|
src: url('BuenosAires-ThinItalic.eot');
|
||||||
|
src: local('Buenos Aires Thin Italic'), local('BuenosAires-ThinItalic'),
|
||||||
|
url('BuenosAires-ThinItalic.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('BuenosAires-ThinItalic.woff2') format('woff2'),
|
||||||
|
url('BuenosAires-ThinItalic.woff') format('woff'),
|
||||||
|
url('BuenosAires-ThinItalic.ttf') format('truetype');
|
||||||
|
font-weight: 100;
|
||||||
|
font-style: italic;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Buenos Aires';
|
||||||
|
src: url('BuenosAires-Book.eot');
|
||||||
|
src: local('Buenos Aires Book'), local('BuenosAires-Book'),
|
||||||
|
url('BuenosAires-Book.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('BuenosAires-Book.woff2') format('woff2'),
|
||||||
|
url('BuenosAires-Book.woff') format('woff'),
|
||||||
|
url('BuenosAires-Book.ttf') format('truetype');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Buenos Aires';
|
||||||
|
src: url('BuenosAires-BookItalic.eot');
|
||||||
|
src: local('Buenos Aires Book Italic'), local('BuenosAires-BookItalic'),
|
||||||
|
url('BuenosAires-BookItalic.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('BuenosAires-BookItalic.woff2') format('woff2'),
|
||||||
|
url('BuenosAires-BookItalic.woff') format('woff'),
|
||||||
|
url('BuenosAires-BookItalic.ttf') format('truetype');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: italic;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Buenos Aires';
|
||||||
|
src: url('BuenosAires-Light.eot');
|
||||||
|
src: local('Buenos Aires Light'), local('BuenosAires-Light'),
|
||||||
|
url('BuenosAires-Light.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('BuenosAires-Light.woff2') format('woff2'),
|
||||||
|
url('BuenosAires-Light.woff') format('woff'),
|
||||||
|
url('BuenosAires-Light.ttf') format('truetype');
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Buenos Aires';
|
||||||
|
src: url('BuenosAires-Black.eot');
|
||||||
|
src: local('Buenos Aires Black'), local('BuenosAires-Black'),
|
||||||
|
url('BuenosAires-Black.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('BuenosAires-Black.woff2') format('woff2'),
|
||||||
|
url('BuenosAires-Black.woff') format('woff'),
|
||||||
|
url('BuenosAires-Black.ttf') format('truetype');
|
||||||
|
font-weight: 900;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Buenos Aires';
|
||||||
|
src: url('BuenosAires-BlackItalic.eot');
|
||||||
|
src: local('Buenos Aires Black Italic'), local('BuenosAires-BlackItalic'),
|
||||||
|
url('BuenosAires-BlackItalic.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('BuenosAires-BlackItalic.woff2') format('woff2'),
|
||||||
|
url('BuenosAires-BlackItalic.woff') format('woff'),
|
||||||
|
url('BuenosAires-BlackItalic.ttf') format('truetype');
|
||||||
|
font-weight: 900;
|
||||||
|
font-style: italic;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*@font-face {*/
|
||||||
|
/* font-family: 'Buenos Aires';*/
|
||||||
|
/* src: url('BuenosAires-RegularItalic.eot');*/
|
||||||
|
/* src: local('Buenos Aires Regular Italic'), local('BuenosAires-RegularItalic'),*/
|
||||||
|
/* url('BuenosAires-RegularItalic.eot?#iefix') format('embedded-opentype'),*/
|
||||||
|
/* url('BuenosAires-RegularItalic.woff2') format('woff2'),*/
|
||||||
|
/* url('BuenosAires-RegularItalic.woff') format('woff'),*/
|
||||||
|
/* url('BuenosAires-RegularItalic.ttf') format('truetype');*/
|
||||||
|
/* font-weight: normal;*/
|
||||||
|
/* font-style: italic;*/
|
||||||
|
/* font-display: swap;*/
|
||||||
|
/*}*/
|
||||||
|
|
||||||
|
|
@ -18,17 +18,38 @@ module.exports = {
|
||||||
colors: {
|
colors: {
|
||||||
transparent: 'transparent',
|
transparent: 'transparent',
|
||||||
current: 'currentColor',
|
current: 'currentColor',
|
||||||
black: colors.black,
|
'white': '#ffffff',
|
||||||
white: colors.white,
|
'blue': {
|
||||||
blue: colors.blue,
|
900: '#00224D',
|
||||||
gray: colors.gray,
|
|
||||||
emerald: colors.emerald,
|
|
||||||
indigo: colors.indigo,
|
|
||||||
yellow: colors.yellow,
|
|
||||||
slate: colors.slate,
|
|
||||||
'blue-dark': '#00224D',
|
|
||||||
},
|
},
|
||||||
|
'sky': {
|
||||||
|
500: '#41B5FA',
|
||||||
},
|
},
|
||||||
|
'orange': {
|
||||||
|
500: '#FE955A',
|
||||||
|
},
|
||||||
|
'green': {
|
||||||
|
500: '#3EDF9C',
|
||||||
|
},
|
||||||
|
'red': {
|
||||||
|
500: '#DE3618',
|
||||||
|
},
|
||||||
|
'gray': {
|
||||||
|
100: '#EDF2F6',
|
||||||
|
300: '#E0E5EC',
|
||||||
|
500: '#B1C1CA',
|
||||||
|
700: '#6F787E',
|
||||||
|
900: '#0A0A0A',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
safelist: [{
|
||||||
|
pattern: /bg-(blue|sky|orange|green|red)-(500)/,
|
||||||
|
}, {
|
||||||
|
pattern: /bg-gray-(100|300|500|700|900)/,
|
||||||
|
},
|
||||||
|
'bg-blue-900',
|
||||||
|
],
|
||||||
plugins: [
|
plugins: [
|
||||||
require('@tailwindcss/typography'),
|
require('@tailwindcss/typography'),
|
||||||
require('@tailwindcss/forms'),
|
require('@tailwindcss/forms'),
|
||||||
|
|
|
||||||
|
|
@ -2,17 +2,34 @@
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
html {
|
||||||
|
@apply text-gray-900
|
||||||
|
}
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
@apply text-6xl font-bold
|
@apply text-4xl md:text-5xl xl:text-7xl font-bold
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-1 {
|
||||||
|
@apply text-4xl md:text-5xl xl:text-7xl font-bold
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
@apply text-4xl font-semibold
|
@apply text-3xl xl:text-4xl font-bold
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-2 {
|
||||||
|
@apply text-3xl xl:text-4xl font-bold
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
@apply text-2xl font-medium
|
@apply text-2xl font-bold
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-3 {
|
||||||
|
@apply text-3xl xl:text-4xl font-bold
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -20,5 +37,18 @@
|
||||||
.circle-title {
|
.circle-title {
|
||||||
@apply text-9xl font-bold
|
@apply text-9xl font-bold
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
@apply font-bold py-2 px-4 align-middle inline-block bg-blue-900 text-white border-2 border-blue-900 hover:bg-sky-500
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
@apply font-bold py-2 px-4 align-middle inline-block bg-white text-blue-900 border-2 border-blue-900 hover:bg-sky-500
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-blue {
|
||||||
|
@apply font-bold py-2 px-4 align-middle inline-block bg-sky-500 text-blue-900 border-2 border-sky-500 hover:bg-blue-900 hover:text-white
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue