Modernize CSS Styles for Text and Figures || chore: update code formatting and styles - #10
Modernize CSS Styles for Text and Figures || chore: update code formatting and styles#10SH20RAJ wants to merge 2 commits into
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)
| /* Hover effects for better interactivity */ | ||
| 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
| border-left: 0.25rem solid var(--primary-color); | ||
| margin: 0 0 1.5rem; | ||
| 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
| margin-top: .25rem; | ||
| margin-top: 0.5rem; | ||
| text-decoration: none; | ||
| font-style: italic; |
There was a problem hiding this comment.
To remove, this is already in italic
2 participants
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: