/obsidian-publish-css

The CSS for my Obsdian publish site.

Primary LanguageCSS

Obsidian Publish CSS

The CSS for my Obsidian publish site: joschuasgarden.com.

picture of my digital garden

You can help me keep creating tools like this by buying me a coffee.

Buy Me A Coffee

Noteworthy inspirations:

I like to Steal from my heroes. I copied, changed and pasted a lot to come up with a style I cherish.

Special tweaks

Callout Codeblocks

picture of callouts

Callouts help to make important things pop out. Everything I put in three backticks followed by "co" gets formatted this way. ```co

However, since I am using a codeblock, links won't work in here.

pre.language-co {
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.03);
padding: 10px 20px;
position: relative;
box-shadow: -10px -10px 30px rgba(255,255,255,0.05), 10px 10px 30px rgba(0,0,0,0.2);
background-color: var(--background-primary-alt) !important;
}

code.language-co.is-loaded {
  font-family: var(--text);
  white-space: normal;
}

Annotation formatting

I want to include Levels of certainty and effort in some of my notes. Therefore I adapted the highlighting syntax ==…==. Everything between these two equal signs will get formatted. Links still work.

picture of annotations

/* || Epistemological status styling via Highlighting */
.markdown-preview-view mark {
    background-color: var(--background-primary);
    color: var(--text-faint);
    font-size: var(--font-small);
    font-style: italic;
}

/* unresolved links */
.markdown-preview-view mark .internal-link.internal-link.is-unresolved {
  color: #a4a4a4
}

/* formatting internal links */
.markdown-preview-view mark .internal-link {
  color: var(--text-faint);
  font-style: normal;
}
 /* hover on internal links */
.markdown-preview-view mark .internal-link:hover {
  color: var(--text-faint);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--text-accent-hover-rgba);
}

/* Special formatting for "Level of Certainty" and "Level of Effort" */
.markdown-preview-view mark .internal-link[data-href^='Level of Certainty'] {
      font-weight: 500;
      font-style: normal;
      color: var(--text-muted);

}

.markdown-preview-view mark .internal-link[data-href^='Level of Effort'] {
      font-weight: 500;
      font-style: normal;
      color: var(--text-muted);

}

Site logo

picture of my digital garden

Having a nice logo can make all the difference.

.site-body-left-column-site-name {
  text-align: center;
  margin: 0 auto;
}
.site-body-left-column-site-name::before {
    background: none;
    display: block;
    content: url(path-to-your-logo.png);
    width: 60%;
    margin: 0 auto;
}

Hiding files in navigation

I use this to simplify navigation for the user while keeping the search bar. Be aware that your notes are only hidden in the overview, they are still visible in search.

Here, you specify which items you do not want to be hidden. So swap these for which ones you want to be visible.

.tree-item-self:not([data-path^='Bible Study Kit']):not([data-path^='Scripture (WEB)']):not([data-path^='+Welcome']):not([data-path^='Books MOC']):not([data-path^='Contact me']) {
  display: none;
}

If you find value in this and want to contribute, I'd love for you to sponsor my reading habit on patreon.