Skip to content

Improve Blog Post layout#3267

Open
MTRNord wants to merge 5 commits intomainfrom
MTRNord/improve-post-layout
Open

Improve Blog Post layout#3267
MTRNord wants to merge 5 commits intomainfrom
MTRNord/improve-post-layout

Conversation

@MTRNord
Copy link
Contributor

@MTRNord MTRNord commented Mar 6, 2026

Description

This does a few things:

  • The flexbox is replaced with a grid. This fixes some of the spacing weirdness we got due to using flex: 3;. This is minor and not visually really obvious
  • The space to the aside is a bit smaller
  • The metadata is a bit more muted
  • The blockquotes are modernized to be less... blocky? Idk it feels a lot nicer especially on twim where we got lots of them.

Related issues

Role

Website & content WG

Timeline

Signoff

In the commits

MTRNord added 4 commits March 6, 2026 19:03
Quality of life improvement as this handles 2 columns a bit nicer
overall

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
… on twim

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
@MTRNord MTRNord requested a review from a team as a code owner March 6, 2026 18:20
@MTRNord MTRNord added aesthetic Visual inconsistencies or improvements blog This issue is related to the blog section labels Mar 6, 2026
@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Mar 6, 2026

Deploying matrix-website with  Cloudflare Pages  Cloudflare Pages

Latest commit: 9718836
Status: ✅  Deploy successful!
Preview URL: https://d29b8cfb.matrix-website.pages.dev
Branch Preview URL: https://mtrnord-improve-post-layout.matrix-website.pages.dev

View logs

@HarHarLinks HarHarLinks changed the title Improve Post layout Improve Blog Post layout Mar 6, 2026
color: #777;
}

// "//" rotated 90deg sits naturally at top-left
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this mean anything that is going over my head or is it just stylish?

It's now inconsistent with pages such as /blog

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Its just stylish.

I didnt want to use " as it doesnt really feel right for twim.

and I did overlook /blog indeed oops. Good catch.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The inconsistency on /blog is now fixed.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
@MTRNord MTRNord requested a review from HarHarLinks March 6, 2026 18:43
left: 5px;
top: 40px;
width: 1px;
height: 100%;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this line at 100% height has the combined lineheight of the text plus 10px top and bottom padding as defined somewhere according to my devtools. you are moving it 10px+30px=40px down, which means it exceeds the blockquote's container.

Suggested change
height: 100%;
height: calc(100% - 50px);

would bring that back so the line actually ends with the last line instead of the blockquote element. imo it looks a bit leaner. wdyt?

image


// "//" rotated 90deg sits naturally at top-left
&::before {
content: "//";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks a bit strange imho. Is this a new common pattern? I think that quotes with just the | make the layout look smoother.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

aesthetic Visual inconsistencies or improvements blog This issue is related to the blog section

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants