Logseq-like theme

Tricks & Techniques
1

What this theme brings:

  • softer colors on links to make them more… link-looking
  • more spacing and a fat colored left border on code blocks and quote blocks
  • get rid off monospace font (except for code)

It looks like this :

image
image845×833 33.2 KB

Liberally adapted from how logseq renders pages by default.

space-style snippet 
/* Avoid scrollbar (hackish) */
.sb-lua-bottom-widget .content,
.sb-lua-top-widget .content 
{
  overflow-x: hidden !important;
}
/* Less prominent links */
html {
--editor-wiki-link-page-background-color: transparent !important;
  --link-color: #1b6898 !important;
}


/* Nicer font */

html *:not(.sb-line-blockquote) {
  --editor-font: Inter, sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;

}


a:hover {
  text-decoration: underline !important;
}
/* Spacing arround blocks */
.sb-line-blockquote, 
.sb-line-fenced-code,
.sb-frontmatter
{
  padding: 0 1em !important;
}
.sb-line-fenced-code,
.sb-frontmatter {
    font-family: "iA-Mono", "Menlo" !important;
}
.sb-admonition-title {
  padding: .5em 1em !important;
}


/* Fat left border on blocks */
.sb-line-fenced-code {
  border-left: 4px solid var(--subtle-color) !important;
}

 .sb-line-blockquote:not(.sb-admonition) {
  border-left: 4px solid var(--editor-code-string-color) !important;
}

/* Hide bullets on TODO lists */
[data-external-task-ref] {
  margin-left: -1.5em !important;
}

.sb-line-task .cm-list-bullet {
  display: none !important;
}

/* Lua block code styling : lighter */

.sb-lua-directive-block:not(:hover), .sb-lua-directive-inline {
  border-color: transparent !important;
}
1 Like