@trebired/frontend 19.2.1 → 19.4.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
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 19.4.0
|
|
4
|
+
|
|
5
|
+
- A hairline grid draws lines only between its cells. Each cell carried a full ring and the grid an outer border, so the outside edges were drawn twice and the grid was boxed in. The lines are the grid's gap showing through now, which cannot reach an outer edge, and they default to 10% of the current colour rather than 18%.
|
|
6
|
+
- A link in the menu reads from the header link's own tokens. It had its own colour, weight and size, so a site styling its navigation got two different looks and the active mark did not match between the header and the menu. `menu-link-*` still overrides where a site wants them to differ.
|
|
7
|
+
- `tbf-cols-hold` keeps a fixed column grid from collapsing on a narrow screen. A grid of small tiles, a symbol and a word, narrows well and has no reason to stack; without it `tbf-cols-2` becomes one column below 560px and a compact block turns into a list.
|
|
8
|
+
|
|
3
9
|
## 19.2.1
|
|
4
10
|
|
|
5
11
|
- The marked section is the one nearest the reading line from above, rather than the last matching entry in the menu. A menu does not have to list sections in the order the page lays them out, and machynka's does not: walking the menu handed the mark to whichever section happened to come last, so standing in one section marked another.
|
|
@@ -254,9 +254,11 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
|
|
|
254
254
|
display: block;
|
|
255
255
|
padding: token("menu-link-padding", 0.5rem 0);
|
|
256
256
|
border-radius: token("menu-link-radius", 0);
|
|
257
|
-
color: token("menu-link-color", var(#{ns.css-var("text")}, #
|
|
257
|
+
color: token("menu-link-color", token("link-color", var(#{ns.css-var("text-muted")}, #555)));
|
|
258
258
|
font-size: 1rem;
|
|
259
|
-
font-weight: token("menu-link-font-weight",
|
|
259
|
+
font-weight: token("menu-link-font-weight", token("link-font-weight", 500));
|
|
260
|
+
letter-spacing: token("menu-link-letter-spacing", token("link-letter-spacing", normal));
|
|
261
|
+
text-transform: token("menu-link-text-transform", token("link-text-transform", none));
|
|
260
262
|
}
|
|
261
263
|
|
|
262
264
|
#{ns.element-class("site-header", "menu-footer")} {
|
|
@@ -77,4 +77,14 @@
|
|
|
77
77
|
grid-template-columns: 1fr;
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
|
+
|
|
81
|
+
@media (max-width: 900px) {
|
|
82
|
+
&#{ns.class("cols-hold")}#{ns.class("cols-2")} {
|
|
83
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
&#{ns.class("cols-hold")}#{ns.class("cols-3")} {
|
|
87
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
88
|
+
}
|
|
89
|
+
}
|
|
80
90
|
}
|
|
@@ -6,17 +6,17 @@
|
|
|
6
6
|
auto-fit,
|
|
7
7
|
minmax(min(var(#{ns.css-var("surf-hairline-root-min")}, 16rem), 100%), 1fr)
|
|
8
8
|
);
|
|
9
|
-
gap: var(#{ns.css-var("surf-hairline-root-gap")},
|
|
9
|
+
gap: var(#{ns.css-var("surf-hairline-root-gap")}, var(--border-width, 1px));
|
|
10
10
|
overflow: hidden;
|
|
11
|
-
border: var(
|
|
12
|
-
#{ns.css-var("surf-hairline-root-border")},
|
|
13
|
-
var(--border-width, 1px) solid color-mix(in srgb, currentColor 18%, transparent)
|
|
14
|
-
);
|
|
11
|
+
border: var(#{ns.css-var("surf-hairline-root-border")}, 0);
|
|
15
12
|
border-radius: var(
|
|
16
13
|
#{ns.css-var("surf-hairline-root-radius")},
|
|
17
14
|
var(--radius-lg, var(#{ns.css-var("radius")}, 0))
|
|
18
15
|
);
|
|
19
|
-
background: var(
|
|
16
|
+
background: var(
|
|
17
|
+
#{ns.css-var("surf-hairline-root-bg")},
|
|
18
|
+
color-mix(in srgb, currentColor 10%, transparent)
|
|
19
|
+
);
|
|
20
20
|
list-style: none;
|
|
21
21
|
}
|
|
22
22
|
|
|
@@ -32,10 +32,6 @@
|
|
|
32
32
|
padding: var(#{ns.css-var("surf-hairline-cell-padding")}, var(#{ns.css-var("gap-md")}, 24px));
|
|
33
33
|
color: var(#{ns.css-var("surf-hairline-cell-color")}, var(#{ns.css-var("text")}, #000));
|
|
34
34
|
background: var(#{ns.css-var("surf-hairline-cell-bg")}, var(#{ns.css-var("page")}, #fff));
|
|
35
|
-
box-shadow: 0 0 0 var(--border-width, 1px) var(
|
|
36
|
-
#{ns.css-var("surf-hairline-cell-line")},
|
|
37
|
-
color-mix(in srgb, currentColor 18%, transparent)
|
|
38
|
-
);
|
|
39
35
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
40
36
|
}
|
|
41
37
|
|