nitro theme: slanted parallelogram article buttons, hover scale lift

In-article buttons (the {contact:} trigger and raw <button>s, not the
editor chrome) get a / slanted parallelogram clip-path in the nitro
theme: nav-tab-style bezier sweeps at the obtuse corners, small arcs at
the sharp ones, fixed 1.7em height so every button shares one shape.
Base stylesheet: the contact envelope's line-height no longer inflates
the button, and article buttons get a slight scale(1.01) hover lift.
This commit is contained in:
LeoVasanko committed 2026-09-28 16:57:35 +00:00
1 parent ed2d123276
commit 023783d189
2 files changed
+81 -2

No files matched your search

+15 -1
View File
@@ -927,8 +927,11 @@ article {
}
.contact-trigger .icon {
/* Match the corner ✉️'s optical size against the button text. */
/* Match the corner ✉️'s optical size against the button text. The
reduced line-height keeps the larger glyph from inflating the
button: 1.38 × 1.2 ≈ the label text's own 1.65 line box. */
font-size: 1.38em;
line-height: 1.2;
}
.contact-trigger:hover {
@@ -956,6 +959,17 @@ article {
}
}
/* Any button in the article flow (the {contact:} trigger and raw
<button>s in the markup — not the .icon-btn editor pens or .copy):
a slight lift on hover. */
article button:not(.icon-btn):not(.copy) {
transition: transform 0.15s;
}
article button:not(.icon-btn):not(.copy):hover {
transform: scale(1.01);
}
.edit-link {
position: absolute;
top: 0.2rem;
+66 -1
View File
@@ -1,6 +1,7 @@
/* Nitro theme: racing/HUD style — saturated orange + cyan, console/HUD-style
monospace display type, an orange racing-tab nav with a bezier clip-path,
and a dark bezier banner. Follows prefers-color-scheme: the light scheme
matching slanted-parallelogram buttons, and a dark bezier banner. Follows
prefers-color-scheme: the light scheme
is a warm light-grey page, the dark scheme a deep violet page; the banner
and other dark/bright elements carry over unchanged.
@@ -135,6 +136,70 @@
color: var(--tab-muted);
}
/* Buttons in the article flow (the {contact:} trigger and any raw
<button> in the markup): a racing parallelogram with / slanted sides,
clipped with the same shape() language as the nav tab. All buttons
are forced to one fixed 1.7em height (inline-flex centering, nowrap,
no border — it would be invisible under the clip), so every button
gets the identical shape and the geometry is exact: a ~62° slant from
the 0.9em run. The obtuse top-left and bottom-right corners replicate
the nav tab's top-left corner: a wide bezier sweep with the same
0.8/0.6 control-handle split along the joining edges (over a 0.5em
tangent run), mirrored between the two corners. The sharp corners
keep small arcs, in balance with the wide sweeps (0.22em, arc
≈ 0.45em — about half the obtuse sweep's, so the sharp corners stay
subordinate). border-radius is the fallback for browsers without
shape(). Asymmetric inline padding keeps the text clear of the
slants (wider on the right: the wide bottom-right sweep cuts deeper
into the label's end side). Editor chrome (.icon-btn pens, .copy)
keeps its own styling. The {contact:} envelope's line-height is
reduced in the base stylesheet so it doesn't outgrow this height. */
.contact-trigger,
article button:not(.icon-btn):not(.copy) {
display: inline-flex;
align-items: center;
justify-content: center;
height: 1.7em;
padding: 0 1.3em 0 1em;
white-space: nowrap;
/* Same typography as the contact trigger (raw <button>s otherwise get
the small UA font): nav family/weight, article size and leading. */
font-family: var(--font-nav);
font-weight: var(--nav-weight);
font-size: inherit;
line-height: inherit;
color: var(--ink);
background: var(--accent);
border: none;
border-radius: 0.2em;
cursor: pointer;
clip-path: shape(
/* bottom edge, left to right */
from 0.365em 100%,
hline to calc(100% - 1.4em),
/* bottom-right corner: nav-style bezier, mirrored from top-left */
curve to calc(100% - 0.666em) calc(100% - 0.442em)
with calc(100% - 1.1em) 100% / calc(100% - 0.853em) calc(100% - 0.088em),
/* right slant */
line to calc(100% - 0.171em) 0.323em,
/* top-right corner: sharp, small arc */
arc to calc(100% - 0.365em) 0% of 0.22em ccw,
/* top edge, right to left */
hline to 1.4em,
/* top-left corner: nav-style bezier */
curve to 0.666em 0.442em with 1.1em 0 / 0.853em 0.088em,
/* left slant */
line to 0.171em calc(100% - 0.323em),
/* bottom-left corner: sharp, small arc */
arc to 0.365em 100% of 0.22em ccw,
close);
}
article button:not(.icon-btn):not(.copy):hover {
color: var(--tab-hover);
text-shadow: 0 0 0.1em;
}
/* Console-style headings: uppercase monospace. h1 in the page text color
with a hazard-stripe underline, h2 deep orange, h3 cyan. */
article h1 {