S/V MoonstruckAbout this site

About this site

Site credit and information. See also the style guide.

65°06′W65°00′W64°54′W64°48′W64°42′W64°36′W64°30′W64°24′W64°18′W18°42′N18°36′N18°30′N18°24′N18°18′NN5 NAUTICAL MILESVirgin IslandsA SEVEN-NIGHT PASSAGE

Drag the chart to pan

The itineraries hero chartNot for navigation

How it’s built

The site of S/V Moonstruck, a captain-only catamaran chartering in the US and British Virgin Islands. Designed and built by Jamie Still.

Hosted on Cloudflare Pages
The site is static files: no server, no database, and nothing to run before it's served. A push to the repository is a deploy.
No analytics
No analytics, no cookies, no tracking pixels, and no consent banner to dismiss, because nothing here needs your consent. Nothing records who you are, and nothing follows you when you leave. If you pick a theme in the footer, your browser keeps that choice in its own storage and it's never sent anywhere.
What your browser does contact
Google Fonts, for the two typefaces. Open-Meteo, for the weather conditions in the footer, which needs no key and sets no cookie. Nothing else: every photograph, drawing, and chart is served from here.
Accessibility
Built to WCAG 2.2 Level AA. Color contrast is measured against the shipped values rather than estimated. Every dialog traps the keyboard and hands focus back where it found it. No state is carried by color alone. Small targets keep a 44-pixel hit area whatever size they are drawn. Every animation has a counterpart for anyone who has asked for reduced motion.

Type and icons

Two typefaces, both open source, one borrowed set of pictograms, and the American Sailing Association's logo.

Playfair Display
The serif, set in italic, for everything the site would say out loud and for every figure it wants you to read as an instrument reading. Designed by Claus Eggers Sørensen and served by Google Fonts under the SIL Open Font License.
Barlow
The sans, for everything you read at length. Designed by Jeremy Tribby and served by Google Fonts under the same license.
IBM Plex Mono
The label voice: navigation, buttons, captions, chart furniture and the days in the calendar, all set small and tracked wide in capitals. Designed by Mike Abbink with Bold Monday and served by Google Fonts under the same license.
The activity pictograms
The 13 symbols in the itinerary legend are by Luis Prado on the Noun Project. The whole set, as the sample itineraries use it:
The mark
Drawn for this site after the name as it's lettered on the hulls: MOON cut out of a moon disc, then STRUCK beside it in light capitals. The two O's are a pair of wayfarer sunglasses seen straight on: a brow that rises to the end piece at each side, two lenses that narrow toward the bottom, and a keyhole bridge between them. The letters are Jost, the one place the old sans survives, because they are drawn into the file rather than set by the page. The water under the moon is two bands, as on the hull: a light blue grey, then navy. Two colors belong to the artwork rather than to the site's palette: #1F2B5B for the disc and the letters, and #9DB2CC for the blue grey band. The sea under it is the site's own Moonstruck Navy, #061E45. The site itself never shows the first two: every mark on every page is masked to Instrument White, #EEF3FF. The plate below is lit so the artwork can be seen as drawn.
The S/V Moonstruck mark in its own colors
The S/V Moonstruck mark recolored to Instrument White
The American Sailing Association's logo
The American Sailing Association (ASA) logo in its white-text version, a registered trademark of the ASA. Paradise Yacht Management is an accredited sailing school with the ASA.
The American Sailing Association logo, white-text version

Photography and drawings

Most of the photographs here are of Moonstruck, from the boat's charter listing. These are the ones that came from somewhere else. The three from Unsplash are each used under the Unsplash License.

  • The homepage header

    Moonstruck under sail in the Virgin Islands, photographed from overhead.

  • The US Virgin Islands card and page

    Trunk Bay, St. John, by Cyrus Crossan on Unsplash.

  • The British Virgin Islands card and page

    Necker Island from the air, by Kevin Wolf on Unsplash.

  • The accommodation plan

    From Moonstruck's charter listing, on a drawing © Voyage Yachts, South Africa, who built the boat.

  • The drawing behind the layout section

    Voyage Yachts' charter layout of the VOYAGE 480, © Voyage Yachts, redrawn in the site's blue-white on a clear ground for use as a background.

  • Everything else

    The photographs of Moonstruck are the ones on the boat's charter listing with Charter Smarter: under sail, at anchor, the salon, the galley, and the cabins.

Charts, imagery, and data

The charts are drawn here. The world under them isn’t.

The coastline
Every chart on the site is one drawing of the Virgin Islands coastline, traced from OpenStreetMap and cropped to each chart's window. © OpenStreetMap contributors, under the Open Database License.
The satellite plates
Aerial photography flown for the USGS and USDA National Agriculture Imagery Program, which is public domain, and Sentinel-2 cloudless by EOX IT Services GmbH (contains modified Copernicus Sentinel data 2019), used under CC BY-NC-SA 4.0. The plates adapted from it are offered under that same license. Each chart page names the sources its own plates came from.
The weather conditions in the footer
Read from Open-Meteo for St. Thomas, St. John, and Tortola, in your browser, every 15 minutes.
The calendar
The availability calendar is read once a day from Moonstruck's booking calendar at Central Yacht Agent, which the charter listings show too.

One of four reference pages, with the style guide and the code reference for the JavaScript and CSS a browser is served. All four are written from the source rather than by hand.