#48

What fonts are you using?

#49

I would also like to know about the fonts, color scheme and organizational structure.

#50

@Outis @Liong1976 the fonts are all from appleā€™s ui kit.

All mode headings: SF Pro Rounded
Edit body: SF Pro Medium
Publish body: New York Medium

I also tinkered with the font sizing to make things a bit more readable on my small MacBook Air.

Hereā€™s the code for the parts you asked about.

--base-h:0;
--base-s:0%;
--base-d:16%;     /* Base lightness Dark Mode  - 0 is black */
--base-l:97%;     /* Base lightness Light Mode  - 100 is white */
--accent-h:201;
--accent-s:17%;
--accent-d:60%;   /* Accent lightness Dark Mode */
--accent-l:50%;   /* Accent lightness Light Mode */
--text: 'New York Small',serif;
--text-editor: 'SF Pro Rounded',serif;
--font-monospace: 'SF Mono',monospace;
--font-ui: 'SF Pro Rounded',sans-serif;
--font-normal: 1.25rem;
--h1: 1.802em;
--h2: 1.602em;
--h3: 1.424em;
--h4: 1.266em;
--h5: 1.125em;
--h6: 1em;
/*    --font-outline: 0.889em;
--font-x: 0.79em;
--font-xx: 0.702em; */
--font-small: 0.624em;
--font-smaller: 0.555em;
--font-smallest: 0.493em;
--normal-weight: 350;
--bold-weight: 800;
--line-width: 960px;
--line-height: 1.588;
--max-width: 90%;
--nested-padding: 3.5%;
--icon-muted: 0.4;
--border-width: 1px;
--border-width-alt: 1px;
2 Likes
#51

Thank you, this is very helpful.

#52

Thanks,

Can I install those fonts on WIndows, because I am not a Mac user?

#53

Yep. You should be able to download them from the link I provided and install as you normally would. :call_me_hand:

#54

@Outis forgot to mention color. I borrowed the palette from vim spacegray.

1 Like
#55

Great, thanks!

#56

I had downloaded the fonts but they are .dmg files. I have no idea how to install them in Windows. As far as I know, Windows only can take .ttf files for fonts.

Any idea?

#57

Open it up with 7zip, there is a .pkg file in that, open it with 7zip too > Payload > . > Library > Fonts, extract the otfs. Right click all files and install. Change the CSS and you are good.

#58

Thanks again @brapstallion. I donā€™t suppose youā€™ll share that part of the snippet?

#59

Thanks, @Outis Iā€™ll try it. What suppose I change for the CSS. Sorry, I am not a programmer.

#60

No worries, we are all helping each other out.

If you want to copy it exactly, just go to .obsidian/snippets. Make a new text file, letā€™s say minimal_brapstallion_edit.css

Now, copy paste the part from above in it.

Go to Obsidian > Settings > Apperance > select the snippet and you are done.

#61

Thanks, @Outis. I appreciate your help.

I had done what you said, but I did not see the change after activating the snippet.

Do I need to modify this code?
Add something e.g., { }?

#62

Even I am not sure then. I did not need to copy-paste it exactly. I just needed some parts of it rather than the whole.

I am also a CSS noob. I apologize for wasting your time. If you are need for an urgent answer, Obsidian Discord server is a good place. They have a dedicated CSS channel.

#63

Thanks, @Outis!

#64

How did you take screenshots with shadow and background?

#65

Iā€™m not sure how @Ehsan did it, but you can do the same thing with a white desktop background on a Mac. macOS will do the shadows for you.

1 Like
#67

cries in Windows

1 Like
#68

If you donā€™t want to use a white background, you can do cmd + shift + 4 and press space and select the application you want to screenshot. You will still get shadows in the background.