matrix-org / matrix-org/matrix.org
Stylistic suggestions for the new website
Nobody has claimed this yet.
- 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.
- 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.

vs

- There are some whitespace inconsistencies between the category view and the actual post view.
Category view: 
vs
Post view: 
The post view looks a tiny bit worse IMO, due to the size disparity and closeness of the title and the byline.
- The code block styling is a bit over the top :p

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.
- The
Last updatenotice 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)

- 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:

-
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?
-
I'd probably continue using the
YYYY-MM-DDform for dates instead ofDD.MM.YYYY.since it's more logical for sorting and is a neutral choice between American and European style.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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