Mirrors/super-productivity
1
0
Fork 0
mirror of https://github.com/johannesjo/super-productivity.git synced 2026-07-18 00:46:45 +00:00
Code Issues Projects Releases Wiki Activity

style: scope heading rules and fix rem baseline regression

Browse source 
Review feedback fixes:

- Move base font-size off <html> so the browser-default 16px root is
  preserved and all rem-based sizing across the app stays unchanged.
- Scope h1-h6 typography to .page-wrapper/.component-wrapper/.markdown
  so Material dialog titles, mat-card-title, mat-toolbar, etc. are
  never silently overridden by bare-tag rules.
- Drop text-rendering: optimizeLegibility; it has measurable cost on
  long scrollable lists and is unnecessary with modern smoothing.
- Drop dead <time>/.time-display tabular-nums selectors.
- Replace hardcoded 'Open Sans' in nav-item and the loading splash
  with the modern system UI stack so the sidenav and splash match
  the rest of the app.
This commit is contained in:
Claude 2026-04-20 11:50:21 +00:00
parent 78f983a9a7
commit 25630bcb4e
No known key found for this signature in database
3 changed files with 62 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/core-ui/magic-side-nav/nav-item/nav-item.component.scss
View file

@ -25,7 +25,7 @@
overflow: hidden;
flex: 1;
min-width: 0;
font-family: 'Open Sans', sans-serif;
font-family: var(--font-primary-stack);
font-weight: 400;
letter-spacing: normal;
color: var(--sidenav-text);

13
src/index.html
View file

@ -179,15 +179,24 @@ TODO configure more restrictive Content-Security-Policy
.app-loading .productivity-tip h2 {
font:
500 20px/32px 'Open Sans',
600 20px/28px -apple-system,
BlinkMacSystemFont,
'Segoe UI Variable Text',
'Segoe UI',
Roboto,
'Helvetica Neue',
sans-serif;
letter-spacing: -0.01em;
margin: 0 0 8px !important;
}
.app-loading .productivity-tip p {
font:
400 14px/20px 'Open Sans',
400 14px/20px -apple-system,
BlinkMacSystemFont,
'Segoe UI Variable Text',
'Segoe UI',
Roboto,
'Helvetica Neue',
sans-serif;
margin: 0 0 8px !important;

93
src/styles/page.scss
View file

@ -17,70 +17,77 @@ app-root,
// Crisper rendering on macOS/iOS and Windows/Linux
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
// Common kerning + contextual ligatures; tabular numerals keep digits aligned
// in tables (time spent, progress %, etc.)
// Common kerning + contextual ligatures
font-feature-settings:
'kern' 1,
'liga' 1,
'clig' 1,
'calt' 1;
}
// Base font-size stays on body only so <html> keeps the browser default 16px
// and `rem`-based sizing across the app is unaffected.
body,
app-root,
.app-frame {
font-size: var(--font-size-md);
line-height: var(--line-height-normal);
letter-spacing: var(--letter-spacing-normal);
}
// Tabular figures for any numeric display (durations, counts, time)
.tabular-nums,
time,
.time-display {
.tabular-nums {
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
}
// Headings: tighter tracking + snug leading for a more modern feel.
// These are non-Material heading tags; Material components keep their own scale.
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: inherit;
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-snug);
letter-spacing: var(--letter-spacing-tight);
color: var(--text-color-most-intense);
}
// Headings — only applied within standard content containers so Material
// component typography (dialog titles, mat-card-title, mat-toolbar, etc.)
// is never silently overridden by bare-tag rules.
.page-wrapper,
.component-wrapper,
.markdown {
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: inherit;
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-snug);
letter-spacing: var(--letter-spacing-tight);
}
h1 {
font-size: var(--font-size-3xl);
letter-spacing: var(--letter-spacing-tighter);
line-height: var(--line-height-tight);
}
h1 {
font-size: var(--font-size-3xl);
letter-spacing: var(--letter-spacing-tighter);
line-height: var(--line-height-tight);
}
h2 {
font-size: var(--font-size-2xl);
letter-spacing: var(--letter-spacing-tighter);
}
h2 {
font-size: var(--font-size-2xl);
letter-spacing: var(--letter-spacing-tighter);
}
h3 {
font-size: var(--font-size-xl);
}
h3 {
font-size: var(--font-size-xl);
}
h4 {
font-size: var(--font-size-lg);
}
h4 {
font-size: var(--font-size-lg);
}
h5 {
font-size: var(--font-size-md);
}
h5 {
font-size: var(--font-size-md);
}
h6 {
font-size: var(--font-size-sm);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
color: var(--text-color-muted);
h6 {
font-size: var(--font-size-sm);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
color: var(--text-color-muted);
}
}
code,