Modernize CSS Styles for Text and Figures || chore: update code formatting and styles #10
Conversation
| display: grid; | ||
| grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); | ||
| display: block; | ||
| width: 100%; |
There was a problem hiding this comment.
The display: grid; grid-template-columns; cannot be removed actually, because it'll "break" the body size on small screens on many browsers as seen below:
For some reason even with overflow: auto this issue occurs, unless a better style exists to fix this issue, I think this should be kept (which include the removed block below)
| tbody tr:hover { | ||
| background: var(--bg-hover); | ||
| } |
There was a problem hiding this comment.
The property --bg-hover doesn't exist so this has actually no effects
Also this was previously in matcha but I decided to remove it because it looks really weird when you start using rowspan attribute
| } | ||
|
|
||
| table.center td, th { | ||
| table.center th, table.center td { |
There was a problem hiding this comment.
IMHO th should still be centered even on non-centered tables, because they're table headers
| } | ||
|
|
||
| td { | ||
| color: var(--text-color); |
There was a problem hiding this comment.
This is variable doesn't exist, and this ruleset is probably not needed neither, cells are already using the --default color so this has no effect
| background: var(--bg-subtle); | ||
| font-weight: bold; | ||
| font-weight: 600; | ||
| color: var(--primary-color); |
There was a problem hiding this comment.
The --primary-color doesn't exist.
Also removing the borders on table headers make the table quite difficult to read (especially on colspan):
Reducing bolding, uppercasing with letter-spacing seems fine though.
| line-height: 1.45; | ||
| font-size: 0.9rem; | ||
| line-height: 1.6; | ||
| box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); |
There was a problem hiding this comment.
This kind of value should inherit from --shadow property
| border-left: .25rem solid var(--bd-muted); | ||
| margin: 0 0 1rem; | ||
| padding: 0.5rem 1.5rem; | ||
| border-left: 0.25rem solid var(--primary-color); |
There was a problem hiding this comment.
The variable --primary-color doesn't exist
Also no need to add back 0 to numbers, as they don't really grant much readbility and actually increase a bit the resulting size of the file
| color: var(--muted); | ||
| background: var(--bg-light); |
There was a problem hiding this comment.
The variable --bg-light doens't exist, also I'm not convinced a blockquote should have a background color
| text-decoration: none; | ||
| font-style: italic; |
There was a problem hiding this comment.
To remove, this is already in italic
This pull request modernizes the CSS styles for paragraphs, preformatted text, blockquotes, and figures to enhance readability and visual appeal. Key improvements include:
Paragraphs and Preformatted Text:
Updated padding, border, and background for a modern appearance.
Added shadow and border-radius for better emphasis.
Figures: