From 7cea4d94aea3dc25c583c5cb9010d8a54ac4081f Mon Sep 17 00:00:00 2001 From: Lazaro Nixon Date: Mon, 20 Jul 2026 04:07:21 -0300 Subject: [PATCH 1/2] Add --lexxy-text-size variable and convert content font sizes to em Introduce a --lexxy-text-size variable as the base content font size and express heading and small-text sizes in em so they scale proportionally when the base is overridden. Sizes are preserved at the default 1rem. --- app/assets/stylesheets/lexxy-content.css | 13 +++++++------ app/assets/stylesheets/lexxy-variables.css | 3 ++- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/app/assets/stylesheets/lexxy-content.css b/app/assets/stylesheets/lexxy-content.css index 6a06d9539..dc5d9a95a 100644 --- a/app/assets/stylesheets/lexxy-content.css +++ b/app/assets/stylesheets/lexxy-content.css @@ -5,6 +5,7 @@ :where(.lexxy-content) { color: var(--lexxy-color-ink); + font-size: var(--lexxy-text-size); h1, h2, h3, h4, h5, h6 { display: block; @@ -18,12 +19,12 @@ } } - h1 { font-size: 2rem; } - h2 { font-size: 1.5rem; } - h3 { font-size: 1.25rem; } - h4 { font-size: 1rem; } - h5 { font-size: 0.875rem; } - h6 { font-size: 0.75rem; } + h1 { font-size: 2em; } + h2 { font-size: 1.5em; } + h3 { font-size: 1.25em; } + h4 { font-size: 1em; } + h5 { font-size: 0.875em; } + h6 { font-size: 0.75em; } p, ul, diff --git a/app/assets/stylesheets/lexxy-variables.css b/app/assets/stylesheets/lexxy-variables.css index e9d93ced0..6c4b67895 100644 --- a/app/assets/stylesheets/lexxy-variables.css +++ b/app/assets/stylesheets/lexxy-variables.css @@ -71,7 +71,8 @@ /* Typography */ --lexxy-font-base: system-ui, sans-serif; --lexxy-font-mono: ui-monospace, "Menlo", "Monaco", Consolas, monospace; - --lexxy-text-small: 0.875rem; + --lexxy-text-size: 1rem; + --lexxy-text-small: 0.875em; --lexxy-content-margin: 1rem; /* Focus ring */ From b75a4781cbc8d5ac2f950574a4284905e4f073d9 Mon Sep 17 00:00:00 2001 From: Lazaro Nixon Date: Mon, 20 Jul 2026 04:10:56 -0300 Subject: [PATCH 2/2] Remove --lexxy-text-small variable --- app/assets/stylesheets/lexxy-content.css | 4 ++-- app/assets/stylesheets/lexxy-editor.css | 14 +++++++------- app/assets/stylesheets/lexxy-variables.css | 1 - 3 files changed, 9 insertions(+), 10 deletions(-) diff --git a/app/assets/stylesheets/lexxy-content.css b/app/assets/stylesheets/lexxy-content.css index dc5d9a95a..e4c2e5da7 100644 --- a/app/assets/stylesheets/lexxy-content.css +++ b/app/assets/stylesheets/lexxy-content.css @@ -321,7 +321,7 @@ .attachment__caption { color: var(--lexxy-color-text-subtle); display: block; - font-size: var(--lexxy-text-small); + font-size: 0.875em; padding: 1ch; } @@ -335,7 +335,7 @@ box-sizing: border-box; color: var(--lexxy-attachment-icon-color); display: grid; - font-size: var(--lexxy-text-small); + font-size: 0.875em; font-weight: bold; inline-size: auto; overflow: hidden; diff --git a/app/assets/stylesheets/lexxy-editor.css b/app/assets/stylesheets/lexxy-editor.css index 8b1f88966..abbf71f85 100644 --- a/app/assets/stylesheets/lexxy-editor.css +++ b/app/assets/stylesheets/lexxy-editor.css @@ -637,7 +637,7 @@ } span { - font-size: var(--lexxy-text-small); + font-size: 0.875em; } svg { @@ -688,7 +688,7 @@ &.lexxy-editor__toolbar-dropdown--link { [data-dropdown-panel] { - font-size: var(--lexxy-text-small); + font-size: 0.875em; gap: var(--lexxy-toolbar-spacing); inset-inline-start: var(--lexxy-toolbar-spacing); inset-inline-end: var(--lexxy-toolbar-spacing); @@ -710,7 +710,7 @@ color: var(--lexxy-color-text); block-size: var(--lexxy-toolbar-button-size); box-sizing: border-box; - font-size: var(--lexxy-text-small); + font-size: 0.875em; flex: 2; inline-size: 100%; line-height: inherit; @@ -754,7 +754,7 @@ border-start-start-radius: 0; gap: var(--lexxy-toolbar-spacing); flex-direction: column; - font-size: var(--lexxy-text-small); + font-size: 0.875em; inset-inline-start: 0; max-inline-size: var(--max-inline-size); @@ -817,7 +817,7 @@ --floating-tools-radius: calc(var(--lexxy-radius) * 1.5); color: var(--lexxy-color-ink-inverted); - font-size: var(--lexxy-text-small); + font-size: 0.875em; line-height: 1; position: absolute; z-index: 2; @@ -1024,7 +1024,7 @@ border-radius: var(--lexxy-radius); color: var(--lexxy-color-ink); font-family: var(--lexxy-font-base); - font-size: var(--lexxy-text-small); + font-size: 0.875em; font-weight: normal; margin: 0.5ch 0.5ch 0 -0.5ch; padding: 0 2ch 0 1ch; @@ -1053,7 +1053,7 @@ box-shadow: var(--lexxy-shadow); color: var(--lexxy-color-ink); font-family: var(--lexxy-font-base); - font-size: var(--lexxy-text-small); + font-size: 0.875em; list-style: none; inset-block-start: var(--lexxy-prompt-offset-y); inset-inline-start: var(--lexxy-prompt-offset-x); diff --git a/app/assets/stylesheets/lexxy-variables.css b/app/assets/stylesheets/lexxy-variables.css index 6c4b67895..f4cdc82b4 100644 --- a/app/assets/stylesheets/lexxy-variables.css +++ b/app/assets/stylesheets/lexxy-variables.css @@ -72,7 +72,6 @@ --lexxy-font-base: system-ui, sans-serif; --lexxy-font-mono: ui-monospace, "Menlo", "Monaco", Consolas, monospace; --lexxy-text-size: 1rem; - --lexxy-text-small: 0.875em; --lexxy-content-margin: 1rem; /* Focus ring */