From 303e66e2e0c4bb5386208e6e6992a59f99d12682 Mon Sep 17 00:00:00 2001 From: Anne-Greeth van Herwijnen Date: Fri, 12 Jan 2024 14:09:14 +0100 Subject: [PATCH] Central content + on-this-page styling --- addon/styles/addon.css | 2 ++ addon/styles/central-content.css | 21 +++++++++++++ addon/styles/on-this-page.css | 24 ++++++++++++++ docs/concepts/central-content.md | 54 ++++++++++++++++++++++++++++++++ docs/concepts/on-this-page.md | 39 +++++++++++++++++++++++ 5 files changed, 140 insertions(+) create mode 100644 addon/styles/central-content.css create mode 100644 addon/styles/on-this-page.css create mode 100644 docs/concepts/central-content.md create mode 100644 docs/concepts/on-this-page.md diff --git a/addon/styles/addon.css b/addon/styles/addon.css index 518a371e..9500ac60 100644 --- a/addon/styles/addon.css +++ b/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'; diff --git a/addon/styles/central-content.css b/addon/styles/central-content.css new file mode 100644 index 00000000..2b4438ef --- /dev/null +++ b/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; + } +} diff --git a/addon/styles/on-this-page.css b/addon/styles/on-this-page.css new file mode 100644 index 00000000..ff08c808 --- /dev/null +++ b/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; +} diff --git a/docs/concepts/central-content.md b/docs/concepts/central-content.md new file mode 100644 index 00000000..f2afbd16 --- /dev/null +++ b/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 +
+
+
+

+ Introduction +

+
+
+

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.

+

Ember.js itself works with any type of back end: REST, JSON:API, GraphQL, or anything else.

+
+
+
On this page
+
+ +
+
+ ``` + + + diff --git a/docs/concepts/on-this-page.md b/docs/concepts/on-this-page.md new file mode 100644 index 00000000..66bc51f1 --- /dev/null +++ b/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 +
+
On this page
+
+ +
+```