Adjusting the position of the author and date in distill

[boringstuff]

I know this is a rather easy question, but I have no idea how to achieve this.

I'm using distill to build a blog, and I trying to figure out how to put the published date next to the author, for example like this.

I have searched on the distill website and check the source code on the example above, still get the same result.

Any advice or suggestion would be much appreciated. Thanks!

Andrew

[mattwarkentin]

Hi @boringstuff,

Depending on your comfort with HTML and CSS, I think you should be able to achieve this by overriding the CSS style for the d-byline tag, described here.

This CSS is relevant to the HTML here.

I think, changing:

d-byline .byline {
  grid-template-columns: 2fr 2fr;
}

to

d-byline .byline {
  grid-template-columns: 1fr;
}

Should do it. You would need to define this CSS in a file and pass it to your distill Rmd file when rendering.

[mattwarkentin]

Could you clarify what output format you are trying to achieve? My advice may not have been in line with what you are looking for.

[boringstuff]

Hi @mattwarkentin, sorry for the late reply was caught up with work.
So I created my blog by selecting the new project and then Distill Blog in Rstudio, it will produce a basic framework of what the blog would look like.

From the basic frame, the welcome post in the blog looks like this.

Instead of arranging author, published, and affiliation in 2 rows, what I'm trying to achieve is to get my author, published, and affiliation aligned in one line, like the following image.

Thanks again,

Andrew

[mattwarkentin]

I may have misunderstood your question slightly. What format are you ultimately trying to achieve?

[boringstuff]

Hi @mattwarkentin,

Thanks for answering, so I tried setting up a CSS file using create_theme(), and create adjusted

d-byline .byline {
  grid-template-columns: 1fr;
}

and pass it to _site.yml as theme: theme.css, and still not working.

For sure I did something wrong since I have no knowledge of CSS or HTML. I'm not even entirely sure how to do what you suggested...

I'm using the basic template from the distill package, I am able to apply different themes, the following is the section where I can play around with the size of the author and date in my welcome page, I'm guessing this is the section where I can adjust their position?

d-byline {
  --heading-size:    0.6rem;
  --heading-color:   rgba(0, 0, 0, 0.5);
  --body-size:       0.8rem;
  --body-color:      rgba(0, 0, 0, 0.8);
}

Thanks again.

[ericpgreen]

Hi @mattwarkentin. I tried this by adding the new syntax below the "Additional custom styles" section in the css file I generated with create_theme() (this css file works fine for other theme changes).

The following did not seem to work for me:

d-byline .byline {
  grid-template-columns: 1fr;
}