@trebired/frontend 13.8.0 → 13.8.1
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 +4 -0
- package/README.md +1 -1
- package/dist/layout/styles/site-header.scss +6 -6
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,10 @@ All notable changes to `@trebired/frontend` will be documented here.
|
|
|
4
4
|
|
|
5
5
|
This project follows semantic versioning once published.
|
|
6
6
|
|
|
7
|
+
## 13.8.1
|
|
8
|
+
|
|
9
|
+
- The mobile menu toggle is one fixed size everywhere: a 3rem button with a 2rem icon, the size machynka.cz already used. It was a per-site token, so each site could pick a different hit target for the same control; the built-in burger grew to match. Only the toggle's color and radius remain tokens.
|
|
10
|
+
|
|
7
11
|
## 13.8.0
|
|
8
12
|
|
|
9
13
|
- Added `SiteHeader`, which owns a content site's whole header: the sticky bar, the brand, the desktop navigation, the actions and the mobile menu behind the toggle. Sites described their own header in markup and CSS, and their mobile menus drifted apart: two of them centred and shrank the open menu because the panel's `margin: 0 auto` let it collapse to its content, indenting the links and stranding the divider mid-row, and neither offered the language menu on a phone. The menu is now one full-width panel under the bar that lists the links, repeats the actions in a footer row, and closes on a link, on Escape, on a press outside the header and when the viewport grows past 768px. Links are passed as data.
|
package/README.md
CHANGED
|
@@ -108,7 +108,7 @@ A header with no links and no `menuActions` has no toggle and keeps its actions
|
|
|
108
108
|
|
|
109
109
|
The header is the hydration root, so it renders itself as the `<header>` element. Server markup wraps it with `siteHeaderRootHtml(html)`, which the client hydrates through `SITE_HEADER_ROOT_SELECTOR`; the wrapper is `display: contents`, so the header still sticks to the viewport.
|
|
110
110
|
|
|
111
|
-
Every value a site would restyle is a token under `components.shell.header`: `root` (position, background, border, backdropFilter), `height`, `maxWidth`, `paddingInline`, `brand`, `link`, `
|
|
111
|
+
Every value a site would restyle is a token under `components.shell.header`: `root` (position, background, border, backdropFilter), `height`, `maxWidth`, `paddingInline`, `brand`, `link`, `menu` and the motion pair `motionDuration` and `motionEasing`. The toggle is a fixed 3rem button with a 2rem icon in every site, so only its color and radius are tokens.
|
|
112
112
|
|
|
113
113
|
### Bottom Bar
|
|
114
114
|
|
|
@@ -123,26 +123,26 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
|
|
|
123
123
|
|
|
124
124
|
#{ns.element-class("site-header", "toggle")} {
|
|
125
125
|
display: inline-flex;
|
|
126
|
-
width:
|
|
127
|
-
height:
|
|
126
|
+
width: 3rem;
|
|
127
|
+
height: 3rem;
|
|
128
128
|
flex: 0 0 auto;
|
|
129
129
|
align-items: center;
|
|
130
130
|
justify-content: center;
|
|
131
131
|
padding: 0;
|
|
132
|
-
margin-inline-end:
|
|
132
|
+
margin-inline-end: -0.5rem;
|
|
133
133
|
border: 0;
|
|
134
134
|
border-radius: token("toggle-radius", 0.5rem);
|
|
135
135
|
color: token("toggle-color", inherit);
|
|
136
136
|
background: transparent;
|
|
137
|
-
font-size:
|
|
137
|
+
font-size: 2rem;
|
|
138
138
|
cursor: pointer;
|
|
139
139
|
}
|
|
140
140
|
|
|
141
141
|
#{ns.element-class("site-header", "burger")} {
|
|
142
142
|
position: relative;
|
|
143
143
|
display: block;
|
|
144
|
-
width: 1.
|
|
145
|
-
height:
|
|
144
|
+
width: 1.5rem;
|
|
145
|
+
height: 1.0625rem;
|
|
146
146
|
}
|
|
147
147
|
|
|
148
148
|
#{ns.element-class("site-header", "burger")} > span {
|