Improve blog layout

[slorber]

🐛 Bug Report

The current blog layout is not ideal, particularly on large screens where blog titles wrap unnecessarily.

Also the spacing is not very good when there's a blog post list scrollbar

The ReactNative site has a better blog layout using custom CSS, but it's not ideal either to write this CSS as we have to target classes of the Infima grid system in a fragile way

For example, I used a similar solution for the Jest v2 website:

.main-wrapper.blog-wrapper .container .row {

  // Blog post list
  .col.col--2:first-child {
    --ifm-col-width: 22%;
    div[class^='sidebar'] {
      padding-right: 1rem;
    }
  }

  // Center
  .col.col--8 {
    --ifm-col-width: 62%;
    @media only screen and (max-width: 996px) {
      --ifm-col-width: 100% !important;
    }
  }

  // TOC
  .col.col--2:last-child {
    --ifm-col-width: 16%;
  }
}

We should rather adopt current ReactNative design in the default Docusaurus blog layout design in future versions, and stop using a basic css grid for that as we want the sides to grow when space is available.

cc @lex111 @Simek

[slorber]

@lex111 is the infima PR enough to improve the blog layout? IMHO it's not so I'll re-open but let me know what you think.

[lex111]

@slorber yes, for solve this issue we need to release new version of Infima, then slightly change blog markup during upgrading to its new version. Can you want to release new version of Infima?

[lex111]

Fixed in #4370.

[maheshj01]

@lex111 Is it possible to customize this layout with react?

[slorber]

@maheshmnj yes you can swizzle any theme component and customize them

[maheshj01]

@slorber I meant can we use a custom react component e.g

1. I would like to use a custom footer and it should be available on blog layout pages as well as main page.

2. Change the layout of blog content

   If this is possible, is there a sample code you can point me at for reference?