Sharing new Minimal Theme + iA Writer Flair + Questions!

[Ehsan]

Hey Obsidian forum,

I have really been enjoying the minimal theme by kepano but wanted to see what changes I could make to polish up a few more things.

I also re-used a few snippets from here Meta Post - Common CSS Hacks

and this is all directly inspired by iA Writer https://ia.net/writer and using their custom free fonts.

I am curious what people think and if they have any suggestions.

I had a hard time selecting a few things and wondering if anyone can help me with the following:

• How can I modify the height of a popover? I modified the width but not the height.
• Are the collapsible bullets broken? Did any of the custom CSS break them?
• Can I set the width of the notes (when there are multiple notes open) to have a dynamic width? ie I want them to be wider on my large monitor.
• Is there a better way to find the right CSS selectors other than just opening up one div at a time in the inspector?

[Klaas]

Re the height of the popover, check out the latest Obsdn-Dark-Rmx theme on this forum: that is one of the improvements the dev @_ph made to his theme.

[gandalfthegrey]

Hey Ehsan, your font looks excellent. Do you have any instructions on how to update your existing font to IA writer’s font? Thanks!

[Ehsan]

Thanks, yea I am a huge fan. You can download the fonts for free from here https://ia.net/downloads#fonts

Once you have those fonts installed on your coputer, here is the code I am using to change the fonts. I really like the large font but I will sometimes zoom out with CMD±, you can also adjust these numbers to find the right size for you.

body, input, button, .cm-s-obsidian .cm-formatting-hashtag, .cm-s-obsidian {
  font-family:iAWriterMonoS-Regular,-apple-system,BlinkMacSystemFont,sans-serif !important;
  line-height: 1.8;
  font-size: 20px;
  -webkit-font-smoothing:subpixel-antialiased !important;
}


.view-header-title {
	font-size: 17px;
  font-weight:100;
  margin-left:3px;
  color: #666 !important;
  font-family:  iAWriterQuattroS-Regular,-apple-system,BlinkMacSystemFont,sans-serif !important;
}

.tag-pane-tag {
  font-size:var(--font-small) !important;
  color:var(--text-muted);
  font-family: iAWriterQuattroS-Regular, ,-apple-system,BlinkMacSystemFont,sans-serif;
  letter-spacing: -.4px;
}

[Ehsan]

Thanks for the tip! found what I needed

.popover.hover-popover {
    position: absolute;
    z-index: var(--layer-popover);
    max-height: 550px;
    /* was 300 */
    min-height: 100px;
    width: 650px;
    overflow: hidden;
    padding: 0;
    border-bottom: none;
}

.popover h1 {
	font-size: 24px;
}

.popover {
	font-size: 18px;
	border-radius: 14px;
}

[alinares]

That looks really nice! How did you manage to move the header #s out of the margins, to the left?

[Ehsan]

Yes! Makes me so much happier to have things left aligned like this. I hope to clean up a few more things, fix some bugs and hopefully share with the community soon.

Here is how I am left aligning everything, the exact numbers probably depend on your font sizes:

/* Left align titles in editor */

.cm-s-obsidian pre.HyperMD-header :first-child {
  margin-left: -42px;
}

.CodeMirror-gutter-elt {
  margin-left: -40px;
}

One of my bugs is somewhat related to this and I havent been able to track down the source of the issue. For some reason I can’t collapse the bullet nodes.

[Rishi]

@Ehsan

Is there a better way to find the right CSS selectors other than just opening up one div at a time in the inspector?

You can use this tool and then click on anything in the app and it will automatically select the html element.

[Ehsan]

Yes! Thank you! So this is how everyone has been doing it. I am just used to right clicking -> inspect in chrome… never realized I could also inspect this way.

Amazing.

[austin]

Tagging onto this thread rather than start a new one…

I made some visual hierarchy tweaks to the Minimal theme as well. I used a scale of 1.25 to increase and decrease the size of the headings compared to the base font size of 1em. So H4 is 1.25em. H3 is 1.56em. H2 is 1.95. H1 is 2.44.

If you’re looking for some slightly more distinct hierarchy to improve readability, it’s worth tweaking the headers.

[tim_hilde]

Somehow this doesn’t work when using the minimal theme:

Do you know what might be the issue here?

[mandible]

Love this theme! I was wondering if there was any quick way to change cursor to pointer any time we hover over something interactive. (The only case where Minimal is a bit too minimal for me )