matrix-org / matrix-org/matrix.org

Stylistic suggestions for the new website

Open
#1,728 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

aesthetic
Dominant language
JavaScript
Stars
616
Forks
463
Avg merge
2d 3h
Merged PRs (30d)
19

Description

I'll just brain dump stuff I've noticed that looked suboptimal to me while browsing the new website. Feel free to throw any and all of these into /dev/null.

  1. I think the greyed out post byline in the old version worked better than the current byline which is the same colour as the rest of the type.

image

vs

image

  1. There are some whitespace inconsistencies between the category view and the actual post view.

Category view: image

vs

Post view: image

The post view looks a tiny bit worse IMO, due to the size disparity and closeness of the title and the byline.

  1. The code block styling is a bit over the top :p

image

It takes up a lot of space for each block, especially due to the wide box / padding, which makes posts which use code blocks heavily a bit of a pain to read.

  1. The Last update notice is inconsistently styled with the rest (i.e. it's very tiny; example post here). It's a very welcome addition, though! (I think previously we were missing it)

image

  1. Paragraphs end with a large bottom margin while lists have a much smaller bottom margin, which results in somewhat unpleasant whitespace when a list precedes the main text:

image

  1. Information density suffers a bit compared to the old version, with a much increased line spacing and narrower line length. The old site was probably a bit too wide and dense, the new one is maybe a bit too narrow and spaced out. Maybe a middle ground would be optimal?

  2. I'd probably continue using the YYYY-MM-DD form for dates instead of DD.MM.YYYY. since it's more logical for sorting and is a neutral choice between American and European style.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No files or tests are named. Start by reviewing the new website's category and post views against the screenshots, then trace the styles for bylines, spacing, code blocks, update notices, typography, and dates. Done would require a focused decision on which suggestions to implement and agreement on the resulting visual changes.

Written by the indexing model from the issue text.

Assessment

Domain
design, frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.