Merge pull request #495 from ember-learn/content-styling

Central content + on-this-page styling

addon/styles/addon.css

@@ -16,6 +16,8 @@
 @import 'well.css';
 @import 'table-of-contents.css';
 @import 'header-anchor';
+@import 'central-content.css';
+@import 'on-this-page.css';
 
 /* Helpers */
 @import 'helpers/index.css';

addon/styles/central-content.css

@@ -0,0 +1,21 @@
+.content-wrapper {
+  display: grid;
+  gap: 3em;
+  grid-template-columns: minmax(20ch, 80ch) 16em;
+  padding-top: var(--spacing-4);
+  padding-bottom: var(--spacing-4);
+  justify-content: center;
+}
+
+@media (max-width: 80em) {
+  .content-wrapper {
+    display: grid;
+    grid-template-columns: minmax(20ch, 80ch);
+    justify-content: center;
+    padding-bottom: var(--spacing-2);
+  }
+
+  .on-this-page-wrapper {
+    display: none;
+  }
+}

addon/styles/on-this-page.css

@@ -0,0 +1,24 @@
+.on-this-page-wrapper ul {
+  list-style: none;
+  padding: 0;
+}
+
+.on-this-page-wrapper ul li {
+  margin-bottom: var(--spacing-1);
+}
+
+.on-this-page-wrapper-header {
+  color: var(--color-gray-600);
+  margin-top: 0.6em;
+}
+
+.on-this-page-wrapper hr {
+  margin-top: 0;
+  display: none;
+}
+
+main .on-this-page-wrapper a {
+  text-decoration: none;
+  color: var(--color-text);
+  background: none;
+}

docs/concepts/central-content.md

@@ -0,0 +1,54 @@
+# Central content
+
+In our ecosystem we have a sidebar and the central content. This content includes the actual content and an [on this page menu](on-this-page) if there is one. The content should be centered in the container that it's place in. We use the `content-wrapper` class to indicate this structure. The [on this page menu](on-this-page) will dissappear at `80em`.
+
+```html
+<div class="content-wrapper">
+  <div id="article_1">
+    <div class="article-title">
+      <h1>
+        Introduction
+      </h1>
+    </div>
+    <hr>
+    <div><p>This section of the Guides describes the essential features of EmberData, a powerful set of tools for formatting requests, normalizing responses, and efficiently managing a local cache of data.</p>
+    <p>Ember.js itself works with any type of back end: REST, JSON:API, GraphQL, or anything else.</p></div>
+  </div>
+  <div class="on-this-page-wrapper">
+    <div class="on-this-page-wrapper-header">On this page</div>
+    <hr>
+    <ul>
+        <li>
+          <a href="#toc_what-are-emberdata-models">What are EmberData models?</a>
+        </li>
+        <li>
+          <a href="#toc_emberdata-flexibility">EmberData flexibility</a>
+        </li>
+        <li>
+          <a href="#toc_the-store-and-a-single-source-of-truth">The Store and a Single Source of Truth</a>
+        </li>
+        <li>
+          <a href="#toc_injecting-the-store">Injecting the store</a>
+        </li>
+        <li>
+          <a href="#toc_models">Models</a>
+        </li>
+        <li>
+          <a href="#toc_records">Records</a>
+        </li>
+        <li>
+          <a href="#toc_adapter">Adapter</a>
+        </li>
+        <li>
+          <a href="#toc_caching">Caching</a>
+        </li>
+        <li>
+          <a href="#toc_architecture-overview">Architecture Overview</a>
+        </li>
+    </ul>
+  </div>
+  </div>
+  ```
+
+
+

docs/concepts/on-this-page.md

@@ -0,0 +1,39 @@
+# On This Page
+
+To allow the users easy and quick access to all the content on the page we provide styling for an `on this page` list, using the `on-this-page-wrapper` class will make sure that the styling of the links is good, and also that it disappears at `80em` to keep the page responsive. This concept should be used within the [central-content](central-content) concept.
+
+```html
+  <div class="on-this-page-wrapper">
+    <div class="on-this-page-wrapper-header">On this page</div>
+    <hr>
+    <ul>
+        <li>
+          <a href="#toc_what-are-emberdata-models">What are EmberData models?</a>
+        </li>
+        <li>
+          <a href="#toc_emberdata-flexibility">EmberData flexibility</a>
+        </li>
+        <li>
+          <a href="#toc_the-store-and-a-single-source-of-truth">The Store and a Single Source of Truth</a>
+        </li>
+        <li>
+          <a href="#toc_injecting-the-store">Injecting the store</a>
+        </li>
+        <li>
+          <a href="#toc_models">Models</a>
+        </li>
+        <li>
+          <a href="#toc_records">Records</a>
+        </li>
+        <li>
+          <a href="#toc_adapter">Adapter</a>
+        </li>
+        <li>
+          <a href="#toc_caching">Caching</a>
+        </li>
+        <li>
+          <a href="#toc_architecture-overview">Architecture Overview</a>
+        </li>
+    </ul>
+  </div>
+```