Better CSS Styles

[Mandarancio]

I think better CSS styles are needed, in particular to accommodate all the new features as well as the presentation mode.

To explain better the structure of the HTML and simplify the creation I'm trying to create a wiki page with some information: CSS Structure

@jumpinggoofballs if you want to help this will be great! :+1:

[Mandarancio]

Updated wiki with beamer page structure

[Mandarancio]

I noticed that also for regular class the pdf or printed version is not very nice, fonts to big and small margins. I believe better css is needed for all classes with particular attention to the @media print {}.

[Mandarancio]

I created and added new simple style called Beamer for (obviously) the beamer class, for both 4:3 and 16:9 ratio.

Here a small example (full pdf and html available in the test/ folder:

[jumpinggoofballs]

Apologies for the delay in getting to this. Okay, so I'm a bit flummoxed. I am on the latest git build and things are looking pretty great. I have gone through the new themes and I have found that the best one for the beamer class is bemaer_github2.css [sic]. I was going to work off it and tweak it and things, but... I can find no equivalent CSS file in data/styles. Where did that come from?

As to what I was planning to do with it:

• change the black background to the body background because that way it can also be used for non-beamer documents. I would use it because fonts and colours are great.
• probably remove some of the underlines: certainly above equations, but maybe also under h1 tags.
• there is also a height issue. And I'm not sure whether this is a theme thing or a root scidown.css. If it's a scidown.css things, maybe it would be best if you tweak it rather than me getting in there. Here is the issue: If you look closely, you can see that there is a black line at the bottom of the full page slide. I think that must be the background colour seeping in. So I'm guessing somewhere there is a height misconfigured (and I am expecting it to be in scidown.css). The same can be seen against the blue/white contrast for the title page in the beamer.css class.

There is one other related issue, and I don't know whether this is the place for it, or I should open a new issue. When it comes to beamer presentations, the main preview window is centre aligned for 4:3 ratios but not 16:9 ratios: This also carries over if the document is exported to html. So somewhere things are aligned with absolute numbers, rather than a nice css align / justify-content: center;

[Mandarancio]

@jumpinggoofballs : no needs to excuse your self! Any help is more then welcome at any time :)

I removed the beamer_github2 css theme when I added the new beamer theme however you can find it here link and you can restore it if you wish. The theme is a simple adaption of the GitHub2 css theme for presentation that I made.

For your plans:

1. It can make sense to use the same color for both background and slides, also will solve the problem (3)
2. The same problem is also appearing in the classical GitHub2 theme (and maybe in others).
3. I am well aware of the height issue and is a work-around I implemented, when the height is the correct one (166mm, if I'm not mistaken), the webkit pdf exporter add an empty page after each slide, If I remove the page-break-after: always; on the .slide class only one extra page is added at the end of the pdf. For this reason I left page-break-after: always; and fixed the slide height to 165.5mm in scidwon.css

The file scidown.css should be as minimal as possible, containing only the common tweaks and configuration needed, e.g. the size of the slides, or the fact that equation table should by invisible.. However many improvements are possibles.

Finally I would look into the 16:9 issue and I will open a new issue if needed.

PS: I was thinking to improve the "beamer" syntax and generation of scidown adding the following features:

1. Slide title using the following syntax ---{slide title}
2. Slide background using the following syntax ---[img: image uri]{title} or ---[color:#ffff]
3. Adding footer and header div to each section to accommodate slide title, numbering and styling.

What do you think?

[jumpinggoofballs]

Thanks for the link to the Github beamer theme. It will make a good basis.

For your questions: I'm ambivalent towards the idea. On the one hand, more functionality is always good. On the other, maybe it goes against the 'spirit' of Markdown and of using Markdown for this sort of thing. By which I mean that the idea for Markdown is to separate style from content and to focus purely on content. All the style is taken care of by external CSS. Using the header to define a beamer document and an aspect ratio for that document seems to me within that spirit, but then going into per page customisation... I don't know.

In that spirit, I would propose:

1. The slide title is automatically the first level # (i.e. the <h1>). You could impose that there be only one per slide as Marp does it, or let the user worry about it.
2. Could do this, but see above comments.
3. Pagination would probably be better done with a switch in the YAML header, something like pagination: true, and set up to ignore the title page (if any) by default.

PS: I will be travelling without internet for a couple of weeks from tomorrow, so you won't hear from me for a while. But worry not, I have not run away :smile: