obsidian-theme/punkyard_obsidian-theme-air
1
0
Fork 0
mirror of https://github.com/punkyard/obsidian-theme-air.git synced 2026-07-22 05:00:29 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: balanced padding below bullet lists and blockquotes (#45) (#46)

Browse source 
* fix: balanced padding below bullet lists and blockquotes (#45)

Lists and blockquotes had top spacing but no matching bottom
spacing in both reading and live preview modes.

- Reading mode: added margin-bottom to lists (0.8em) and
  blockquotes (0.6em)
- Reading mode: added paragraph-before-list spacing (0.8em)
  symmetric with existing heading-before-list rule
- Live preview: added padding-top on paragraph after list (0.8em)
- Live preview: added padding-top on paragraph after blockquote
  (0.6em)

* fix: use margin-bottom on blockquote lines for external spacing

Live preview: margin-bottom on .HyperMD-quote creates external
space after the blockquote box (beyond the internal padding-bottom).
Reading mode: margin-bottom already on .markdown-rendered blockquote.

Removed the next-sibling padding-top approach — selector chain
may not match actual Obsidian DOM.

* fix: use ::after pseudo-element for blockquote bottom spacing

CM6 measures padding for layout but NOT margins. Previous
margin-bottom approach had no effect. ::after with display:block
and height:0.6em (plus background:--background-primary to mask the
blockquote bg) creates visible transparent gap after the last quote
line. Hidden on consecutive quotes.

* fix: add .cm-content to blockquote sibling selectors for correct specificity

Prior live preview blockquote→paragraph rule was missing
.cm-content in selector chain, giving specificity (0,2,2)
vs the working pattern (0,3,4). Added .cm-content and
restored padding-top approach (::after doesn't work in CM6).

Also added reading mode paragraph-after-blockquote rule for
safety (blockquote + div.el-p with padding-top).

* fix: use transparent border-bottom for blockquote external spacing

padding-bottom and margin-bottom failed. border-bottom uses same
box model as padding (measured by CM6) but with background-clip:
padding-box the background stops at padding edge, so the border
area is transparent — creating visible gap after blockquote bg.

Removed padding-top on next sibling approach entirely.
Reading mode margin-bottom + paragraph sibling rule kept.

* fix: use .mod-cm6 .cm-editor selector for blockquote padding-bottom

The heading padding-bottom rule at .mod-cm6 .cm-editor .HyperMD-header
works. Using IDENTICAL selector for .HyperMD-quote — same specificity,
same cascade position, same CM6 layout measurement.

Reading mode: blockquote gets margin-bottom + blockquote+div.el-p
with padding-top for paragraph-after-blockquote spacing.

* fix(blockquote): drop shadow accent + border-bottom gap

Replace border-left accent with box-shadow drop shadow to avoid W3C
corner artifact between different-width borders. Colored border-bottom
provides structural gap drawn on top of shadow — accent curves with
radius then gets cleanly covered at corner.

Also:
- swap heading font Syne→Orbitron
- add explicit heading font-family rules

* fix: code block border-radius — single-line bump, multi-line flat corners

Replace all-lines bottom-radius + + .HyperMD-codeblock reset
with :has(+ *:not(.HyperMD-codeblock)) for last-line only.
First line keeps :not(.HyperMD-codeblock) + .HyperMD-codeblock
for top-radius. Same pattern as blockquote fix.

* feat(font): custom heading font via local woff2 file

- headings-font.woff2 (Exo 2) replaces base64-embedded font
- @font-face points to local file, family='HeadingFont'
- delete orphaned DMSerifDisplay.woff2
- README: add swap instructions (replace file, keep name)

Closes #47

---------

Co-authored-by: nmn <punkyard@users.noreply.github.com>
This commit is contained in:
pun kyard 2026-07-14 17:33:57 +02:00 committed by GitHub
parent 91506fea12
commit ed111bd59c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 89 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -16,13 +16,14 @@ Choose your favorite **accent color** from *Settings > Options > Appearance > Ac
- One uniform surface, no pane borders
- Your chosen **accent color** propagates to headings (H1–H6), bold, italic, highlights, tags, active states, checkboxes, and list bullets
- `headings-font.woff2` is the font file used for all headings and can be replaced
- Text: near-white normal, stepped grays for muted/faint
- Zero border-radius throughout
- **Ribbon** hides until hover
- **Properties** and Add property hide until hover
- Active line highlights the line number
- **Tags**: accent text, no background or border
- Supports **dark** and **light** mode.
- Supports **dark** and **light** mode
| dark | light |
| ---------------------------- | ------------------------------- |
@ -30,6 +31,7 @@ Choose your favorite **accent color** from *Settings > Options > Appearance > Ac
![active](assets/active-line.png)
---
### License

BIN
Syne.woff2
View file

Binary file not shown.

BIN
headings-font.woff2 Normal file
View file

Binary file not shown.

131
theme.css
View file

@ -11,14 +11,14 @@
/* ============================================================
FONTS
============================================================ */
@font-face {
font-family: 'Syne';
src: url('Syne.woff2') format('woff2');
font-weight: 400 800;
font-family: 'HeadingFont';
src: url('headings-font.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
}
/* ============================================================
GLOBAL — both dark and light modes
============================================================ */
@ -90,12 +90,12 @@ body {
--h4-color: var(--color-accent);
--h5-color: color-mix(in oklch, var(--color-accent), black 12%);
--h6-color: color-mix(in oklch, var(--color-accent), black 25%);
--h1-font: 'Syne', sans-serif;
--h2-font: 'Syne', sans-serif;
--h3-font: 'Syne', sans-serif;
--h4-font: 'Syne', sans-serif;
--h5-font: 'Syne', sans-serif;
--h6-font: 'Syne', sans-serif;
--h1-font: 'HeadingFont', sans-serif;
--h2-font: 'HeadingFont', sans-serif;
--h3-font: 'HeadingFont', sans-serif;
--h4-font: 'HeadingFont', sans-serif;
--h5-font: 'HeadingFont', sans-serif;
--h6-font: 'HeadingFont', sans-serif;
/* Shadows */
--shadow-s: none;
@ -266,12 +266,12 @@ body.theme-dark .view-header {
--h4-color: var(--color-accent);
--h5-color: color-mix(in oklch, var(--color-accent), white 12%);
--h6-color: color-mix(in oklch, var(--color-accent), white 25%);
--h1-font: 'Syne', sans-serif;
--h2-font: 'Syne', sans-serif;
--h3-font: 'Syne', sans-serif;
--h4-font: 'Syne', sans-serif;
--h5-font: 'Syne', sans-serif;
--h6-font: 'Syne', sans-serif;
--h1-font: 'HeadingFont', sans-serif;
--h2-font: 'HeadingFont', sans-serif;
--h3-font: 'HeadingFont', sans-serif;
--h4-font: 'HeadingFont', sans-serif;
--h5-font: 'HeadingFont', sans-serif;
--h6-font: 'HeadingFont', sans-serif;
}
/* Bold, italic, highlight — direct element overrides */
@ -484,6 +484,14 @@ body .nav-files-container .nav-folder-children .nav-folder-children .nav-folder-
HEADING AND PARAGRAPH SPACING
============================================================ */
/* Heading font — explicit rules (vars alone don't apply in Obsidian) */
.markdown-rendered h1, .HyperMD-header-1 { font-family: 'HeadingFont', sans-serif !important; }
.markdown-rendered h2, .HyperMD-header-2 { font-family: 'HeadingFont', sans-serif !important; }
.markdown-rendered h3, .HyperMD-header-3 { font-family: 'HeadingFont', sans-serif !important; }
.markdown-rendered h4, .HyperMD-header-4 { font-family: 'HeadingFont', sans-serif !important; }
.markdown-rendered h5, .HyperMD-header-5 { font-family: 'HeadingFont', sans-serif !important; }
.markdown-rendered h6, .HyperMD-header-6 { font-family: 'HeadingFont', sans-serif !important; }
/* Heading space ABOVE — reading mode (hierarchical: H1 most, H4-H6 equal) */
.markdown-rendered h1 { margin-top: 2.5em; }
.markdown-rendered h2 { margin-top: 2em; }
@ -546,6 +554,17 @@ body .nav-files-container .nav-folder-children .nav-folder-children .nav-folder-
padding-top: 0.8em;
}
/* Space after last list item when followed by a text paragraph */
.markdown-source-view.mod-cm6.is-live-preview .cm-content .HyperMD-list-line + .cm-line:not(.HyperMD-list-line):not(.HyperMD-header):not(.HyperMD-codeblock) {
padding-top: 0.8em;
}
/* List after paragraph — reading mode */
.markdown-rendered div.el-p + div.el-ul,
.markdown-rendered div.el-p + div.el-ol {
padding-top: 0.8em;
}
/* List after heading — reading mode */
.markdown-rendered div.el-h1 + div.el-ul,
.markdown-rendered div.el-h2 + div.el-ul,
@ -644,17 +663,7 @@ body {
color: var(--inline-code-color);
}
/* Code block group — round outer corners (first line top, last line bottom) */
.theme-dark .HyperMD-codeblock,
.theme-light .HyperMD-codeblock {
border-bottom-left-radius: var(--radius);
border-bottom-right-radius: var(--radius);
}
.theme-dark .HyperMD-codeblock + .HyperMD-codeblock,
.theme-light .HyperMD-codeblock + .HyperMD-codeblock {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/* Code block — round outer corners (first line top, last line bottom) */
.theme-dark .cm-content :not(.HyperMD-codeblock) + .HyperMD-codeblock,
.theme-light .cm-content :not(.HyperMD-codeblock) + .HyperMD-codeblock,
.theme-dark .cm-content > .HyperMD-codeblock:first-child,
@ -662,6 +671,16 @@ body {
border-top-left-radius: var(--radius);
border-top-right-radius: var(--radius);
}
.theme-dark .HyperMD-codeblock:has(+ *:not(.HyperMD-codeblock)),
.theme-light .HyperMD-codeblock:has(+ *:not(.HyperMD-codeblock)) {
border-bottom-left-radius: var(--radius);
border-bottom-right-radius: var(--radius);
}
/* Code block inside list — bg only in content area, respects list indent padding */
.HyperMD-codeblock.HyperMD-list-line-nobullet {
background-clip: content-box;
}
/* ============================================================
TABLES
@ -707,34 +726,50 @@ body .markdown-source-view.mod-cm6 tbody tr:nth-child(even) {
background-color: var(--blockquote-background-color);
padding: 0.6em 1em;
margin-inline-start: 1.5em;
margin-bottom: 0.6em;
color: var(--text-normal);
font-size: 1.05em;
letter-spacing: 0.02em;
border-radius: var(--radius);
}
/* Live preview — background + indent on all lines */
.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote {
background-color: var(--blockquote-background-color);
margin-inline-start: 1.5em;
padding-inline: 1em;
color: var(--text-normal);
font-size: 1.05em;
letter-spacing: 0.02em;
border-radius: var(--radius);
}
/* Live preview — top padding on first quote line only */
.markdown-source-view.mod-cm6.is-live-preview .cm-content > :not(.HyperMD-quote) + .HyperMD-quote {
/* Paragraph after blockquote — reading mode */
.markdown-rendered blockquote + div.el-p {
padding-top: 0.6em;
}
/* Live preview — bottom padding on last quote line only */
/* Live preview — background + indent + left accent on all lines */
.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote {
padding-bottom: 0.6em;
background-color: var(--blockquote-background-color);
background-clip: padding-box;
margin-inline-start: calc(1.5em + 2px);
padding-inline: 1em;
border-left: none;
box-shadow: -2px 0 0 0 var(--color-accent);
color: var(--text-normal);
font-size: 1.05em;
letter-spacing: 0.02em;
position: relative;
}
.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote + .HyperMD-quote {
padding-bottom: 0;
/* Hide Obsidian default ::before accent line */
.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote::before {
display: none;
}
/* Live preview — top padding + top rounding on first quote line only */
.markdown-source-view.mod-cm6.is-live-preview .cm-content > :not(.HyperMD-quote) + .HyperMD-quote {
padding-top: 0.6em;
border-top-left-radius: var(--radius);
border-top-right-radius: var(--radius);
}
/* Live preview — bottom gap + bottom rounding on last quote line only */
.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote:has(+ *:not(.HyperMD-quote)) {
border-left: none;
box-shadow: -2px 0 0 0 var(--color-accent);
border-bottom: 0.6em solid var(--blockquote-background-color);
border-bottom-left-radius: var(--radius);
border-bottom-right-radius: var(--radius);
margin-inline-start: calc(1.5em + 2px);
}
/* ============================================================
@ -746,6 +781,12 @@ body .markdown-source-view.mod-cm6 tbody tr:nth-child(even) {
padding-inline-end: 0.5em;
}
/* Reading mode: bottom spacing after list */
.markdown-rendered div.el-ul,
.markdown-rendered div.el-ol {
margin-bottom: 0.8em;
}
/* ============================================================
TAGS
============================================================ */