Little Ocean

A Hugo theme optimized for publishing personal evergreen notes.

It is forked from Jethro Kuan's Cortex theme, with a number of enhancements to more closely mimic Andy Matuschak's notes site.

Example Site: Little Ocean Star Wars Knowledge Graph

Features:

• Opens new pages in an ever-growing list to maintain context of how you arrived at a page.
• Tracks and displays "backlinks" between pages to allow for related concept exploration.
• Shows preview of content on link hover to get a peek at the content before opening.
• Customizable look-and-feel via configuration to personalize.
• Text search to find interesting starting points into the knowledge graph.

Search

In order for search to work, you must have a /content/search/_index.md file, so that /search is a valid url.

Custom Styling

The default theme style matches Andy Matuschak's notes site. You can configure the look and feel of the site using the [params.styles] property in your config.toml.

Here is a basic dark theme that can be tweaked:

[params.styles]
  # Base styles for entire site
  color = "#fff"
  backgroundColor = "#000"
  lineHeight = "1.6"
  fontFamily = "Arial, sans-serif"

  # Styles for header
  headerBackgroundColor = "#111"
  headerBorderBottomColor = "#666"
  headerColor = "#fafafa"

  # Styles for pages
  pageBackgroundColor = "#000"
  pageBorderLeftColor = "#333"
  pageLinkColor = "#10B981"
  pageMaxWidth = "625px"
  pageFontSize = "16px"
  pageLineHeight = "22px"

  # Styles for the "backlink" section at the bottom of each page
  backlinksBackgroundColor = "#222"
  backlinksBorderRadius = "3px"
  backlinkLabelColor = "#aaa"
  backlinkTitleColor = "#ccc"
  backlinkPreviewColor = "#eee"
  backlinkHoverBackgroundColor = "#444"

  # Styles for the preview hover popup
  previewWidth = "500px"
  previewMaxHeight = "350px"
  previewScale = "0.7"
  previewBoxShadowTopColor = "rgba(255, 255, 255, 0.08)"
  previewBoxShadowRightColor = "rgba(255, 255, 255, 0.04)"
  previewBoxShadowBottomColor = "rgba(255, 255, 255, 0.15)"
  previewBoxShadowLeftColor = "rgba(255, 255, 255, 0.04)"

  # Styles for the search page
  searchExtractColor = "#666"