Can the line size of the frontmatter be smaller?

[JimK]

HI, I need some CSS help:

What I’m trying to do

I’d like to make the font and line height of frontmatter smaller than the normal document text. In the screenshot below I want to make the frontmatter text type, created, modified closer to each other.

Things I have tried

I used code from this post and was able to reduce the font size but the lines stayed the same height so the whole front matter was the same size but with small text. I tried adding line-height, border, padding and maybe a few other things but nothing seemed to work, line-height did do a little but no matter how small I made it there was still a large gap between text.

Here is my modified code from the link above.

.is-live-preview .cm-line .cm-hmd-frontmatter {
  line-height: .2em !important;
}
.is-live-preview .cm-line:not(.cm-active) > .cm-hmd-frontmatter:not(.cm-meta) {
  font-size: .6em;
  font-weight: 600;
  line-height: .2em !important;
  
}
.is-live-preview .cm-line > .cm-hmd-frontmatter:not(.cm-meta) .cm-selection,
.is-live-preview .cm-line > .cm-hmd-frontmatter:not(.cm-meta).cm-selection {
  line-height: .2em !important;
}

[NomarCub]

I’m not sure this can be solved without JavaScript. Probably the HTML element affected by line-height is the line, but you can’t recognize if a line is frontmatter in and of itself. You can only do that based on its child elements, and you can’t make a selector based on a parent element in CSS.

[JimK]

Thanks for the details @NomarCub, I was thinking something along those lines but wasn’t sure since I only know some CSS.

Someone in the discord chat named sailKite did find a working solution for me though using a plug in and CSS. If anyone else wants to do it here is how:

Install Community Plugin: Dynamic Highlights

use this code in it’s settings:

{
  "frontmatter-delimiter": {
    "class": "frontmatter-delimiter",
    "color": "#DF121200",
    "regex": true,
    "query": ".[\\w\\W]*?",
    "mark": [
      "line"
    ],
    "css": ".workspace div.cm-line:not(.frontmatter-delimiter, .HyperMD-codeblock) {\n  font-size: .6em;\n  font-weight: 600;\n  line-height: .6em;\n}"
  }
}

Result: