Maybe I should have included some screen captures. Here they are.
Thanks for sharing. 
Post Scriptum : if a talented graphic designer or a programmer feels like perfecting this modest attempt of mine into a more “professional” piece of work — maybe whith hints for different media — he/she is most welcome !
Aesthetics are largely a matter of personal taste. If you appreciate it, then it requires no outside modifications.
This is really helpful — thank you!
Very nice CSS – I adopted it immediately.
Very nice. Thank you from Ukraine!
This is a darn nice stylesheet. I am using it now. Thank you very much!
Wow! Thank you very much! This looks great and the introductions are really helpful for a “Newbie”
I loaded it in DevonThink, but I get a very large font size, almost too large to be useful. (See attached screen save).
Am I doing something wrong here?
The size of the heading depends on the heading level. You are using heading level 1 (the “#” before “Lessons”). If you reduce that to header level 2 ("##") or 3 ("###") then the font size will decrease.
You could also change the CSS itself, but that is more complicated to explain at the beginner level.
Thank you, I realize that to some extent the font size is determined by the heading level. But here, the body text is also too large. It doesn’t look like the same size that the author of the CSS sheet posted.
Does it help if you simply change the view of the fonts (not paying attention to the font size in any CSS), e.g. Menu: View/Zoom (in or out)?
I use that same CSS style sheet in DT3 and it’s excellent.
You should be able to use the Zoom In / Zoom Out commands to change the size (cmd -/+, cmd-0 to reset) of the text (it’s the same as for a web page, which is basically what is being shown).
As far as I can tell, once you’ve changed one document to a comfortable size, then the next one will also be shown at that zoom level. At least, that’s what happens when I tested it a few times here.
If you want to change the default font size in the CSS itself, then AFAIK the only way is to amend the CSS file.
DISCLAIMER: I am not an expert in CSS - I just play around till something works. Backup up the CSS file before you do anything…
The lines you want are here:
:root{
--font-size-normal: 17px;
--line-height: 1.4rem; /* line spacing, relative to the font size */
--max-width: 50rem; /* line length, relative to the font size */
So, you would change from 17px to 15px to reduce the standard font size by two pixels. Most other sizes are keyed into that, so H1 is twice the height of the normal font, for example.
However, there may be examples where the font size is hard coded in, and those you’ll have to change manually.
The best thing to do is to take a copy of the working file and then experiment on the copy.
HTH. (Take a backup of the CSS first… 
)
While that is of course true, it is semantically questionable. The first level heading in a text should be H1, not something else. I know, that sounds pedantic.
Since the OP is not happy with the representation of H1, they should adjust the CSS to use a smaller value for font-size.
Although it is done all over the Web: Do not use pixels as dimensions for font size. We are living in a world with Retina displays, small and large displays … It is far better to use something like em or rem, i.e. relative dimensions. Which, by the way, the next two lines in the quoted CSS do.
Good point. One can actually add the styles at the top of this file itself (before any MD content!) like so
<style>
body: { font-size: 1.2em}
</style>
Should be easier than switching two and fro between two files just for experimentation.
Brookter: That’s the ticket! I did as you suggested and zoomed out the text and it applies now to any markdown files I open. I even closed the program and restarted and the same zoom level still shows.
Thank you!
1 Like
Point taken, but the hard coding (of the basic font size only, as you see in the quote) is in the original CSS I think, so I was just explaining how to change it there.
Personally, I don’t post html on the net, and I know that EB Garamond 17 works very well on both laptop and iMac, because that’s what I use in every editor: it makes sense to set the basic font size to that, while using relative sizes for everything else.
Great stylesheet, thanks for that enormous work!
Would someone know, if it is possible to align source and rendered text so that they move simultaneously in the editor? My favorite LaTeX editor TeXpad does this very nicely.
Michael
No, live-scrolling is not currenlty supported in DEVONthink’s side-by-side mode.
+1 for Live Scrolling
Not syncing wastes too much time and confuses when having side open, which is the most likely setting for those of us who are learning to work with markdown and have come from a world of graphic interfaces (word, pages, libreoffice, etc).
1 Like