Digital Obsidian Garden

Digital Obsidian Garden

Digital Obsidian Garden

This is the template to be used together with the Digital Garden Obsidian Plugin. See the README in the plugin repo for information on how to set it up.

Deploy with Vercel

Docs

Docs are available at docs.forestry.md

CSS Variables

The digital garden is fully customizable through CSS variables. Override these in src/site/styles/custom-style.scss to customize your garden's appearance.

How to Customize

Add your overrides to custom-style.scss:

body {
    --dg-content-max-width: 800px;
    --dg-content-font-size: 16px;
    --dg-sidebar-max-width: 400px;
}

Responsive Layout Notes

  • Content will never overlap the filetree, regardless of --dg-content-max-width value
  • The right sidebar (TOC/graph/backlinks) automatically hides when there isn't enough viewport space
  • To make the sidebar appear at smaller viewports, reduce --dg-sidebar-max-width

Available Variables

Color Variables

You can override the base Obsidian theme color variables directly:

VariableDescription
--text-normalNormal text color
--text-mutedMuted/secondary text
--text-faintFaint text
--text-accentAccent color
--text-accent-hoverAccent hover color
--link-colorLink color
--link-color-hoverLink color hover
--link-unresolved-colorLink color unresolved
--link-unresolved-opacityLink color unresolved opacity
--background-primaryPrimary background
--background-primary-altAlt primary background
--background-secondarySecondary background
--background-secondary-altAlt secondary background
--interactive-normalInteractive element color
--interactive-hoverInteractive hover color
--interactive-accentInteractive accent
--interactive-accent-hoverInteractive accent hover

Layout Variables

VariableDefaultDescription
--dg-content-max-width700pxMaximum width of content area
--dg-content-margin-top90pxTop margin for content
--dg-content-margin-top-mobile75pxTop margin on mobile
--dg-content-font-size18pxBase font size for content
--dg-content-line-height1.5Line height for content
VariableDefaultDescription
--dg-sidebar-top75pxSidebar top offset
--dg-sidebar-gap80pxGap between content and sidebar
--dg-sidebar-min-width25pxMinimum sidebar width
--dg-sidebar-max-width350pxMaximum sidebar width
--dg-sidebar-container-padding20pxSidebar container padding
--dg-sidebar-container-height87%Sidebar container height

Graph Variables

VariableDefaultDescription
--dg-graph-width250pxLocal graph width
--dg-graph-height250pxLocal graph height
--dg-graph-border-radius10pxGraph border radius
--dg-graph-margin-bottom20pxGraph bottom margin
--dg-graph-fullscreen-width90vwExpanded/global graph width
--dg-graph-fullscreen-height85vhExpanded/global graph height
--dg-graph-node-colorvar(--text-accent)Active/current node color
--dg-graph-node-color-mutedvar(--text-faint)Neighbor node color
--dg-graph-label-colorvar(--text-normal)Node label text color
--dg-graph-bgvar(--background-primary)Graph background color
--dg-graph-border-colorvar(--background-secondary)Graph border color

Filetree (Left Sidebar) Variables

VariableDefaultDescription
--dg-filetree-width250pxFiletree sidebar width
--dg-filetree-min-width250pxMinimum filetree width
--dg-filetree-padding10px 20pxFiletree padding
--dg-filetree-gap80pxGap from content
--dg-filetree-title-size32pxFiletree title font size

TOC (Table of Contents) Variables

VariableDefaultDescription
--dg-toc-padding5pxTOC container padding
--dg-toc-font-size0.9remTOC font size
--dg-toc-max-height220pxTOC max height
--dg-toc-title-size1.2remTOC title font size
--dg-toc-item-padding2px 0 2px 8pxTOC item padding
--dg-toc-indent1emTOC nested list indent
VariableDefaultDescription
--dg-backlinks-margin-top10pxBacklinks section top margin
--dg-backlinks-max-height250pxBacklinks list max height
--dg-backlinks-title-size0.9remBacklinks title font size
--dg-backlinks-card-size0.85remBacklink card font size
--dg-backlinks-card-padding6px 0Backlink card padding
--dg-backlinks-icon-size14pxBacklink icon size

Search Variables

VariableDefaultDescription
--dg-search-box-width900pxSearch box width
--dg-search-box-max-width80%Search box max width
--dg-search-box-radius15pxSearch box border radius
--dg-search-box-padding10pxSearch box padding
--dg-search-input-size2remSearch input font size
--dg-search-input-padding10pxSearch input padding
--dg-search-input-radius5pxSearch input border radius
--dg-search-results-max-height50vhSearch results max height
--dg-search-result-size1.2remSearch result font size
--dg-search-result-radius10pxSearch result border radius
--dg-search-link-size1.4remSearch link font size

Search Button Variables

VariableDefaultDescription
--dg-search-btn-radius8pxSearch button border radius
--dg-search-btn-height32pxSearch button height
--dg-search-btn-padding0 10pxSearch button padding
--dg-search-btn-gap8pxSearch button icon/text gap
--dg-search-btn-font-size0.85remSearch button font size
--dg-search-btn-icon-size14pxSearch button icon size
VariableDefaultDescription
--dg-navbar-title-size-mobile18pxNavbar title size on mobile
--dg-navbar-search-margin20pxNavbar search button margin
--dg-navbar-search-min-width36pxNavbar search min width
--dg-logo-height40pxSite logo height on desktop
--dg-logo-height-mobile32pxSite logo height on mobile
--dg-logo-margin10px 15pxSite logo margin
--dg-filetree-logo-height70pxSite logo height in filetree sidebar

Note Link / Filetree Item Variables

VariableDefaultDescription
--dg-notelink-padding4px 8px 4px 12pxNote link padding
--dg-notelink-size0.85remNote link font size
--dg-notelink-border-width2pxNote link left border width
--dg-notelink-hover-bgrgba(255, 255, 255, 0.05)Note link hover background
--dg-folder-margin4px 0 4px 2pxFolder name margin
--dg-folder-icon-size14pxFolder icon size
--dg-inner-folder-padding3px 0 3px 0Inner folder padding
--dg-inner-folder-margin12pxInner folder left margin
--dg-filelist-margin8pxFile list left margin

Graph Controls Variables

VariableDefaultDescription
--dg-graph-ctrl-padding6px 10pxGraph controls padding
--dg-graph-ctrl-radius6pxGraph controls border radius
--dg-graph-ctrl-margin10pxGraph controls margin
--dg-graph-ctrl-size0.7remGraph controls font size
--dg-graph-ctrl-icon-size14pxGraph control icon size
--dg-graph-ctrl-gap10pxGraph controls gap

Timestamps Variables

VariableDefaultDescription
--dg-timestamps-size0.8emTimestamps font size
--dg-timestamps-gap10pxTimestamps gap
--dg-timestamps-margin-top20pxTimestamps top margin

Misc Component Variables

VariableDefaultDescription
--dg-overlay-bgrgba(0, 0, 0, 0.5)Overlay background color
--dg-mermaid-radius25pxMermaid diagram border radius
--dg-mermaid-padding10pxMermaid diagram padding
--dg-transclusion-padding8pxTransclusion container padding
--dg-external-link-icon-size13pxExternal link icon size
--dg-external-link-padding16pxExternal link right padding
Built with LogoFlowershow