Skip to content

Commit c1a244d

Browse files
RobbertRobbert
committed
WIP
1 parent a5113b4 commit c1a244d

4 files changed

Lines changed: 393 additions & 6 deletions

File tree

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Ceci n'est pas un theme builder</title>
7+
<title>Frameless Theme Builder</title>
88

99
<!-- Google Fonts-->
1010
<link rel="preconnect" href="https://fonts.googleapis.com" />

‎src/fluid.css‎

Lines changed: 317 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,317 @@
1+
/*
2+
* Prefer `vi` over `vw` when available.
3+
* Like `inline-size` and other logical properties, `vi` is based on the `inline` axis,
4+
* instead of making assumptions about the text direction.
5+
* The `vi` unit is unfortunately not yet implemented by all evergreen browsers.
6+
*/
7+
8+
@property --100vw {
9+
syntax: "<length>";
10+
initial-value: 0px;
11+
inherits: true;
12+
}
13+
14+
@property --100vi {
15+
syntax: "<length>";
16+
initial-value: 0px;
17+
inherits: true;
18+
}
19+
20+
.basis-theme--fluid {
21+
--basis-typography-font-size-min-sm: calc(0.75 * 0.875rem);
22+
--basis-typography-font-size-min-md: calc(0.75 * 1rem);
23+
--basis-typography-font-size-min-lg: calc(0.75 * 1.25rem);
24+
--basis-typography-font-size-min-xl: calc(0.75 * 1.5rem);
25+
--basis-typography-font-size-min-2xl: calc(0.75 * 2rem);
26+
--basis-typography-font-size-min-3xl: calc(0.75 * 2.5rem);
27+
--basis-typography-font-size-min-4xl: calc(0.75 * 3rem);
28+
--basis-typography-font-size-max-sm: calc(1.5 * 0.875rem);
29+
--basis-typography-font-size-max-md: calc(1.5 * 1rem);
30+
--basis-typography-font-size-max-lg: calc(1.5 * 1.25rem);
31+
--basis-typography-font-size-max-xl: calc(1.5 * 1.5rem);
32+
--basis-typography-font-size-max-2xl: calc(1.5 * 2rem);
33+
--basis-typography-font-size-max-3xl: calc(1.5 * 2.5rem);
34+
--basis-typography-font-size-max-4xl: calc(1.5 * 3rem);
35+
36+
--100vw: 100vw;
37+
--100vi: 100vi;
38+
39+
--viewport-sm-inline-size: 320;
40+
--viewport-lg-inline-size: 1600;
41+
--viewport-size: tan(atan2(var(--100vi, var(--100vw)), 1px));
42+
--font-size-scale: calc(
43+
(
44+
clamp(var(--viewport-sm-inline-size), var(--viewport-size), var(--viewport-lg-inline-size)) -
45+
var(--viewport-sm-inline-size)
46+
) /
47+
(var(--viewport-lg-inline-size) - var(--viewport-sm-inline-size))
48+
);
49+
50+
/*
51+
--basis-typography-min-4xl-font-size: 2.4316rem;
52+
--basis-typography-max-4xl-font-size: 4.5776rem;
53+
*/
54+
55+
--basis-typography-font-size-sm: calc(
56+
var(--basis-typography-font-size-min-sm) +
57+
(var(--basis-typography-font-size-max-sm) - var(--basis-typography-font-size-min-sm)) * var(--font-size-scale)
58+
);
59+
60+
--basis-typography-font-size-md: calc(
61+
var(--basis-typography-font-size-min-md) +
62+
(var(--basis-typography-font-size-max-md) - var(--basis-typography-font-size-min-md)) * var(--font-size-scale)
63+
);
64+
65+
--basis-typography-font-size-lg: calc(
66+
var(--basis-typography-font-size-min-lg) +
67+
(var(--basis-typography-font-size-max-lg) - var(--basis-typography-font-size-min-lg)) * var(--font-size-scale)
68+
);
69+
70+
--basis-typography-font-size-xl: calc(
71+
var(--basis-typography-font-size-min-xl) +
72+
(var(--basis-typography-font-size-max-xl) - var(--basis-typography-font-size-min-xl)) * var(--font-size-scale)
73+
);
74+
75+
--basis-typography-font-size-2xl: calc(
76+
var(--basis-typography-font-size-min-2xl) +
77+
(var(--basis-typography-font-size-max-2xl) - var(--basis-typography-font-size-min-2xl)) * var(--font-size-scale)
78+
);
79+
80+
--basis-typography-font-size-3xl: calc(
81+
var(--basis-typography-font-size-min-3xl) +
82+
(var(--basis-typography-font-size-max-3xl) - var(--basis-typography-font-size-min-3xl)) * var(--font-size-scale)
83+
);
84+
85+
--basis-typography-font-size-4xl: calc(
86+
var(--basis-typography-font-size-min-4xl) +
87+
(var(--basis-typography-font-size-max-4xl) - var(--basis-typography-font-size-min-4xl)) * var(--font-size-scale)
88+
);
89+
90+
/* space.inline */
91+
92+
--basis-space-inline-2xs: calc(
93+
var(--basis-space-inline-min-2xs) + (var(--basis-space-inline-max-2xs) - var(--basis-space-inline-min-2xs)) *
94+
var(--font-size-scale)
95+
);
96+
97+
--basis-space-inline-xs: calc(
98+
var(--basis-space-inline-min-xs) + (var(--basis-space-inline-max-xs) - var(--basis-space-inline-min-xs)) *
99+
var(--font-size-scale)
100+
);
101+
102+
--basis-space-inline-sm: calc(
103+
var(--basis-space-inline-min-sm) + (var(--basis-space-inline-max-sm) - var(--basis-space-inline-min-sm)) *
104+
var(--font-size-scale)
105+
);
106+
107+
--basis-space-inline-md: calc(
108+
var(--basis-space-inline-min-md) + (var(--basis-space-inline-max-md) - var(--basis-space-inline-min-md)) *
109+
var(--font-size-scale)
110+
);
111+
112+
--basis-space-inline-lg: calc(
113+
var(--basis-space-inline-min-lg) + (var(--basis-space-inline-max-lg) - var(--basis-space-inline-min-lg)) *
114+
var(--font-size-scale)
115+
);
116+
117+
--basis-space-inline-xl: calc(
118+
var(--basis-space-inline-min-xl) + (var(--basis-space-inline-max-xl) - var(--basis-space-inline-min-xl)) *
119+
var(--font-size-scale)
120+
);
121+
122+
--basis-space-inline-2xl: calc(
123+
var(--basis-space-inline-min-2xl) + (var(--basis-space-inline-max-2xl) - var(--basis-space-inline-min-2xl)) *
124+
var(--font-size-scale)
125+
);
126+
127+
--basis-space-inline-3xl: calc(
128+
var(--basis-space-inline-min-3xl) + (var(--basis-space-inline-max-3xl) - var(--basis-space-inline-min-3xl)) *
129+
var(--font-size-scale)
130+
);
131+
132+
--basis-space-inline-4xl: calc(
133+
var(--basis-space-inline-min-4xl) + (var(--basis-space-inline-max-4xl) - var(--basis-space-inline-min-4xl)) *
134+
var(--font-size-scale)
135+
);
136+
137+
--basis-space-inline-5xl: calc(
138+
var(--basis-space-inline-min-5xl) + (var(--basis-space-inline-max-5xl) - var(--basis-space-inline-min-5xl)) *
139+
var(--font-size-scale)
140+
);
141+
142+
--basis-space-inline-6xl: calc(
143+
var(--basis-space-inline-min-6xl) + (var(--basis-space-inline-max-6xl) - var(--basis-space-inline-min-6xl)) *
144+
var(--font-size-scale)
145+
);
146+
147+
/* space.block */
148+
149+
--basis-space-block-2xs: calc(
150+
var(--basis-space-block-min-2xs) + (var(--basis-space-block-max-2xs) - var(--basis-space-block-min-2xs)) *
151+
var(--font-size-scale)
152+
);
153+
154+
--basis-space-block-xs: calc(
155+
var(--basis-space-block-min-xs) + (var(--basis-space-block-max-xs) - var(--basis-space-block-min-xs)) *
156+
var(--font-size-scale)
157+
);
158+
159+
--basis-space-block-sm: calc(
160+
var(--basis-space-block-min-sm) + (var(--basis-space-block-max-sm) - var(--basis-space-block-min-sm)) *
161+
var(--font-size-scale)
162+
);
163+
164+
--basis-space-block-md: calc(
165+
var(--basis-space-block-min-md) + (var(--basis-space-block-max-md) - var(--basis-space-block-min-md)) *
166+
var(--font-size-scale)
167+
);
168+
169+
--basis-space-block-lg: calc(
170+
var(--basis-space-block-min-lg) + (var(--basis-space-block-max-lg) - var(--basis-space-block-min-lg)) *
171+
var(--font-size-scale)
172+
);
173+
174+
--basis-space-block-xl: calc(
175+
var(--basis-space-block-min-xl) + (var(--basis-space-block-max-xl) - var(--basis-space-block-min-xl)) *
176+
var(--font-size-scale)
177+
);
178+
179+
--basis-space-block-2xl: calc(
180+
var(--basis-space-block-min-2xl) + (var(--basis-space-block-max-2xl) - var(--basis-space-block-min-2xl)) *
181+
var(--font-size-scale)
182+
);
183+
184+
--basis-space-block-3xl: calc(
185+
var(--basis-space-block-min-3xl) + (var(--basis-space-block-max-3xl) - var(--basis-space-block-min-3xl)) *
186+
var(--font-size-scale)
187+
);
188+
189+
--basis-space-block-4xl: calc(
190+
var(--basis-space-block-min-4xl) + (var(--basis-space-block-max-4xl) - var(--basis-space-block-min-4xl)) *
191+
var(--font-size-scale)
192+
);
193+
194+
--basis-space-block-5xl: calc(
195+
var(--basis-space-block-min-5xl) + (var(--basis-space-block-max-5xl) - var(--basis-space-block-min-5xl)) *
196+
var(--font-size-scale)
197+
);
198+
199+
--basis-space-block-6xl: calc(
200+
var(--basis-space-block-min-6xl) + (var(--basis-space-block-max-6xl) - var(--basis-space-block-min-6xl)) *
201+
var(--font-size-scale)
202+
);
203+
204+
/* space.column */
205+
206+
--basis-space-column-2xs: calc(
207+
var(--basis-space-column-min-2xs) + (var(--basis-space-column-max-2xs) - var(--basis-space-column-min-2xs)) *
208+
var(--font-size-scale)
209+
);
210+
211+
--basis-space-column-xs: calc(
212+
var(--basis-space-column-min-xs) + (var(--basis-space-column-max-xs) - var(--basis-space-column-min-xs)) *
213+
var(--font-size-scale)
214+
);
215+
216+
--basis-space-column-sm: calc(
217+
var(--basis-space-column-min-sm) + (var(--basis-space-column-max-sm) - var(--basis-space-column-min-sm)) *
218+
var(--font-size-scale)
219+
);
220+
221+
--basis-space-column-md: calc(
222+
var(--basis-space-column-min-md) + (var(--basis-space-column-max-md) - var(--basis-space-column-min-md)) *
223+
var(--font-size-scale)
224+
);
225+
226+
--basis-space-column-lg: calc(
227+
var(--basis-space-column-min-lg) + (var(--basis-space-column-max-lg) - var(--basis-space-column-min-lg)) *
228+
var(--font-size-scale)
229+
);
230+
231+
--basis-space-column-xl: calc(
232+
var(--basis-space-column-min-xl) + (var(--basis-space-column-max-xl) - var(--basis-space-column-min-xl)) *
233+
var(--font-size-scale)
234+
);
235+
236+
--basis-space-column-2xl: calc(
237+
var(--basis-space-column-min-2xl) + (var(--basis-space-column-max-2xl) - var(--basis-space-column-min-2xl)) *
238+
var(--font-size-scale)
239+
);
240+
241+
--basis-space-column-3xl: calc(
242+
var(--basis-space-column-min-3xl) + (var(--basis-space-column-max-3xl) - var(--basis-space-column-min-3xl)) *
243+
var(--font-size-scale)
244+
);
245+
246+
--basis-space-column-4xl: calc(
247+
var(--basis-space-column-min-4xl) + (var(--basis-space-column-max-4xl) - var(--basis-space-column-min-4xl)) *
248+
var(--font-size-scale)
249+
);
250+
251+
--basis-space-column-5xl: calc(
252+
var(--basis-space-column-min-5xl) + (var(--basis-space-column-max-5xl) - var(--basis-space-column-min-5xl)) *
253+
var(--font-size-scale)
254+
);
255+
256+
--basis-space-column-6xl: calc(
257+
var(--basis-space-column-min-6xl) + (var(--basis-space-column-max-6xl) - var(--basis-space-column-min-6xl)) *
258+
var(--font-size-scale)
259+
);
260+
261+
/* space.row */
262+
263+
--basis-space-row-2xs: calc(
264+
var(--basis-space-row-min-2xs) + (var(--basis-space-row-max-2xs) - var(--basis-space-row-min-2xs)) *
265+
var(--font-size-scale)
266+
);
267+
268+
--basis-space-row-xs: calc(
269+
var(--basis-space-row-min-xs) + (var(--basis-space-row-max-xs) - var(--basis-space-row-min-xs)) *
270+
var(--font-size-scale)
271+
);
272+
273+
--basis-space-row-sm: calc(
274+
var(--basis-space-row-min-sm) + (var(--basis-space-row-max-sm) - var(--basis-space-row-min-sm)) *
275+
var(--font-size-scale)
276+
);
277+
278+
--basis-space-row-md: calc(
279+
var(--basis-space-row-min-md) + (var(--basis-space-row-max-md) - var(--basis-space-row-min-md)) *
280+
var(--font-size-scale)
281+
);
282+
283+
--basis-space-row-lg: calc(
284+
var(--basis-space-row-min-lg) + (var(--basis-space-row-max-lg) - var(--basis-space-row-min-lg)) *
285+
var(--font-size-scale)
286+
);
287+
288+
--basis-space-row-xl: calc(
289+
var(--basis-space-row-min-xl) + (var(--basis-space-row-max-xl) - var(--basis-space-row-min-xl)) *
290+
var(--font-size-scale)
291+
);
292+
293+
--basis-space-row-2xl: calc(
294+
var(--basis-space-row-min-2xl) + (var(--basis-space-row-max-2xl) - var(--basis-space-row-min-2xl)) *
295+
var(--font-size-scale)
296+
);
297+
298+
--basis-space-row-3xl: calc(
299+
var(--basis-space-row-min-3xl) + (var(--basis-space-row-max-3xl) - var(--basis-space-row-min-3xl)) *
300+
var(--font-size-scale)
301+
);
302+
303+
--basis-space-row-4xl: calc(
304+
var(--basis-space-row-min-4xl) + (var(--basis-space-row-max-4xl) - var(--basis-space-row-min-4xl)) *
305+
var(--font-size-scale)
306+
);
307+
308+
--basis-space-row-5xl: calc(
309+
var(--basis-space-row-min-5xl) + (var(--basis-space-row-max-5xl) - var(--basis-space-row-min-5xl)) *
310+
var(--font-size-scale)
311+
);
312+
313+
--basis-space-row-6xl: calc(
314+
var(--basis-space-row-min-6xl) + (var(--basis-space-row-max-6xl) - var(--basis-space-row-min-6xl)) *
315+
var(--font-size-scale)
316+
);
317+
}

0 commit comments

Comments
 (0)