Skip to content

Commit 303e66e

Browse files
MinThaMieMinThaMie
committed
Central content + on-this-page styling
1 parent 72399bf commit 303e66e

File tree

5 files changed

+140
-0
lines changed

5 files changed

+140
-0
lines changed

‎addon/styles/addon.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616
@import 'well.css';
1717
@import 'table-of-contents.css';
1818
@import 'header-anchor';
19+
@import 'central-content.css';
20+
@import 'on-this-page.css';
1921

2022
/* Helpers */
2123
@import 'helpers/index.css';

‎addon/styles/central-content.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.content-wrapper {
2+
display: grid;
3+
gap: 3em;
4+
grid-template-columns: minmax(20ch, 80ch) 16em;
5+
padding-top: var(--spacing-4);
6+
padding-bottom: var(--spacing-4);
7+
justify-content: center;
8+
}
9+
10+
@media (max-width: 80em) {
11+
.content-wrapper {
12+
display: grid;
13+
grid-template-columns: minmax(20ch, 80ch);
14+
justify-content: center;
15+
padding-bottom: var(--spacing-2);
16+
}
17+
18+
.on-this-page-wrapper {
19+
display: none;
20+
}
21+
}

‎addon/styles/on-this-page.css

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.on-this-page-wrapper ul {
2+
list-style: none;
3+
padding: 0;
4+
}
5+
6+
.on-this-page-wrapper ul li {
7+
margin-bottom: var(--spacing-1);
8+
}
9+
10+
.on-this-page-wrapper-header {
11+
color: var(--color-gray-600);
12+
margin-top: 0.6em;
13+
}
14+
15+
.on-this-page-wrapper hr {
16+
margin-top: 0;
17+
display: none;
18+
}
19+
20+
main .on-this-page-wrapper a {
21+
text-decoration: none;
22+
color: var(--color-text);
23+
background: none;
24+
}

‎docs/concepts/central-content.md

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
# Central content
2+
3+
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`.
4+
5+
```html
6+
<div class="content-wrapper">
7+
<div id="article_1">
8+
<div class="article-title">
9+
<h1>
10+
Introduction
11+
</h1>
12+
</div>
13+
<hr>
14+
<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>
15+
<p>Ember.js itself works with any type of back end: REST, JSON:API, GraphQL, or anything else.</p></div>
16+
</div>
17+
<div class="on-this-page-wrapper">
18+
<div class="on-this-page-wrapper-header">On this page</div>
19+
<hr>
20+
<ul>
21+
<li>
22+
<a href="#toc_what-are-emberdata-models">What are EmberData models?</a>
23+
</li>
24+
<li>
25+
<a href="#toc_emberdata-flexibility">EmberData flexibility</a>
26+
</li>
27+
<li>
28+
<a href="#toc_the-store-and-a-single-source-of-truth">The Store and a Single Source of Truth</a>
29+
</li>
30+
<li>
31+
<a href="#toc_injecting-the-store">Injecting the store</a>
32+
</li>
33+
<li>
34+
<a href="#toc_models">Models</a>
35+
</li>
36+
<li>
37+
<a href="#toc_records">Records</a>
38+
</li>
39+
<li>
40+
<a href="#toc_adapter">Adapter</a>
41+
</li>
42+
<li>
43+
<a href="#toc_caching">Caching</a>
44+
</li>
45+
<li>
46+
<a href="#toc_architecture-overview">Architecture Overview</a>
47+
</li>
48+
</ul>
49+
</div>
50+
</div>
51+
```
52+
53+
54+

‎docs/concepts/on-this-page.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# On This Page
2+
3+
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.
4+
5+
```html
6+
<div class="on-this-page-wrapper">
7+
<div class="on-this-page-wrapper-header">On this page</div>
8+
<hr>
9+
<ul>
10+
<li>
11+
<a href="#toc_what-are-emberdata-models">What are EmberData models?</a>
12+
</li>
13+
<li>
14+
<a href="#toc_emberdata-flexibility">EmberData flexibility</a>
15+
</li>
16+
<li>
17+
<a href="#toc_the-store-and-a-single-source-of-truth">The Store and a Single Source of Truth</a>
18+
</li>
19+
<li>
20+
<a href="#toc_injecting-the-store">Injecting the store</a>
21+
</li>
22+
<li>
23+
<a href="#toc_models">Models</a>
24+
</li>
25+
<li>
26+
<a href="#toc_records">Records</a>
27+
</li>
28+
<li>
29+
<a href="#toc_adapter">Adapter</a>
30+
</li>
31+
<li>
32+
<a href="#toc_caching">Caching</a>
33+
</li>
34+
<li>
35+
<a href="#toc_architecture-overview">Architecture Overview</a>
36+
</li>
37+
</ul>
38+
</div>
39+
```

0 commit comments

Comments
 (0)