Enlarge sidebar logo 20% and fix compile button corner rounding

- Logo (all themes): scale the Verso wordmark to 120% width, centered and
  clipped to the sidebar column — the word mark visually fills the full
  sidebar width. Uses overflow:hidden + width:120% !important + margin-left:-10%
  to override the existing inline width style.
- Compile button (Lumière): replace the all-corners border-radius:7px on the
  split button group with corner-specific rules — .compile-button gets 7px on
  the left side only, .compile-dropdown-toggle gets 7px on the right side only,
  so the shared inner edge stays flat as expected for a joined split button.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
claude
2026-06-11 16:35:11 +00:00
parent 8d3f550cef
commit aec466c6f3
2 changed files with 27 additions and 8 deletions
@@ -241,15 +241,22 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
}
// ── Compile button — teal gradient ────────────────────────────────────────
// .compile-button-group wraps the Recompile button in the toolbar actions
// .compile-button-group is a split button: main Recompile + dropdown arrow.
// Only the outer corners get rounded; the inner shared edge stays flat.
[data-lumiere='true'] .compile-button-group {
.btn-primary,
.btn {
border-radius: 7px !important;
// Main (left) button: round left side, flat right side
.compile-button {
border-radius: 7px 0 0 7px !important;
}
.btn-primary {
// Dropdown arrow (right button): flat left side, round right side
.compile-dropdown-toggle {
border-radius: 0 7px 7px 0 !important;
}
// Teal gradient on the main compile button only
.compile-button.btn-primary {
background: linear-gradient(135deg, $lum-teal 0%, darken($lum-teal, 8%) 100%) !important;
border-color: darken($lum-teal, 10%) !important;
box-shadow: 0 2px 8px rgba($lum-teal, 0.35) !important;
@@ -260,4 +267,12 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
box-shadow: 0 4px 14px rgba($lum-teal, 0.45) !important;
}
}
// Dropdown toggle also gets the teal background (same button group, same color)
.compile-dropdown-toggle.btn-primary {
background: linear-gradient(135deg, darken($lum-teal, 5%) 0%, darken($lum-teal, 12%) 100%) !important;
border-color: darken($lum-teal, 10%) !important;
border-left-color: rgba(255, 255, 255, 0.2) !important;
box-shadow: 0 2px 8px rgba($lum-teal, 0.35) !important;
}
}
@@ -244,11 +244,13 @@ body {
}
}
// Let the Verso wordmark bleed past the lower section's asymmetric
// padding so it spans the full width of the sidebar column.
// The Verso wordmark bleeds past the lower section's padding to span
// the full sidebar column width, then the image is scaled to 120% and
// centered so the wordmark fills the available width (all themes).
.ds-nav-verso-logo {
margin-left: calc(-1 * var(--spacing-05));
margin-right: calc(-1 * var(--spacing-08));
overflow: hidden;
transition: filter 0.2s ease;
&:hover {
@@ -256,7 +258,9 @@ body {
}
img {
width: 100%;
display: block;
width: 120% !important;
margin-left: -10%;
height: auto;
}
}