diff --git a/src/assets/build/store-carrier-plates.webp b/src/assets/build/store-carrier-plates.webp new file mode 100644 index 0000000..c05ff11 Binary files /dev/null and b/src/assets/build/store-carrier-plates.webp differ diff --git a/src/assets/build/store-pitch-towers.webp b/src/assets/build/store-pitch-towers.webp new file mode 100644 index 0000000..fe1b0a5 Binary files /dev/null and b/src/assets/build/store-pitch-towers.webp differ diff --git a/src/assets/build/store-squishy-palms.webp b/src/assets/build/store-squishy-palms.webp new file mode 100644 index 0000000..599ff33 Binary files /dev/null and b/src/assets/build/store-squishy-palms.webp differ diff --git a/src/assets/build/store-trackball-44mm-black.webp b/src/assets/build/store-trackball-44mm-black.webp new file mode 100644 index 0000000..edeeb77 Binary files /dev/null and b/src/assets/build/store-trackball-44mm-black.webp differ diff --git a/src/assets/build/store-trackball-52mm-pearl.webp b/src/assets/build/store-trackball-52mm-pearl.webp new file mode 100644 index 0000000..b54856c Binary files /dev/null and b/src/assets/build/store-trackball-52mm-pearl.webp differ diff --git a/src/components/StoreItems.astro b/src/components/StoreItems.astro new file mode 100644 index 0000000..41189b9 --- /dev/null +++ b/src/components/StoreItems.astro @@ -0,0 +1,43 @@ +--- +// Optional store items with small product photos, each linking to its svalboard.com +// product page. Photos are the main image from each product page. +import { Image } from 'astro:assets'; +import pearl from '../assets/build/store-trackball-52mm-pearl.webp'; +import black from '../assets/build/store-trackball-44mm-black.webp'; +import palms from '../assets/build/store-squishy-palms.webp'; +import towers from '../assets/build/store-pitch-towers.webp'; +import plates from '../assets/build/store-carrier-plates.webp'; + +interface Props { + layout?: 'grid' | 'list'; +} +const { layout = 'grid' } = Astro.props; + +const store = 'https://svalboard.com/products/'; +const items = [ + { name: '52 mm pearl trackball', href: store + 'svalboard-52mm-pearl-trackball', img: pearl, alt: 'Four 52 mm pearl trackballs: blue, purple, white and black.' }, + { name: '44 mm shiny black trackball', href: store + '44mm-shiny-black-trackball', img: black, alt: 'A 44 mm shiny black trackball.' }, + { name: '44 mm red trackball', href: store + '44mm-red-trackball', img: null, alt: '' }, + { name: 'Squishy palms', href: store + 'squishy-palmrests', img: palms, alt: 'A pair of black squishy palm rests with a fabric top.' }, + { name: 'Pitch towers', href: store + 'pitch-towers', img: towers, alt: 'A full set of sandblasted stainless pitch towers.' }, + { name: 'Carrier plates', href: store + 'carrier-plates', img: plates, alt: 'A pair of black anodized aluminum carrier plates.' }, +]; +--- + +{/* VERIFY: the 44 mm red trackball has no photo on its store page, so its tile shows a drawn red ball. Use a real photo when one is on the store. */} + diff --git a/src/content/docs/build/index.mdx b/src/content/docs/build/index.mdx index 742a386..2d3379b 100644 --- a/src/content/docs/build/index.mdx +++ b/src/content/docs/build/index.mdx @@ -8,18 +8,27 @@ import finished from '../../../assets/build/finished-svalboard.jpg'; import kitPhoto from '../../../assets/build/kit-hardware-photo.jpg'; import CadFigure from '../../../components/CadFigure.astro'; import YouTube from '../../../components/YouTube.astro'; +import StoreItems from '../../../components/StoreItems.astro';
- A finished Svalboard in gray and black on a white background: both halves, each with four finger clusters, a thumb cluster, a black trackball and a gray hemispherical palm rest. + A finished Svalboard in gray and black on a white background: both halves, each with four finger clusters, a thumb cluster, a black trackball and a gray hemispherical palm rest.
A finished board
+ Buy complete
- The kit hardware laid out on a white background: FFCs, the two main PCBAs, cluster and thumb PCBAs, stainless towers, screws, square nuts, brass heat set inserts, two rods of magnets, a T10 driver and two USB-C cables. + The kit hardware laid out on a white background: FFCs, the two main PCBAs, cluster and thumb PCBAs, stainless towers, screws, square nuts, brass heat set inserts, two rods of magnets, a T10 driver and two USB-C cables.
What comes in the kit
+ Buy the kit
+## Optional items + +Add these to your kit from the Svalboard store: + + + This guide covers building a Svalboard from a self-print kit. It also helps with repairs and part swaps on a finished board. Help us improve it: [open an issue on GitHub](https://github.com/svalboard/docs/issues/new?title=Build%20guide%3A%20), or send comments on the [Svalboard Discord](https://www.svalboard.com/discord). diff --git a/src/styles/custom.css b/src/styles/custom.css index 38ca7e9..2c1aa04 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -231,6 +231,26 @@ font-size: var(--sl-text-sm); color: var(--sl-color-gray-2); } +/* Store links on the opening pictures: the picture and a small link under the caption. */ +.sl-markdown-content .opening-link { + display: block; + border-radius: 0.75rem; +} +.sl-markdown-content .opening-link:focus-visible, +.sl-markdown-content .opening-buy:focus-visible { + outline: 3px solid var(--sl-color-text-accent); + outline-offset: 3px; +} +.sl-markdown-content .opening-buy { + display: inline-block; + margin-top: 0.15rem; + font-size: var(--sl-text-sm); + color: var(--sl-color-text-accent); + text-decoration: none; +} +.sl-markdown-content .opening-buy:hover { + text-decoration: underline; +} .sl-markdown-content .opening-pair { display: grid; grid-template-columns: 1fr; @@ -246,6 +266,93 @@ } } +/* Optional store items near the top of the build guide (src/components/StoreItems.astro). + Small product photos on their own white backdrop, each linking to the store. */ +.sl-markdown-content .store-items { + list-style: none; + margin: 0.75rem 0 1.5rem; + padding: 0; + display: grid; + gap: 0.75rem; +} +.sl-markdown-content .store-items > li { + margin: 0; + padding: 0; +} +.sl-markdown-content .store-item { + display: flex; + gap: 0.4rem; + color: var(--sl-color-gray-2); + font-size: var(--sl-text-sm); + line-height: 1.3; + text-decoration: none; +} +.sl-markdown-content .store-item:hover .store-item-name { + color: var(--sl-color-text-accent); +} +.sl-markdown-content .store-item:focus-visible { + outline: 3px solid var(--sl-color-text-accent); + outline-offset: 3px; + border-radius: 0.5rem; +} +.sl-markdown-content .store-item-pic { + display: block; + flex: none; + aspect-ratio: 4 / 3; + overflow: hidden; + border-radius: 0.5rem; + background-color: #fff; +} +.sl-markdown-content .store-item-pic img { + display: block; + width: 100%; + height: 100%; + margin: 0; + object-fit: cover; +} +.sl-markdown-content .store-item-ball { + display: block; + width: 48%; + aspect-ratio: 1; + margin: 13% auto 0; + border-radius: 50%; + background: radial-gradient(circle at 35% 30%, #f27a6f 0%, #c8261c 45%, #7c120c 100%); +} +/* A: a compact grid of small cards, picture above the name. */ +.sl-markdown-content .store-items--grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} +.sl-markdown-content .store-items--grid .store-item { + flex-direction: column; +} +@media (min-width: 40rem) { + .sl-markdown-content .store-items--grid { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } +} +/* B: a list with a small thumbnail beside each name. */ +.sl-markdown-content .store-items--list { + grid-template-columns: minmax(0, 1fr); + gap: 0.5rem; +} +.sl-markdown-content .store-items--list .store-item { + flex-direction: row; + align-items: center; + gap: 0.75rem; +} +.sl-markdown-content .store-items--list .store-item-pic { + width: 4rem; +} +.sl-markdown-content .store-items--list .store-item-name { + color: var(--sl-color-text-accent); + text-decoration: underline; +} +@media (min-width: 40rem) { + .sl-markdown-content .store-items--list { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + /* Home page section cards (src/components/SectionCard.astro). Whole-card links: a picture, the title and a one-line description. No borders; the card is a soft surface that lifts on hover. */