Skip to content

Improve Blog Post layout #3267

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MTRNord wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Improve Blog Post layout #3267

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
17f912c
use grid instead of flexbox
MTRNord Mar 6, 2026
0151aaf
visually seperate the metadata a bit
MTRNord Mar 6, 2026
afedc58
make the blockquote border a little less big to have it less glarring…
MTRNord Mar 6, 2026
b43169d
modernize the quote style
MTRNord Mar 6, 2026
9718836
make the post overview consistent with the blog posts
MTRNord Mar 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion sass/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ table {
blockquote {
margin: 0 0 10px 0;
padding: 10px 20px;
border-left: 5px solid #E2E2E2;
border-left: 3px solid var(--borders-color);
}

p:last-child,
Expand Down
68 changes: 51 additions & 17 deletions sass/_blog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ article.post {

td,
th {
padding: .5rem;
padding: 0.5rem;
border: unset;
border-bottom: 1px solid var(--borders-color);
}
Expand Down Expand Up @@ -69,18 +69,28 @@ article.post {

header {
margin-bottom: 1rem;

span {
font-size: 0.9rem;
color: var(--color-text-light);
}
}
}

.post-main {
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
align-self: center;
display: grid;
grid-template-columns: 1fr;
align-items: start;
gap: 2rem;

.callout {
@media (min-width: 1024px) {
&:has(aside) {
grid-template-columns: 1fr 320px;
}
}

.callout {
display: grid;
grid-template-columns: 300px auto;
color: #fff;
Expand Down Expand Up @@ -119,7 +129,7 @@ article.post {
font-size: 1.125rem;
font-weight: 700;
background-color: rgba(34, 109, 227);
padding: .5rem 1.5rem;
padding: 0.5rem 1.5rem;
border-radius: 9999px;
color: #fff;
margin-block-start: 1rem;
Expand All @@ -144,29 +154,53 @@ article.post {
}
}

&>:first-child {
& > :first-child {
margin-top: 0;
}

&>ul>li:not(:last-child) {
margin-bottom: .5rem;
& > ul > li:not(:last-child) {
margin-bottom: 0.5rem;
}

flex: 1 1;
max-width: 320px;
margin-left: 4rem;
padding: 1.5rem;
background-color: #f4f4f4;
}
}

.post-content {
// Use all of the space not taken by the sidebar
flex: 3;
// Necessary to allow the pre to scroll on overflow
// min-width: 0 prevents grid blowout when content (e.g. pre blocks) is wider than the column
min-width: 0;

blockquote {
position: relative;
overflow: hidden;
border-left: none;
padding-left: 2rem;
margin: 0 0 1rem 0;

&::before,
&::after {
position: absolute;
color: #777;
}

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

@HarHarLinks HarHarLinks Mar 6, 2026

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
Copy Markdown
Contributor Author

@MTRNord MTRNord Mar 6, 2026

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
Copy Markdown
Contributor Author

@MTRNord MTRNord Mar 6, 2026

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
Copy Markdown
Contributor

@HarHarLinks HarHarLinks Mar 7, 2026

Choose a reason for hiding this comment

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

are you intentionally not applying this globally?

https://d29b8cfb.matrix-website.pages.dev/foundation/working-groups/website-content/#charter

&::before {
content: "//";
Copy link
Copy Markdown
Contributor

@weeman1337 weeman1337 Mar 7, 2026

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.

transform: rotate(90deg);
left: 0;
}

// Thin vertical line below the slashes, clipped by overflow: hidden
&::after {
content: "";
left: 5px;
top: 40px;
width: 1px;
height: 100%;
Copy link
Copy Markdown
Contributor

@HarHarLinks HarHarLinks Mar 7, 2026

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

background-color: currentColor;
}

h2 {
font-size: 1.5rem;
}
Expand All @@ -191,7 +225,7 @@ h3 a {
color: var(--color-link);
}

.footnote-definition>p {
.footnote-definition > p {
display: inline;
}

Expand Down
2 changes: 1 addition & 1 deletion templates/blog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ <h1><a href="{{ page.permalink }}" title="{{ page.title }}">{{ page.title }}</a>
<small>Last update: {{ page.updated | date(format="%Y-%m-%d %H:%M") }}</small>
{%- endif %}
</header>
<div>
<div class="post-content">
{% if page.summary -%}
{{ page.summary | safe }}
<p><a href="{{ page.path | safe }}#continue-reading">Continue reading…</a></p>
Expand Down