@trebired/frontend 20.13.0 → 21.0.1

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 21.0.1
+
+- The brand button really has no padding now. It is a button, and the padding every button gets is written later in the stylesheet, so at equal weight it won and the logo still started 19px further in than the edge of the bar. The brand's own box now outranks it, as its colour already does.
+
+## 21.0.0
+
+Breaking for configuration: `shell.header.px` and `shell.header.brand.button.padding` are gone.
+
+- The brand sits the same distance from the edge of the screen on every site: 1.5rem on a phone, 1rem once there is room for the full bar. The distance was a per-site setting and the brand button added its own padding on top, so the same logo started at 16px on one site and 38px on another. The header's structure is tbf's to decide, like its height and the size of its menu button.
+- A site that set either of those values is no longer honoured; remove them. Nothing else about the brand changes.
+
 ## 20.13.0
 
 - The brand button keeps its own colour instead of the one every button gets. Both rules carried the same weight and the general one is written later, so it won, and the brand took the colour flowing down from the header: on a light page the little arrow beside the logo came out almost white and read as having disappeared. Its colour now outranks the general rule, as its background already did.

package/dist/layout/styles/site-header.scss

@@ -29,7 +29,7 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
   max-width: token("max-width", 72rem);
   box-sizing: border-box;
   margin-inline: auto;
-  padding-inline: token("px", 1rem);
+  padding-inline: 1.5rem;
 }
 
 #{ns.element-class("site-header", "bar")} {
@@ -255,6 +255,11 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
 }
 
 @media (min-width: 768px) {
+  #{ns.element-class("site-header", "bar")},
+  #{ns.element-class("site-header", "menu-content")} {
+    padding-inline: 1rem;
+  }
+
   #{ns.element-class("site-header", "nav")},
   #{ns.element-class("site-header", "actions")} {
     display: flex;
@@ -309,27 +314,27 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
   box-shadow: none;
 }
 
-#{ns.class("site-header-brand-button")} {
+#{ns.class("site-header-brand-button")},
+
+#{ns.class("button")}#{ns.class("site-header-brand-button")} {
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
   gap: var(#{ns.css-var("shell-header-brand-button-gap")}, 8px);
   min-width: 0;
+  min-height: 0;
+  height: auto;
   border: 0;
   border-radius: var(#{ns.css-var("shell-header-brand-button-radius")}, var(#{ns.css-var("radius-sm")}, 0));
-  padding: var(#{ns.css-var("shell-header-brand-button-padding")}, 4px 6px);
+  padding-block: 4px;
+  padding-inline: 0;
   background: transparent;
-  cursor: pointer;
-  transition: color 0.22s ease;
-}
-
-#{ns.class("site-header-brand-button")},
-
-#{ns.class("button")}#{ns.class("site-header-brand-button")} {
   color: var(
     #{ns.css-var("shell-header-brand-button-color")},
     color-mix(in srgb, var(#{ns.css-var("text")}, currentColor) 74%, transparent)
   );
+  cursor: pointer;
+  transition: color 0.22s ease;
 }
 
 #{ns.class("site-header-brand-button")}:hover,

package/package.json

@@ -8,7 +8,7 @@
     }
   },
   "name": "@trebired/frontend",
-  "version": "20.13.0",
+  "version": "21.0.1",
   "description": "Generic browser runtime systems for Trebired frontend packages and applications.",
   "type": "module",
   "private": false,