mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-11 04:38:18 +00:00
Fixing fonts
This commit is contained in:
Ronan Berder
+4
-7
@@ -1,16 +1,13 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Lora&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Fira+Code&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono&display=swap");
|
||||
|
||||
@import "tailwindcss";
|
||||
@import "../../src/css/basecoat.css";
|
||||
@import "./custom.css";
|
||||
|
||||
@theme {
|
||||
--font-sans: 'Inter';
|
||||
--font-mono: 'JetBrains Mono';
|
||||
--font-sans: 'Geist';
|
||||
--font-mono: 'Geist Mono';
|
||||
}
|
||||
|
||||
@import "./themes/claude.css";
|
||||
|
||||
@@ -5,7 +5,7 @@ layout: layouts/layout.njk
|
||||
<main class="mx-auto relative flex w-full max-w-screen-lg gap-10">
|
||||
<div class="mx-auto w-full max-w-screen-md">
|
||||
<header class="space-y-2">
|
||||
<h1 class="text-3xl font-semibold tracking-tight">{{ title }}</h1>
|
||||
<h1 class="text-3xl font-bold tracking-tight">{{ title }}</h1>
|
||||
<p class="text-muted-foreground">{{ description }}</p>
|
||||
</header>
|
||||
<article class="pb-12 mt-8 content">
|
||||
|
||||
+12
-12
@@ -1,15 +1,12 @@
|
||||
/*! tailwindcss v4.1.4 | MIT License | https://tailwindcss.com */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Lora&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Fira+Code&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono&display=swap");
|
||||
@layer properties;
|
||||
@layer theme, base, components, utilities;
|
||||
@layer theme {
|
||||
:root, :host {
|
||||
--font-sans: 'Inter';
|
||||
--font-mono: 'JetBrains Mono';
|
||||
--font-sans: 'Geist';
|
||||
--font-mono: 'Geist Mono';
|
||||
--color-amber-50: oklch(98.7% 0.022 95.277);
|
||||
--color-amber-100: oklch(96.2% 0.059 95.617);
|
||||
--color-amber-900: oklch(41.4% 0.112 45.904);
|
||||
@@ -56,7 +53,7 @@
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--tracking-tighter: -0.05em;
|
||||
--font-weight-bold: 700;
|
||||
--tracking-tight: -0.025em;
|
||||
--tracking-normal: 0em;
|
||||
--tracking-widest: 0.1em;
|
||||
@@ -352,6 +349,9 @@
|
||||
.mb-6 {
|
||||
margin-bottom: calc(var(--spacing) * 6);
|
||||
}
|
||||
.mb-8 {
|
||||
margin-bottom: calc(var(--spacing) * 8);
|
||||
}
|
||||
.mb-12 {
|
||||
margin-bottom: calc(var(--spacing) * 12);
|
||||
}
|
||||
@@ -881,6 +881,10 @@
|
||||
--tw-leading: var(--leading-tight);
|
||||
line-height: var(--leading-tight);
|
||||
}
|
||||
.font-bold {
|
||||
--tw-font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
.font-medium {
|
||||
--tw-font-weight: var(--font-weight-medium);
|
||||
font-weight: var(--font-weight-medium);
|
||||
@@ -897,10 +901,6 @@
|
||||
--tw-tracking: var(--tracking-tight);
|
||||
letter-spacing: var(--tracking-tight);
|
||||
}
|
||||
.tracking-tighter {
|
||||
--tw-tracking: var(--tracking-tighter);
|
||||
letter-spacing: var(--tracking-tighter);
|
||||
}
|
||||
.tracking-widest {
|
||||
--tw-tracking: var(--tracking-widest);
|
||||
letter-spacing: var(--tracking-widest);
|
||||
|
||||
@@ -111,6 +111,15 @@ document.addEventListener('alpine:init', () => {
|
||||
] %}
|
||||
{{ tabs(id="combobox", tabsets=tabsets) }}
|
||||
|
||||
<section class="prose">
|
||||
<p>The component will dispatch <code>dialog:opened</code> and <code>dialog:closed</code> events when the dialog is opened or closed. You can also dispatch <code>dialog:open</code> and <code>dialog:close</code> events to open or close the dialog programmatically. You will need the element to have an <code>id</code> to be able to target it (e.g. <code><div id="my-dialog" class="dialog"></code>):</p>
|
||||
</section>
|
||||
|
||||
{% set code_dispatch %}<button type="button" x-init @click="$dispatch('dialog:open', { id: 'my-dialog' })">
|
||||
Open #my-dialog
|
||||
</button>{% endset %}
|
||||
{{ code_block(code_dispatch | prettyHtml, "html") }}
|
||||
|
||||
<h3 id="usage-macro"><a href="#usage-macro">Jinja and Nunjucks</a></h3>
|
||||
|
||||
<div class="prose">
|
||||
|
||||
@@ -128,6 +128,10 @@ document.addEventListener('alpine:init', () => {
|
||||
] %}
|
||||
{{ tabs(id="select", tabsets=tabsets) }}
|
||||
|
||||
<section class="prose">
|
||||
<p>The component will dispatch a <code>select:change</code> event when a value is selected, along with the value and label of the selected option in the <code>detail</code> object.</p>
|
||||
</section>
|
||||
|
||||
<h3 id="usage-macro"><a href="#usage-macro">Jinja and Nunjucks</a></h3>
|
||||
|
||||
<div class="prose">
|
||||
|
||||
+1
-1
@@ -7,7 +7,7 @@ layout: layouts/layout.njk
|
||||
<div class="max-w-screen-lg mx-auto">
|
||||
<header class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<h1 class="text-2xl font-semibold tracking-tighter sm:text-3xl md:text-4xl">All of the shadcn/ui magic, none of the React</h1>
|
||||
<h1 class="text-2xl font-bold tracking-tight sm:text-3xl md:text-4xl">All of the shadcn/ui magic, none of the React</h1>
|
||||
<p class="sm:text-lg text-muted-foreground">A components library built with Tailwind CSS that works with any web stack.</p>
|
||||
</div>
|
||||
<div class="flex w-full items-center justify-start gap-2 pt-2">
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
---
|
||||
layout: layouts/layout.njk
|
||||
title: Kitchen Sink
|
||||
description: A collection of all the components available in Basecoat.
|
||||
---
|
||||
{% set components = [
|
||||
{ label: "Accordion", id: "accordion" },
|
||||
@@ -32,10 +34,16 @@ layout: layouts/layout.njk
|
||||
] %}
|
||||
|
||||
<div class="flex gap-x-10">
|
||||
<div class="grid gap-4 flex-1">
|
||||
{% for component in components %}
|
||||
{% include "partials/kitchen-sink/" ~ component.id ~ ".njk" %}
|
||||
{% endfor %}
|
||||
<div>
|
||||
<header class="space-y-2 mb-8">
|
||||
<h1 class="text-3xl font-semibold tracking-tight">{{ title }}</h1>
|
||||
<p class="text-muted-foreground">{{ description }}</p>
|
||||
</header>
|
||||
<div class="grid gap-4 flex-1">
|
||||
{% for component in components %}
|
||||
{% include "partials/kitchen-sink/" ~ component.id ~ ".njk" %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden text-sm xl:block w-full max-w-[200px]">
|
||||
{% from "macros/toc.njk" import toc_nav %}
|
||||
|
||||
Reference in New Issue
Block a user