a tool for shared writing and social publishing
set card-width var with units as well
+6
-3
+3
app/globals.css
+3
app/globals.css
···
20
20
21
21
--list-marker-width: 36px;
22
22
--card-width-unitless: min(624, calc(var(--page-width-unitless) - 12));
23
+
--card-width-units: min(624px, calc(100vw - 12px));
23
24
}
24
25
@media (max-width: 640px) {
25
26
:root {
···
30
31
@media (min-width: 640px) {
31
32
:root {
32
33
--card-width-unitless: min(624, calc(var(--page-width-unitless) - 128));
34
+
--card-width-units: min(624px, calc(100vw - 128px));
33
35
}
34
36
}
35
37
···
39
41
624,
40
42
calc((var(--page-width-unitless) / 2) - 32)
41
43
);
44
+
--card-width-units: min(624px, calc((100vw / 2) - 32px));
42
45
}
43
46
}
44
47
+3
-3
components/Cards.tsx
+3
-3
components/Cards.tsx
···
29
29
>
30
30
<div
31
31
className="spacer flex justify-end items-start"
32
-
style={{ width: `calc(50vw - (1px * (var(--card-width-unitless)/2))` }}
32
+
style={{ width: `calc(50vw - ((var(--card-width-units)/2))` }}
33
33
onClick={(e) => {
34
34
e.currentTarget === e.target && blurCard();
35
35
}}
···
55
55
))}
56
56
<div
57
57
className="spacer"
58
-
style={{ width: `calc(50vw - (1px * (var(--card-width-unitless)/2))` }}
58
+
style={{ width: `calc(50vw - ((var(--card-width-units)/2))` }}
59
59
onClick={(e) => {
60
60
e.currentTarget === e.target && blurCard();
61
61
}}
···
103
103
id={elementId.card(props.entityID).container}
104
104
style={{
105
105
backgroundColor: "rgba(var(--bg-card), var(--bg-card-alpha))",
106
-
width: "calc(1px * var(--card-width-unitless))",
106
+
width: "var(--card-width-units)",
107
107
}}
108
108
className={`
109
109
card