Tweaking CSS in Tangent

ID

log/2025-03-08-tweaking-css-in-tangent

Created At

2025-03-08 12:00 -0700

Linked By

Adjusting css rules for tangent.

Hide filename top header if there's a level 1 header.

:where(main):has(article h1) > :where(header) {
    display: none;
}

Colorize emphasized text and strongly emphasized text so ADHD brain notices there might be something important there.

:where(main) :is(em, strong) {
  color: var(--warningTextColor);
}

Diminish my big-ass frontmatter so it's out of the way until editing time.

:where(div.frontMatter):not(:has([data-focus="focused"])) {
  max-height: 5em;
  overflow-y: scroll;
  background-color: var(--accentDeemphasizedBackgroundColor);
  opacity: 0.6;
}

div.frontMatter:not(:has([data-focus="focused"])) :where(.start) {
  display: none;
}

Add line numbers to code blocks to see if I can. Not sure if I'll keep it, but it's handy to know!

:where(pre) > :where(code) {
  counter-reset: line-number;
}

:where(pre) > :where(code) :where(div.line)::before {
  content: counter(line-number);
  counter-increment: line-number;
  display: inline-block;
  left: var(--spaceWidth);
  margin-right: calc(var(--spaceWidth) * 2.5);
  min-width: 1.5rem;
  opacity: .3;
  position: sticky;
  text-align: right;
}