diff --git a/src/components/home/Proof.astro b/src/components/home/Proof.astro index df25d5d..0742ee7 100644 --- a/src/components/home/Proof.astro +++ b/src/components/home/Proof.astro @@ -74,15 +74,39 @@ const logos = await Promise.all([ display: grid; gap: var(--space-5); } - .partners__list { display: grid; border-top: var(--hairline) solid var(--line); } + .partners__list { + position: relative; + display: grid; + border-block: var(--hairline) solid var(--line); + } + /* The menu bar's corner cross on two opposite corners of the row, upper left and lower right, + where its rules end, in the rules' colour. Drawn as in .hud-frame (base.css), but not with that class: it redefines + --line as a width, and the rules here need --line as the colour. */ + .partners__list::after { + content: ''; + position: absolute; + --arm: var(--hud-arm); + --w: var(--hud-line-width); + --len: calc(2 * var(--arm) + var(--w)); + --g: linear-gradient(var(--line), var(--line)) no-repeat; /* the rules' own colour */ + inset: calc(-1 * (var(--arm) + var(--w))); + /* The inner horizontal arm is the rule itself; drawing it again would double the + translucent colour, so only the outer arm and the vertical are painted. */ + background: + var(--g) left 0 top var(--arm) / var(--arm) var(--w), + var(--g) left var(--arm) top 0 / var(--w) var(--len), + var(--g) right 0 bottom var(--arm) / var(--arm) var(--w), + var(--g) right var(--arm) bottom 0 / var(--w) var(--len); + pointer-events: none; + } .partners__item { display: grid; align-content: space-between; gap: var(--space-7); min-height: calc(var(--space-9) * 2.5); padding: var(--space-6) var(--space-5); - border-bottom: var(--hairline) solid var(--line); } + .partners__item + .partners__item { border-top: var(--hairline) solid var(--line); } .partners__text { display: grid; gap: var(--space-1); } .partners__name { font-weight: var(--weight-medium); } .partners__role { color: var(--ink-muted); transition: color var(--dur-fast) var(--ease); } @@ -94,8 +118,7 @@ const logos = await Promise.all([ .proof__title { grid-column: 1 / span 6; } .proof__list { grid-column: 7 / span 6; } .proof__item { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: var(--gap); } - .partners__list { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: var(--hairline) solid var(--line); } - .partners__item { border-bottom: 0; } - .partners__item + .partners__item { border-left: var(--hairline) solid var(--line); } + .partners__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } + .partners__item + .partners__item { border-top: 0; border-left: var(--hairline) solid var(--line); } }