Web64

A small site ready for Web64

Web64 Developer Docs

Build compact websites for a browser running directly on Nintendo 64 hardware.

Starter

This starter uses one HTML file, one stylesheet, normal website image files, and a built-in font fallback chain. Get web64-build from https://github.com/Boxingbruin/web64-tools, run it before publishing, then upload the folder to an HTTP host and open it from Web64.

Folder layout

my-site/
  index.html
  style.css
  images/
    logo.png
    logo.sprite
    background.png
    background.sprite

The .png files are your normal website assets. The .sprite files are generated by web64-build.

index.html

<!doctype html>
<html>
<head>
  <title>My Web64 Site</title>
  <link rel="stylesheet"
    href="style.css">
</head>
<body>
  <div class="page-shell">
    <img src="images/logo.png"
      alt="My logo"
      width="128" height="64">
    <h1>Hello, N64!</h1>
    <p>My site is online.</p>
    <a href="about.html">About</a>
  </div>
</body>
</html>

Reference the normal image file in your HTML. Web64 uses the generated .sprite version automatically.

style.css

body {
  background: #178edb;
  color: #1d2633;
  font-family:
    "Web64 Roundabout",
    "Web64 Droid Sans",
    "Web64 AT01";
  font-size: 16px;
  margin: 0;
}

.page-shell {
  max-width: 560px;
  margin: 0 auto;
  padding: 8px;
  background-color: #f7f0d5;
  border: 3px solid #8e6425;
}

h1 {
  color: #1c64c7;
  font-size: 32px;
}

a {
  color: #863bd0;
  cursor: pointer;
}

Build assets

Get web64-build from:

https://github.com/Boxingbruin/web64-tools

Run it on the root directory of your website before uploading or testing the site with Web64:

./web64-build build /path/to/my-site

If you are already inside the website directory, you can build the current directory:

/path/to/web64-build build .

This scans the site and creates Web64-compatible asset files beside the original images. Existing assets that are already up to date are skipped.

Before you publish

HTML

Use elements and attributes listed in the HTML page.

CSS

Use documented selectors, properties, units, and values.

Fonts

Provide a fallback list ending in a built-in Web64 font.

Assets

Run web64-build build before uploading the site.

Hosting

Confirm the site is reachable over HTTP from the network used by web64-net.