@stnd/styles 0.5.4 → 0.7.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/CHANGELOG.md +12 -0
- package/_standard-06-prose.scss +1 -0
- package/_standard-08-media.scss +25 -23
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/_standard-06-prose.scss
CHANGED
|
@@ -248,6 +248,7 @@
|
|
|
248
248
|
|
|
249
249
|
/* Fixed 2026-07-14 — swapped undefined tokens for their real equivalents
|
|
250
250
|
(--color-muted, --color-accent, --color-surface-high). */
|
|
251
|
+
.mycelial-link,
|
|
251
252
|
.mycelial-graft {
|
|
252
253
|
text-decoration: none;
|
|
253
254
|
border-bottom: 1px dotted var(--color-muted);
|
package/_standard-08-media.scss
CHANGED
|
@@ -142,29 +142,31 @@ figcaption {
|
|
|
142
142
|
/* They provide a simple "zoom-on-hold" experience. */
|
|
143
143
|
/* ================================================================ */
|
|
144
144
|
|
|
145
|
-
/* When JS is off, holding click on an image will trigger this zoom effect. */
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
145
|
+
/* When JS is off, holding click on an image will trigger this zoom effect on desktop with fine pointer. */
|
|
146
|
+
@media (min-width: #{$small}) and (pointer: fine) {
|
|
147
|
+
html:not(.js-image-zoom-enabled) img:active {
|
|
148
|
+
cursor: zoom-out;
|
|
149
|
+
display: block;
|
|
150
|
+
position: fixed;
|
|
151
|
+
z-index: var(--z-image-zoom);
|
|
152
|
+
max-height: calc(100vh);
|
|
153
|
+
max-width: calc(100vw);
|
|
154
|
+
object-fit: contain;
|
|
155
|
+
margin: 0 auto;
|
|
156
|
+
top: 50%;
|
|
157
|
+
left: 50%;
|
|
158
|
+
transform: translate(-50%, -50%);
|
|
159
|
+
user-select: none;
|
|
160
|
+
}
|
|
160
161
|
|
|
161
|
-
/* Creates a backdrop for the :active zoom. */
|
|
162
|
-
html:not(.js-image-zoom-enabled):has(img:active)::before {
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
162
|
+
/* Creates a backdrop for the :active zoom. */
|
|
163
|
+
html:not(.js-image-zoom-enabled):has(img:active)::before {
|
|
164
|
+
content: "";
|
|
165
|
+
position: fixed;
|
|
166
|
+
inset: 0;
|
|
167
|
+
background: var(--color-background);
|
|
168
|
+
z-index: calc(var(--z-image-zoom) - 1);
|
|
169
|
+
}
|
|
168
170
|
}
|
|
169
171
|
|
|
170
172
|
/* ================================================================ */
|
|
@@ -221,7 +223,7 @@ html.image-zoomed-active {
|
|
|
221
223
|
|
|
222
224
|
/* Uses #{$small} — same breakpoint variable as everywhere else in the
|
|
223
225
|
framework. */
|
|
224
|
-
@media (min-width: #{$small}) {
|
|
226
|
+
@media (min-width: #{$small}) and (pointer: fine) {
|
|
225
227
|
/* Global zoomable image cursor */
|
|
226
228
|
img:not([data-no-zoom]) {
|
|
227
229
|
cursor: zoom-in !important;
|