Tips

Files and folders are sorted alphabetically and intermixed by default; use _order.txt to override
index.md in any folder is hidden — it IS that folder's home page
Empty directories are hidden from the nav tree
The active page is highlighted in the nav

Serving from a subdirectory

OwnShip auto-detects its base path. Drop it into /docs/ or /notes/ and everything — nav links, home URL, {{home}} tokens, image paths — works correctly without any configuration.

Image paths

Images referenced in .md files are served root-relative, so they display correctly regardless of which page you're viewing. Use paths relative to your content root:

![Logo](images/logo.png)

Running the guide locally

This guide is served by OwnShip. To run it locally, drop index.php into this guide/ folder and run OwnShipPreview.bat or OwnShipPreview.sh from that directory.

Quick _theme.css recipes

These drop straight into _theme.css and can be combined freely.

Font family

OwnShip defaults to system-ui, sans-serif — the native UI font on each platform. To override, target body for global, main for content only, or code, pre for monospace:

/* serif body — readable for long-form content */
body { font-family: Georgia, 'Times New Roman', serif; }

/* content area only — keeps nav in system-ui */
main { font-family: Georgia, 'Times New Roman', serif; }

/* monospace style for code blocks */
code, pre { font-family: 'Courier New', Courier, monospace; }

Using a web font — load it in _header.md or _theme.js with a <link> tag, then reference it in _theme.css:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400&display=swap">

body { font-family: 'Lora', Georgia, serif; }

Page transitions

Each nav click is a full page reload, so a CSS animation on main fires naturally on every page change. Add one via _theme.css:

main { animation: hv-fade .3s ease; }
@keyframes hv-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

Other ideas: translateX(-8px) slides in from the left; scale(.98) gives a subtle zoom-in feel.

For small sites — business cards, microsites, short link lists — set nav_style = none in _site.ini. OwnShip removes the nav pane entirely and expands the content area to fill the full width. If content_width is also set, the header padding is adjusted automatically so header text aligns with your content.

Handle navigation in a _header.md instead:

# [My Site]({{home}})
[home](index.md) · [about](about.md) · [contact](contact.md)

Center the header text — add to _theme.css:

.header-md { flex: 1; }
header h1, header p { text-align: center; }

Image captions

Markdown has no caption syntax. The simplest approach is a <p> with a .caption class immediately below the image:

![E-MU E-Synth keyboard synthesizer, 1998](img/esynth-1998.jpg)

<p class="caption">E-MU E-Synth · 1998</p>

Add the styling to _theme.css:

.caption { font-size: 0.833rem; font-style: italic; text-align: center; }

When keyboard navigation is active, OwnShip marks the focused nav item with a thin accent bar. On minimal sites — business cards, microsites — you may prefer to suppress it:

nav li.kb-selected > a { border-left: none; padding-left: .5rem; }

Keyboard navigation still works; only the visual indicator is removed.

Dogfooding

The guide you're reading at ownship.cc/guide/ is itself served by OwnShip — the same index.php you downloaded. The main ownship.cc site is a separate static page.

Tips

Navigation behavior