[Fix] Gap between banner and content of the note

[ElsaTam]

Hi!

This plugin is great and has a lot of users. I have seen a lot of people asking for a way to remove the gap between the banner and the content, as well as hiding the metadata that can sometimes appear underneath the banner.

Solution 1: One simple solution is to set the properties visibility to "Hidden" (Settings > Editor > Display > Properties in document) in your whole vault.

Solution 2: If you want to hide the properties under the banner but keep them visible where you don't have a banner, I have made a CSS snippet that should fix it.

body {
    --banner-gap: 0px;
}

/* Remove meta data */
.markdown-preview-view:has(.obsidian-banner-wrapper) {
    --metadata-display-reading: none;
}

/* Remove title */
.markdown-preview-view:has(.obsidian-banner-wrapper) .inline-title {
    display: none;
}

/* Adjust height by taking into account file margins */
.markdown-preview-view:has(.obsidian-banner-wrapper) .obsidian-banner-wrapper {
    font-size: 0;
    margin-top: calc(var(--banner-height) - var(--file-margins) + var(--banner-gap));
}

Solution 3: If you want to keep the properties of the note visible just under the banner, someone made another solution here: #157 (comment)