Giter Club home page Giter Club logo

notes-theme's Introduction

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"

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.