CSS Snippets: Typography

CSS 片段:排版

Obsidian CSS 变量

CSS 变量的使用1,包括基础样式、组件、编辑器、插件、窗口以及 Obsidian Publish 相关的 CSS 变量。

  • Foundations:提供了抽象的变量,用于设置颜色、间距、排版和更多基础样式。这包括了边框颜色光标图标层级、圆角、间距和排版等方面的变量
  • Components:介绍了应用中使用的交互式组件,包括按钮复选框、颜色输入、对话框、拖拽功能、缩进指引、模态框、多选、导航、弹出窗口、滑块、标签页、文本输入和开关等
  • Editor:列出了用于编辑和阅读文本文件的内容类型和变量,如区块、块引用、旁白、代码块、嵌入、文件、脚注、标题、水平分割线、行内标题、链接、列表、属性、表格和标签
  • Plugins:提供了与核心插件界面元素相关的变量,例如画布、文件资源管理器、图表、搜索等
  • Window:包含了与 Obsidian 应用窗口外观相关的变量,如分隔条、ribbon 栏、滚动条、状态栏、窗口框架和工作区
  • Obsidian Publish:为 Obsidian Publish 网站提供了一系列变量,用于定制网站字体、头部、导航、组件、侧边栏和页面样式

本片段用到的定义

基础·颜色

Obsidian 应用程序中使用的颜色变量,包括基础色彩、辅助色彩、扩展色彩、黑白色彩以及语义色彩2

  • 基础色彩 是一组中性色调,从浅到深,主要由主题定义。
  • 辅助色彩 用于突出交互元素,如链接和主要按钮,用户可以在 Obsidian 应用的设置中自定义。
  • 扩展色彩 包括状态信息(错误、警告、成功)、提醒框、语法高亮、图谱节点和画布元素的颜色,每种颜色都有一个额外的 RGB 变量,以便创建带有不同不透明度的颜色。
  • 黑白色彩 用于创建带有不透明度的遮罩层,应避免更改这些变量的值。
  • 语义色彩 基于预期用途从基础色彩派生,包括表面颜色、交互式颜色和文本颜色。

基础·排版

Obsidian 文档编辑器中与排版相关的 CSS 变量,包括字体、字号、字重、文本格式、行高和段落间距等3

  • 字体选择:Obsidian 使用不同的 CSS 变量来定义 UI 元素、编辑器文本和代码块的字体。
  • 字号设置:Obsidian 采用相对单位(em)和固定单位(px)来设置不同上下文环境下的字号。
  • 字重定义:Obsidian 为不同的文本重要性定义了一系列字重选项,并推荐使用--bold-modifier来调整加粗文本的字重。
  • 文本格式:Obsidian 提供了相关的 CSS 变量来控制加粗和斜体文本的样式。
  • 行高设置:Obsidian 定义了标准行高和紧凑行高,以适应不同的布局需求。
  • 段落间距:Obsidian 通过 CSS 变量控制标题和段落之间的间距。

粗体/斜体/高亮 的定义

strong {
	font-weight: calc(var(--font-weight) + var(--bold-modifier));
	color: var(--bold-color);
}

em {
	font-style: normal;
	color: var(--italic-color);
}

mark {
	background-color: var(--text-highlight-bg);
	color: var(--text-normal);
}

编辑器·标题

标题样式的 CSS 变量列表及其描述4

Obsidian 编辑器的标题样式相关的 CSS 变量列表包括了文本颜色字体系列行高字号字体风格字体变体字体粗细等多个方面。这些变量可以用来自定义 Markdown 标题深度语法的文本颜色,以及 H1 至 H6 标题的文本颜色、字体系列、行高、字号、字体风格、字体变体和字体粗细。此外,还有一个用于设置标题上方间距的变量,其详细信息可以在Typography 页面中找到。

Typography.css

采样自 AnupPuccin 5 主题 .rosepine-light

:root {
  --color-red: rgb(180, 99, 122);
  --color-maroon: rgb(180, 99, 122);
  --color-mauve: rgb(144, 122, 169);
  --color-peach: rgb(214, 129, 125);
  --color-yellow: rgb(234, 157, 52);
  --color-green: rgb(86, 148, 159);
  --color-teal: rgb(86, 148, 159);
  --color-lavender: rgb(114, 135, 253);

  --bold-color: var(--color-red);
  --italic-color: var(--color-green);
  --text-highlight-bg: var(--color-yellow);

  --h1-color: var(--color-red);
  --h2-color: var(--color-peach);
  --h3-color: var(--color-green);
  --h4-color: var(--color-teal);
  --h5-color: var(--color-lavender);
  --h6-color: var(--color-mauve);
}
Last updated on 2024-11-09 12:36
Built with Hugo