Skip to content

Docs design tweaks #204

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Mar 8, 2021
Merged

Docs design tweaks #204

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0a2e832
Only add mods parameter for local links
aomarks Feb 28, 2021
1c56c0b
Improved docs header and syntax highlight styles
aomarks Feb 28, 2021
4cc6679
Add docsSectionBorderBelow mod
aomarks Mar 8, 2021
970260f
Use Open Sans for docs article content
aomarks Mar 8, 2021
80a8b3c
Address PR#204 feedback
aomarks Mar 8, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 23 additions & 53 deletions packages/lit-dev-content/site/css/code.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,26 @@

body {
html {
--playground-code-font-family: "Roboto Mono", monospace;
--playground-code-font-size: 13px;
}

.CodeMirror, playground-file-editor, playground-preview {
border: 1px solid #dedede;
border-radius: 6px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

btw, <litdev-example> still has this style and it differs from the 5px used elsewhere. It maybe could be border-radius: inherit;?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)

image

margin-bottom: 16px;
}

playground-ide {
border: 1px solid #ccc;
border-radius: 6px;
box-sizing: border-box;
}

playground-ide:not(:defined) {
display: block;
height: 350px;
}

playground-file-editor {
--playground-code-background: transparent;
}

litdev-example:not(:defined) {
display: block;
border: 1px solid #ccc;
border-radius: 6px;
}

.CodeMirror {
font-family: "Roboto Mono", monospace !important;
font-size: 13px !important;
padding: 12px;
/* The default CodeMirror stylesheet fixes height to 300px. */
height: unset !important;
}

.CodeMirror-line {
white-space: pre-wrap !important;
/* These are already included in codemirror.css, but we don't block rendering
on that stylesheet, so we include them here too so that sizing is already
correct, and it's just colors that load in. */
font-family: inherit;
padding: 0 4px;
margin: 0;
}

.cm-error {
/* Higher contrast red. TODO(aomarks) Replace with entirely new CodeMirror
theme, that is both nicer looking and satisfies a11y contrast metrics. */
color: #b30000 !important;
--playground-code-line-height: 1.8em;
--playground-code-padding: 0.5em 0 0.5em 1em;
--playground-highlight-color: #005cc5;
--playground-code-keyword-color: #d73a49;
--playground-code-atom-color: #005cc5;
--playground-code-number-color: #005cc5;
--playground-code-def-color: #6f42c1;
--playground-code-variable-color: #6f42c1;
--playground-code-property-color: #e36209;
--playground-code-operator-color: #d73a49;
--playground-code-variable-2-color: #000000;
--playground-code-variable-3-color: #000000;
--playground-code-type-color: #005cc5;
--playground-code-comment-color: #6a737d;
--playground-code-string-color: #032f62;
--playground-code-string-2-color: #032f62;
--playground-code-meta-color: #000000;
--playground-code-qualifier-color: #6f42c1;
--playground-code-builtin-color: #6f42c1;
--playground-code-tag-color: #032f62;
--playground-code-attribute-color: #6f42c1;
--playground-code-callee-color: #005cc5;
}
10 changes: 7 additions & 3 deletions packages/lit-dev-content/site/css/codemirror.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
/* TODO(aomarks) This should be published by playground-elements. It
externalizes the styles that are shared between scoped and SSR playgrounds */

