@lottecode/lottecss 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +126 -0
- package/dist/styles.css +1 -0
- package/package.json +28 -0
- package/styles.css +19 -0
package/README.md
ADDED
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
# lottecss
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
A CSS framework that styles semantic HTML automatically. No classes, no inline styles — just write proper markup and lottecss handles the design.
|
|
6
|
+
|
|
7
|
+
**Live demo & docs:** [https://css.lottecode.com](https://css.lottecode.com)
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
Add the lottecode registry to your project's `.yarnrc.yml`:
|
|
14
|
+
|
|
15
|
+
```yaml
|
|
16
|
+
npmScopes:
|
|
17
|
+
lottecode:
|
|
18
|
+
npmRegistryServer: "https://npm.pkg.github.com"
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Then install:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
yarn add @lottecode/lottecss
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Usage
|
|
28
|
+
|
|
29
|
+
```css
|
|
30
|
+
@import "@lottecode/lottecss/styles.css";
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## How It Works
|
|
34
|
+
|
|
35
|
+
lottecss targets semantic HTML elements directly. You do not add classes or inline styles to control appearance. The framework styles elements based on what they are and where they sit in the document structure.
|
|
36
|
+
|
|
37
|
+
### Rules
|
|
38
|
+
|
|
39
|
+
- **Use semantic HTML elements**: `<header>`, `<nav>`, `<main>`, `<footer>`, `<article>`, `<section>`, `<aside>`, `<h1>`–`<h6>`, `<p>`, `<ul>`, `<ol>`, `<blockquote>`, `<table>`, `<form>`, `<button>`, `<details>`, `<figure>`
|
|
40
|
+
- **Never add inline styles** (`style=""`) to semantic elements
|
|
41
|
+
- **Never add styling classes** (no `className="text-xl text-blue-500"` on headings, paragraphs, etc.)
|
|
42
|
+
- **No custom class names** like `"site-header"`, `"nav-list"`, `"card-title"` — use the semantic element itself
|
|
43
|
+
- **Layout utilities only**: basic Tailwind utility classes (`flex`, `grid`, `gap-*`, `p-*`, `m-*`) are acceptable for layout purposes only, not for visual styling
|
|
44
|
+
|
|
45
|
+
### Examples
|
|
46
|
+
|
|
47
|
+
```html
|
|
48
|
+
<!-- CORRECT: pure semantic markup, lottecss handles all styling -->
|
|
49
|
+
<header>
|
|
50
|
+
<nav>
|
|
51
|
+
<ul>
|
|
52
|
+
<li><a href="/">Home</a></li>
|
|
53
|
+
<li><a href="/about">About</a></li>
|
|
54
|
+
</ul>
|
|
55
|
+
</nav>
|
|
56
|
+
</header>
|
|
57
|
+
|
|
58
|
+
<main>
|
|
59
|
+
<article>
|
|
60
|
+
<h1>Article Title</h1>
|
|
61
|
+
<p>Paragraph text styled automatically.</p>
|
|
62
|
+
<blockquote>A styled blockquote.</blockquote>
|
|
63
|
+
<ul>
|
|
64
|
+
<li>Styled list item</li>
|
|
65
|
+
</ul>
|
|
66
|
+
</article>
|
|
67
|
+
<aside>
|
|
68
|
+
<h2>Sidebar</h2>
|
|
69
|
+
<p>Sidebar content.</p>
|
|
70
|
+
</aside>
|
|
71
|
+
</main>
|
|
72
|
+
|
|
73
|
+
<footer>
|
|
74
|
+
<p>Footer content.</p>
|
|
75
|
+
</footer>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
```html
|
|
79
|
+
<!-- WRONG: do not do this -->
|
|
80
|
+
<h1 style="font-size: 2rem; color: navy;">Title</h1>
|
|
81
|
+
<p class="text-gray-600 text-lg">Text</p>
|
|
82
|
+
<div class="card-header">Not a real element</div>
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### What lottecss Styles
|
|
86
|
+
|
|
87
|
+
| Module | What it covers |
|
|
88
|
+
|---|---|
|
|
89
|
+
| `typography.css` | Headings, paragraphs, inline text (`<strong>`, `<em>`, `<code>`, `<mark>`) |
|
|
90
|
+
| `navigation.css` | `<nav>`, nav lists, links within nav |
|
|
91
|
+
| `header.css` | `<header>` element and its children |
|
|
92
|
+
| `button.css` | `<button>` and button-like elements |
|
|
93
|
+
| `forms.css` | `<form>`, `<input>`, `<select>`, `<textarea>`, `<label>` |
|
|
94
|
+
| `tables.css` | `<table>`, `<thead>`, `<tbody>`, `<tr>`, `<th>`, `<td>` |
|
|
95
|
+
| `lists.css` | `<ul>`, `<ol>`, `<li>`, `<dl>`, `<dt>`, `<dd>` |
|
|
96
|
+
| `card.css` | `.card` class for card-like containers |
|
|
97
|
+
| `accordion.css` | `<details>` and `<summary>` |
|
|
98
|
+
| `tabs.css` | Tab patterns using semantic markup |
|
|
99
|
+
| `media.css` | `<img>`, `<video>`, `<figure>`, `<figcaption>` |
|
|
100
|
+
| `links.css` | `<a>` elements |
|
|
101
|
+
| `editorial.css` | `<blockquote>`, `<hr>`, long-form content |
|
|
102
|
+
| `layout.css` | Page-level layout (`<main>`, `<aside>`) |
|
|
103
|
+
| `column.css` | Column-based layouts |
|
|
104
|
+
| `colors.css` | Color palette and CSS custom properties |
|
|
105
|
+
| `fonts.css` | Font face definitions (Berkeley Mono) |
|
|
106
|
+
| `globals.css` | Base resets and defaults |
|
|
107
|
+
| `utility.css` | Minimal utility classes for layout only |
|
|
108
|
+
|
|
109
|
+
## Fonts
|
|
110
|
+
|
|
111
|
+
lottecss uses [Berkeley Mono](https://berkeleygraphics.com/typefaces/berkeley-mono) by default. This is a licensed typeface — lottecss does not distribute the font files. The framework falls back to `monospace` if Berkeley Mono is not available.
|
|
112
|
+
|
|
113
|
+
**Buy Berkeley Mono:** [berkeleygraphics.com/typefaces/berkeley-mono](https://berkeleygraphics.com/typefaces/berkeley-mono)
|
|
114
|
+
|
|
115
|
+
To use your own font, override the CSS custom properties:
|
|
116
|
+
|
|
117
|
+
```css
|
|
118
|
+
:root {
|
|
119
|
+
--font-family-sans: "Your Font", sans-serif;
|
|
120
|
+
--font-family-mono: "Your Mono Font", monospace;
|
|
121
|
+
}
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
### Key Principle
|
|
125
|
+
|
|
126
|
+
If you're reaching for a class name or inline style to make something look right, you're probably using the wrong HTML element. Choose the element that semantically represents your content and lottecss will style it correctly.
|
package/dist/styles.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */@layer theme, base, components, utilities;@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap");@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,::file-selector-button,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}::file-selector-button,button,input,optgroup,select,textarea{background-color:transparent;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::-moz-placeholder{opacity:1}::placeholder{opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){::-moz-placeholder{color:currentcolor;@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,currentcolor 50%,transparent)}}::placeholder{color:currentcolor;@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}::file-selector-button,button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities;main{background-color:#dcfce7}main.sage-bg-page{background-color:var(--color-sage)}main.dark-bg-page{background-color:#000;color:#fff}main.dark-bg-page h1,main.dark-bg-page h4,main.dark-bg-page label,main.dark-bg-page p{color:var(--color-background)}main.dark-bg-page button{background-color:var(--color-highlight);color:#000}main.dark-bg-page table{border-color:var(--color-background)}main.dark-bg-page td,main.dark-bg-page th{border-color:var(--color-background);color:var(--color-background)}main.dark-bg-page thead th{background-color:var(--color-background);color:var(--color-foreground)}main .container{max-width:72rem;padding:1.5rem 1rem}main .container,main.full-width-page .container{margin-left:auto;margin-right:auto;min-height:80vh}main.full-width-page .container{max-width:1480px;padding:1.5rem 2rem}footer,nav{max-width:72rem}footer{margin:0 auto;padding:1rem}article,aside,section{margin:1rem 0}aside{background-color:var(--color-surface);border-left:4px solid var(--color-border);border-radius:.25rem;padding:1rem}figure{margin-bottom:1rem}details{background-color:var(--color-surface);border:1px solid var(--color-border);margin-bottom:1rem}details,summary{border-radius:.25rem;padding:.5rem}summary{cursor:pointer;font-weight:600;margin:-.5rem}summary:hover{background-color:var(--color-background)}details[open] summary{border-bottom:1px solid var(--color-border);margin-bottom:.5rem}.columns-1{-moz-column-count:1;column-count:1}.columns-2{-moz-column-count:2;column-count:2}.columns-3{-moz-column-count:3;column-count:3}.columns-4{-moz-column-count:4;column-count:4}.columns-5{-moz-column-count:5;column-count:5}.columns-6{-moz-column-count:6;column-count:6}.columns-xs{-moz-column-width:10rem;column-width:10rem}.columns-sm{-moz-column-width:15rem;column-width:15rem}.columns-md{-moz-column-width:20rem;column-width:20rem}.columns-lg{-moz-column-width:25rem;column-width:25rem}.columns-xl{-moz-column-width:30rem;column-width:30rem}.column-gap-0{-moz-column-gap:0;column-gap:0}.column-gap-1{-moz-column-gap:.25rem;column-gap:.25rem}.column-gap-2{-moz-column-gap:.5rem;column-gap:.5rem}.column-gap-4{-moz-column-gap:1rem;column-gap:1rem}.column-gap-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.column-gap-8{-moz-column-gap:2rem;column-gap:2rem}.column-rule{-moz-column-rule:1px solid var(--color-border);column-rule:1px solid var(--color-border)}.column-rule-none{-moz-column-rule:none;column-rule:none}.column-rule-dotted{-moz-column-rule-style:dotted;column-rule-style:dotted}.column-rule-dashed{-moz-column-rule-style:dashed;column-rule-style:dashed}.column-rule-solid{-moz-column-rule-style:solid;column-rule-style:solid}.column-rule-double{-moz-column-rule-style:double;column-rule-style:double}.column-rule-1{-moz-column-rule-width:1px;column-rule-width:1px}.column-rule-2{-moz-column-rule-width:2px;column-rule-width:2px}.column-rule-4{-moz-column-rule-width:4px;column-rule-width:4px}.column-rule-primary{-moz-column-rule-color:var(--color-primary);column-rule-color:var(--color-primary)}.column-rule-secondary{-moz-column-rule-color:var(--color-secondary);column-rule-color:var(--color-secondary)}.column-rule-muted{-moz-column-rule-color:var(--color-muted);column-rule-color:var(--color-muted)}.column-span-all{-moz-column-span:all;column-span:all}.column-span-none{-moz-column-span:none;column-span:none}.column-fill-auto{-moz-column-fill:auto;column-fill:auto}.column-fill-balance{-moz-column-fill:balance;column-fill:balance}.break-inside-auto{-moz-column-break-inside:auto;break-inside:auto}.break-inside-avoid{-moz-column-break-inside:avoid;break-inside:avoid}.break-inside-avoid-column{-moz-column-break-inside:avoid;break-inside:avoid-column}.break-before-auto{-moz-column-break-before:auto;break-before:auto}.break-before-column{-moz-column-break-before:column;break-before:column}.break-before-avoid-column{-moz-column-break-before:avoid-column;break-before:avoid-column}.break-after-auto{-moz-column-break-after:auto;break-after:auto}.break-after-column{-moz-column-break-after:column;break-after:column}.break-after-avoid-column{-moz-column-break-after:avoid-column;break-after:avoid-column}@media (min-width:640px){.sm\:columns-1{-moz-column-count:1;column-count:1}.sm\:columns-2{-moz-column-count:2;column-count:2}.sm\:columns-3{-moz-column-count:3;column-count:3}.sm\:columns-4{-moz-column-count:4;column-count:4}.sm\:columns-5{-moz-column-count:5;column-count:5}.sm\:columns-6{-moz-column-count:6;column-count:6}.sm\:columns-xs{-moz-column-width:10rem;column-width:10rem}.sm\:columns-sm{-moz-column-width:15rem;column-width:15rem}.sm\:columns-md{-moz-column-width:20rem;column-width:20rem}.sm\:columns-lg{-moz-column-width:25rem;column-width:25rem}.sm\:columns-xl{-moz-column-width:30rem;column-width:30rem}}@media (min-width:768px){.md\:columns-1{-moz-column-count:1;column-count:1}.md\:columns-2{-moz-column-count:2;column-count:2}.md\:columns-3{-moz-column-count:3;column-count:3}.md\:columns-4{-moz-column-count:4;column-count:4}.md\:columns-5{-moz-column-count:5;column-count:5}.md\:columns-6{-moz-column-count:6;column-count:6}.md\:columns-xs{-moz-column-width:10rem;column-width:10rem}.md\:columns-sm{-moz-column-width:15rem;column-width:15rem}.md\:columns-md{-moz-column-width:20rem;column-width:20rem}.md\:columns-lg{-moz-column-width:25rem;column-width:25rem}.md\:columns-xl{-moz-column-width:30rem;column-width:30rem}.md\:column-gap-0{-moz-column-gap:0;column-gap:0}.md\:column-gap-1{-moz-column-gap:.25rem;column-gap:.25rem}.md\:column-gap-2{-moz-column-gap:.5rem;column-gap:.5rem}.md\:column-gap-4{-moz-column-gap:1rem;column-gap:1rem}.md\:column-gap-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.md\:column-gap-8{-moz-column-gap:2rem;column-gap:2rem}}@media (min-width:1024px){.lg\:columns-1{-moz-column-count:1;column-count:1}.lg\:columns-2{-moz-column-count:2;column-count:2}.lg\:columns-3{-moz-column-count:3;column-count:3}.lg\:columns-4{-moz-column-count:4;column-count:4}.lg\:columns-5{-moz-column-count:5;column-count:5}.lg\:columns-6{-moz-column-count:6;column-count:6}.lg\:columns-xs{-moz-column-width:10rem;column-width:10rem}.lg\:columns-sm{-moz-column-width:15rem;column-width:15rem}.lg\:columns-md{-moz-column-width:20rem;column-width:20rem}.lg\:columns-lg{-moz-column-width:25rem;column-width:25rem}.lg\:columns-xl{-moz-column-width:30rem;column-width:30rem}.lg\:column-gap-0{-moz-column-gap:0;column-gap:0}.lg\:column-gap-1{-moz-column-gap:.25rem;column-gap:.25rem}.lg\:column-gap-2{-moz-column-gap:.5rem;column-gap:.5rem}.lg\:column-gap-4{-moz-column-gap:1rem;column-gap:1rem}.lg\:column-gap-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.lg\:column-gap-8{-moz-column-gap:2rem;column-gap:2rem}}.card{background-color:var(--color-background);border:1px solid var(--color-border);padding:1rem;transition:all .2s ease}.card:hover{box-shadow:0 4px 8px rgba(0,0,0,.1)}:root{--color-background:#fffcf1;--color-foreground:#121212;--color-surface:#fff;--color-border:#121212;--color-accent:#fceaf5;--color-highlight:#94e59c;--color-info:#79bce8;--color-success:#59c07d;--color-warning:#ffd24d;--color-error:#f26c6c;--color-sage:#c8d9d1}.theme-dark{--color-background:#121212;--color-foreground:#f5f5f5;--color-surface:#130f40;--color-border:#e0bcd3;--color-accent:#fceaf5;--color-highlight:#94e59c;--color-info:#3d87b5;--color-success:#2e8c51;--color-warning:#d9a305;--color-error:#c13d3d;--color-sage:#c8d9d1}.opacity-100{opacity:1}.opacity-80{opacity:.8}.opacity-60{opacity:.6}.opacity-40{opacity:.4}.opacity-20{opacity:.2}.bg-background{background-color:var(--color-background)}.bg-foreground{background-color:var(--color-foreground)}.bg-surface{background-color:var(--color-surface)}.bg-border{background-color:var(--color-border)}.bg-accent{background-color:var(--color-accent)}.bg-info{background-color:var(--color-info)}.bg-success{background-color:var(--color-success)}.bg-warning{background-color:var(--color-warning)}.bg-error{background-color:var(--color-error)}.text-background{color:var(--color-background)}.text-foreground{color:var(--color-foreground)}.text-surface{color:var(--color-surface)}.text-border{color:var(--color-border)}.text-accent{color:var(--color-accent)}.text-info{color:var(--color-info)}.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}.text-error{color:var(--color-error)}:root{--font-family-sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;--font-family-mono:"IBM Plex Mono",Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}.font-sans{font-family:var(--font-family-sans)}.font-mono{font-family:var(--font-family-mono)}@font-face{font-family:Berkeley Mono;font-style:normal;font-weight:400;src:local("Berkeley Mono"),local("BerkeleyMono-Regular")}@font-face{font-family:Berkeley Mono;font-style:normal;font-weight:700;src:local("Berkeley Mono Bold"),local("BerkeleyMono-Bold")}body{color:var(--color-foreground);font-family:var(--font-family-sans);font-weight:400;line-height:1.5}body{& h1,& h2,& h3,& h4,& h5,& h6{color:var(--color-foreground);font-weight:400;margin:0;padding:.75rem 0}& h1{font-size:1.5rem}& h2{font-size:1.25rem}& h3{display:block;margin-bottom:.5rem;text-transform:uppercase}& h3,& h4{font-size:.825rem}& h5,& h6{font-size:.75rem}& footer *,& nav *,& p{font-size:.6875rem}}a,abbr,address,article,aside,blockquote,button,caption,cite,dd,details,div,dl,dt,em,fieldset,figcaption,figure,footer,header,input,kbd,label,legend,li,main,mark,nav,ol,option,p,q,samp,section,select,span,strong,summary,td,textarea,th,time,ul,var{color:var(--color-foreground)}small{font-size:.715rem}p{margin-top:0}em{font-style:italic}strong{font-weight:700}mark{background-color:var(--color-accent);color:#212529;padding:.2em}blockquote{background-color:var(--color-surface);border-left:4px solid var(--color-border);font-style:italic;margin:1rem 0;padding:.5rem 1rem}blockquote p{margin-bottom:.5rem}blockquote cite{color:var(--color-accent);display:block}abbr{cursor:help;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}code,kbd,samp,var{font-family:var(--font-family-mono)}kbd{background-color:var(--color-surface);border:1px solid var(--color-border);box-shadow:0 1px 0 var(--color-border);color:var(--color-foreground)}time{color:var(--color-accent)}sub,sup{line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}address{margin-bottom:1rem}dl{margin:1rem 0;padding:0}dt{color:var(--color-foreground);font-weight:600;margin-top:.5rem}dt:first-child{margin-top:0}dd{color:var(--color-accent);margin:.25rem 0 .5rem 1.5rem}pre{color:var(--color-foreground);display:block;font-family:var(--font-family-mono);font-size:.7rem;margin:0 0 1rem;padding:1rem;word-break:break-all;word-wrap:break-word;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:.25rem;overflow-x:auto}nav{justify-content:space-between;margin:0 auto;padding:1rem;width:100%}nav,nav ul{align-items:center;display:flex}nav ul{flex-direction:row;flex-wrap:wrap;gap:1.5rem;list-style:none;margin:0;padding:.5rem}nav ul li{margin:0;padding:0;& a{color:var(--color-foreground);padding:.25rem .5rem;text-decoration:none;transition:all .2s ease;&.active,&:hover{background-color:var(--color-accent);color:var(--color-foreground)}}}header{background-color:var(--color-background);border-bottom:1px solid var(--color-border);left:0;margin:2rem auto 0;max-width:1024px;padding:0 .5rem;position:sticky;right:0;top:0;width:100%;z-index:1035}.header-top{justify-content:space-between;margin-bottom:1rem}.header-top,.theme-switcher{align-items:center;display:flex}.theme-switcher{gap:.5rem}ul{margin-bottom:1rem;margin-top:0}ul li{margin-bottom:.5rem}ul ul{margin-bottom:0;margin-top:.5rem}ol{margin-bottom:1rem;margin-top:0}ol li{margin-bottom:.5rem}ol ol{margin-bottom:0;margin-top:.5rem}dl{margin-bottom:1rem;margin-top:0}dt{margin-bottom:.25rem}dd{margin-bottom:.75rem}li>ol,li>ul{margin-bottom:0}ul.no-bullets{list-style-type:none;padding-left:0}ol.roman{list-style-type:upper-roman}ol.alpha{list-style-type:lower-alpha}@media (min-width:768px){dl.horizontal{display:grid;gap:.5rem;grid-template-columns:30% 70%}dl.horizontal dt{grid-column:1;margin-bottom:0;text-align:right}dl.horizontal dd{grid-column:2;margin-left:0}}table{border:1px solid var(--color-border);border-collapse:collapse;margin-bottom:1rem;width:100%}caption{caption-side:top;padding:1rem 0;text-align:left}td,th{border-bottom:1px solid var(--color-border);padding:.75rem;text-align:left;vertical-align:top}thead th{background-color:var(--color-surface);vertical-align:bottom}tbody+tbody{border-top:1px solid var(--color-border)}tbody tr.cursor-pointer:hover{background-color:var(--color-accent)}tfoot td{background-color:var(--color-surface);font-style:italic}.table-responsive{display:block;overflow-x:auto;width:100%;-webkit-overflow-scrolling:touch}@media (max-width:767.98px){.table-responsive-md{display:block;overflow-x:auto;width:100%;-webkit-overflow-scrolling:touch}}body{& form{margin-bottom:1rem}& legend{color:var(--color-foreground);font-weight:600;padding:0 .5rem;width:auto}& form div{margin-bottom:1rem}& label{color:var(--color-foreground);display:inline-block;font-weight:500;margin-bottom:.5rem}& input[type=email],& input[type=number],& input[type=password],& input[type=search],& input[type=tel],& input[type=text],& input[type=url]{background-clip:padding-box;background-color:var(--color-background);border:1px solid var(--color-border);border-radius:0;color:var(--color-foreground);display:block;line-height:1.5;padding:.5rem 1rem;transition:border-color .15s ease-in-out;width:100%}& input:focus{border-color:var(--color-accent);box-shadow:0 0 0 .2rem var(--color-accent);outline:0}.is-valid,.is-valid:focus{border-color:var(--color-success)}.is-valid:focus{box-shadow:0 0 0 .2rem rgba(40,167,69,.25)}.is-invalid,.is-invalid:focus{border-color:var(--color-error)}.is-invalid:focus{box-shadow:0 0 0 .2rem rgba(220,53,69,.25)}& input[type=date],& input[type=datetime-local],& input[type=time]{background-clip:padding-box;background-color:var(--color-background);border:1px solid var(--color-border);border-radius:.25rem;color:var(--color-foreground);display:block;line-height:1.5;padding:.375rem .75rem;width:100%}& input[type=checkbox],& input[type=radio]{margin-right:.5rem}& input[type=color]{background-color:var(--color-background);border:1px solid var(--color-border);height:2rem;padding:.2rem;width:4rem}& input[type=range],& select{width:100%}& select{background-clip:padding-box;background-color:var(--color-background);border:1px solid var(--color-border);border-radius:.25rem;color:var(--color-foreground);display:block;line-height:1.5;padding:.375rem .75rem}& select[multiple]{height:auto}& textarea{background-clip:padding-box;background-color:var(--color-background);border:1px solid var(--color-border);border-radius:.25rem;color:var(--color-foreground);display:block;line-height:1.5;padding:.375rem .75rem;resize:vertical;width:100%}@media (min-width:768px){.form-grid{align-items:center;display:grid;gap:.5rem;grid-template-columns:30% 70%}.form-grid label{grid-column:1;margin-bottom:0;text-align:right}.form-grid input,.form-grid select,.form-grid textarea{grid-column:2}}}a{color:var(--color-foreground)}html{scroll-behavior:smooth}[id]{scroll-margin-top:2rem}img{border-style:none;height:auto;max-width:100%;vertical-align:middle}figure{display:inline-block;margin:0 0 1rem;max-width:100%}figcaption{background-color:var(--color-surface);padding:.5rem;text-align:center}.responsive-img{height:auto;width:100%}.rounded-img{border-radius:.25rem}.circle-img{border-radius:50%}.thumbnail-img{background-color:#fff;border:1px solid #dee2e6;border-radius:.25rem;padding:.25rem}.img-left{float:left;margin-bottom:.5rem;margin-right:1rem}.img-right{float:right;margin-bottom:.5rem;margin-left:1rem}.img-center{margin-left:auto;margin-right:auto}.img-center,picture{display:block}audio{width:100%}audio,video{margin-bottom:1rem}video{height:auto;max-width:100%}.video-container{height:0;margin-bottom:1rem;overflow:hidden;padding-bottom:56.25%;position:relative}.video-container iframe,.video-container video{height:100%;left:0;position:absolute;top:0;width:100%}iframe{border:0;max-width:100%}.iframe-container{height:0;margin-bottom:1rem;overflow:hidden;padding-bottom:56.25%;position:relative;width:100%}.iframe-container iframe{height:100%;left:0;position:absolute;top:0;width:100%}.media{align-items:flex-start;display:flex;margin-bottom:1rem}.media-body{flex:1}.image-gallery{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.image-gallery figure{height:100%;margin:0}.image-gallery img{display:block;height:auto;-o-object-fit:cover;object-fit:cover;width:100%}.hover-zoom{transition:transform .3s ease}.hover-zoom:hover{transform:scale(1.05)}.hover-opacity{opacity:1;transition:opacity .3s ease}.hover-opacity:hover{opacity:.8}.tabs{padding-bottom:0;position:relative;width:100%}.tabs input[type=radio]{display:none}.tab-nav{text-align:center;width:100%}.tab-label,.tab-nav{border-bottom:1px solid var(--color-foreground)}.tab-label{color:var(--color-foreground);cursor:pointer;display:inline-block;margin-bottom:-1px;padding:.75rem 1.5rem;position:relative;transition:all .3s ease}.tab-label:hover{background-color:var(--color-surface)}.tabs input[type=radio]:checked+.tab-label{background-color:var(--color-surface);color:var(--color-foreground);font-weight:600}.tab-content{animation:fadeIn .3s ease;display:none;padding:1.5rem 0}.tabs input[type=radio]:first-of-type:checked~.content .tab-content:first-of-type,.tabs input[type=radio]:nth-of-type(10):checked~.content .tab-content:nth-of-type(10),.tabs input[type=radio]:nth-of-type(2):checked~.content .tab-content:nth-of-type(2),.tabs input[type=radio]:nth-of-type(3):checked~.content .tab-content:nth-of-type(3),.tabs input[type=radio]:nth-of-type(4):checked~.content .tab-content:nth-of-type(4),.tabs input[type=radio]:nth-of-type(5):checked~.content .tab-content:nth-of-type(5),.tabs input[type=radio]:nth-of-type(6):checked~.content .tab-content:nth-of-type(6),.tabs input[type=radio]:nth-of-type(7):checked~.content .tab-content:nth-of-type(7),.tabs input[type=radio]:nth-of-type(8):checked~.content .tab-content:nth-of-type(8),.tabs input[type=radio]:nth-of-type(9):checked~.content .tab-content:nth-of-type(9),.tabs-vertical input[type=radio]:first-of-type:checked~.content .tab-content:first-of-type,.tabs-vertical input[type=radio]:nth-of-type(2):checked~.content .tab-content:nth-of-type(2),.tabs-vertical input[type=radio]:nth-of-type(3):checked~.content .tab-content:nth-of-type(3),.tabs-vertical input[type=radio]:nth-of-type(4):checked~.content .tab-content:nth-of-type(4),.tabs-vertical input[type=radio]:nth-of-type(5):checked~.content .tab-content:nth-of-type(5){display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.tabs-vertical{display:flex;gap:2rem}.tabs-vertical .tab-label{border-bottom:none;border-left:2px solid transparent;display:block;margin-bottom:.5rem}.tabs-vertical input[type=radio]:checked+.tab-label{border-bottom-color:transparent;border-left-color:var(--color-foreground)}.tabs-vertical .content{flex:1}.AccordionRoot{border:1px solid var(--color-border)}.AccordionItem{border-bottom:1px solid var(--color-border);overflow:hidden}.AccordionItem h2{font-size:.825rem;font-weight:600;padding-bottom:.5rem}.AccordionItem p+h2,.AccordionItem p+p{padding-top:1rem}.AccordionItem:focus-within{position:relative;z-index:1}.AccordionHeader{display:flex;margin-bottom:.25rem}.AccordionTrigger{align-items:center;display:flex;flex:1;font-size:.825rem;font-weight:400;justify-content:space-between;padding:.5rem;text-transform:capitalize}.AccordionTrigger:hover{border:1px solid var(--color-foreground)}.AccordionContentText{background-color:var(--color-surface);padding:.5rem}.AccordionContent[data-state=open]{animation:slideDown .3s cubic-bezier(.87,0,.13,1)}.AccordionContent[data-state=closed]{animation:slideUp .3s cubic-bezier(.87,0,.13,1)}.AccordionChevron{transition:transform .3s cubic-bezier(.87,0,.13,1)}.AccordionTrigger[data-state=open]>.AccordionChevron{transform:rotate(180deg)}@keyframes slideDown{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes slideUp{0%{height:var(--radix-accordion-content-height)}to{height:0}}body{& button,& button[type=submit],& input[type=button]{background-color:var(--color-foreground);border-radius:2rem;color:var(--color-background);cursor:pointer;display:inline-block;font-weight:400;line-height:1.5;padding:.55rem 1.5rem;text-align:center;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}& button:hover,& button[type=submit]:hover,& input[type=button]:hover{background-color:var(--color-highlight);color:var(--color-foreground)}& .cl-formButtonPrimary,& .cl-formButtonPrimary span{border-radius:2rem!important;color:#fff!important}& [class*=cl-] *{margin-bottom:0!important}& button:disabled,& input:disabled{cursor:not-allowed;opacity:.65}}.demo-container{background-color:#f8f9fa;margin-bottom:2rem}.demo-container,.demo-item{border:1px solid #dee2e6;border-radius:.25rem;padding:1rem}.demo-item{background-color:#e9ecef;flex:1;margin:.25rem;text-align:center}.demo-item.tall{height:100px}.flex{display:flex}.inline-flex{display:inline-flex}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-row-reverse{flex-direction:row-reverse}.flex-col-reverse{flex-direction:column-reverse}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.items-stretch{align-items:stretch}.items-baseline{align-items:baseline}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-wrap-reverse{flex-wrap:wrap-reverse}.demo-grid{background-color:#f8f9fa;margin-bottom:2rem}.demo-grid,.demo-grid-item{border:1px solid #dee2e6;border-radius:.25rem;padding:1rem}.demo-grid-item{background-color:#e9ecef;text-align:center}.grid{display:grid}.inline-grid{display:inline-grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}.grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-6{grid-column:span 6/span 6}.col-span-12{grid-column:span 12/span 12}.row-span-1{grid-row:span 1/span 1}.row-span-2{grid-row:span 2/span 2}.row-span-3{grid-row:span 3/span 3}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.hidden{display:none}@media (min-width:640px){.sm\:block{display:block}.sm\:hidden{display:none}.sm\:flex{display:flex}.sm\:inline-flex{display:inline-flex}.sm\:grid{display:grid}.sm\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.sm\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}}@media (min-width:768px){.md\:block{display:block}.md\:hidden{display:none}.md\:flex{display:flex}.md\:inline-flex{display:inline-flex}.md\:grid{display:grid}.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:flex-col{flex-direction:column}.md\:flex-row-reverse{flex-direction:row-reverse}.md\:flex-col-reverse{flex-direction:column-reverse}.md\:flex-wrap{flex-wrap:wrap}.md\:flex-nowrap{flex-wrap:nowrap}.md\:flex-wrap-reverse{flex-wrap:wrap-reverse}.md\:justify-start{justify-content:flex-start}.md\:justify-center{justify-content:center}.md\:justify-end{justify-content:flex-end}.md\:justify-between{justify-content:space-between}.md\:justify-around{justify-content:space-around}.md\:justify-evenly{justify-content:space-evenly}.md\:items-start{align-items:flex-start}.md\:items-center{align-items:center}.md\:items-end{align-items:flex-end}.md\:items-stretch{align-items:stretch}.md\:items-baseline{align-items:baseline}.md\:gap-1{gap:.25rem}.md\:gap-2{gap:.5rem}.md\:gap-4{gap:1rem}.md\:gap-6{gap:1.5rem}.md\:gap-8{gap:2rem}.md\:w-full{width:100%}.md\:w-auto{width:auto}.md\:w-1\/2{width:50%}.md\:w-1\/3{width:33.333333%}.md\:w-2\/3{width:66.666667%}.md\:w-1\/4{width:25%}.md\:w-3\/4{width:75%}}@media (min-width:1024px){.lg\:block{display:block}.lg\:hidden{display:none}.lg\:flex{display:flex}.lg\:grid{display:grid}.lg\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:flex-col{flex-direction:column}.lg\:justify-start{justify-content:flex-start}.lg\:justify-center{justify-content:center}.lg\:justify-end{justify-content:flex-end}.lg\:justify-between{justify-content:space-between}.lg\:justify-around{justify-content:space-around}.lg\:gap-1{gap:.25rem}.lg\:gap-2{gap:.5rem}.lg\:gap-4{gap:1rem}.lg\:gap-6{gap:1.5rem}.lg\:gap-8{gap:2rem}}.m-1{margin:.25rem}.m-2{margin:.5rem}.m-4{margin:1rem}.m-8{margin:2rem}.m-12{margin:3rem}.mx-0{margin-left:0;margin-right:0}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-4{margin-left:1rem;margin-right:1rem}.mx-8{margin-left:2rem;margin-right:2rem}.mx-12{margin-left:3rem;margin-right:3rem}.mx-auto{margin-left:auto;margin-right:auto}.my-0{margin-bottom:0;margin-top:0}.my-1{margin-bottom:.25rem;margin-top:.25rem}.my-2{margin-bottom:.5rem;margin-top:.5rem}.my-4{margin-bottom:1rem;margin-top:1rem}.my-8{margin-bottom:2rem;margin-top:2rem}.my-12{margin-bottom:3rem;margin-top:3rem}.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-8{margin-top:2rem}.mt-12{margin-top:3rem}.mr-0{margin-right:0}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-4{margin-right:1rem}.mr-8{margin-right:2rem}.mr-12{margin-right:3rem}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-8{margin-bottom:2rem}.mb-12{margin-bottom:3rem}.ml-0{margin-left:0}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.ml-8{margin-left:2rem}.ml-12{margin-left:3rem}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-4{padding:1rem}.p-8{padding:2rem}.p-12{padding:3rem}.px-0{padding-left:0;padding-right:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-8{padding-left:2rem;padding-right:2rem}.px-12{padding-left:3rem;padding-right:3rem}.py-0{padding-bottom:0;padding-top:0}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-4{padding-bottom:1rem;padding-top:1rem}.py-8{padding-bottom:2rem;padding-top:2rem}.py-12{padding-bottom:3rem;padding-top:3rem}.pt-0{padding-top:0}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-4{padding-top:1rem}.pt-8{padding-top:2rem}.pt-12{padding-top:3rem}.pr-0{padding-right:0}.pr-1{padding-right:.25rem}.pr-2{padding-right:.5rem}.pr-4{padding-right:1rem}.pr-8{padding-right:2rem}.pr-12{padding-right:3rem}.pb-0{padding-bottom:0}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pb-4{padding-bottom:1rem}.pb-8{padding-bottom:2rem}.pb-12{padding-bottom:3rem}.pl-0{padding-left:0}.pl-1{padding-left:.25rem}.pl-2{padding-left:.5rem}.pl-4{padding-left:1rem}.pl-8{padding-left:2rem}.pl-12{padding-left:3rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.border{border:1px solid var(--color-border)}.border-0{border:0}.border-t{border-top:1px solid var(--color-border)}.border-r{border-right:1px solid var(--color-border)}.border-b{border-bottom:1px solid var(--color-border)}.border-l{border-left:1px solid var(--color-border)}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.rounded-full{border-radius:9999px}.p-0{padding:0}.m-0{margin:0}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.mt-1{margin-top:.25rem!important}.mb-1{margin-bottom:.25rem!important}.pt-1{padding-top:.25rem!important}.pb-1{padding-bottom:.25rem!important}.mt-2{margin-top:.5rem!important}.mb-2{margin-bottom:.5rem!important}.pt-2{padding-top:.5rem!important}.pb-2{padding-bottom:.5rem!important}.mt-3{margin-top:1rem!important}.mb-3{margin-bottom:1rem!important}.pt-3{padding-top:1rem!important}.pb-3{padding-bottom:1rem!important}.mt-4{margin-top:1.5rem!important}.mb-4{margin-bottom:1.5rem!important}.pt-4{padding-top:1.5rem!important}.pb-4{padding-bottom:1.5rem!important}.mt-5{margin-top:3rem!important}.mb-5{margin-bottom:3rem!important}.pt-5{padding-top:3rem!important}.pb-5{padding-bottom:3rem!important}.text-center{text-align:center!important}.text-left{text-align:left!important}.text-right{text-align:right!important}.d-none{display:none!important}.d-block{display:block!important}.d-flex{display:flex!important}.d-grid{display:grid!important}.w-full{width:100%}.max-w-7xl{width:1024px}.cursor-pointer{cursor:pointer}*,:after,:before{box-sizing:border-box}body{background-color:var(--color-background);font-family:Berkeley Mono,monospace;font-size:16px;margin:0;padding:0;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:var(--color-accent)}*{border-color:var(--color-border)}p+p{margin-top:1rem}h1{font-size:1.5rem;text-transform:uppercase}.card-bevel{position:relative}.card-bevel:after{border-bottom:3px solid #000;border-right:3px solid #000;bottom:-3px;content:"";height:calc(100% - 2px);opacity:1;position:absolute;right:-3px;width:calc(100% - 2px)}@keyframes scroll{0%{transform:translateX(0)}to{transform:translateX(-50%)}}.ticker-content{animation:scroll 60s linear infinite;will-change:transform}.ticker-item{padding:0 1rem}.tarot-card-flip{perspective:800px}.tarot-card-inner{height:100%;position:relative;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.4,0,.2,1);width:100%}.tarot-card-inner.flipped{transform:rotateY(180deg)}.tarot-card-back,.tarot-card-front{backface-visibility:hidden;inset:0;position:absolute}.tarot-card-back{transform:rotateY(180deg)}.thin-scrollbar{scrollbar-color:#000 transparent;scrollbar-width:thin}a,abbr,address,article,aside,blockquote,button,caption,cite,dd,details,div,dl,dt,em,fieldset,figcaption,figure,footer,header,input,kbd,label,legend,li,main,mark,nav,ol,option,p,q,samp,section,select,span,strong,summary,td,textarea,th,time,ul,var{font-size:.75rem}
|
package/package.json
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@lottecode/lottecss",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "out of the box design and styling for your semantic markup",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "styles.css",
|
|
7
|
+
"style": "styles.css",
|
|
8
|
+
"files": [
|
|
9
|
+
"styles.css",
|
|
10
|
+
"src/css"
|
|
11
|
+
],
|
|
12
|
+
"exports": {
|
|
13
|
+
"./styles.css": "./styles.css"
|
|
14
|
+
},
|
|
15
|
+
"repository": {
|
|
16
|
+
"type": "git",
|
|
17
|
+
"url": "https://github.com/lottecode/lottecss.git"
|
|
18
|
+
},
|
|
19
|
+
"publishConfig": {
|
|
20
|
+
"registry": "https://registry.npmjs.org",
|
|
21
|
+
"access": "public"
|
|
22
|
+
},
|
|
23
|
+
"license": "MIT",
|
|
24
|
+
"packageManager": "yarn@4.3.1",
|
|
25
|
+
"dependencies": {
|
|
26
|
+
"tailwindcss": "^4.2.2"
|
|
27
|
+
}
|
|
28
|
+
}
|
package/styles.css
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
@import "./src/css/column.css";
|
|
2
|
+
@import "./src/css/card.css";
|
|
3
|
+
@import "./src/css/colors.css";
|
|
4
|
+
@import "./src/css/fonts.css";
|
|
5
|
+
@import "./src/css/typography.css";
|
|
6
|
+
@import "./src/css/navigation.css";
|
|
7
|
+
@import "./src/css/header.css";
|
|
8
|
+
@import "./src/css/lists.css";
|
|
9
|
+
@import "./src/css/tables.css";
|
|
10
|
+
@import "./src/css/forms.css";
|
|
11
|
+
@import "./src/css/links.css";
|
|
12
|
+
@import "./src/css/media.css";
|
|
13
|
+
@import "./src/css/tabs.css";
|
|
14
|
+
@import "./src/css/accordion.css";
|
|
15
|
+
@import "./src/css/button.css";
|
|
16
|
+
@import "./src/css/utility.css";
|
|
17
|
+
@import "./src/css/globals.css";
|
|
18
|
+
@import "./src/css/editorial.css";
|
|
19
|
+
@import "./src/css/layout.css";
|