Docs design tweaks #204
Docs design tweaks #204
Conversation
|
A live preview of this PR will be available at the URL(s) below. https://pr204-f43446b---lit-dev-bvxw3ycs6q-uw.a.run.app/ |
aomarks
force-pushed
the
docs-design-tweaks
branch
from
f43446b to
83ee123
Compare
aomarks
force-pushed
the
docs-design-tweaks
branch
from
83ee123 to
970260f
Compare
|
|
||
| .CodeMirror, playground-file-editor, playground-preview { | ||
| border: 1px solid #dedede; | ||
| border-radius: 6px; |
There was a problem hiding this comment.
btw, <litdev-example> still has this style and it differs from the 5px used elsewhere. It maybe could be border-radius: inherit;?
There was a problem hiding this comment.
Fixed I think. I made it match the styles of the other code snippets, and got rid of the border around the editor (still needed for the preview)
| @@ -3,6 +3,15 @@ | |||
| * ------------------------------------ */ | |||
|
|
|||
| main { | |||
| /* Colors */ | |||
| --docs-h1-underline-color: var(--color-blue); | |||
| --docs-h2-color: #384861; | |||
There was a problem hiding this comment.
Is this the steel-blue color in the Ocupop design/logo? Maybe make it a variable next to --color-blue?
There was a problem hiding this comment.
It's not from Ocupop, I just picked it. Not using it anywhere else yet, might change, and the h3 is a less saturated version. So not sure it deserves a proper name yet. Maybe I'll add one if we end up using it somewhere else.
| @@ -32,12 +41,20 @@ article { | |||
| line-height: 1.8em; | |||
There was a problem hiding this comment.
It looks like this line height is inheriting into code editors - I think the lines look a little tall. Could you try 1.5em for those?
There was a problem hiding this comment.
Oops, yeah but I also had some incorrect extra padding that was making the effective line height much bigger than 1.8em. Fixed, and I think 1.8em actually looks good.
| * ------------------------------------ */ | ||
|
|
||
| article li { | ||
| padding-inline: 0.5em 10%; |
There was a problem hiding this comment.
We also have article li > p elements that are getting pretty big top and bottom margins. Can we trim those a bit? Maybe even 0 (line-height would still apply):
article li > p {
margin: 0;
}There was a problem hiding this comment.
Shrunk it, but not quite to zero. I think a little gap helps readability, just like you would have a gap for two adjacent paragraphs.
|
|
||
| .docsSectionBorderBelow article h2 { | ||
| border-top: none !important; | ||
| padding: 1em 0 0.75em 0 !important; |
There was a problem hiding this comment.
Can't tell for sure, but I might like the smaller .5 bottom padding even with the bottom border.
?mods=docsSectionBorderBelowto see an underline instead)