Limit content styles only to body elements Global styles have been a pain point.

Changes

2 changed files (+175/-164)

• page_builder/default_theme/components/atoms/hast_renderer.tsx
  • @@ -7,6 +7,7 @@ /** @jsxFrag Fragment */
    import type * as Hast from "../../../../deps/esm.sh/hast/types.ts"; import type * as Mdast from "../../../../deps/esm.sh/mdast/types.ts"; + import { h } from "../../../../deps/deno.land/x/nano_jsx/mod.ts"; import * as jsxRuntime from "../../../../deps/deno.land/x/nano_jsx/jsx-runtime/index.ts"; import { toJsxRuntime } from "../../../../deps/esm.sh/hast-util-to-jsx-runtime/mod.ts"; import * as HastToJSXRuntime from "../../../../deps/esm.sh/hast-util-to-jsx-runtime/mod.ts";
  • @@ -22,10 +23,177 @@ } from "../../../../content_parser/obsidian_markdown.ts";
    import { parseOfmCalloutNode } from "../../../../content_parser/obsidian_markdown/mdast_util_ofm_callout.ts"; import { syntaxHighlightingHandlers } from "../../mdast/syntax_highlighting_handlers.ts"; - import { join as joinCss } from "../../css.ts"; + import { css, join as joinCss } from "../../css.ts"; import * as callout from "../from-hast/callout.tsx"; - export const styles = joinCss(callout.styles); + const enum C { + Wrapper = "a--hr", + } + + const ownStyles = css` + .${C.Wrapper} a { + color: var(--color-fg-sub); + font-weight: 500; + text-decoration: underline; + transition: color 0.15s ease; + } + + .${C.Wrapper} a:hover { + color: var(--color-primary); + } + + .${C.Wrapper} p { + margin: 0; + margin-top: calc(var(--baseline) * 1rem); + } + + .${C.Wrapper} pre { + margin: 0; + margin-top: calc(var(--baseline) * 1rem) !important; + padding: calc(var(--baseline) * 1rem) 1em !important; + line-height: calc(var(--baseline) * 1rem); + max-width: 100%; + font-size: 1rem; + + background-color: var(--color-fg); + color: var(--color-bg); + border-radius: calc(1rem / 4); + overflow-x: auto; + } + + .${C.Wrapper} pre > code { + all: unset; + } + + .${C.Wrapper} code { + margin: 0 0.2em; + padding: calc(1rem / 4); + + background-color: var(--color-bg-accent); + color: var(--color-fg-sub); + border-radius: calc(1rem / 4); + font-family: "Ubuntu Mono", monospace; + } + + .${C.Wrapper} pre > code .token.comment { + font-style: italic; + } + + .${C.Wrapper} a, + .${C.Wrapper} time, + .${C.Wrapper} span, + .${C.Wrapper} code, + .${C.Wrapper} sup, + .${C.Wrapper} small, + .${C.Wrapper} s, + .${C.Wrapper} b, + .${C.Wrapper} i { + line-height: 1; + } + + .${C.Wrapper} button { + font-family: inherit; + } + + .${C.Wrapper} s, + .${C.Wrapper} del { + color: var(--color-fg-sub); + text-decoration: line-through; + } + + .${C.Wrapper} b { + font-weight: bold; + } + + .${C.Wrapper} i { + font-style: italic; + } + + .${C.Wrapper} ul { + margin: 0; + margin-top: calc(var(--baseline) * 1rem); + padding-left: 1.5em; + } + + .${C.Wrapper} ul ul { + margin-top: 0; + } + + .${C.Wrapper} h1, + .${C.Wrapper} h2, + .${C.Wrapper} h3 { + font-weight: 700; + color: var(--color-fg-sub); + } + + .${C.Wrapper} h1 { + margin: 0; + margin-top: calc(var(--baseline) * 2rem); + line-height: calc(var(--baseline) * 2rem); + } + + .${C.Wrapper} h2 { + margin: 0; + margin-top: calc(var(--baseline) * 2rem); + } + + .${C.Wrapper} h3, + .${C.Wrapper} h4, + .${C.Wrapper} h5, + .${C.Wrapper} h6 { + margin: 0; + margin-top: calc(var(--baseline) * 1rem); + + font-weight: 600; + } + + .${C.Wrapper} table { + border-spacing: 0; + margin: 0; + margin-top: calc(var(--baseline) * 0.5rem); + width: 100%; + } + + .${C.Wrapper} thead { + background-color: var(--color-bg-accent); + } + + .${C.Wrapper} th { + font-weight: 500; + padding: calc(var(--baseline) * 0.25rem) 1em; + } + + .${C.Wrapper} td { + padding: calc(var(--baseline) * 0.5rem) 1em; + } + + .${C.Wrapper} tbody td { + position: relative; + } + + .${C.Wrapper} tbody td::after { + content: ""; + position: absolute; + left: 0; + right: 0; + bottom: 0; + border-bottom: 1px solid var(--color-fg-light); + } + + .${C.Wrapper} hr { + margin: 0; + margin-top: calc(var(--baseline) * 1rem); + } + + .${C.Wrapper} img { + max-width: 100%; + } + .${C.Wrapper} img:not(:first-child) { + margin-top: calc(var(--baseline) * 1rem); + } + `; + + export const styles = joinCss(ownStyles, callout.styles); function nanoifyProps(props: HastToJSXRuntime.Props): HastToJSXRuntime.Props { const ret: HastToJSXRuntime.Props = {};
  • @@ -123,5 +291,9 @@ node: Hast.Nodes;
    } export function View({ node }: ViewProps) { - return render(node); + return ( + <div className={C.Wrapper}> + {render(node)} + </div> + ); }
