search

aidenlx / obsidian-icon-shortcodes

Obsidian Plugin: Insert emoji and custom icons with shortcodes
MIT License
138 stars 11 forks source link

Icons oversized in headers #63

Open zambony opened 1 year ago

zambony commented 1 year ago

Icons inserted into a header are oversized. Emojis are fine.

image

Temporarily fixed with a snippet:

.isc-icon.isc-svg-icon {
    height: 1em;
    width: 1em;
    vertical-align: middle;
}

.isc-icon.isc-svg-icon > svg {
    max-width: 1em;
    max-height: 1em;
}

image

cam-rod commented 1 year ago

Seems to be a recurrence of #59, Obsidian changed the meaning of the --h#-size variable, but I'm not sure what to. Anyways, I modified @p-laranjinha's script from the previous issue, and this seems to work in v1.3.4:

.markdown-source-view .HyperMD-header-1 .isc-icon>img,
.markdown-source-view .HyperMD-header-1 .isc-icon>svg,
.markdown-preview-view h1 .isc-icon>img,
.markdown-preview-view h1 .isc-icon>svg {
    height: calc(var(--h1-line-height) * 1em); /* --h#-line-height is unitless */
    width: calc(var(--h1-line-height) * 1em);
}

.markdown-source-view .HyperMD-header-2 .isc-icon>img,
.markdown-source-view .HyperMD-header-2 .isc-icon>svg,
.markdown-preview-view h2 .isc-icon>img,
.markdown-preview-view h2 .isc-icon>svg {
    height: calc(var(--h2-line-height) * 1em);
    width: calc(var(--h2-line-height) * 1em);
}

.markdown-source-view .HyperMD-header-3 .isc-icon>img,
.markdown-source-view .HyperMD-header-3 .isc-icon>svg,
.markdown-preview-view h3 .isc-icon>img,
.markdown-preview-view h3 .isc-icon>svg {
    height: calc(var(--h3-line-height) * 1em);
    width: calc(var(--h3-line-height) * 1em);
}

.markdown-source-view .HyperMD-header-4 .isc-icon>img,
.markdown-source-view .HyperMD-header-4 .isc-icon>svg,
.markdown-preview-view h4 .isc-icon>img,
.markdown-preview-view h4 .isc-icon>svg {
    height: calc(var(--h4-line-height) * 1em);
    width: calc(var(--h4-line-height) * 1em);
}

.markdown-source-view .HyperMD-header-5 .isc-icon>img,
.markdown-source-view .HyperMD-header-5 .isc-icon>svg,
.markdown-preview-view h5 .isc-icon>img,
.markdown-preview-view h5 .isc-icon>svg {
    height: calc(var(--h5-line-height) * 1em);
    width: calc(var(--h5-line-height) * 1em);
}

.markdown-source-view .HyperMD-header-6 .isc-icon>img,
.markdown-source-view .HyperMD-header-6 .isc-icon>svg,
.markdown-preview-view h6 .isc-icon>img,
.markdown-preview-view h6 .isc-icon>svg {
    height: calc(var(--h6-line-height) * 1em);
    width: calc(var(--h6-line-height) * 1em);
}