Pagedown: Issues with the resume CSS

[yihui]

Example: https://rstudio.github.io/pagedown/html-resume.html

• [x] The default page margin is too small and not really suitable for printing.
• [x] I feel the default font size is too small, too. Those busy HRs probably won't be happy to read such tiny text.
• [x] Only works well with a single-page resume. If there are multiple pages, the sidebar won't reach later pages.

[RLesur]

I think there might be several means to fix this issue.
In order to choose a strategy, we should first answer to this question:
In the case of a multiple-pages resume, what would be the content of the sidebar? Is it the same content repeated on each page? a void grey sidebar? a different content with the same footer?...

[RLesur]

Here's my best deal with CSS only.

I succeeded to set margins and have a sidebar that reaches the bottom of the second page.

The only caveat that I put on this version is that the number of pages has to be defined before rendering the document.
I did not succeed to remove this exogeneous number and having an automatic number of pages. Maybe a solution exists (I unsuccessfully tried grid auto filling/fitting) but I am not sufficiently skilled in CSS to find it.

[yihui]

That is a great progress! I'll take a closer look in the afternoon. Thanks!

[yihui]

Let's just get rid of grid-template-rows: https://github.com/RLesur/pagedown/blob/feda74e5/inst/resources/css/resume.css#L43

The footer/sidebar doesn't have to reach the bottom of a page. I'm totally fine with this:

[mr-illington]

Hi yihui & RLesur,

This is exactly the fix I'm looking for - having sidebar content flow onto the second page of my 2-page resume. I'm just a little stuck on implementing it!

On the one hand it looks like the template-fix was merged with #24, yet on the other hand a new template does not seem to be incorporating the 2 page sidebar. Have tried including the number of pages in the .root to no affect.

What is the strategy for implementing the 2-page sidebar at this point? Perhaps my issue lies in not manually modifying the chrome print header/footer. I don't understand this point, but ignored it for the moment. I am printing to pdf from Chrome.

[RLesur]

Hi @mr-illington,

Since https://github.com/rstudio/pagedown/commit/e79a521e3793dda1d8f869faf7b0af2625474ac5, the html_resume() output format uses Paged.js.
AFAIK, there is no automatic way to paginate both the main content and the sidebar content.

I can propose you to include the 2nd page sidebar content inside a div like that:

:::{.aside style="top: 0;"}
Second page sidebar content
:::

Include this div at the very end of your Rmd file.
Tell me whether this suits your need.

[mr-illington]

Thanks RLesur!

It's getting me very close, but some of the .aside formatting doesn't seem to carry down the way it did in the first page sidebar.

Admittedly this is probably a very simple css question - I simply don't have any experience with css and asking it here might help others.

I've been poking around with the different elements with the Chrome inspect tool and both the page 1 .aside and page 2 div .aside seem to draw from .aside h2 element, and yet the headers on the second page are off.

Any thoughts on what I'm missing? Thanks in advance!

[RLesur]

Got it.
OK, let's do something more robust. I would do that (to be included at the end of the Rmd file):

```{css, echo=FALSE}
.extra-sidebar {
  top: 0;
  padding-top: 0;
}

.extra-sidebar h1 {
  display: none;
}

.extra-sidebar .level2:first-of-type {
  margin-top: 0;
}
```

Second page sidebar {.aside .extra-sidebar}
================================================================================

Title
--------------------------------------------------------------------------------

Second page sidebar content

[mr-illington]

That works perfect, and helps me understand the css element structure a bit further too. Thanks again @RLesur !