@justai/cuts 0.52.0 → 0.53.0
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/package.json +1 -1
- package/src/Posts.astro +38 -2
package/package.json
CHANGED
package/src/Posts.astro
CHANGED
|
@@ -95,8 +95,44 @@ const vars = [
|
|
|
95
95
|
/* the cut owns its own landing offset (was `#kernel, #posts { scroll-margin-top }` in each persona —
|
|
96
96
|
which orphaned once #posts moved here and carried this component's scope cid instead of the persona's). */
|
|
97
97
|
.posts { border-block-start: 1px solid var(--border); scroll-margin-top: 82px; }
|
|
98
|
-
|
|
99
|
-
|
|
98
|
+
/* A post is hoverable because it is a link to its own page, and the hover used to say so with a grey wash
|
|
99
|
+
— `--text` at 3.5% — which reads as dimming rather than as lifting. It now uses the card material, so
|
|
100
|
+
hovering a post looks like the same gesture as hovering a catalogue card.
|
|
101
|
+
|
|
102
|
+
`var(--card-bg, ...)` with the old wash as the fallback ON PURPOSE. Those tokens exist in app.zone only;
|
|
103
|
+
the other eleven personas have no catalogue and never defined them, and their column already uses
|
|
104
|
+
`--surface` as its own background, so falling back to that would have made the hover invisible. This way
|
|
105
|
+
app.zone gets the material and nobody else changes at all, which is the difference between an
|
|
106
|
+
improvement and a regression in eleven repos.
|
|
107
|
+
|
|
108
|
+
16px of horizontal padding with a matching negative margin, so the box grows outward and the text does
|
|
109
|
+
not move. 16 rather than the 18 above it because the column's own padding is 16px on a phone and 28px
|
|
110
|
+
from 768px up: at 18 the box would overflow the narrow case by 2px. Two pixels of asymmetry nobody can
|
|
111
|
+
see beats a horizontal scrollbar on a phone.
|
|
112
|
+
|
|
113
|
+
Square corners, stated rather than inherited — a radius here would make it a card, and it is not one:
|
|
114
|
+
it spans the column and sits directly against its neighbours. */
|
|
115
|
+
.post {
|
|
116
|
+
padding-block: 18px;
|
|
117
|
+
padding-inline: 16px;
|
|
118
|
+
margin-inline: -16px;
|
|
119
|
+
border-radius: 0;
|
|
120
|
+
cursor: pointer;
|
|
121
|
+
transition: background 0.15s var(--ease-out);
|
|
122
|
+
}
|
|
123
|
+
/* The card's own material, and all three ingredients of it rather than just the fill — because on dark
|
|
124
|
+
`--card-bg` and `--surface` are THE SAME VALUE (#1c1c228c), so a fill alone would have been invisible
|
|
125
|
+
against the column it sits in. The catalogue cards get away with it because their border, their blur and
|
|
126
|
+
their shadow do the separating there; measured from tokens.css, not guessed.
|
|
127
|
+
|
|
128
|
+
The hairline is an INSET shadow rather than a border: a real border would add a pixel to the box on
|
|
129
|
+
hover and nudge everything below it. */
|
|
130
|
+
.post:hover {
|
|
131
|
+
background: var(--card-bg, color-mix(in srgb, var(--text) 3.5%, transparent));
|
|
132
|
+
box-shadow: inset 0 0 0 1px var(--border);
|
|
133
|
+
backdrop-filter: var(--card-blur, none);
|
|
134
|
+
-webkit-backdrop-filter: var(--card-blur, none);
|
|
135
|
+
}
|
|
100
136
|
.post + .post { border-block-start: 1px solid var(--border); }
|
|
101
137
|
|
|
102
138
|
.trow { display: flex; gap: 12px; }
|