Previously, the indentation of code snippets in the "Cheat sheet" guide
was done using `<br>` elements (for line breaks) and ` ` HTML
entities (for space). This was laborious and put the onus on the author
to remember to use these symbols (instead of regular whitespace
characters).
(Discussed in
https://github.com/angular/angular/pull/41051#discussion_r585651621.)
This commit changes the way `<code>` elements are styles inside the
"Cheat sheet" guide to allow using regular whitespace characters in code
snippets. It also changes all `<br>`/` ` occurrences to `\n`/` `
respectively to make code snippets more readable in the source code.
PR Close#41051
The "Features" page organizes features in groups/rows of 3 features
each. On wide screens, all 3 paragraphs of a group/row can be shown next
to each other. On narrow screens (between 768px and 1057px), the layout
changes to stack the paragraphs vertically. On medium screens, however,
there is not enough space to show more than two paragraphs next to each
other.
Previously, the 3rd paragraph was wrapped over to the next line.
This commit improves the layout on medium screens by switching to
immediately stacking the paragraphs vertically as soon as there is not
enough space for them to be displayed in one row. Since the total width
is still too much for one paragraph, the paragraphs are limited to 80%
of the total width.
Before (on 1000px width): [features page (on 1000px) before][1]
After (on 1000px width): [features page (on 1000px) after][2]
[1]: https://user-images.githubusercontent.com/8604205/109825316-62128a00-7c42-11eb-8391-650201257274.png
[2]: https://user-images.githubusercontent.com/8604205/109825323-6343b700-7c42-11eb-86c1-e8307c5a727a.png
PR Close#41051
Previously, with the min width of 220px per item, several API list items
were truncated.
This commit increases the min width per item to 330px, which allows
almost all items to have their full text shown. It also increases the
API list page's max content width from 50em (800px) to 62.5em (1000px)
to allow items to be shown on three columns despite their increased
width. This increase in the content width shouldn't negatively affect
UX, since the API list page uses a multi-column layout (i.e. it does not
contain 1000px-lines of text.)
Before: ![api-list before][1]
After: ![api-list after][2]
[1]: https://user-images.githubusercontent.com/8604205/109396457-5f5e1f00-793a-11eb-80cf-1418f409325a.png
[2]: https://user-images.githubusercontent.com/8604205/109396659-499d2980-793b-11eb-95d3-f54250f7fab5.png
PR Close#41051
Previously, each marketing page used a different limit for its content's
width (if it had a limit at all) and implemented the width limiting in a
different way. Besides resulting in an inconsistent UX, this also made
it difficult to apply site-wide layout changes.
This commit makes the limit for most marketing pages consistent and uses
the same CSS class to make it easier to apply site-wide changes in the
future. The chosen limit is slightly larger than that of docs pages
(62.5em/1000px vs 50em/800px), because marketing pages have a different
type of content and layout (i.e. images, multi-column layout, etc.).
Finally, this commit also removes obsolete wrapper elements, CSS classes
and CSS styles, that are no longer necessary after the changes.
Notably, the homepage (`/`) and the "Contributors" page (`/about`) have
remained unchanged, because the former has its own layout that is
different from other marketing pages and the latter would offer a worse
UX with a small content width limit (as the one used on other marketing
pages).
The content widths of the rest of the marketing pages change slightly as
a result of the changes in this commit, but not in a way that would have
a negative impact on UX. More specifically:
| Page (URL) | Size before | Size after |
|:--------------|------------:|-----------:|
| `/contribute` | 880px | 1000px |
| `/events` | unlimited | 1000px |
| `/features` | 996px | 1000px |
| `/presskit` | 800px | 1000px |
| `/resources` | 800px | 1000px |
PR Close#41051
This commit removes an unnecessary wrapper `<div>` from the
"Cheat sheet" guide. The CSS styles that referenced the element's ID
(`#cheatsheet`) have been updated to use `.page-guide-cheatsheet`
instead.
PR Close#41051
Previously, styling of `<code>` elements utilized the `:not()` CSS
pseudo-class with multiple selectors (`:not(h1, h2, ...)`). It turns out
that older browsers (such as IE11) do not support multiple selectors in
a single `:not()` instance.
(See [MDN][1] and [CanIUse][2] for more info.)
This commit fixes `<code>` styling to use multiple separate `:not()`
instances instead (`:not(h1):not(h2)...`), so that they are styled
correctly on older browsers as well.
NOTE:
This change seems to trigger some kind of bug in LightHouse that causes
the a11y score of `/start` to be calculated as 0 (which is clearly
wrong). This happens on Linux (tested on CI and locally using the
Windows Subsystem for Linux (WSL)) - on Windows the score is computed
correctly as 98/100.
([Example failure][3])
The bug seems to be related to the layout of the content and goes away
if we change the viewport size (for example, switching to LightHouse's
`desktop` config) or make another change that affects the content's
layout (for example, reducing the padding of `<code>` elements).
To work around the issue, this commit updates the `test-aio-a11y.js`
script to test `/start-routing` instead of `/start`.
[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/:not#description:~:text=Using%20two%20selectors
[2]: https://caniuse.com/css-not-sel-list
[3]: https://circleci.com/gh/angular/angular/931038
PR Close#41051
The "Features" page organizes features in groups/rows of 3 features
each. On wide screens, all 3 paragraphs of a group/row can be shown next
to each other. On narrow screens, the layout changes to stack the
paragraphs vertically. On medium screens, however, the 3rd paragragh is
wrapped over to the next line.
Previously, the wrapped content was left-aligned, which left a lot of
empty space on the right.
This commit improves the layout on medium screens by ensuring the
paragraphs are horizontally centered (with space distributed evenly
around them).
Before: ![features page before][1]
After: ![features page after][2]
[1]: https://user-images.githubusercontent.com/8604205/109344670-b64ef000-7877-11eb-9013-890562ff2f3d.png
[2]: https://user-images.githubusercontent.com/8604205/109344678-b7801d00-7877-11eb-9224-d7715f7d7235.png
PR Close#41051
This commit cleans up the styles and the elements/classes used for
styling the content of the `<aio-resource-list>` component.
This change has been extracted from #36045.
Co-authored-by: Stefanie Fluin <sjtrimble@gmail.com>
PR Close#40944
Since `.filter-button` elements only appear inside `.group-buttons`
elements, this commit moves `.filter-button` CSS styles inside
`.group-buttons` styles.
PR Close#40944
Previously, in order to apply some styles to marketing (i.e. non-docs)
pages, we listed the various `.page-*` classes that corresponded to docs
pages. This meant that adding/removing a marketing page required updates
in several places, which is error-prone.
This commit avoids this by using a Sass mixin for applying styles to
marketing pages.
PR Close#40881
This commit removes some unnecessary styles setting `font-family` to
`$main-font`. These styles are redundant, because the targeted elements
already inherit this style from `<body>`.
PR Close#40881
Previously, the API list container (in the template of the
`<aio-api-list>` component) had three different CSS classes
(`.api-list-container`, `.docs-content`, `.l-content-small`) that were
all used for styling it. This seemed unnecessary and made it more difficult
to see what styles were applied to the container.
This commit removes the extra classes and consolidates the styles under
the `.api-list-container` class (which was the most descriptive one).
PR Close#40704
This commit ensures that all styles for the API list page (which are
defined in `_api-list.scss`) only apply to elements inside an
`<aio-api-list>` element. This will prevent the styles accidentally
taking effect on a different part of the app.
PR Close#40704
The `.code-anchor` class can be used anywhere where we have code
examples (including API pages and docs guides). Previously, global
styles for `.code-anchor` were defined in `_api-list.scss` (i.e. the
styles from `_api-list.scss` were also applied to `.code-anchor`
elements in other pages/components).
This commit moves the `.code-anchor` styles to `_code.scss`, which
contains other common code-related styles.
PR Close#40704
The `.symbol` CSS class (which is primarily used to denote the type of
API symbols - classes, functions, interfaces, etc.) are used in several
places:
- In the API list page (with the corresponding styles defined in
`_api-list.scss`).
- In search results (with the corresponding styles defined in
`_errors.scss`).
- In error list page (with the corresponding styles defined in
`search-results.scss`).
- In the `<aio-select>` component (with the corresponding styles defined
in `_select-menu.scss`).
Previously, global styles for `.symbol` were defined in `_api-list.scss`
(i.e. the styles from `_api-list.scss` were also applied to `.symbol`
elements in other places/components). Also, some of the SCSS files
mentioned above defined some duplicate styles for `.symbol`.
This commit moves the `.symbol` styles to a new `_api-symbols.scss`
file, which contains common symbol-related styles.
PR Close#40704
This commit removes some styles from `_api-list.scss` that are no longer
used (i.e. either their CSS selectors do not match any element in the
app or they are overridden by other rules).
PR Close#40704
This commit ensures that all styles for the TOC (which are defined in
`_toc.scss`) only apply to elements inside an `<aio-toc>` element. This
will prevent the styles accidentally taking effect on a different part
of the app.
PR Close#40704
This commit ensures that all styles for the select-menu element (which
are defined in `_select-menu.scss`) only apply to elements inside an
`<aio-select>` element. This will prevent the styles accidentally taking
effect on a different part of the app.
PR Close#40704
This commit ensures that all styles for the "Resources" page (which are
defined in `_resources.scss`) only apply to elements inside an
`<aio-resource-list>` element. This will prevent the styles accidentally
taking effect on a different part of the app.
PR Close#40704
This commit removes some styles from `_resources.scss` that are no
longer used (i.e. either their CSS selectors do not match any element in
the app or they are overridden by other rules).
PR Close#40704
