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:
@@ -161,11 +161,16 @@
|
|||||||
|
|
||||||
/* Resource showcase: a single row of square tiles */
|
/* Resource showcase: a single row of square tiles */
|
||||||
.landing-root .landing-showcase {
|
.landing-root .landing-showcase {
|
||||||
display: grid; grid-template-columns: repeat(6, 1fr);
|
display: grid; grid-template-columns: repeat(7, 1fr);
|
||||||
gap: 1px; background: var(--ln-border); border: 1px solid var(--ln-border);
|
/* 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 {
|
.landing-root .landing-tile {
|
||||||
background: var(--ln-bg); aspect-ratio: 1 / 1;
|
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;
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||||
gap: 14px; padding: 20px; text-align: center;
|
gap: 14px; padding: 20px; text-align: center;
|
||||||
transition: background 0.3s ease;
|
transition: background 0.3s ease;
|
||||||
@@ -178,6 +183,7 @@
|
|||||||
}
|
}
|
||||||
.landing-root .landing-tile:hover .landing-tile-visual { transform: translateY(-2px); }
|
.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 svg { width: 100%; height: 100%; }
|
||||||
|
.landing-root .landing-tile-visual img { width: 100%; height: 100%; object-fit: contain; }
|
||||||
.landing-root .landing-tile-title {
|
.landing-root .landing-tile-title {
|
||||||
font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ln-text-dim);
|
font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ln-text-dim);
|
||||||
transition: color 0.3s ease;
|
transition: color 0.3s ease;
|
||||||
|
|||||||
@@ -220,6 +220,12 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.resources-root .resources-card-icon img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
.resources-root .resources-card-has-icon .resources-card-num {
|
.resources-root .resources-card-has-icon .resources-card-num {
|
||||||
padding-right: 60px;
|
padding-right: 60px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,7 +8,6 @@ import {
|
|||||||
CubeIcon,
|
CubeIcon,
|
||||||
KeyIcon,
|
KeyIcon,
|
||||||
GridIcon,
|
GridIcon,
|
||||||
HackBuildIcon,
|
|
||||||
} from '@/components/resources/icons'
|
} from '@/components/resources/icons'
|
||||||
import { AtlasLogo } from '@/components/resources/atlas-logo'
|
import { AtlasLogo } from '@/components/resources/atlas-logo'
|
||||||
|
|
||||||
@@ -124,7 +123,7 @@ export default function ResourcesLandingPage() {
|
|||||||
title="Hacking Your Hackerspace"
|
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."
|
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"
|
type="Talk · Interactive"
|
||||||
visual={<HackBuildIcon />}
|
visual={<img src="/hackbuild-mark.png" alt="" />}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import { AtlasLogo } from '@/components/resources/atlas-logo'
|
import { AtlasLogo } from '@/components/resources/atlas-logo'
|
||||||
import { CubeIcon, TraceIcon, SpaceIcon, GridIcon, KeyIcon, HackBuildIcon } from '@/components/resources/icons'
|
import { CubeIcon, TraceIcon, SpaceIcon, GridIcon, KeyIcon } from '@/components/resources/icons'
|
||||||
|
|
||||||
// The hackerspace.sh research/game projects, shown as a single row of square
|
// The hackerspace.sh research/game projects, shown as a single row of square
|
||||||
// tiles at the foot of the landing page. Internal routes use next/link;
|
// tiles at the foot of the landing page. Internal routes use next/link;
|
||||||
@@ -13,7 +13,7 @@ const RESOURCES = [
|
|||||||
{ title: 'The Hackerspace Game', href: '/zine', external: false, visual: <SpaceIcon /> },
|
{ title: 'The Hackerspace Game', href: '/zine', external: false, visual: <SpaceIcon /> },
|
||||||
{ title: 'Interactive Learner', href: 'https://hackerspacegame.netlify.app/', external: true, visual: <GridIcon /> },
|
{ title: 'Interactive Learner', href: 'https://hackerspacegame.netlify.app/', external: true, visual: <GridIcon /> },
|
||||||
{ title: 'Governance in a Box', href: '/governance', external: false, visual: <KeyIcon /> },
|
{ title: 'Governance in a Box', href: '/governance', external: false, visual: <KeyIcon /> },
|
||||||
{ title: 'Hacking Your Hackerspace', href: 'https://hack.build/hacking-your-hackerspace.html', external: true, visual: <HackBuildIcon /> },
|
{ title: 'Hacking Your Hackerspace', href: 'https://hack.build/hacking-your-hackerspace.html', external: true, visual: <img src="/hackbuild-mark.png" alt="" /> },
|
||||||
]
|
]
|
||||||
|
|
||||||
export function ResourceShowcase() {
|
export function ResourceShowcase() {
|
||||||
|
|||||||
@@ -123,19 +123,3 @@ export function PlayIcon(props: IconProps) {
|
|||||||
</svg>
|
</svg>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// hack.build — the brand's hot-pink open-end wrench (an open "C" head at the
|
|
||||||
// top-right with a diagonal handle to the lower-left).
|
|
||||||
export function HackBuildIcon(props: IconProps) {
|
|
||||||
return (
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" {...props}>
|
|
||||||
<path
|
|
||||||
d="M32.6 8.1 A9 9 0 1 0 39.9 15.4"
|
|
||||||
stroke="#ff179a"
|
|
||||||
strokeWidth={6.5}
|
|
||||||
strokeLinecap="round"
|
|
||||||
/>
|
|
||||||
<path d="M25 23 L13.5 33.5" stroke="#ff179a" strokeWidth={7} strokeLinecap="round" />
|
|
||||||
</svg>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|||||||
Vendored
+1
-1
@@ -1,6 +1,6 @@
|
|||||||
/// <reference types="next" />
|
/// <reference types="next" />
|
||||||
/// <reference types="next/image-types/global" />
|
/// <reference types="next/image-types/global" />
|
||||||
import "./.next/types/routes.d.ts";
|
import "./.next/dev/types/routes.d.ts";
|
||||||
|
|
||||||
// NOTE: This file should not be edited
|
// NOTE: This file should not be edited
|
||||||
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
|
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Reference in New Issue
Block a user