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:
1 parent
ed2d123276
commit
023783d189
2 files changed
+81
-2
No files matched your search
@@ -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;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in new issue
Block a user