.CodeMirror {
font-family: var(--playground-code-font-family, monospace);
font-size: var(--playground-code-font-size, inherit);
color: var(--playground-code-default-color, #000);
background: var(--playground-code-background, #fff);
line-height: var(--playground-code-line-height, 0.7em);
padding: var(--playground-code-padding);
}

.CodeMirror pre.CodeMirror-line {
padding: 0 4px;
margin: 0;
font-family: var(--playground-code-font-family, monospace);
line-height: var(--playground-code-line-height, 1.7em);
}

.cm-keyword {
Expand Down
121 changes: 104 additions & 17 deletions packages/lit-dev-content/site/css/docs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,15 @@
* ------------------------------------ */

main {
/* Colors */
--docs-h1-underline-color: var(--color-blue);
--docs-h2-color: #384861;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this the steel-blue color in the Ocupop design/logo? Maybe make it a variable next to --color-blue?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

--docs-h3-color: #5d6c86;
--docs-rule-color: #d1d1d1;
--docs-table-header-background: #e4e4e4;
--docs-table-header-color: rgb(73, 73, 73);
--playground-code-background-color: #f0f0f0;

/* IMPORTANT: If any of the following variables change, one or both of the
@media query thresholds below need to be updated. */
--docs-nav-min-width: 15em;
Expand Down Expand Up @@ -32,12 +41,20 @@ article {
line-height: 1.8em;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

font-size: 0.88889em; /* 16px / 18px basis */
color: #3e3e3e;

/* Open Sans is more readable than Manrope, so we prefer it for content that
users will spend a lot of time reading. */
font-family: "Open Sans", sans-serif;
}

/* ------------------------------------
* Body text
* ------------------------------------ */

article {
color: #3E3E3E;
}

article p {
margin-block-start: 1.5em;
margin-block-end: 1.5em;
Expand All @@ -47,9 +64,17 @@ article a {
color: var(--color-blue);
}

article a:hover {
text-decoration: underline;
}

article li {
/* Slightly more space between list items */
margin-bottom: 0.2em;
margin-bottom: 0.8em;
}

article li > p {
margin: 0;
}

/* ------------------------------------
Expand All @@ -64,10 +89,16 @@ article code:not([class]) {
font-family: var(--playground-code-font-family, monospace);
}

/* Non-highlighted code block */
article pre > code:not([class]) {
background: none;
padding: 0;
}

/* Static code snippets */
.CodeMirror {
padding: 0.5em 1em;
--playground-code-background: #f5f5f5;
color: #3c3c3c;
}

/* Playground examples */
Expand Down Expand Up @@ -95,19 +126,36 @@ playground-ide {
* ------------------------------------ */

article h1 {
padding-bottom: 0.5em;
margin-bottom: 1.28em;
border-bottom: 0.08em solid var(--color-blue);
padding: 0.3em 0 0.8em 0;
margin-bottom: 1.3em;
border-bottom: 2px solid var(--docs-h1-underline-color);
font-size: 2.2em;
font-weight: 400;
}

article h2 {
color: var(--docs-h2-color);
font-size: 1.8em;
font-weight: 600;
position: relative;
margin-top: 1.5em;
padding: 1.5em 0 0.5em 0;
}

article h2 {
color: var(--color-blue);
font-size: 1.36em;
border-top: 1px solid var(--docs-rule-color);
}

article h3 {
color: var(--docs-h3-color);
font-size: 1.2em;
font-weight: 600;
position: relative;
padding-top: 1em;
}

article h3 {
margin-top: 2.2em;
}

article h4 {
Expand All @@ -128,6 +176,14 @@ article > h1:first-of-type {
margin-top: 0;
}

/* ------------------------------------
* Lists
* ------------------------------------ */

article li {
padding-inline: 0.5em 10%;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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;
}

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

image

}

/* ------------------------------------
* Tables
* ------------------------------------ */
Expand All @@ -138,8 +194,9 @@ table {
}

th {
background: var(--color-blue);
color: white;
color: var(--docs-table-header-color);
background: var(--docs-table-header-background);
text-align: left;
font-weight: 600;
}

Expand Down Expand Up @@ -172,18 +229,17 @@ td {
.alert {
position: relative;
margin: 1em 0;
padding-left: 24px;
padding: 1em 1em 1em 3.5em;
border: 1px solid #ccc;
}

.alert > p {
margin: 0;
padding: 1em 1em 1em 2em;
}

.alert::before {
position: absolute;
top: 1em;
top: 1.15em;
left: 1em;
}

Expand Down Expand Up @@ -304,6 +360,11 @@ td {
display: none;
}

#inlineToc h2 {
font-size: 1.5em;
border-top: none;
}

#inlineToc ol {
list-style: disc;
}
Expand Down Expand Up @@ -353,7 +414,7 @@ td {

#rhsToc > div > ol > li:not(:first-of-type) {
/* Space between top-level lists */
margin-top: 1em;
margin-top: 0.2em;
}

/* Second level */
Expand All @@ -379,11 +440,12 @@ td {
color: black;
opacity: 0.5;
font-size: 0.8em;
position: relative;
}

#rhsToc a.active {
#rhsToc a.active,
#rhsToc a:hover {
opacity: 1;
position: relative;
}

/* Active section bullet */
Expand Down Expand Up @@ -418,20 +480,45 @@ td {
main {
--docs-article-margin-horizontal: 2.5em;
}

#rhsTocWrapper {
display: none;
}

article {
grid-column: 2 / -1;
}

#inlineToc {
display: initial;
}
#inlineToc > details {
margin-bottom: 2em;
}
#inlineToc summary {
display: flex;
align-items: center;
cursor: pointer;
padding: 0.2em 0;
}
#inlineToc summary::marker {
color: var(--docs-h2-color);
font-size: 1.25em;
}
#inlineToc h2 {
padding: 0;
margin: 0;
display: inline;
font-size: 1.25em;
}
#inlineToc > details[open] {
border-bottom: 1px solid var(--docs-rule-color);
padding-bottom: 1em;
}
#inlineToc div {
font-size: 0.9em;
}
#inlineToc li {
margin-bottom: 0;
padding-inline: initial;
}
}

Expand Down
1 change: 1 addition & 0 deletions packages/lit-dev-content/site/css/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
@import url('./mobile-nav.css');
@import url('./colors.css');
@import url('./codemirror.css');
@import url('./code.css');

html {
font-size: 18px;
Expand Down
2 changes: 1 addition & 1 deletion packages/lit-dev-content/site/css/home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ p {

.homeExample .CodeMirror {
margin: 0;
padding: 1.2em 2em;
padding: 1.2em 1.3em;
border: none;
font-size: 0.77778em;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/lit-dev-content/site/css/home/1-splash.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,6 @@

#helloWorld .code {
/* In proportion to view width so it always fits. */
font-size: calc(1vw * 3);
font-size: calc(1vw * 2.9);
}
}
2 changes: 1 addition & 1 deletion packages/lit-dev-content/site/css/home/3-simplicity.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,6 @@

#simplicity > .homeExample > .code {
/* In proportion to view width so it always fits. */
font-size: calc(1vw * 3);
font-size: calc(1vw * 2.9);
}
}
Loading