• page_builder/default_theme/components/global_styles.ts
  • @@ -93,155 +93,6 @@ ::after {
    box-sizing: border-box; } - a { - color: var(--color-fg-sub); - font-weight: 500; - text-decoration: underline; - transition: color 0.15s ease; - } - - a:hover { - color: var(--color-primary); - } - - p { - margin: 0; - margin-top: calc(var(--baseline) * 1rem); - } - - pre { - margin: 0; - margin-top: calc(var(--baseline) * 1rem) !important; - padding: calc(var(--baseline) * 1rem) 1em !important; - line-height: calc(var(--baseline) * 1rem); - max-width: 100%; - font-size: 1rem; - - background-color: var(--color-fg); - color: var(--color-bg); - border-radius: calc(1rem / 4); - overflow-x: auto; - } - - pre > code { - all: unset; - } - - code { - margin: 0 0.2em; - padding: calc(1rem / 4); - - background-color: var(--color-bg-accent); - color: var(--color-fg-sub); - border-radius: calc(1rem / 4); - font-family: "Ubuntu Mono", monospace; - } - - pre > code .token.comment { - font-style: italic; - } - - a, - time, - span, - code, - sup, - small, - s, - b, - i { - line-height: 1; - } - - button { - font-family: inherit; - } - - s, - del { - color: var(--color-fg-sub); - text-decoration: line-through; - } - - b { - font-weight: bold; - } - - i { - font-style: italic; - } - - ul { - margin: 0; - margin-top: calc(var(--baseline) * 1rem); - padding-left: 1.5em; - } - - ul ul { - margin-top: 0; - } - - h1, - h2, - h3 { - font-weight: 700; - color: var(--color-fg-sub); - } - - h1 { - margin: 0; - margin-top: calc(var(--baseline) * 2rem); - line-height: calc(var(--baseline) * 2rem); - } - - h2 { - margin: 0; - margin-top: calc(var(--baseline) * 2rem); - } - - h3, - h4, - h5, - h6 { - margin: 0; - margin-top: calc(var(--baseline) * 1rem); - - font-weight: 600; - } - - table { - border-spacing: 0; - margin: 0; - margin-top: calc(var(--baseline) * 0.5rem); - width: 100%; - } - - thead { - background-color: var(--color-bg-accent); - } - - th { - font-weight: 500; - padding: calc(var(--baseline) * 0.25rem) 1em; - } - - td { - padding: calc(var(--baseline) * 0.5rem) 1em; - } - - tbody td { - position: relative; - } - - tbody td::after { - content: ""; - position: absolute; - left: 0; - right: 0; - bottom: 0; - border-bottom: 1px solid var(--color-fg-light); - } - h1:hover > a[data-hash-link], h2:hover > a[data-hash-link], h3:hover > a[data-hash-link],
  • @@ -265,18 +116,6 @@ text-decoration: underline;
    } a[data-hash-link]:focus { opacity: 1; - } - - img { - max-width: 100%; - } - img:not(:first-child) { - margin-top: calc(var(--baseline) * 1rem); - } - - hr { - margin: 0; - margin-top: calc(var(--baseline) * 1rem); } /* Syntax highlight */