From a086976d68cc5c2f4e913deaf77121db89ed20a5 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Tue, 2 Feb 2021 14:35:43 +0200
Subject: [PATCH] fix(docs-infra): improve heading styles (#40427)

This commit includes some general improvements to heading styles
(font-weight, margin/padding). It also adds a horizontal separator above
`<h2>` headings to segment important sections more easily.
(As a consequence, we can remove several `<hr />` elements right before
`<h2>` headings.)

Co-authored-by: Stefanie Fluin <sjtrimble@gmail.com>

PR Close #40427
---
 aio/content/guide/aot-metadata-errors.md      | 21 --------
 aio/content/guide/architecture.md             |  7 ++-
 aio/content/guide/attribute-binding.md        |  9 ----
 aio/content/guide/attribute-directives.md     |  3 --
 aio/content/guide/built-in-directives.md      | 22 --------
 aio/content/guide/dependency-injection.md     |  3 --
 aio/content/guide/deployment.md               |  6 ---
 aio/content/guide/elements.md                 |  2 -
 aio/content/guide/entry-components.md         |  2 -
 aio/content/guide/event-binding.md            |  2 -
 aio/content/guide/feature-modules.md          |  2 -
 aio/content/guide/frequent-ngmodules.md       |  2 -
 .../hierarchical-dependency-injection.md      |  2 -
 aio/content/guide/language-service.md         |  2 -
 aio/content/guide/lazy-loading-ngmodules.md   |  2 -
 aio/content/guide/ngmodule-api.md             |  2 -
 aio/content/guide/ngmodule-faq.md             | 53 -------------------
 aio/content/guide/ngmodules.md                |  2 -
 aio/content/guide/property-binding.md         |  4 --
 aio/content/guide/providers.md                |  3 --
 aio/content/guide/router.md                   |  3 --
 .../guide/service-worker-communications.md    |  2 -
 aio/content/guide/service-worker-devops.md    | 16 +++---
 .../guide/service-worker-getting-started.md   |  2 -
 aio/content/guide/sharing-ngmodules.md        |  2 -
 aio/content/guide/singleton-services.md       |  2 -
 aio/content/guide/template-syntax.md          |  1 -
 aio/content/guide/test-debugging.md           |  2 -
 .../guide/testing-attribute-directives.md     |  2 -
 .../guide/testing-components-scenarios.md     | 36 -------------
 aio/content/guide/testing-utility-apis.md     |  6 ---
 aio/content/guide/testing.md                  |  2 -
 aio/content/start/index.md                    |  3 --
 aio/src/styles/0-base/_typography.scss        | 39 +++++++++-----
 aio/src/styles/2-modules/_api-list.scss       |  1 +
 35 files changed, 36 insertions(+), 234 deletions(-)

diff --git a/aio/content/guide/aot-metadata-errors.md b/aio/content/guide/aot-metadata-errors.md
index 18487917e4..143199e71b 100644
--- a/aio/content/guide/aot-metadata-errors.md
+++ b/aio/content/guide/aot-metadata-errors.md
@@ -15,8 +15,6 @@ The following are metadata errors you may encounter, with explanations and sugge
 [Tagged template expressions are not supported](#tagged-template-expressions-not-supported)<br>
 [Symbol reference expected](#symbol-reference-expected)<br>
 
-<hr>
-
 {@a expression-form-not-supported}
 ## Expression form not supported
 
@@ -47,8 +45,6 @@ Avoid this error by sticking to the compiler's [restricted expression syntax](gu
 when writing Angular metadata
 and be wary of new or unusual TypeScript features.
 
-<hr>
-
 {@a reference-to-a-local-symbol}
 ## Reference to a local (non-exported) symbol
 
@@ -128,8 +124,6 @@ The compiler needs the value of the `template` property _right now_ to generate
 The variable reference alone is insufficient.
 Prefixing the declaration with `export` merely produces a new error, "[`Only initialized variables and constants can be referenced`](#only-initialized-variables)".
 
-<hr>
-
 {@a only-initialized-variables}
 ## Only initialized variables and constants
 
@@ -187,8 +181,6 @@ export let someTemplate = '<h1>Greetings from Angular</h1>';
 export class MyComponent {}
 ```
 
-<hr>
-
 {@a reference-to-a-non-exported-class}
 ## Reference to a non-exported class
 
@@ -228,7 +220,6 @@ export abstract class MyStrategy { }
   ]
   ...
 ```
-<hr>
 
 {@a reference-to-a-non-exported-function}
 ## Reference to a non-exported function
@@ -266,7 +257,6 @@ export function myStrategy() { ... }
   ]
   ...
 ```
-<hr>
 
 {@a function-calls-not-supported}
 ## Function calls are not supported
@@ -322,8 +312,6 @@ export function someValueFactory() {
   ...
 ```
 
-<hr>
-
 {@a destructured-variable-not-supported}
 ## Destructured variable or constant not supported
 
@@ -364,8 +352,6 @@ import { configuration } from './configuration';
   ...
 ```
 
-<hr>
-
 {@a could-not-resolve-type}
 ## Could not resolve type
 
@@ -437,7 +423,6 @@ export class MyComponent {
   constructor (@Inject(DOCUMENT) private doc: Document) { ... }
 }
 ```
-<hr>
 
 {@a name-expected}
 ## Name expected
@@ -462,8 +447,6 @@ Change the name of the property to something non-numeric.
 provider: [{ provide: Foo, useValue: { '0': 'test' } }]
 ```
 
-<hr>
-
 {@a unsupported-enum-member-name}
 ## Unsupported enum member name
 
@@ -494,8 +477,6 @@ enum Colors {
 
 Avoid referring to enums with complicated initializers or computed properties.
 
-<hr>
-
 {@a tagged-template-expressions-not-supported}
 ## Tagged template expressions are not supported
 
@@ -520,8 +501,6 @@ is a _tag function_ native to JavaScript ES2015.
 
 The AOT compiler does not support tagged template expressions; avoid them in metadata expressions.
 
-<hr>
-
 {@a symbol-reference-expected}
 ## Symbol reference expected
 
diff --git a/aio/content/guide/architecture.md b/aio/content/guide/architecture.md
index 8a8d6309f1..59977152b1 100644
--- a/aio/content/guide/architecture.md
+++ b/aio/content/guide/architecture.md
@@ -114,13 +114,12 @@ The router interprets a link URL according to your app's view navigation rules a
 
 To define navigation rules, you associate *navigation paths* with your components. A path uses a URL-like syntax that integrates your program data, in much the same way that template syntax integrates your views with your program data. You can then apply program logic to choose which views to show or to hide, in response to user input and your own access rules.
 
- <div class="alert is-helpful">
+<div class="alert is-helpful">
 
-   For a more detailed discussion, see [Routing and navigation](guide/router).
+  For a more detailed discussion, see [Routing and navigation](guide/router).
 
- </div>
+</div>
 
-<hr/>
 
 ## What's next
 
diff --git a/aio/content/guide/attribute-binding.md b/aio/content/guide/attribute-binding.md
index 81597a9fea..2ae2f3b0ea 100644
--- a/aio/content/guide/attribute-binding.md
+++ b/aio/content/guide/attribute-binding.md
@@ -74,10 +74,8 @@ For more information on how to bind to the `colSpan` property, see the [`colspan
 
 </div>
 
-<hr/>
 
 {@a class-binding}
-
 ## Binding to the `class` attribute
 
 You can use class binding to add and remove CSS class names from an element's `class` attribute.
@@ -159,10 +157,8 @@ The following table summarizes class binding syntax.
   </tr>
 </table>
 
-<hr/>
 
 {@a style-binding}
-
 ## Binding to the style attribute
 
 You can use style binding to set styles dynamically.
@@ -260,10 +256,7 @@ However, using the above style binding syntax without `NgStyle` is preferred bec
 
 </div>
 
-<hr/>
-
 {@a styling-precedence}
-
 ## Styling Precedence
 
 A single HTML element can have its CSS class list and style values bound to multiple sources (for example, host bindings from multiple directives).
@@ -326,8 +319,6 @@ In that case, if `dirWithHostBinding` sets its binding to `undefined`, the `widt
 However, if `dirWithHostBinding` sets its binding to `null`, the `width` property will be removed entirely.
 
 
-<hr/>
-
 ## Injecting attribute values
 
 There are cases where you need to differentiate the behavior of a [Component](api/core/Component) or [Directive](api/core/Directive) based on a static value set on the host element as an HTML attribute. For example, you might have a directive that needs to know the `type` of a `<button>` or `<input>` element.
diff --git a/aio/content/guide/attribute-directives.md b/aio/content/guide/attribute-directives.md
index 908ce0aa87..42562504e9 100644
--- a/aio/content/guide/attribute-directives.md
+++ b/aio/content/guide/attribute-directives.md
@@ -311,10 +311,7 @@ Here's how the harness should work when you're done coding.
   <img src="generated/images/guide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight">
 </div>
 
-<hr />
-
 {@a ngNonBindable}
-
 ## `ngNonBindable`
 
 With the built-in template primitive `ngNonBindable`, Angular won't
diff --git a/aio/content/guide/built-in-directives.md b/aio/content/guide/built-in-directives.md
index c70531358d..294b90f690 100644
--- a/aio/content/guide/built-in-directives.md
+++ b/aio/content/guide/built-in-directives.md
@@ -10,10 +10,7 @@ See the <live-example></live-example> for a working example containing the code
 
 For more detail, including how to build your own custom directives, see [Attribute Directives](guide/attribute-directives) and [Structural Directives](guide/structural-directives).
 
-<hr/>
-
 {@a attribute-directives}
-
 ## Built-in attribute directives
 
 Attribute directives listen to and modify the behavior of
@@ -28,10 +25,7 @@ The most common attribute directives are as follows:
 * [`NgStyle`](guide/built-in-directives#ngStyle)&mdash;adds and removes a set of HTML styles.
 * [`NgModel`](guide/built-in-directives#ngModel)&mdash;adds two-way data binding to an HTML form element.
 
-<hr/>
-
 {@a ngClass}
-
 ## `NgClass`
 
 Add or remove several CSS classes simultaneously with `ngClass`.
@@ -62,10 +56,7 @@ both initially and when the dependent properties change.
 
 </div>
 
-<hr/>
-
 {@a ngStyle}
-
 ## `NgStyle`
 
 Use `NgStyle` to set many inline styles simultaneously and dynamically, based on the state of the component.
@@ -95,10 +86,7 @@ Remember to call `setCurrentStyles()`, both initially and when the dependent pro
 </div>
 
 
-<hr/>
-
 {@a ngModel}
-
 ## `[(ngModel)]`: Two-way binding
 
 The `NgModel` directive allows you to display a data property and
@@ -167,10 +155,7 @@ Here are all variations in action, including the uppercase version:
   <img src='generated/images/guide/built-in-directives/ng-model-anim.gif' alt="NgModel variations">
 </div>
 
-<hr/>
-
 {@a structural-directives}
-
 ## Built-in _structural_ directives
 
 Structural directives are responsible for HTML layout.
@@ -198,10 +183,7 @@ to group elements when there is no suitable host element for the directive.
 
 </div>
 
-<hr/>
-
 {@a ngIf}
-
 ## NgIf
 
 You can add or remove an element from the DOM by applying an `NgIf` directive to
@@ -265,8 +247,6 @@ The `nullCustomer` will not be displayed as long as it is `null`.
 
 <code-example path="built-in-directives/src/app/app.component.html" region="NgIf-2b" header="src/app/app.component.html"></code-example>
 
-<hr/>
-
 {@a ngFor}
 ## `NgFor`
 
@@ -383,8 +363,6 @@ they do not have special access to any private APIs that other directives can't
 
 </div>
 
-<hr/>
-
 {@a ngSwitch}
 ## The `NgSwitch` directives
 
diff --git a/aio/content/guide/dependency-injection.md b/aio/content/guide/dependency-injection.md
index a02eb24b75..63c297c7ec 100644
--- a/aio/content/guide/dependency-injection.md
+++ b/aio/content/guide/dependency-injection.md
@@ -90,11 +90,8 @@ The revised second version does depend on `Logger` service.
 
 </code-tabs>
 
-
 In this example, the `getHeroes()` method uses the `Logger` service by logging a message when fetching heroes.
 
-<hr />
-
 ## What's next
 
 * [Dependency providers](guide/dependency-injection-providers)
diff --git a/aio/content/guide/deployment.md b/aio/content/guide/deployment.md
index f42d671caf..acdfc3e5b0 100644
--- a/aio/content/guide/deployment.md
+++ b/aio/content/guide/deployment.md
@@ -156,10 +156,7 @@ Check out [angular-cli-ghpages](https://github.com/angular-buch/angular-cli-ghpa
 
 </div>
 
-<hr>
-
 {@a server-configuration}
-
 ## Server configuration
 
 This section covers changes you may have to make to the server or to files deployed on the server.
@@ -299,10 +296,7 @@ The server must be configured to accept the application's requests.
 Read about how to enable CORS for specific servers at
 <a href="https://enable-cors.org/server.html" title="Enabling CORS server">enable-cors.org</a>.
 
-<hr>
-
 {@a optimize}
-
 ## Production optimizations
 
 The `--prod` _meta-flag_ engages the following build optimization features.
diff --git a/aio/content/guide/elements.md b/aio/content/guide/elements.md
index 96f55cc284..74ec98b533 100644
--- a/aio/content/guide/elements.md
+++ b/aio/content/guide/elements.md
@@ -52,8 +52,6 @@ When your custom element is placed on a page, the browser creates an instance of
   <img src="generated/images/guide/elements/customElement1.png" alt="Custom element in browser" class="left">
 </div>
 
-<hr class="clear">
-
 ## Transforming components to custom elements
 
 Angular provides the `createCustomElement()` function for converting an Angular component,
diff --git a/aio/content/guide/entry-components.md b/aio/content/guide/entry-components.md
index f23542b0d6..ad685ebb85 100644
--- a/aio/content/guide/entry-components.md
+++ b/aio/content/guide/entry-components.md
@@ -107,8 +107,6 @@ the tree shaker will throw it away. So, it's best to add only the components tha
 as trim as possible.
 
 
-<hr />
-
 ## More on Angular modules
 
 You may also be interested in the following:
diff --git a/aio/content/guide/event-binding.md b/aio/content/guide/event-binding.md
index 078939456f..2d2c91fb3c 100644
--- a/aio/content/guide/event-binding.md
+++ b/aio/content/guide/event-binding.md
@@ -59,8 +59,6 @@ In the following example, Angular checks to see if `myClick` is an event on the
 
 If the target event name, `myClick` fails to match an element event or an output property of `ClickDirective`, Angular reports an "unknown directive" error.
 
-<hr />
-
 ## What's next
 
 For more information on how event binding works, see [How event binding works](guide/event-binding-concepts).
diff --git a/aio/content/guide/feature-modules.md b/aio/content/guide/feature-modules.md
index 961c791580..0abc04166b 100644
--- a/aio/content/guide/feature-modules.md
+++ b/aio/content/guide/feature-modules.md
@@ -106,8 +106,6 @@ Now, in addition to the title that renders by default, the `CustomerDashboardCom
   <img src="generated/images/guide/feature-modules/feature-module.png" alt="feature module component">
 </div>
 
-<hr />
-
 ## More on NgModules
 
 You may also be interested in the following:
diff --git a/aio/content/guide/frequent-ngmodules.md b/aio/content/guide/frequent-ngmodules.md
index 75701a67f6..c1e53ed4a7 100644
--- a/aio/content/guide/frequent-ngmodules.md
+++ b/aio/content/guide/frequent-ngmodules.md
@@ -115,8 +115,6 @@ Angular returns an error telling you to use `CommonModule` instead.
   <img src="generated/images/guide/frequent-ngmodules/browser-module-error.gif" width=750 alt="BrowserModule error">
 </div>
 
-<hr />
-
 
 ## More on NgModules
 
diff --git a/aio/content/guide/hierarchical-dependency-injection.md b/aio/content/guide/hierarchical-dependency-injection.md
index f1bde65a95..38babf58ca 100644
--- a/aio/content/guide/hierarchical-dependency-injection.md
+++ b/aio/content/guide/hierarchical-dependency-injection.md
@@ -1183,8 +1183,6 @@ its injector produces an instance of `Car` resolved by injector (C) with an `Eng
 </div>
 
 
-<hr />
-
 ## More on dependency injection
 
 For more information on Angular dependency injection, see the [DI Providers](guide/dependency-injection-providers) and [DI in Action](guide/dependency-injection-in-action) guides.
diff --git a/aio/content/guide/language-service.md b/aio/content/guide/language-service.md
index ad80648868..ea9f29115e 100644
--- a/aio/content/guide/language-service.md
+++ b/aio/content/guide/language-service.md
@@ -123,8 +123,6 @@ The HTML AST can only tell the compiler that there is some text with the charact
 That's when the template parser produces an expression AST, which resides within the template AST.
 The Angular Language Services then looks at `data.---` within its context, asks the TypeScript Language Service what the members of `data` are, and returns the list of possibilities.
 
-<hr>
-
 ## More information
 
 * For more in-depth information on the implementation, see the
diff --git a/aio/content/guide/lazy-loading-ngmodules.md b/aio/content/guide/lazy-loading-ngmodules.md
index 7186d99700..7c3e41d8b5 100644
--- a/aio/content/guide/lazy-loading-ngmodules.md
+++ b/aio/content/guide/lazy-loading-ngmodules.md
@@ -323,8 +323,6 @@ ngOnInit() {
 For more information with a working example, see the [routing tutorial section on preloading](guide/router-tutorial-toh#preloading-background-loading-of-feature-areas).
 
 
-<hr>
-
 ## More on NgModules and routing
 
 You may also be interested in the following:
diff --git a/aio/content/guide/ngmodule-api.md b/aio/content/guide/ngmodule-api.md
index 25e1ee3610..ea10fa04db 100644
--- a/aio/content/guide/ngmodule-api.md
+++ b/aio/content/guide/ngmodule-api.md
@@ -220,8 +220,6 @@ The following table summarizes the `@NgModule` metadata properties.
 </table>
 
 
-<hr />
-
 ## More on NgModules
 
 You may also be interested in the following:
diff --git a/aio/content/guide/ngmodule-faq.md b/aio/content/guide/ngmodule-faq.md
index d1fed5ba9b..c505b8f274 100644
--- a/aio/content/guide/ngmodule-faq.md
+++ b/aio/content/guide/ngmodule-faq.md
@@ -12,17 +12,14 @@ Add [declarable](guide/bootstrapping#the-declarations-array) classes&mdash;compo
 Declare these classes in _exactly one_ module of the application.
 Declare them in a module if they belong to that particular module.
 
-<hr/>
 
 {@a q-declarable}
-
 ## What is a _declarable_?
 
 Declarables are the class types&mdash;components, directives, and pipes&mdash;that
 you can add to a module's `declarations` list.
 They're the only classes that you can add to `declarations`.
 
-<hr/>
 
 ## What classes should I _not_ add to `declarations`?
 
@@ -39,8 +36,6 @@ For example, don't declare `FORMS_DIRECTIVES` from `@angular/forms` because the
 * Non-Angular classes and objects, such as
 strings, numbers, functions, entity models, configurations, business logic, and helper classes.
 
-<hr/>
-
 
 ## Why list the same component in multiple `NgModule` properties?
 
@@ -56,7 +51,6 @@ Membership in one list doesn't imply membership in another list.
 * A component could be exported for inclusion in an external component's template
 as well as dynamically loaded in a pop-up dialog.
 
-<hr/>
 
 ## What does "Can't bind to 'x' since it isn't a known property of 'y'" mean?
 
@@ -70,7 +64,6 @@ The "x" class isn't visible to other modules until you add it to the `exports` l
 
 </div>
 
-<hr/>
 
 ## What should I import?
 
@@ -89,10 +82,8 @@ components, directives, and pipes.
 
 Import [BrowserModule](guide/ngmodule-faq#q-browser-vs-common-module) only in the root `AppModule`.
 
-<hr/>
 
 {@a q-browser-vs-common-module}
-
 ## Should I import `BrowserModule` or `CommonModule`?
 
 The root application module, `AppModule`, of almost every browser application
@@ -110,10 +101,8 @@ They need the common directives. They don't need to re-install the app-wide prov
 
 Importing `CommonModule` also frees feature modules for use on _any_ target platform, not just browsers.
 
-<hr/>
 
 {@a q-reimport}
-
 ## What if I import the same module twice?
 
 That's not a problem. When three modules all import Module 'A',
@@ -126,10 +115,8 @@ When Angular gets to the 'B' and 'A' in 'D', they're already cached and ready to
 
 Angular doesn't like NgModules with circular references, so don't let Module 'A' import Module 'B', which imports Module 'A'.
 
-<hr/>
 
 {@a q-reexport}
-
 ## What should I export?
 
 Export [declarable](guide/bootstrapping#the-declarations-array) classes that components in _other_ NgModules
@@ -143,7 +130,6 @@ it's declared in this NgModule or in an imported NgModule.
 You _can_ re-export entire imported NgModules, which effectively re-export all of their exported classes.
 An NgModule can even export a module that it doesn't import.
 
-<hr/>
 
 ## What should I *not* export?
 
@@ -159,9 +145,6 @@ While there's no harm in exporting them, there's also no benefit.
 For example, there's no point in re-exporting `HttpClientModule` because it doesn't export anything.
 Its only purpose is to add http service providers to the application as a whole.
 
-<hr/>
-
-
 
 ## Can I re-export classes and modules?
 
@@ -185,9 +168,6 @@ For example, there's no point in re-exporting `HttpClientModule` because it does
 Its only purpose is to add http service providers to the application as a whole.
 
 
-<hr/>
-
-
 ## What is the `forRoot()` method?
 
 The `forRoot()` static method is a convention that makes it easy for developers to configure services and providers that are intended to be singletons. A good example of `forRoot()` is the `RouterModule.forRoot()` method.
@@ -211,9 +191,6 @@ configure services in root and feature modules respectively.
 Follow this convention when you write similar modules with configurable service providers.
 
 
-<hr/>
-
-
 ## Why is a service provided in a feature module visible everywhere?
 
 Providers listed in the `@NgModule.providers` of a bootstrapped module have application scope.
@@ -238,10 +215,8 @@ not just the classes declared in the `HeroModule`.
 
 To limit access to a service, consider lazy loading the NgModule that provides that service. See [How do I restrict service scope to a module?](guide/ngmodule-faq#service-scope) for more information.
 
-<hr/>
 
 {@a q-lazy-loaded-module-provider-visibility}
-
 ## Why is a service provided in a lazy-loaded module visible only to that module?
 
 Unlike providers of the modules loaded at launch,
@@ -257,8 +232,6 @@ These providers are insulated from changes to application providers with the sam
 When the router creates a component within the lazy-loaded context,
 Angular prefers service instances created from these providers to the service instances of the application root injector.
 
-<hr/>
-
 
 ## What if two modules provide the same service?
 
@@ -277,10 +250,8 @@ that also provides a service for token 'X', then NgModule A's service definition
 The service provided by the root `AppModule` takes precedence over services provided by imported NgModules.
 The `AppModule` always wins.
 
-<hr/>
 
 {@a service-scope}
-
 ## How do I restrict service scope to a module?
 
 When a module is loaded at application launch,
@@ -329,11 +300,8 @@ Define child routes and let the router load module components into that outlet.
 
 Though you can limit access to a service by providing it in a lazy loaded module or providing it in a component, providing services in a component can lead to multiple instances of those services. Thus, the lazy loading is preferable.
 
-<hr/>
 
 {@a q-root-component-or-module}
-
-
 ## Should I add application-wide providers to the root `AppModule` or the root `AppComponent`?
 
  Define application-wide providers by specifying `providedIn: 'root'` on its `@Injectable()` decorator (in the case of services) or at `InjectionToken` construction (in the case where tokens are provided). Providers that are created this way automatically are made available to the entire application and don't need to be listed in any module.
@@ -366,10 +334,8 @@ But in routed applications, routing operates at the root level
 where `AppComponent` services don't exist.
 This means that lazy-loaded modules can't reach them.
 
-<hr/>
 
 {@a q-component-or-module}
-
 ## Should I add other providers to a module or a component?
 
 Providers should be configured using `@Injectable` syntax. If possible, they should be provided in the application root (`providedIn: 'root'`). Services that are configured this way are lazily loaded if they are only used from a lazily loaded context.
@@ -389,11 +355,8 @@ The changes that editor makes in its service don't touch the instances elsewhere
 [Always register _application-wide_ services with the root `AppModule`](guide/ngmodule-faq#q-root-component-or-module),
 not the root `AppComponent`.
 
-<hr/>
 
 {@a q-why-bad}
-
-
 ## Why is it bad if a shared module provides a service to a lazy-loaded module?
 
 ### The eagerly loaded scenario
@@ -426,10 +389,8 @@ Then toggle between the "Contact" and "Heroes" links a few times.
 The username goes bonkers as the Angular creates a new `UserService` instance each time.
 I'd like to see the error so I can include it.-->
 
-<hr/>
 
 {@a q-why-child-injector}
-
 ## Why does lazy loading create a child injector?
 
 Angular adds `@NgModule.providers` to the application root injector, unless the NgModule is lazy-loaded.
@@ -453,10 +414,8 @@ Angular must add the lazy-loaded module's providers to an injector somewhere.
 It can't add them to the app root injector because that injector is closed to new providers.
 So Angular creates a new child injector for the lazy-loaded module context.
 
-<hr/>
 
 {@a q-is-it-loaded}
-
 ## How can I tell if an NgModule or service was previously loaded?
 
 Some NgModules and their services should be loaded only once by the root `AppModule`.
@@ -472,10 +431,8 @@ Here is a custom constructor for an NgModule called `GreetingModule`.
 
 <code-example path="ngmodules/src/app/greeting/greeting.module.ts" region="ctor" header="src/app/greeting/greeting.module.ts (Constructor)"></code-example>
 
-<hr/>
 
 {@a q-entry-component-defined}
-
 ## What is an `entry component`?
 
 An entry component is any component that Angular loads _imperatively_ by type.
@@ -498,7 +455,6 @@ loads the component dynamically into a `RouterOutlet`.
 
 For more information, see [Entry Components](guide/entry-components).
 
-<hr/>
 
 ## What's the difference between a _bootstrap_ component and an _entry component_?
 
@@ -514,7 +470,6 @@ although doing so is harmless.
 
 For more information, see [Entry Components](guide/entry-components).
 
-<hr/>
 
 ## When do I add components to _entryComponents_?
 
@@ -535,8 +490,6 @@ in the templates of other components.
 
 For more information, see [Entry Components](guide/entry-components).
 
-<hr/>
-
 
 ## Why does Angular need _entryComponents_?
 
@@ -559,7 +512,6 @@ and every component reachable from an entry component.
 If a component isn't an _entry component_ or wasn't found in a template,
 the compiler omits it.
 
-<hr/>
 
 ## What kinds of modules should I have and how should I use them?
 
@@ -593,7 +545,6 @@ For more information, see [Feature Modules](guide/feature-modules) and
 [Module Types](guide/module-types)
 
 
-
 ## What's the difference between NgModules and JavaScript Modules?
 
 In an Angular app, NgModules and JavaScript modules work together.
@@ -610,10 +561,8 @@ You _export_ this NgModule's classes so they can be imported and used by compone
 
 For more information, see [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
 
-<hr/>
 
 {@a q-template-reference}
-
 ## How does Angular find components, directives, and pipes in a template?<br>What is a <i><b>template reference</b></i>?
 
 The [Angular compiler](guide/ngmodule-faq#q-angular-compiler) looks inside component templates
@@ -626,10 +575,8 @@ The compiler finds a pipe if the pipe's *name* appears within the pipe syntax of
 Angular only matches selectors and pipe names for classes that are declared by this module
 or exported by a module that this module imports.
 
-<hr/>
 
 {@a q-angular-compiler}
-
 ## What is the Angular compiler?
 
 The Angular compiler converts the application code you write into highly performant JavaScript code.
diff --git a/aio/content/guide/ngmodules.md b/aio/content/guide/ngmodules.md
index a577f4db9c..cb7da55b26 100644
--- a/aio/content/guide/ngmodules.md
+++ b/aio/content/guide/ngmodules.md
@@ -57,8 +57,6 @@ The [Angular CLI](cli) generates the following basic `AppModule` when creating a
 
 At the top are the import statements. The next section is where you configure the `@NgModule` by stating what components and directives belong to it (`declarations`) as well as which other modules it uses (`imports`). For more information on the structure of an `@NgModule`, be sure to read [Bootstrapping](guide/bootstrapping).
 
-<hr />
-
 ## More on NgModules
 
 You may also be interested in the following:
diff --git a/aio/content/guide/property-binding.md b/aio/content/guide/property-binding.md
index 5e5631ed5f..5e63c64834 100644
--- a/aio/content/guide/property-binding.md
+++ b/aio/content/guide/property-binding.md
@@ -18,8 +18,6 @@ To get the most out of property binding, you should be familiar with the followi
 * [Basics of templates](guide/glossary#template)
 * [Binding syntax](guide/binding-syntax)
 
-<hr />
-
 ## Understanding the flow of data
 
 Property binding moves a value in one direction, from a component's property into a target element property.
@@ -196,8 +194,6 @@ The following binding pairs do the same thing.
 You can use either form when rendering data values as strings, though interpolation is preferable for readability.
 However, when setting an element property to a non-string data value, you must use property binding.
 
-<hr />
-
 ## What's next
 
 * [Property binding best practices](guide/property-binding-best-practices)
diff --git a/aio/content/guide/providers.md b/aio/content/guide/providers.md
index 2d7b8e1d94..eab522d4da 100644
--- a/aio/content/guide/providers.md
+++ b/aio/content/guide/providers.md
@@ -97,9 +97,6 @@ Child modules and component injectors are independent of each other, and create
 For more information, see [Hierarchical injectors](guide/hierarchical-dependency-injection).
 
 
-
-<hr>
-
 ## More on NgModules
 
 You may also be interested in:
diff --git a/aio/content/guide/router.md b/aio/content/guide/router.md
index b7aea18a7b..a3aa6036b0 100644
--- a/aio/content/guide/router.md
+++ b/aio/content/guide/router.md
@@ -19,10 +19,7 @@ Before creating a route, you should be familiar with the following:
 For an introduction to Angular with a ready-made app, see [Getting Started](start).
 For a more in-depth experience of building an Angular app, see the [Tour of Heroes](tutorial) tutorial. Both guide you through using component classes and templates.
 
-<hr />
-
 {@a basics}
-
 ## Generate an app with routing enabled
 
 The following command uses the Angular CLI to generate a basic Angular app with an app routing module, called `AppRoutingModule`, which is an NgModule where you can configure your routes.
diff --git a/aio/content/guide/service-worker-communications.md b/aio/content/guide/service-worker-communications.md
index d38287973b..3b971cac76 100644
--- a/aio/content/guide/service-worker-communications.md
+++ b/aio/content/guide/service-worker-communications.md
@@ -7,8 +7,6 @@ Importing `ServiceWorkerModule` into your `AppModule` doesn't just register the
 A basic understanding of the following:
 * [Getting Started with Service Workers](guide/service-worker-getting-started).
 
-<hr />
-
 
 ## `SwUpdate` service
 
diff --git a/aio/content/guide/service-worker-devops.md b/aio/content/guide/service-worker-devops.md
index d54354428d..3c8de12006 100644
--- a/aio/content/guide/service-worker-devops.md
+++ b/aio/content/guide/service-worker-devops.md
@@ -7,8 +7,6 @@ This page is a reference for deploying and supporting production apps that use t
 A basic understanding of the following:
 * [Service Worker Communication](guide/service-worker-communications).
 
-<hr />
-
 ## Service worker and caching of app resources
 
 Conceptually, you can imagine the Angular service worker as a forward cache or a CDN edge that is installed in the end user's web browser. The service worker's job is to satisfy requests made by the Angular app for resources or data from a local cache, without needing to wait for the network. Like any cache, it has rules for how content is expired and updated.
@@ -346,16 +344,16 @@ the past on your site.
 
 ### Changing your app's location
 
-It is important to note that service workers don't work behind redirect. You 
+It is important to note that service workers don't work behind redirect. You
 may have already encountered the error `The script resource is behind a redirect, which is disallowed`.
 
-This can be a problem if you have to change your app's location. If you setup 
-a redirect from the old location (for example `example.com`) to the new 
-location (for example `www.example.com`) the worker will stop working. 
-Also, the redirect won't even trigger for users who are loading the site 
+This can be a problem if you have to change your app's location. If you setup
+a redirect from the old location (for example `example.com`) to the new
+location (for example `www.example.com`) the worker will stop working.
+Also, the redirect won't even trigger for users who are loading the site
 entirely from Service Worker. The old worker (registered at `example.com`)
- tries to update and sends requests to the old location `example.com` which 
- get redirected to the new location `www.example.com` and create the error 
+ tries to update and sends requests to the old location `example.com` which
+ get redirected to the new location `www.example.com` and create the error
 `The script resource is behind a redirect, which is disallowed`.
 
 To remedy this, you may need to kill the old worker using one of the above
diff --git a/aio/content/guide/service-worker-getting-started.md b/aio/content/guide/service-worker-getting-started.md
index d947479f62..3801f36be2 100644
--- a/aio/content/guide/service-worker-getting-started.md
+++ b/aio/content/guide/service-worker-getting-started.md
@@ -158,8 +158,6 @@ If you look at the `http-server` logs, you can see the service worker requesting
 
 The service worker installed the updated version of your app *in the background*, and the next time the page is loaded or reloaded, the service worker switches to the latest version.
 
-<hr />
-
 ## More on Angular service workers
 
 You may also be interested in the following:
diff --git a/aio/content/guide/sharing-ngmodules.md b/aio/content/guide/sharing-ngmodules.md
index a2d195ee44..5bbbbbe987 100644
--- a/aio/content/guide/sharing-ngmodules.md
+++ b/aio/content/guide/sharing-ngmodules.md
@@ -53,8 +53,6 @@ The most common way to get a hold of shared services is through Angular
 To read about sharing services, see [Providers](guide/providers).
 
 
-<hr />
-
 ## More on NgModules
 
 You may also be interested in the following:
diff --git a/aio/content/guide/singleton-services.md b/aio/content/guide/singleton-services.md
index a645308019..0efbd56437 100644
--- a/aio/content/guide/singleton-services.md
+++ b/aio/content/guide/singleton-services.md
@@ -171,8 +171,6 @@ Here are the two files in their entirety for reference:
  </code-pane>
 </code-tabs>
 
-<hr />
-
 ## More on NgModules
 
 You may also be interested in:
diff --git a/aio/content/guide/template-syntax.md b/aio/content/guide/template-syntax.md
index c41517f88f..1541861d70 100644
--- a/aio/content/guide/template-syntax.md
+++ b/aio/content/guide/template-syntax.md
@@ -53,7 +53,6 @@ For more information, see the [Security](guide/security) page.
 
 </div>
 
-<hr />
 
 ## More on template syntax
 
diff --git a/aio/content/guide/test-debugging.md b/aio/content/guide/test-debugging.md
index 43c6e98fbb..622eac4cf9 100644
--- a/aio/content/guide/test-debugging.md
+++ b/aio/content/guide/test-debugging.md
@@ -24,5 +24,3 @@ Debug specs in the browser in the same way that you debug an application.
 <div class="lightbox">
   <img src='generated/images/guide/testing/karma-1st-spec-debug.png' alt="Karma debugging">
 </div>
-
-<hr>
diff --git a/aio/content/guide/testing-attribute-directives.md b/aio/content/guide/testing-attribute-directives.md
index 3dcdd6a76f..13bdc8ce8e 100644
--- a/aio/content/guide/testing-attribute-directives.md
+++ b/aio/content/guide/testing-attribute-directives.md
@@ -74,5 +74,3 @@ A few techniques are noteworthy:
   and its `defaultColor`.
 
 - `DebugElement.properties` affords access to the artificial custom property that is set by the directive.
-
-<hr>
diff --git a/aio/content/guide/testing-components-scenarios.md b/aio/content/guide/testing-components-scenarios.md
index 848beca92a..a0a720fb3d 100644
--- a/aio/content/guide/testing-components-scenarios.md
+++ b/aio/content/guide/testing-components-scenarios.md
@@ -124,10 +124,7 @@ There is no harm in calling `detectChanges()` more often than is strictly necess
 
 </div>
 
-<hr>
-
 {@a dispatch-event}
-
 #### Change an input value with _dispatchEvent()_
 
 To simulate user input, you can find the input element and set its `value` property.
@@ -143,8 +140,6 @@ The following example demonstrates the proper sequence.
 
 <code-example path="testing/src/app/hero/hero-detail.component.spec.ts" region="title-case-pipe" header="app/hero/hero-detail.component.spec.ts (pipe test)"></code-example>
 
-<hr>
-
 ## Component with external files
 
 The `BannerComponent` above is defined with an _inline template_ and _inline css_, specified in the `@Component.template` and `@Component.styles` properties respectively.
@@ -291,10 +286,7 @@ The remaining tests confirm the logic of the component when the service returns
 The second test validates the effect of changing the user name.
 The third test checks that the component displays the proper message when there is no logged-in user.
 
-<hr>
-
 {@a component-with-async-service}
-
 ## Component with async service
 
 In this sample, the `AboutComponent` template hosts a `TwainComponent`.
@@ -670,8 +662,6 @@ can give you that information and make assertions about the state of the view.
   path="testing/src/app/twain/twain.component.spec.ts"
   region="spy-done-test"></code-example>
 
-<hr>
-
 {@a marble-testing}
 ## Component marble tests
 
@@ -776,10 +766,7 @@ RxJS marble testing is a rich subject, beyond the scope of this guide.
 Learn about it on the web, starting with the
 [official documentation](https://rxjs.dev/guide/testing/marble-testing).
 
-<hr>
-
 {@a component-with-input-output}
-
 ## Component with inputs and outputs
 
 A component with inputs and outputs typically appears inside the view template of a host component.
@@ -970,10 +957,7 @@ Here's the previous test, rewritten using the click helper.
   header="app/dashboard/dashboard-hero.component.spec.ts (test with click helper)">
 </code-example>
 
-<hr>
-
 {@a component-inside-test-host}
-
 ## Component inside a test host
 
 The previous tests played the role of the host `DashboardComponent` themselves.
@@ -1032,10 +1016,7 @@ The tests themselves are almost identical to the stand-alone version:
 Only the selected event test differs. It confirms that the selected `DashboardHeroComponent` hero
 really does find its way up through the event binding to the host component.
 
-<hr>
-
 {@a routing-component}
-
 ## Routing component
 
 A _routing component_ is a component that tells the `Router` to navigate to another component.
@@ -1186,8 +1167,6 @@ New heroes have `id=0` and a blank `name`. This test confirms that the component
   region="route-no-id"
   header="app/hero/hero-detail.component.spec.ts (no id)"></code-example>
 
-<hr>
-
 ## Nested component tests
 
 Component templates often have nested components, whose templates
@@ -1309,8 +1288,6 @@ The Angular compiler creates the `BannerComponentStub` for the `<app-banner>` el
 and applies the `RouterLinkStubDirective` to the anchors with the `routerLink` attribute,
 but it ignores the `<app-welcome>` and `<router-outlet>` tags.
 
-<hr>
-
 {@a routerlink}
 ## Components with _RouterLink_
 
@@ -1417,10 +1394,7 @@ tests with the `RouterTestingModule`.
 
 </div>
 
-<hr>
-
 {@a page-object}
-
 ## Use a _page_ object
 
 The `HeroDetailComponent` is a simple view with a title, two hero fields, and two buttons.
@@ -1474,8 +1448,6 @@ Here are a few more `HeroDetailComponent` tests to reinforce the point.
   region="selected-tests"
   header="app/hero/hero-detail.component.spec.ts (selected tests)"></code-example>
 
-<hr>
-
 {@a compile-components}
 ## Calling _compileComponents()_
 
@@ -1619,10 +1591,7 @@ even though it is never required when running `ng test`.
 
 The tests in this guide only call `compileComponents` when necessary.
 
-<hr>
-
 {@a import-module}
-
 ## Setup with module imports
 
 Earlier component tests configured the testing module with a few `declarations` like this:
@@ -1705,10 +1674,7 @@ the module is small, as feature modules tend to be.
 
 </div>
 
-<hr>
-
 {@a component-override}
-
 ## Override component providers
 
 The `HeroDetailComponent` provides its own `HeroDetailService`.
@@ -1817,5 +1783,3 @@ The `TestBed` offers similar `overrideDirective`, `overrideModule`, and `overrid
 for digging into and replacing parts of these other classes.
 
 Explore the options and combinations on your own.
-
-<hr>
diff --git a/aio/content/guide/testing-utility-apis.md b/aio/content/guide/testing-utility-apis.md
index b79419a60f..6ad5a453c1 100644
--- a/aio/content/guide/testing-utility-apis.md
+++ b/aio/content/guide/testing-utility-apis.md
@@ -144,10 +144,7 @@ Here's a summary of the stand-alone functions, in order of likely utility:
   </tr>
 </table>
 
-<hr>
-
 {@a testbed-class-summary}
-
 ## _TestBed_ class summary
 
 The `TestBed` class is one of the principal Angular testing utilities.
@@ -789,6 +786,3 @@ The Angular `By` class has three static methods for common predicates:
 - `By.directive(directive)` - return elements that Angular matched to an instance of the directive class.
 
 <code-example path="testing/src/app/hero/hero-list.component.spec.ts" region="by" header="app/hero/hero-list.component.spec.ts"></code-example>
-
-<hr>
-
diff --git a/aio/content/guide/testing.md b/aio/content/guide/testing.md
index f572bfb81d..e07c843ed9 100644
--- a/aio/content/guide/testing.md
+++ b/aio/content/guide/testing.md
@@ -275,8 +275,6 @@ Now you can run the following commands to use the `--no-sandbox` flag:
 </div>
 
 
-<hr />
-
 ## More info on testing
 
 After you've set up your app for testing, you may find the following testing  guides useful.
diff --git a/aio/content/start/index.md b/aio/content/start/index.md
index 1e03900db8..9031147e88 100644
--- a/aio/content/start/index.md
+++ b/aio/content/start/index.md
@@ -15,11 +15,8 @@ To get the most out of this tutorial you should already have a basic understandi
 * [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript "JavaScript")
 * [TypeScript](https://www.typescriptlang.org/ "The TypeScript language")
 
-<hr />
-
 
 {@a components}
-
 ## Take a tour of the example application
 
 You build Angular applications with components.
diff --git a/aio/src/styles/0-base/_typography.scss b/aio/src/styles/0-base/_typography.scss
index 20619f775e..8735fb37d6 100755
--- a/aio/src/styles/0-base/_typography.scss
+++ b/aio/src/styles/0-base/_typography.scss
@@ -13,13 +13,14 @@ body {
 
 h1, h2, h3, h4, h5, h6 {
   color: $deepgray;
+  margin-bottom: 0;
+  font-weight: 500;
 }
 
 h1 {
   @include font-size(24);
-  font-weight: 500;
   display: inline-block;
-  margin: 8px 0px;
+  margin: 1.6rem 0;
 
   @media screen and (max-width: 600px) {
     margin-top: 0;
@@ -27,38 +28,48 @@ h1 {
 }
 
 h2 {
-  @include font-size(22);
-  font-weight: 500;
-  margin: 32px 0px 24px;
+  border-top: 1px solid $lightgray;
   clear: both;
+  @include font-size(22);
+  margin-top: 4rem;
+  padding-top: 4rem;
+
+  .page-about &,
+  .page-api &,
+  .page-contribute &,
+  .page-events &,
+  .page-features &,
+  .page-home &,
+  .page-presskit &,
+  .page-resources & {
+    border-top: 0;
+    margin-top: 2rem;
+    padding-top: 0;
+  }
 }
 
 h3 {
   @include font-size(20);
-  font-weight: 400;
-  margin: 24px 0px 12px;
+  margin-top: 3rem;
   clear: both;
 }
 
 h4 {
   @include font-size(18);
-  font-weight: 400;
-  margin: 8px 0px;
+  margin-top: 3rem;
   clear: both;
 }
 
 h5 {
   @include font-size(16);
-  font-weight: 500;
-  margin: 8px 0px;
+  margin-top: 2rem;
   clear: both;
 }
 
 h6 {
   @include font-size(16);
-  font-weight: 500;
   color: $mediumgray;
-  margin: 8px 0px;
+  margin-top: 2rem;
   clear: both;
 }
 
@@ -204,7 +215,7 @@ code {
 .folder-guide,
 .folder-start,
 .folder-tutorial {
-  
+
   aio-doc-viewer{
     a {
       &[href^="http:"]::after,
diff --git a/aio/src/styles/2-modules/_api-list.scss b/aio/src/styles/2-modules/_api-list.scss
index 21c48f8712..9115fd7f0c 100644
--- a/aio/src/styles/2-modules/_api-list.scss
+++ b/aio/src/styles/2-modules/_api-list.scss
@@ -29,6 +29,7 @@ aio-api-list {
 
     h2 {
       margin-top: 16px;
+      margin-bottom: 16px;
     }
   }
 }