prewindcss 1.2.2 → 1.2.4
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 +39 -45
- package/example-site/index.html +87 -0
- package/example-site/styles.css +145 -0
- package/example-site/theme.css +105 -0
- package/package.json +1 -1
- package/prewind.css +2 -2
- package/theme.css +6 -5
package/README.md
CHANGED
|
@@ -20,60 +20,42 @@ This approach keeps your HTML readable. You won't end up with 30 classes on a si
|
|
|
20
20
|
|
|
21
21
|
Prewind works with the platform, not around it. CSS already has a cascade, variables, and specificity rules that work well — we don't need to reinvent them.
|
|
22
22
|
|
|
23
|
-
##
|
|
23
|
+
## Getting Started
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
Create a `styles.css` file that sets up CSS layers, imports your theme and Prewind, and contains your global styles:
|
|
26
26
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
```html
|
|
30
|
-
<link rel="stylesheet" href="https://unpkg.com/prewindcss@1.2.2" />
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
### 2. Define your theme variables
|
|
27
|
+
```css
|
|
28
|
+
@layer reset, styles, prewind;
|
|
34
29
|
|
|
35
|
-
|
|
30
|
+
@import url("theme.css");
|
|
31
|
+
@import url("https://unpkg.com/prewindcss@1.2.4");
|
|
36
32
|
|
|
37
|
-
|
|
33
|
+
@layer styles {
|
|
34
|
+
body {
|
|
35
|
+
font-family: var(--font-body);
|
|
36
|
+
color: var(--black);
|
|
37
|
+
background: var(--white);
|
|
38
|
+
}
|
|
38
39
|
|
|
39
|
-
|
|
40
|
-
:root {
|
|
41
|
-
--brand-1: #0284c7;
|
|
42
|
-
--font-body: "Inter", system-ui, sans-serif;
|
|
43
|
-
--space-md: 1.5rem;
|
|
44
|
-
/* ... see Theming section for full list */
|
|
40
|
+
/* Your global styles go here */
|
|
45
41
|
}
|
|
46
42
|
```
|
|
47
43
|
|
|
48
|
-
|
|
44
|
+
Then link to it in your HTML:
|
|
49
45
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
Prewind uses CSS layers to manage the cascade. Utility classes should win over your component styles, so you want to define your layers with `prewind` last:
|
|
53
|
-
|
|
54
|
-
```css
|
|
55
|
-
@layer reset, styles, prewind;
|
|
46
|
+
```html
|
|
47
|
+
<link rel="stylesheet" href="styles.css" />
|
|
56
48
|
```
|
|
57
49
|
|
|
58
|
-
|
|
50
|
+
That's it. The layer order ensures Prewind utility classes override your global styles when you need them to.
|
|
59
51
|
|
|
60
|
-
|
|
61
|
-
@layer reset, styles, prewind;
|
|
52
|
+
### The theme file
|
|
62
53
|
|
|
63
|
-
|
|
64
|
-
.nav-link {
|
|
65
|
-
color: var(--brand-1);
|
|
66
|
-
font-weight: var(--font-bold);
|
|
67
|
-
}
|
|
54
|
+
The `theme.css` import contains CSS variables for colors, spacing, fonts, and other design tokens. Run `npx prewindcss theme` to copy the default theme to your clipboard, then save it as `theme.css` and customize as needed. See the [Theming](#theming) section for details on all available variables.
|
|
68
55
|
|
|
69
|
-
|
|
70
|
-
background: var(--white);
|
|
71
|
-
border-radius: var(--rounded-lg);
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
```
|
|
56
|
+
### The included reset
|
|
75
57
|
|
|
76
|
-
|
|
58
|
+
Prewind includes a minimal CSS reset in the `reset` layer. It sets `box-sizing: border-box` on all elements, removes default margins and padding, makes images block-level and responsive, inherits fonts on form elements, and removes default button and link styling. You can see the full reset at the top of [prewind.css](https://github.com/codepilotsf/prewind/blob/main/prewind.css).
|
|
77
59
|
|
|
78
60
|
## Theming
|
|
79
61
|
|
|
@@ -164,18 +146,30 @@ Prewind intentionally excludes some things to stay lightweight and encourage bet
|
|
|
164
146
|
|
|
165
147
|
The goal is useful utilities for most of what you need, most of the time — not coverage of every edge case.
|
|
166
148
|
|
|
149
|
+
### Prewind-Only Classes
|
|
150
|
+
|
|
151
|
+
These utility classes are unique to Prewind or behave differently than their Tailwind counterparts:
|
|
152
|
+
|
|
153
|
+
- **`container`** — Uses CSS `clamp()` for fluid responsive width, unlike Tailwind's breakpoint-based container.
|
|
154
|
+
- **`max-w-text`** — Constrains width for optimal reading measure.
|
|
155
|
+
- **`max-w-form`** — Constrains width for form layouts.
|
|
156
|
+
- **`debug`** — Adds a dashed lime outline and subtle green background to visualize layout boundaries during development.
|
|
157
|
+
- **`revert`** — Resets all CSS properties to browser defaults using `all: revert`.
|
|
158
|
+
- **`bg-opacity-{n}`** — Controls background opacity with values ranging from 0 to 100 in increments of 10.
|
|
159
|
+
- **`font-body`**, **`font-heading`** — Prewind uses semantic font family names instead of Tailwind's `font-sans`, `font-serif`, `font-mono`.
|
|
160
|
+
|
|
167
161
|
---
|
|
168
162
|
|
|
169
163
|
## Reference
|
|
170
164
|
|
|
171
165
|
### General
|
|
172
166
|
|
|
173
|
-
| Class | Property
|
|
174
|
-
| ----------------- |
|
|
175
|
-
| `container` | `margin-inline: auto; padding
|
|
176
|
-
| `revert` | `all: revert`
|
|
177
|
-
| `debug` | `outline: 2px dashed lime; outline-offset: -2px; background: rgba(0, 255, 0, 0.05)`
|
|
178
|
-
| `appearance-none` | `appearance: none`
|
|
167
|
+
| Class | Property |
|
|
168
|
+
| ----------------- | --------------------------------------------------------------------------------------------------------- |
|
|
169
|
+
| `container` | `margin-inline: auto; padding: var(--container-padding); width: clamp(360px, 100%, var(--container-max))` |
|
|
170
|
+
| `revert` | `all: revert` |
|
|
171
|
+
| `debug` | `outline: 2px dashed lime; outline-offset: -2px; background: rgba(0, 255, 0, 0.05)` |
|
|
172
|
+
| `appearance-none` | `appearance: none` |
|
|
179
173
|
|
|
180
174
|
### Accessibility
|
|
181
175
|
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Prewind Example</title>
|
|
7
|
+
<link rel="stylesheet" href="styles.css" />
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div class="site-container">
|
|
11
|
+
<header>
|
|
12
|
+
<h1>Prewind Example</h1>
|
|
13
|
+
<p>A simple example site using Prewind CSS.</p>
|
|
14
|
+
</header>
|
|
15
|
+
|
|
16
|
+
<main>
|
|
17
|
+
<section class="section bg-lighter">
|
|
18
|
+
<h2 class="section-title">Cards</h2>
|
|
19
|
+
<div class="card-grid">
|
|
20
|
+
<div class="card">
|
|
21
|
+
<h3>Card One</h3>
|
|
22
|
+
<p>This is a simple card component styled with global CSS.</p>
|
|
23
|
+
</div>
|
|
24
|
+
<div class="card">
|
|
25
|
+
<h3>Card Two</h3>
|
|
26
|
+
<p>
|
|
27
|
+
Most styling lives in your stylesheet, not in class attributes.
|
|
28
|
+
</p>
|
|
29
|
+
</div>
|
|
30
|
+
<div class="card">
|
|
31
|
+
<h3>Card Three</h3>
|
|
32
|
+
<p>Use utility classes only for one-offs and tweaks.</p>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
</section>
|
|
36
|
+
|
|
37
|
+
<section class="section bg-brand-1-light">
|
|
38
|
+
<h2 class="section-title">Buttons</h2>
|
|
39
|
+
<div class="button-group">
|
|
40
|
+
<button class="button bg-brand-1 hover:bg-brand-2">Primary</button>
|
|
41
|
+
<button
|
|
42
|
+
class="button bg-white text-brand-1 border border-brand-1 hover:bg-brand-1-light"
|
|
43
|
+
>
|
|
44
|
+
Secondary
|
|
45
|
+
</button>
|
|
46
|
+
<button class="button bg-success">Success</button>
|
|
47
|
+
<button class="button bg-error">Error</button>
|
|
48
|
+
</div>
|
|
49
|
+
</section>
|
|
50
|
+
|
|
51
|
+
<section class="section border">
|
|
52
|
+
<h2 class="section-title">Typography</h2>
|
|
53
|
+
<div class="type-scale">
|
|
54
|
+
<p class="text-4xl">Text 4XL</p>
|
|
55
|
+
<p class="text-3xl">Text 3XL</p>
|
|
56
|
+
<p class="text-2xl">Text 2XL</p>
|
|
57
|
+
<p class="text-xl">Text XL</p>
|
|
58
|
+
<p class="text-lg">Text LG</p>
|
|
59
|
+
<p class="text-base">Text Base</p>
|
|
60
|
+
<p class="text-sm">Text SM</p>
|
|
61
|
+
</div>
|
|
62
|
+
</section>
|
|
63
|
+
|
|
64
|
+
<section class="section bg-darker text-white">
|
|
65
|
+
<h2 class="section-title">Colors</h2>
|
|
66
|
+
<div class="swatch-group">
|
|
67
|
+
<span class="swatch bg-brand-1">Brand 1</span>
|
|
68
|
+
<span class="swatch bg-brand-2">Brand 2</span>
|
|
69
|
+
<span class="swatch bg-brand-3">Brand 3</span>
|
|
70
|
+
<span class="swatch bg-brand-4">Brand 4</span>
|
|
71
|
+
<span class="swatch bg-success">Success</span>
|
|
72
|
+
<span class="swatch bg-warning">Warning</span>
|
|
73
|
+
<span class="swatch bg-error">Error</span>
|
|
74
|
+
<span class="swatch bg-info">Info</span>
|
|
75
|
+
</div>
|
|
76
|
+
</section>
|
|
77
|
+
</main>
|
|
78
|
+
|
|
79
|
+
<footer>
|
|
80
|
+
<p>
|
|
81
|
+
Built with
|
|
82
|
+
<a href="https://github.com/codepilotsf/prewind">Prewind CSS</a>
|
|
83
|
+
</p>
|
|
84
|
+
</footer>
|
|
85
|
+
</div>
|
|
86
|
+
</body>
|
|
87
|
+
</html>
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
@layer reset, styles, prewind;
|
|
2
|
+
|
|
3
|
+
@import url("theme.css");
|
|
4
|
+
@import url("https://unpkg.com/prewindcss");
|
|
5
|
+
|
|
6
|
+
@layer styles {
|
|
7
|
+
body {
|
|
8
|
+
font-family: var(--font-body);
|
|
9
|
+
color: var(--black);
|
|
10
|
+
background: var(--white);
|
|
11
|
+
line-height: 1.5;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
h1,
|
|
15
|
+
h2,
|
|
16
|
+
h3 {
|
|
17
|
+
font-family: var(--font-heading);
|
|
18
|
+
font-weight: var(--font-bold);
|
|
19
|
+
line-height: 1.2;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
a {
|
|
23
|
+
color: var(--link);
|
|
24
|
+
text-decoration: underline;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
a:hover {
|
|
28
|
+
color: var(--brand-2);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/* Layout */
|
|
32
|
+
.site-container {
|
|
33
|
+
max-width: 1200px;
|
|
34
|
+
margin-inline: auto;
|
|
35
|
+
padding-inline: var(--space-lg);
|
|
36
|
+
padding-block: var(--space-xl);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
header {
|
|
40
|
+
margin-bottom: var(--space-xl);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
header h1 {
|
|
44
|
+
font-size: var(--text-3xl);
|
|
45
|
+
margin-bottom: var(--space-sm);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
header p {
|
|
49
|
+
font-size: var(--text-lg);
|
|
50
|
+
color: var(--midtone);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
main {
|
|
54
|
+
display: flex;
|
|
55
|
+
flex-direction: column;
|
|
56
|
+
gap: var(--space-lg);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
footer {
|
|
60
|
+
margin-top: var(--space-xl);
|
|
61
|
+
padding-top: var(--space-md);
|
|
62
|
+
border-top: var(--border) solid var(--light);
|
|
63
|
+
text-align: center;
|
|
64
|
+
color: var(--midtone);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* Sections */
|
|
68
|
+
.section {
|
|
69
|
+
padding: var(--space-md);
|
|
70
|
+
border-radius: var(--rounded-lg);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.section-title {
|
|
74
|
+
font-size: var(--text-xl);
|
|
75
|
+
margin-bottom: var(--space-sm);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* Cards */
|
|
79
|
+
.card-grid {
|
|
80
|
+
display: flex;
|
|
81
|
+
flex-direction: column;
|
|
82
|
+
gap: var(--space-md);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
@media (min-width: 768px) {
|
|
86
|
+
.card-grid {
|
|
87
|
+
flex-direction: row;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.card {
|
|
92
|
+
flex: 1;
|
|
93
|
+
padding: var(--space-md);
|
|
94
|
+
background: var(--white);
|
|
95
|
+
border-radius: var(--rounded);
|
|
96
|
+
box-shadow: var(--shadow);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.card h3 {
|
|
100
|
+
font-size: var(--text-lg);
|
|
101
|
+
margin-bottom: var(--space-xs);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.card p {
|
|
105
|
+
color: var(--midtone);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/* Buttons */
|
|
109
|
+
.button {
|
|
110
|
+
display: inline-block;
|
|
111
|
+
padding: var(--space-sm) var(--space-md);
|
|
112
|
+
border-radius: var(--rounded);
|
|
113
|
+
font-weight: var(--font-bold);
|
|
114
|
+
text-decoration: none;
|
|
115
|
+
cursor: pointer;
|
|
116
|
+
border: none;
|
|
117
|
+
color: var(--white);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.button-group {
|
|
121
|
+
display: flex;
|
|
122
|
+
flex-wrap: wrap;
|
|
123
|
+
gap: var(--space-sm);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/* Typography demo */
|
|
127
|
+
.type-scale {
|
|
128
|
+
display: flex;
|
|
129
|
+
flex-direction: column;
|
|
130
|
+
gap: var(--space-xs);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
/* Color swatches */
|
|
134
|
+
.swatch-group {
|
|
135
|
+
display: flex;
|
|
136
|
+
flex-wrap: wrap;
|
|
137
|
+
gap: var(--space-sm);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.swatch {
|
|
141
|
+
padding: var(--space-xs) var(--space-sm);
|
|
142
|
+
border-radius: var(--rounded);
|
|
143
|
+
color: var(--white);
|
|
144
|
+
}
|
|
145
|
+
}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
/*
|
|
2
|
+
----------------------------------------
|
|
3
|
+
Prewind Theme
|
|
4
|
+
https://github.com/codepilotsf/prewind
|
|
5
|
+
----------------------------------------
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&display=swap");
|
|
9
|
+
|
|
10
|
+
:root {
|
|
11
|
+
/* Fonts */
|
|
12
|
+
--font-body: "Inter", system-ui, sans-serif;
|
|
13
|
+
--font-heading: "Inter", system-ui, sans-serif;
|
|
14
|
+
--font-normal: 400;
|
|
15
|
+
--font-bold: 700;
|
|
16
|
+
|
|
17
|
+
/* Brand Colors */
|
|
18
|
+
--brand-1: #0284c7; /* Sky blue */
|
|
19
|
+
--brand-1-light: #e0f2fe;
|
|
20
|
+
--brand-2: #0c4a6e; /* Blue */
|
|
21
|
+
--brand-2-light: #bae6fd;
|
|
22
|
+
--brand-3: #0f766e; /* Teal */
|
|
23
|
+
--brand-3-light: #99f6e4;
|
|
24
|
+
--brand-4: #a21caf; /* Fuchsia */
|
|
25
|
+
--brand-4-light: #f5d0fe;
|
|
26
|
+
|
|
27
|
+
/* Neutral Colors */
|
|
28
|
+
--black: #09090b;
|
|
29
|
+
--darker: #27272a;
|
|
30
|
+
--dark: #3f3f46;
|
|
31
|
+
--midtone: #71717a;
|
|
32
|
+
--light: #d4d4d8;
|
|
33
|
+
--lighter: #f4f4f5;
|
|
34
|
+
--white: #ffffff;
|
|
35
|
+
|
|
36
|
+
/* Semantic Colors */
|
|
37
|
+
--success: #16a34a; /* Green */
|
|
38
|
+
--success-light: #dcfce7;
|
|
39
|
+
--info: #2563eb; /* Blue */
|
|
40
|
+
--info-light: #dbeafe;
|
|
41
|
+
--warning: #ea580c; /* Orange */
|
|
42
|
+
--warning-light: #ffedd5;
|
|
43
|
+
--error: #b91c1c; /* Red */
|
|
44
|
+
--error-light: #fee2e2;
|
|
45
|
+
--link: #2563eb; /* Blue */
|
|
46
|
+
--highlight: #fef08a; /* Yellow */
|
|
47
|
+
|
|
48
|
+
/* Border & Outline Widths */
|
|
49
|
+
--border: 1px;
|
|
50
|
+
--border-sm: 0.5px;
|
|
51
|
+
--border-lg: 2px;
|
|
52
|
+
|
|
53
|
+
/* Border Radius */
|
|
54
|
+
--rounded: 0.25rem;
|
|
55
|
+
--rounded-sm: 0.125rem;
|
|
56
|
+
--rounded-lg: 0.5rem;
|
|
57
|
+
|
|
58
|
+
/* Shadow */
|
|
59
|
+
--shadow: 0 4px 4px 1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.25);
|
|
60
|
+
--shadow-sm: 0 2px 3px -0.5px rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
61
|
+
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
62
|
+
|
|
63
|
+
/* Container */
|
|
64
|
+
--container-max: 1200px;
|
|
65
|
+
--container-padding: 0 var(--space-lg);
|
|
66
|
+
|
|
67
|
+
/* Width Constraints */
|
|
68
|
+
--max-w-text: 80ch;
|
|
69
|
+
--max-w-form: 40rem;
|
|
70
|
+
|
|
71
|
+
/* Fluid Text Scale – Generated with: `npx prewindcss text`
|
|
72
|
+
Min viewport: 320px
|
|
73
|
+
Max viewport: 1600px
|
|
74
|
+
Min base size: 14px
|
|
75
|
+
Max base size: 18px
|
|
76
|
+
Min ratio: 1.25 - Major Third
|
|
77
|
+
Max ratio: 1.414 - Augmented Fourth
|
|
78
|
+
*/
|
|
79
|
+
--text-sm: clamp(0.7rem, 0.6761rem + 0.1195vw, 0.7956rem);
|
|
80
|
+
--text-base: clamp(0.875rem, 0.8125rem + 0.3125vw, 1.125rem);
|
|
81
|
+
--text-lg: clamp(1.094rem, 0.9695rem + 0.6212vw, 1.591rem);
|
|
82
|
+
--text-xl: clamp(1.367rem, 1.147rem + 1.103vw, 2.249rem);
|
|
83
|
+
--text-2xl: clamp(1.709rem, 1.341rem + 1.839vw, 3.181rem);
|
|
84
|
+
--text-3xl: clamp(2.136rem, 1.546rem + 2.951vw, 4.497rem);
|
|
85
|
+
--text-4xl: clamp(2.67rem, 1.748rem + 4.611vw, 6.359rem);
|
|
86
|
+
|
|
87
|
+
/* Fluid Space Scale – Generated with: `npx prewindcss space`
|
|
88
|
+
Min viewport: 320px
|
|
89
|
+
Max viewport: 1600px
|
|
90
|
+
Min sm size: 12px
|
|
91
|
+
Max sm size: 18px
|
|
92
|
+
Min ratio: 1.333 - Perfect Fourth
|
|
93
|
+
Max ratio: 1.667 - Major Sixth
|
|
94
|
+
*/
|
|
95
|
+
--space-3xs: clamp(0.3166rem, 0.3351rem + -0.09224vw, 0.2429rem);
|
|
96
|
+
--space-2xs: clamp(0.4221rem, 0.4264rem + -0.02156vw, 0.4048rem);
|
|
97
|
+
--space-xs: clamp(0.5626rem, 0.5346rem + 0.1403vw, 0.6749rem);
|
|
98
|
+
--space-sm: clamp(0.75rem, 0.6563rem + 0.4688vw, 1.125rem);
|
|
99
|
+
--space-md: clamp(0.9997rem, 0.7808rem + 1.095vw, 1.875rem);
|
|
100
|
+
--space-lg: clamp(1.333rem, 0.8843rem + 2.242vw, 3.126rem);
|
|
101
|
+
--space-xl: clamp(1.776rem, 0.9177rem + 4.294vw, 5.211rem);
|
|
102
|
+
--space-2xl: clamp(2.368rem, 0.7881rem + 7.899vw, 8.688rem);
|
|
103
|
+
--space-3xl: clamp(3.157rem, 0.3252rem + 14.16vw, 14.48rem);
|
|
104
|
+
--space-4xl: clamp(4.208rem, 0.7758rem - 24.92vw, 24.14rem);
|
|
105
|
+
}
|
package/package.json
CHANGED
package/prewind.css
CHANGED
package/theme.css
CHANGED
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
----------------------------------------
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
/* Fonts */
|
|
9
8
|
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&display=swap");
|
|
10
9
|
|
|
11
10
|
:root {
|
|
@@ -58,10 +57,12 @@
|
|
|
58
57
|
|
|
59
58
|
/* Shadow */
|
|
60
59
|
--shadow: 0 4px 4px 1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.25);
|
|
61
|
-
--shadow-sm:
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
60
|
+
--shadow-sm: 0 2px 3px -0.5px rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
61
|
+
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
62
|
+
|
|
63
|
+
/* Container */
|
|
64
|
+
--container-max: 1200px;
|
|
65
|
+
--container-padding: 0 var(--space-lg);
|
|
65
66
|
|
|
66
67
|
/* Width Constraints */
|
|
67
68
|
--max-w-text: 80ch;
|