Skip to content

A Hugo theme for publishing personal ever green notes. Based on Andy Matuschak's notes site.

License

Notifications You must be signed in to change notification settings

justindsmith/little-ocean

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Screenshot of Little Ocean Theme for Hugo

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"

About

A Hugo theme for publishing personal ever green notes. Based on Andy Matuschak's notes site.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published