Use the real hack.build logo and fix the showcase grid

- Replace the hand-drawn wrench with the actual hack.build mark: isolate the
  pink wrench from the brand PNG onto transparent (public/hackbuild-mark.png)
  and use it for the talk tile and the Resources card.
- Showcase grid: 7 columns so the seven projects fill one row, and draw the
  hairlines from per-tile borders instead of a grey container showing through
  gaps — no more grey empty cells on an incomplete row.
- Drop the now-unused HackBuildIcon.
This commit is contained in:
Moheeb Zara
2026-07-29 02:11:35 -07:00
parent 3f1ce77900
commit ec923a845e
7 changed files with 18 additions and 23 deletions
+8 -2
View File
@@ -161,11 +161,16 @@
/* Resource showcase: a single row of square tiles */
.landing-root .landing-showcase {
display: grid; grid-template-columns: repeat(6, 1fr);
gap: 1px; background: var(--ln-border); border: 1px solid var(--ln-border);
display: grid; grid-template-columns: repeat(7, 1fr);
/* Hairlines come from each tile's right/bottom border rather than a grey
container showing through 1px gaps — so an incomplete final row leaves
no filled-in grey cells. */
gap: 0; background: transparent;
border: 1px solid var(--ln-border); border-right: 0; border-bottom: 0;
}
.landing-root .landing-tile {
background: var(--ln-bg); aspect-ratio: 1 / 1;
border-right: 1px solid var(--ln-border); border-bottom: 1px solid var(--ln-border);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 14px; padding: 20px; text-align: center;
transition: background 0.3s ease;
@@ -178,6 +183,7 @@
}
.landing-root .landing-tile:hover .landing-tile-visual { transform: translateY(-2px); }
.landing-root .landing-tile-visual svg { width: 100%; height: 100%; }
.landing-root .landing-tile-visual img { width: 100%; height: 100%; object-fit: contain; }
.landing-root .landing-tile-title {
font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ln-text-dim);
transition: color 0.3s ease;
+6
View File
@@ -220,6 +220,12 @@
height: 100%;
}
.resources-root .resources-card-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.resources-root .resources-card-has-icon .resources-card-num {
padding-right: 60px;
}
+1 -2
View File
@@ -8,7 +8,6 @@ import {
CubeIcon,
KeyIcon,
GridIcon,
HackBuildIcon,
} from '@/components/resources/icons'
import { AtlasLogo } from '@/components/resources/atlas-logo'
@@ -124,7 +123,7 @@ export default function ResourcesLandingPage() {
title="Hacking Your Hackerspace"
description="A talk on the patterns, pitfalls, and governance lessons behind keeping a hackerspace alive — the research from these projects, condensed into one interactive session."
type="Talk · Interactive"
visual={<HackBuildIcon />}
visual={<img src="/hackbuild-mark.png" alt="" />}
/>
</div>
</section>