Sharing new Minimal Theme + iA Writer Flair + Questions!

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?
4 Likes

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.

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

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;
}

Thanks for the tip! found what I needed :slight_smile:

.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;
}

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

Captura realizada el 2020-08-12 00.43.29@2x

1 Like

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.

2 Likes

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

1 Like

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.

1 Like