From 1a5d2e1cbf04f53c3320a4a86392523ba155e5f3 Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Wed, 10 Apr 2024 18:24:11 +0200 Subject: [PATCH 01/13] feat: adds custom styles for `
` and `` elements in markdown --- .changeset/proud-walls-thank.md | 5 + .../content/docs/guides/authoring-content.md | 25 ++ docs/src/content/docs/reference/details.md | 242 ++++++++++++++++++ packages/starlight/style/asides.css | 10 +- packages/starlight/style/markdown.css | 63 +++++ 5 files changed, 340 insertions(+), 5 deletions(-) create mode 100644 .changeset/proud-walls-thank.md create mode 100644 docs/src/content/docs/reference/details.md diff --git a/.changeset/proud-walls-thank.md b/.changeset/proud-walls-thank.md new file mode 100644 index 0000000000..5f4ede62c1 --- /dev/null +++ b/.changeset/proud-walls-thank.md @@ -0,0 +1,5 @@ +--- +'@astrojs/starlight': minor +--- + +Adds custom styles for `
` and `` elements in Markdown content. diff --git a/docs/src/content/docs/guides/authoring-content.md b/docs/src/content/docs/guides/authoring-content.md index 4db1a91646..dc9e36b785 100644 --- a/docs/src/content/docs/guides/authoring-content.md +++ b/docs/src/content/docs/guides/authoring-content.md @@ -361,6 +361,31 @@ A code block’s optional title can be set either with a `title="..."` attribute ``` ```` +## Details + +Details (also known as “disclosures” or “accordion”) are useful to conceal information that is not immediately relevant to the user. +The user can reveal further information with an interaction to toggle the visibility of the content. + +Starlight does not provide a custom Markdown syntax for details, but you can use the standard HTML `
` and `` elements to create them while authoring your Markdown content. + +You can nest any other Markdown content types inside a `
` element. + +
+Where and when the Andromeda constellation is best visible? + +The [Andromeda constellation]() is best visible in the night sky during the month of November at latitudes between `+90°` and `−40°`. + +
+ +```md +
+Where and when the Andromeda constellation is best visible? + +The [Andromeda constellation]() is best visible in the night sky during the month of November at latitudes between `+90°` and `−40°`. + +
+``` + ## Other common Markdown features Starlight supports all other Markdown authoring syntax, such as lists and tables. See the [Markdown Cheat Sheet from The Markdown Guide](https://www.markdownguide.org/cheat-sheet/) for a quick overview of all the Markdown syntax elements. diff --git a/docs/src/content/docs/reference/details.md b/docs/src/content/docs/reference/details.md new file mode 100644 index 0000000000..4d68eb149f --- /dev/null +++ b/docs/src/content/docs/reference/details.md @@ -0,0 +1,242 @@ +--- +title: ⚠️ Details styles demo page ⚠️ +--- + +:::danger +// TODO(HiDeoo) Remove this page +::: + +## Basics + +The following is a basic `
` element with no block content: + +
+This is the summary +This is the details content +
+ +The following is a basic `
` element with block content: + +
+This is the summary + +This is the details content + +
+ +## Opened by default + +The following is a `
` element opened by default: + +
+This is the summary +This is the details content +
+ +## Long summary + +The following is a `
` element with a very long summary: + +
+This is the very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long summary +This is the details content +
+ +## Long content + +The following is a `
` element with a very long content: + +
+This is the summary + +This is the details content + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas euismod ante lorem, quis posuere massa sodales id. Donec a dapibus nisi, id volutpat lorem. Aenean eleifend nisl at ex feugiat, at vulputate lorem luctus. Aliquam eget accumsan ipsum. Maecenas ut elit hendrerit, sodales leo at, tincidunt elit. Nullam ut venenatis libero. In vel molestie tellus. Suspendisse vitae nibh in felis faucibus aliquet. Nunc tortor enim, pellentesque sit amet justo eget, auctor elementum enim. Nam posuere et ipsum lobortis porttitor. Proin consectetur ullamcorper augue, a fermentum neque dapibus eget. Praesent feugiat orci vulputate turpis mattis, eget placerat mi volutpat. + +Maecenas vehicula orci metus, quis dapibus turpis suscipit vitae. Nullam velit ante, convallis fermentum massa a, condimentum mattis lorem. Nunc interdum consequat mollis. Suspendisse semper diam tellus. Maecenas mollis congue mi, eu hendrerit dui hendrerit sed. Aliquam quis ornare dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. + +Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed posuere arcu ut leo ultrices, in volutpat leo eleifend. Proin facilisis tempus maximus. Sed eu nulla ultricies, accumsan libero sed, commodo nunc. Curabitur sit amet metus vitae erat laoreet cursus et ut magna. Nam euismod justo a orci sagittis molestie. Phasellus et interdum ipsum, sed egestas ligula. Vestibulum congue eros ac neque posuere molestie. Nunc id enim aliquet, vestibulum diam at, fermentum justo. + +Duis ac mauris purus. Etiam viverra nisi vel facilisis eleifend. Ut dapibus, eros ac cursus faucibus, augue mi facilisis lacus, ut ullamcorper arcu diam eu nulla. Praesent tincidunt placerat augue eget cursus. Integer magna felis, malesuada in interdum eu, efficitur vel dolor. In feugiat nisl sit amet pharetra ullamcorper. Quisque odio ante, convallis a lectus id, consectetur finibus enim. Curabitur pretium quam ut lectus tristique, ac ornare lorem varius. Ut maximus aliquet est vitae hendrerit. In vitae massa mattis, volutpat dui sagittis, semper arcu. In a ligula tincidunt, elementum nisi ut, tincidunt odio. Etiam accumsan massa a justo convallis blandit. Integer in felis arcu. Nullam id felis et velit blandit convallis vitae a turpis. Nunc vitae erat ac ipsum mattis rutrum nec ut justo. Mauris ullamcorper id metus nec pretium. + +Donec purus nibh, ornare ac sagittis porta, porta ac neque. Donec efficitur dictum nibh et hendrerit. Mauris gravida mollis leo posuere posuere. In hac habitasse platea dictumst. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean sit amet massa felis. Fusce lectus neque, auctor quis est et, interdum lobortis ante. Nulla aliquet euismod libero, sit amet maximus orci mattis eu. Nullam sed cursus felis. Sed dapibus faucibus dolor, id volutpat eros varius a. + +
+ +## Interleaved content + +The following are two `
` elements with a code block in between: + +
+This is the summary +This is the details content +
+ +```js +console.log('some content in between'); +``` + +
+This is the summary +This is the details content +
+ +## Markdown content + +The following is a `
` element with markdown content: + +
+This is the summary + +This is the details content + +```ts +console.log('Hello world'); +``` + +This is `a` paragraph. + +:::note +This is a note +::: + +
+ +## Uncontrolled accordion + +The following are `
` elements forming an uncontrolled accordion, where each `
` element can be opened or closed independently: + +
+This is the summary (1) +This is the details content (1) +
+ +
+This is the summary (2) +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas euismod ante lorem, quis posuere massa sodales id. Donec a dapibus nisi, id volutpat lorem. Aenean eleifend nisl at ex feugiat, at vulputate lorem luctus. Aliquam eget accumsan ipsum. Maecenas ut elit hendrerit, sodales leo at, tincidunt elit. Nullam ut venenatis libero. In vel molestie tellus. Suspendisse vitae nibh in felis faucibus aliquet. Nunc tortor enim, pellentesque sit amet justo eget, auctor elementum enim. Nam posuere et ipsum lobortis porttitor. Proin consectetur ullamcorper augue, a fermentum neque dapibus eget. Praesent feugiat orci vulputate turpis mattis, eget placerat mi volutpat. +
+ +
+This is the summary (3) +Maecenas vehicula orci metus, quis dapibus turpis suscipit vitae. Nullam velit ante, convallis fermentum massa a, condimentum mattis lorem. Nunc interdum consequat mollis. Suspendisse semper diam tellus. Maecenas mollis congue mi, eu hendrerit dui hendrerit sed. Aliquam quis ornare dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. +
+ +## Controlled accordion + +The following are `
` elements forming an controlled accordion, where only one `
` element can be opened at a time: + +:::caution +Note that this feature is not supported in Firefox. +::: + +
+This is the summary (1) +This is the details content (1) +
+ +
+This is the summary (2) +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas euismod ante lorem, quis posuere massa sodales id. Donec a dapibus nisi, id volutpat lorem. Aenean eleifend nisl at ex feugiat, at vulputate lorem luctus. Aliquam eget accumsan ipsum. Maecenas ut elit hendrerit, sodales leo at, tincidunt elit. Nullam ut venenatis libero. In vel molestie tellus. Suspendisse vitae nibh in felis faucibus aliquet. Nunc tortor enim, pellentesque sit amet justo eget, auctor elementum enim. Nam posuere et ipsum lobortis porttitor. Proin consectetur ullamcorper augue, a fermentum neque dapibus eget. Praesent feugiat orci vulputate turpis mattis, eget placerat mi volutpat. +
+ +
+This is the summary (3) +Maecenas vehicula orci metus, quis dapibus turpis suscipit vitae. Nullam velit ante, convallis fermentum massa a, condimentum mattis lorem. Nunc interdum consequat mollis. Suspendisse semper diam tellus. Maecenas mollis congue mi, eu hendrerit dui hendrerit sed. Aliquam quis ornare dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. +
+ +## Nested details + +The following is a `
` element with a nested `
` element: + +
+This is the summary + +This is the details content + +
+This is the nested summary +This is the nested details content +
+ +And some content after the nested details + +
+ +## `not-content` class + +
+ +

The following is a <details> element wrapped with the not-content CSS class:

+ +
+ +
+This is the summary +This is the details content +
+ +
+ +## RTL + +The following is a `
` element nested in a block in RTL: + +
+ +
+This is the summary +This is the details content +
+ +
+ +The following is a `
` element in RTL: + +
+This is the summary +With a summary and some details not in a paragraph +
+ +## Asides + +The following are `
` elements nested in asides: + +:::note +This is the note aside content + +
+This is the summary +This is the details content +
+ +::: + +:::tip +This is the tip aside content + +
+This is the summary +This is the details content +
+ +::: + +:::caution +This is the caution aside content + +
+This is the summary +This is the details content +
+ +::: + +:::danger +This is the danger aside content + +
+This is the summary +This is the details content +
+ +::: diff --git a/packages/starlight/style/asides.css b/packages/starlight/style/asides.css index 026544d490..adbb0558f4 100644 --- a/packages/starlight/style/asides.css +++ b/packages/starlight/style/asides.css @@ -1,26 +1,26 @@ .starlight-aside { padding: 1rem; - border-inline-start: 0.25rem solid; + border-inline-start: 0.25rem solid var(--sl-color-asides-border); color: var(--sl-color-white); } .starlight-aside--note { --sl-color-asides-text-accent: var(--sl-color-blue-high); - border-color: var(--sl-color-blue); + --sl-color-asides-border: var(--sl-color-blue); background-color: var(--sl-color-blue-low); } .starlight-aside--tip { --sl-color-asides-text-accent: var(--sl-color-purple-high); - border-color: var(--sl-color-purple); + --sl-color-asides-border: var(--sl-color-purple); background-color: var(--sl-color-purple-low); } .starlight-aside--caution { --sl-color-asides-text-accent: var(--sl-color-orange-high); - border-color: var(--sl-color-orange); + --sl-color-asides-border: var(--sl-color-orange); background-color: var(--sl-color-orange-low); } .starlight-aside--danger { --sl-color-asides-text-accent: var(--sl-color-red-high); - border-color: var(--sl-color-red); + --sl-color-asides-border: var(--sl-color-red); background-color: var(--sl-color-red-low); } diff --git a/packages/starlight/style/markdown.css b/packages/starlight/style/markdown.css index d0e2248eb1..5ad204305e 100644 --- a/packages/starlight/style/markdown.css +++ b/packages/starlight/style/markdown.css @@ -113,3 +113,66 @@ border: 0; border-bottom: 1px solid var(--sl-color-hairline); } + +.sl-markdown-content details:not(:where(.not-content *)) { + --sl-details-x-pad: 1rem; + --sl-details-y-pad: 0.75rem; + --sl-details-border-color: var(--sl-color-gray-5); + --sl-details-open-summary-bg-color: var(--sl-color-gray-6); + + border-block: 1px solid var(--sl-details-border-color); + padding: var(--sl-details-y-pad) var(--sl-details-x-pad); +} +[data-theme='light'] .sl-markdown-content details:not(:where(.not-content *)) { + --sl-details-open-summary-bg-color: var(--sl-color-gray-7); +} +.sl-markdown-content summary:not(:where(.not-content *)) { + align-items: center; + border-inline: 1px solid transparent; + color: var(--sl-color-white); + cursor: pointer; + display: flex; + gap: 0.5rem; + justify-content: space-between; + margin: calc(-1 * var(--sl-details-y-pad)) calc(-1 * var(--sl-details-x-pad)); + padding: var(--sl-details-y-pad) var(--sl-details-x-pad); +} +.sl-markdown-content details[open] > summary:not(:where(.not-content *)) { + background-color: var(--sl-details-open-summary-bg-color); + border-bottom: 1px solid; + border-color: var(--sl-details-border-color); + margin-bottom: var(--sl-details-y-pad); +} +.sl-markdown-content summary:not(:where(.not-content *))::marker, +.sl-markdown-content summary:not(:where(.not-content *))::-webkit-details-marker { + display: none; +} +.sl-markdown-content summary:not(:where(.not-content *))::after { + background-color: currentColor; + content: ''; + flex-shrink: 0; + height: 1.5rem; + width: 1.5rem; + mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0ibTE0LjgzIDExLjI5LTQuMjQtNC4yNGExIDEgMCAxIDAtMS40MiAxLjQxTDEyLjcxIDEybC0zLjU0IDMuNTRhMSAxIDAgMCAwIDAgMS40MSAxIDEgMCAwIDAgLjcxLjI5IDEgMSAwIDAgMCAuNzEtLjI5bDQuMjQtNC4yNGExLjAwMiAxLjAwMiAwIDAgMCAwLTEuNDJaIi8+PC9zdmc+'); + mask-repeat: no-repeat; +} +@media (prefers-reduced-motion: no-preference) { + .sl-markdown-content summary:not(:where(.not-content *))::after { + transition: transform 0.2s ease-in-out; + } +} +.sl-markdown-content details[open] > summary:not(:where(.not-content *))::after { + transform: rotateZ(90deg); +} +[dir='rtl'] .sl-markdown-content summary:not(:where(.not-content *))::after, +.sl-markdown-content [dir='rtl'] summary:not(:where(.not-content *))::after { + transform: rotateZ(180deg); +} +.sl-markdown-content details + details:not(:where(.not-content *)) { + border-top: 0; + margin-top: 0; +} +.sl-markdown-content .starlight-aside details:not(:where(.not-content *)) { + --sl-details-border-color: var(--sl-color-asides-border); + --sl-details-open-summary-bg-color: transparent; +} From 8cbcafc525e510142be99673618d2770bc9a82dd Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Mon, 22 Apr 2024 11:05:09 +0200 Subject: [PATCH 02/13] chore: add steps component examples --- .../reference/{details.md => details.mdx} | 154 +++++++++++++----- 1 file changed, 114 insertions(+), 40 deletions(-) rename docs/src/content/docs/reference/{details.md => details.mdx} (55%) diff --git a/docs/src/content/docs/reference/details.md b/docs/src/content/docs/reference/details.mdx similarity index 55% rename from docs/src/content/docs/reference/details.md rename to docs/src/content/docs/reference/details.mdx index 4d68eb149f..39ee736c24 100644 --- a/docs/src/content/docs/reference/details.md +++ b/docs/src/content/docs/reference/details.mdx @@ -11,8 +11,8 @@ title: ⚠️ Details styles demo page ⚠️ The following is a basic `
` element with no block content:
-This is the summary -This is the details content + This is the summary + This is the details content
The following is a basic `
` element with block content: @@ -29,8 +29,8 @@ This is the details content The following is a `
` element opened by default:
-This is the summary -This is the details content + This is the summary + This is the details content
## Long summary @@ -38,8 +38,12 @@ This is the details content The following is a `
` element with a very long summary:
-This is the very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long summary -This is the details content + + This is the very very very very very very very very very very very very very + very very very very very very very very very very very very very very very + very very very very very long summary + + This is the details content
## Long content @@ -68,8 +72,8 @@ Donec purus nibh, ornare ac sagittis porta, porta ac neque. Donec efficitur dict The following are two `
` elements with a code block in between:
-This is the summary -This is the details content + This is the summary + This is the details content
```js @@ -77,8 +81,8 @@ console.log('some content in between'); ```
-This is the summary -This is the details content + This is the summary + This is the details content
## Markdown content @@ -107,18 +111,30 @@ This is a note The following are `
` elements forming an uncontrolled accordion, where each `
` element can be opened or closed independently:
-This is the summary (1) -This is the details content (1) + This is the summary (1) + This is the details content (1)
-This is the summary (2) -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas euismod ante lorem, quis posuere massa sodales id. Donec a dapibus nisi, id volutpat lorem. Aenean eleifend nisl at ex feugiat, at vulputate lorem luctus. Aliquam eget accumsan ipsum. Maecenas ut elit hendrerit, sodales leo at, tincidunt elit. Nullam ut venenatis libero. In vel molestie tellus. Suspendisse vitae nibh in felis faucibus aliquet. Nunc tortor enim, pellentesque sit amet justo eget, auctor elementum enim. Nam posuere et ipsum lobortis porttitor. Proin consectetur ullamcorper augue, a fermentum neque dapibus eget. Praesent feugiat orci vulputate turpis mattis, eget placerat mi volutpat. + This is the summary (2) + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas euismod ante + lorem, quis posuere massa sodales id. Donec a dapibus nisi, id volutpat lorem. + Aenean eleifend nisl at ex feugiat, at vulputate lorem luctus. Aliquam eget accumsan + ipsum. Maecenas ut elit hendrerit, sodales leo at, tincidunt elit. Nullam ut venenatis + libero. In vel molestie tellus. Suspendisse vitae nibh in felis faucibus aliquet. + Nunc tortor enim, pellentesque sit amet justo eget, auctor elementum enim. Nam + posuere et ipsum lobortis porttitor. Proin consectetur ullamcorper augue, a fermentum + neque dapibus eget. Praesent feugiat orci vulputate turpis mattis, eget placerat + mi volutpat.
-This is the summary (3) -Maecenas vehicula orci metus, quis dapibus turpis suscipit vitae. Nullam velit ante, convallis fermentum massa a, condimentum mattis lorem. Nunc interdum consequat mollis. Suspendisse semper diam tellus. Maecenas mollis congue mi, eu hendrerit dui hendrerit sed. Aliquam quis ornare dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. + This is the summary (3) + Maecenas vehicula orci metus, quis dapibus turpis suscipit vitae. Nullam velit + ante, convallis fermentum massa a, condimentum mattis lorem. Nunc interdum consequat + mollis. Suspendisse semper diam tellus. Maecenas mollis congue mi, eu hendrerit + dui hendrerit sed. Aliquam quis ornare dolor. Pellentesque habitant morbi tristique + senectus et netus et malesuada fames ac turpis egestas.
## Controlled accordion @@ -130,18 +146,30 @@ Note that this feature is not supported in Firefox. :::
-This is the summary (1) -This is the details content (1) + This is the summary (1) + This is the details content (1)
-This is the summary (2) -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas euismod ante lorem, quis posuere massa sodales id. Donec a dapibus nisi, id volutpat lorem. Aenean eleifend nisl at ex feugiat, at vulputate lorem luctus. Aliquam eget accumsan ipsum. Maecenas ut elit hendrerit, sodales leo at, tincidunt elit. Nullam ut venenatis libero. In vel molestie tellus. Suspendisse vitae nibh in felis faucibus aliquet. Nunc tortor enim, pellentesque sit amet justo eget, auctor elementum enim. Nam posuere et ipsum lobortis porttitor. Proin consectetur ullamcorper augue, a fermentum neque dapibus eget. Praesent feugiat orci vulputate turpis mattis, eget placerat mi volutpat. + This is the summary (2) + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas euismod ante + lorem, quis posuere massa sodales id. Donec a dapibus nisi, id volutpat lorem. + Aenean eleifend nisl at ex feugiat, at vulputate lorem luctus. Aliquam eget accumsan + ipsum. Maecenas ut elit hendrerit, sodales leo at, tincidunt elit. Nullam ut venenatis + libero. In vel molestie tellus. Suspendisse vitae nibh in felis faucibus aliquet. + Nunc tortor enim, pellentesque sit amet justo eget, auctor elementum enim. Nam + posuere et ipsum lobortis porttitor. Proin consectetur ullamcorper augue, a fermentum + neque dapibus eget. Praesent feugiat orci vulputate turpis mattis, eget placerat + mi volutpat.
-This is the summary (3) -Maecenas vehicula orci metus, quis dapibus turpis suscipit vitae. Nullam velit ante, convallis fermentum massa a, condimentum mattis lorem. Nunc interdum consequat mollis. Suspendisse semper diam tellus. Maecenas mollis congue mi, eu hendrerit dui hendrerit sed. Aliquam quis ornare dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. + This is the summary (3) + Maecenas vehicula orci metus, quis dapibus turpis suscipit vitae. Nullam velit + ante, convallis fermentum massa a, condimentum mattis lorem. Nunc interdum consequat + mollis. Suspendisse semper diam tellus. Maecenas mollis congue mi, eu hendrerit + dui hendrerit sed. Aliquam quis ornare dolor. Pellentesque habitant morbi tristique + senectus et netus et malesuada fames ac turpis egestas.
## Nested details @@ -154,8 +182,8 @@ The following is a `
` element with a nested `
` element: This is the details content
-This is the nested summary -This is the nested details content + This is the nested summary + This is the nested details content
And some content after the nested details @@ -166,13 +194,16 @@ And some content after the nested details
-

The following is a <details> element wrapped with the not-content CSS class:

+

+ The following is a <details> element wrapped with the{' '} + not-content CSS class: +

-
+
-This is the summary -This is the details content + This is the summary + This is the details content
@@ -184,8 +215,8 @@ The following is a `
` element nested in a block in RTL:
-This is the summary -This is the details content + This is the summary + This is the details content
@@ -193,8 +224,8 @@ This is the details content The following is a `
` element in RTL:
-This is the summary -With a summary and some details not in a paragraph + This is the summary + With a summary and some details not in a paragraph
## Asides @@ -205,8 +236,8 @@ The following are `
` elements nested in asides: This is the note aside content
-This is the summary -This is the details content + This is the summary + This is the details content
::: @@ -215,8 +246,8 @@ This is the details content This is the tip aside content
-This is the summary -This is the details content + This is the summary + This is the details content
::: @@ -225,8 +256,8 @@ This is the details content This is the caution aside content
-This is the summary -This is the details content + This is the summary + This is the details content
::: @@ -235,8 +266,51 @@ This is the details content This is the danger aside content
-This is the summary -This is the details content + This is the summary + This is the details content
::: + +## Steps + +## In steps + +The following is a `
` element nested in a `` component: + +import { Steps } from '@astrojs/starlight/components'; + + + +1. Step one has some information + +
+ + Need to know more? + + You might need more information for step one. + + So we're here to help. + +
+ +2. Step two has some more information + + + +## With steps + +The following is a `
` element containing a `` component: + +
+ Need more details? + + +1. Step one has some information. + + These steps help if you need extra details to complete this task. + +2. Step two has some more information. + + +
From f533c8bbc14c5d51043a3b975ddd0289a5d6b505 Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Mon, 22 Apr 2024 11:12:54 +0200 Subject: [PATCH 03/13] feat: update design with chris design Co-authored-by: Chris Swithinbank <357379+delucis@users.noreply.github.com> --- packages/starlight/style/markdown.css | 49 ++++++++++++--------------- 1 file changed, 22 insertions(+), 27 deletions(-) diff --git a/packages/starlight/style/markdown.css b/packages/starlight/style/markdown.css index 5ad204305e..ad89fba17f 100644 --- a/packages/starlight/style/markdown.css +++ b/packages/starlight/style/markdown.css @@ -114,35 +114,28 @@ border-bottom: 1px solid var(--sl-color-hairline); } +/*
and styles */ .sl-markdown-content details:not(:where(.not-content *)) { - --sl-details-x-pad: 1rem; - --sl-details-y-pad: 0.75rem; - --sl-details-border-color: var(--sl-color-gray-5); - --sl-details-open-summary-bg-color: var(--sl-color-gray-6); + --sl-details-border-color: var(--sl-color-hairline-light); - border-block: 1px solid var(--sl-details-border-color); - padding: var(--sl-details-y-pad) var(--sl-details-x-pad); + border-inline-start: 1px solid var(--sl-details-border-color); + padding-inline-start: 1rem; } -[data-theme='light'] .sl-markdown-content details:not(:where(.not-content *)) { - --sl-details-open-summary-bg-color: var(--sl-color-gray-7); +.sl-markdown-content details[open]:not(:where(.not-content *)), +.sl-markdown-content details:hover:not(:where(.not-content *)) { + --sl-details-border-color: var(--sl-color-gray-4); } .sl-markdown-content summary:not(:where(.not-content *)) { - align-items: center; - border-inline: 1px solid transparent; color: var(--sl-color-white); cursor: pointer; - display: flex; - gap: 0.5rem; - justify-content: space-between; - margin: calc(-1 * var(--sl-details-y-pad)) calc(-1 * var(--sl-details-x-pad)); - padding: var(--sl-details-y-pad) var(--sl-details-x-pad); + display: block; /* Needed to hide the default marker in some browsers. */ + font-weight: 600; } .sl-markdown-content details[open] > summary:not(:where(.not-content *)) { - background-color: var(--sl-details-open-summary-bg-color); - border-bottom: 1px solid; - border-color: var(--sl-details-border-color); - margin-bottom: var(--sl-details-y-pad); + margin-bottom: 1rem; } + +/* marker styles */ .sl-markdown-content summary:not(:where(.not-content *))::marker, .sl-markdown-content summary:not(:where(.not-content *))::-webkit-details-marker { display: none; @@ -150,9 +143,10 @@ .sl-markdown-content summary:not(:where(.not-content *))::after { background-color: currentColor; content: ''; - flex-shrink: 0; - height: 1.5rem; - width: 1.5rem; + display: inline-block; + height: 1.25rem; + width: 1.25rem; + vertical-align: middle; mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0ibTE0LjgzIDExLjI5LTQuMjQtNC4yNGExIDEgMCAxIDAtMS40MiAxLjQxTDEyLjcxIDEybC0zLjU0IDMuNTRhMSAxIDAgMCAwIDAgMS40MSAxIDEgMCAwIDAgLjcxLjI5IDEgMSAwIDAgMCAuNzEtLjI5bDQuMjQtNC4yNGExLjAwMiAxLjAwMiAwIDAgMCAwLTEuNDJaIi8+PC9zdmc+'); mask-repeat: no-repeat; } @@ -168,11 +162,12 @@ .sl-markdown-content [dir='rtl'] summary:not(:where(.not-content *))::after { transform: rotateZ(180deg); } -.sl-markdown-content details + details:not(:where(.not-content *)) { - border-top: 0; - margin-top: 0; -} + +/*
styles inside asides */ .sl-markdown-content .starlight-aside details:not(:where(.not-content *)) { --sl-details-border-color: var(--sl-color-asides-border); - --sl-details-open-summary-bg-color: transparent; +} +.sl-markdown-content .starlight-aside details[open]:not(:where(.not-content *)), +.sl-markdown-content .starlight-aside details:hover:not(:where(.not-content *)) { + --sl-details-border-color: var(--sl-color-asides-text-accent); } From 7f6607a016e22e95d2faad31146caad21ae31b7a Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Mon, 22 Apr 2024 11:39:58 +0200 Subject: [PATCH 04/13] feat: move marker to the left --- packages/starlight/style/markdown.css | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/packages/starlight/style/markdown.css b/packages/starlight/style/markdown.css index ad89fba17f..e416f12ac1 100644 --- a/packages/starlight/style/markdown.css +++ b/packages/starlight/style/markdown.css @@ -130,6 +130,9 @@ cursor: pointer; display: block; /* Needed to hide the default marker in some browsers. */ font-weight: 600; + /* Expand the outline so that the marker cannot distort it. */ + margin-inline-start: -0.5rem; + padding-inline-start: 0.5rem; } .sl-markdown-content details[open] > summary:not(:where(.not-content *)) { margin-bottom: 1rem; @@ -140,26 +143,29 @@ .sl-markdown-content summary:not(:where(.not-content *))::-webkit-details-marker { display: none; } -.sl-markdown-content summary:not(:where(.not-content *))::after { +.sl-markdown-content summary:not(:where(.not-content *))::before { + --sl-details-marker-size: 1.25rem; + background-color: currentColor; content: ''; display: inline-block; - height: 1.25rem; - width: 1.25rem; + height: var(--sl-details-marker-size); + width: var(--sl-details-marker-size); + margin-inline: calc((var(--sl-details-marker-size) / 4) * -1) 0.25rem; vertical-align: middle; mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0ibTE0LjgzIDExLjI5LTQuMjQtNC4yNGExIDEgMCAxIDAtMS40MiAxLjQxTDEyLjcxIDEybC0zLjU0IDMuNTRhMSAxIDAgMCAwIDAgMS40MSAxIDEgMCAwIDAgLjcxLjI5IDEgMSAwIDAgMCAuNzEtLjI5bDQuMjQtNC4yNGExLjAwMiAxLjAwMiAwIDAgMCAwLTEuNDJaIi8+PC9zdmc+'); mask-repeat: no-repeat; } @media (prefers-reduced-motion: no-preference) { - .sl-markdown-content summary:not(:where(.not-content *))::after { + .sl-markdown-content summary:not(:where(.not-content *))::before { transition: transform 0.2s ease-in-out; } } -.sl-markdown-content details[open] > summary:not(:where(.not-content *))::after { +.sl-markdown-content details[open] > summary:not(:where(.not-content *))::before { transform: rotateZ(90deg); } -[dir='rtl'] .sl-markdown-content summary:not(:where(.not-content *))::after, -.sl-markdown-content [dir='rtl'] summary:not(:where(.not-content *))::after { +[dir='rtl'] .sl-markdown-content summary:not(:where(.not-content *))::before, +.sl-markdown-content [dir='rtl'] summary:not(:where(.not-content *))::before { transform: rotateZ(180deg); } From fff72c8f5fefb20795374f16f422ed665e208b67 Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Fri, 3 May 2024 16:54:56 +0200 Subject: [PATCH 05/13] feat: tweak details border colors --- docs/src/content/docs/reference/details.mdx | 4 ++++ packages/starlight/style/markdown.css | 10 ++++++---- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/docs/src/content/docs/reference/details.mdx b/docs/src/content/docs/reference/details.mdx index 39ee736c24..ee4af4f632 100644 --- a/docs/src/content/docs/reference/details.mdx +++ b/docs/src/content/docs/reference/details.mdx @@ -24,6 +24,10 @@ This is the details content
+The following is a blockquote: + +> This is the blockquote content + ## Opened by default The following is a `
` element opened by default: diff --git a/packages/starlight/style/markdown.css b/packages/starlight/style/markdown.css index e416f12ac1..c57b5757eb 100644 --- a/packages/starlight/style/markdown.css +++ b/packages/starlight/style/markdown.css @@ -115,15 +115,16 @@ } /*
and styles */ -.sl-markdown-content details:not(:where(.not-content *)) { - --sl-details-border-color: var(--sl-color-hairline-light); +.sl-markdown-content details:not(:where(.not-content *)), +.sl-markdown-content details[open]:hover:not(:where(.not-content *)) { + --sl-details-border-color: var(--sl-color-gray-4); border-inline-start: 1px solid var(--sl-details-border-color); padding-inline-start: 1rem; } .sl-markdown-content details[open]:not(:where(.not-content *)), .sl-markdown-content details:hover:not(:where(.not-content *)) { - --sl-details-border-color: var(--sl-color-gray-4); + --sl-details-border-color: var(--sl-color-gray-3); } .sl-markdown-content summary:not(:where(.not-content *)) { color: var(--sl-color-white); @@ -170,7 +171,8 @@ } /*
styles inside asides */ -.sl-markdown-content .starlight-aside details:not(:where(.not-content *)) { +.sl-markdown-content .starlight-aside details:not(:where(.not-content *)), +.sl-markdown-content .starlight-aside details[open]:hover:not(:where(.not-content *)) { --sl-details-border-color: var(--sl-color-asides-border); } .sl-markdown-content .starlight-aside details[open]:not(:where(.not-content *)), From 033ceb5f179804fc667986807dca24ed9285ded6 Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Fri, 3 May 2024 17:00:28 +0200 Subject: [PATCH 06/13] fix: long summary marker position --- packages/starlight/style/markdown.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/starlight/style/markdown.css b/packages/starlight/style/markdown.css index c57b5757eb..70cf00099d 100644 --- a/packages/starlight/style/markdown.css +++ b/packages/starlight/style/markdown.css @@ -169,6 +169,10 @@ .sl-markdown-content [dir='rtl'] summary:not(:where(.not-content *))::before { transform: rotateZ(180deg); } +/* with only a paragraph automatically added when using MDX */ +.sl-markdown-content summary:not(:where(.not-content *)) p:only-child { + display: inline; +} /*
styles inside asides */ .sl-markdown-content .starlight-aside details:not(:where(.not-content *)), From a0aeaa095a0416e70a39d191844e954adc508d92 Mon Sep 17 00:00:00 2001 From: Chris Swithinbank Date: Thu, 16 May 2024 12:26:54 +0200 Subject: [PATCH 07/13] Remove border hover style on expanded `
` --- packages/starlight/style/markdown.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/starlight/style/markdown.css b/packages/starlight/style/markdown.css index 70cf00099d..a49afa01eb 100644 --- a/packages/starlight/style/markdown.css +++ b/packages/starlight/style/markdown.css @@ -115,8 +115,7 @@ } /*
and styles */ -.sl-markdown-content details:not(:where(.not-content *)), -.sl-markdown-content details[open]:hover:not(:where(.not-content *)) { +.sl-markdown-content details:not(:where(.not-content *)) { --sl-details-border-color: var(--sl-color-gray-4); border-inline-start: 1px solid var(--sl-details-border-color); From cd0e289c830fda37afc8aae52f8865abac60082b Mon Sep 17 00:00:00 2001 From: Chris Swithinbank Date: Thu, 16 May 2024 12:59:17 +0200 Subject: [PATCH 08/13] Also remove hover style in asides variant --- packages/starlight/style/markdown.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/starlight/style/markdown.css b/packages/starlight/style/markdown.css index a49afa01eb..ccbbfb9d87 100644 --- a/packages/starlight/style/markdown.css +++ b/packages/starlight/style/markdown.css @@ -174,8 +174,7 @@ } /*
styles inside asides */ -.sl-markdown-content .starlight-aside details:not(:where(.not-content *)), -.sl-markdown-content .starlight-aside details[open]:hover:not(:where(.not-content *)) { +.sl-markdown-content .starlight-aside details:not(:where(.not-content *)) { --sl-details-border-color: var(--sl-color-asides-border); } .sl-markdown-content .starlight-aside details[open]:not(:where(.not-content *)), From c55b7977fd996e9589d97c283b4b7b8520473ca2 Mon Sep 17 00:00:00 2001 From: Chris Swithinbank Date: Thu, 16 May 2024 16:37:44 +0200 Subject: [PATCH 09/13] Design tweak: 2px border, accent colour hover styles --- packages/starlight/style/markdown.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/starlight/style/markdown.css b/packages/starlight/style/markdown.css index ccbbfb9d87..c83193c209 100644 --- a/packages/starlight/style/markdown.css +++ b/packages/starlight/style/markdown.css @@ -116,14 +116,14 @@ /*
and styles */ .sl-markdown-content details:not(:where(.not-content *)) { - --sl-details-border-color: var(--sl-color-gray-4); + --sl-details-border-color: var(--sl-color-gray-5); - border-inline-start: 1px solid var(--sl-details-border-color); + border-inline-start: 2px solid var(--sl-details-border-color); padding-inline-start: 1rem; } -.sl-markdown-content details[open]:not(:where(.not-content *)), -.sl-markdown-content details:hover:not(:where(.not-content *)) { - --sl-details-border-color: var(--sl-color-gray-3); +.sl-markdown-content details:not([open]):hover:not(:where(.not-content *)), +.sl-markdown-content details:has(> summary:hover):not(:where(.not-content *)) { + --sl-details-border-color: var(--sl-color-text-accent); } .sl-markdown-content summary:not(:where(.not-content *)) { color: var(--sl-color-white); @@ -177,7 +177,7 @@ .sl-markdown-content .starlight-aside details:not(:where(.not-content *)) { --sl-details-border-color: var(--sl-color-asides-border); } -.sl-markdown-content .starlight-aside details[open]:not(:where(.not-content *)), -.sl-markdown-content .starlight-aside details:hover:not(:where(.not-content *)) { +.sl-markdown-content .starlight-aside details:not([open]):hover:not(:where(.not-content *)), +.sl-markdown-content .starlight-aside details:has(> summary:hover):not(:where(.not-content *)) { --sl-details-border-color: var(--sl-color-asides-text-accent); } From 77d1e8ccaf7cfde8394409dba1b3050961de4328 Mon Sep 17 00:00:00 2001 From: Chris Swithinbank Date: Fri, 17 May 2024 18:28:02 +0200 Subject: [PATCH 10/13] Apply docs suggestions --- .../src/content/docs/guides/authoring-content.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/src/content/docs/guides/authoring-content.md b/docs/src/content/docs/guides/authoring-content.md index dc9e36b785..2fe848151a 100644 --- a/docs/src/content/docs/guides/authoring-content.md +++ b/docs/src/content/docs/guides/authoring-content.md @@ -363,25 +363,25 @@ A code block’s optional title can be set either with a `title="..."` attribute ## Details -Details (also known as “disclosures” or “accordion”) are useful to conceal information that is not immediately relevant to the user. -The user can reveal further information with an interaction to toggle the visibility of the content. +Details (also known as “disclosures” or “accordions”) are useful to hide content that is not immediately relevant. +Users can click a short summary to expand and view the full content. -Starlight does not provide a custom Markdown syntax for details, but you can use the standard HTML `
` and `` elements to create them while authoring your Markdown content. +Use the standard HTML [`
`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) and [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary) elements in your Markdown content to create a disclosure widget. -You can nest any other Markdown content types inside a `
` element. +You can nest any other Markdown syntax inside a `
` element.
-Where and when the Andromeda constellation is best visible? +Where and when is the Andromeda constellation most visible? -The [Andromeda constellation]() is best visible in the night sky during the month of November at latitudes between `+90°` and `−40°`. +The [Andromeda constellation]() is most visible in the night sky during the month of November at latitudes between `+90°` and `−40°`.
```md
-Where and when the Andromeda constellation is best visible? +Where and when is the Andromeda constellation most visible? -The [Andromeda constellation]() is best visible in the night sky during the month of November at latitudes between `+90°` and `−40°`. +The [Andromeda constellation]() is most visible in the night sky during the month of November at latitudes between `+90°` and `−40°`.
``` From 01a3e538b9bfdb7b8b29a2f4a069673cb1e78d55 Mon Sep 17 00:00:00 2001 From: Chris Swithinbank Date: Fri, 17 May 2024 18:34:09 +0200 Subject: [PATCH 11/13] Use `-webkit-` prefix for mask CSS and avoid base 64 encoding SVG data URL --- packages/starlight/style/markdown.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/starlight/style/markdown.css b/packages/starlight/style/markdown.css index c89efa23a5..7d057de839 100644 --- a/packages/starlight/style/markdown.css +++ b/packages/starlight/style/markdown.css @@ -157,7 +157,9 @@ width: var(--sl-details-marker-size); margin-inline: calc((var(--sl-details-marker-size) / 4) * -1) 0.25rem; vertical-align: middle; - mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0ibTE0LjgzIDExLjI5LTQuMjQtNC4yNGExIDEgMCAxIDAtMS40MiAxLjQxTDEyLjcxIDEybC0zLjU0IDMuNTRhMSAxIDAgMCAwIDAgMS40MSAxIDEgMCAwIDAgLjcxLjI5IDEgMSAwIDAgMCAuNzEtLjI5bDQuMjQtNC4yNGExLjAwMiAxLjAwMiAwIDAgMCAwLTEuNDJaIi8+PC9zdmc+'); + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.8 11.3 10.6 7a1 1 0 1 0-1.4 1.5l3.5 3.5-3.5 3.5a1 1 0 0 0 0 1.4 1 1 0 0 0 .7.3 1 1 0 0 0 .7-.3l4.2-4.2a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E%0A"); + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.8 11.3 10.6 7a1 1 0 1 0-1.4 1.5l3.5 3.5-3.5 3.5a1 1 0 0 0 0 1.4 1 1 0 0 0 .7.3 1 1 0 0 0 .7-.3l4.2-4.2a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E%0A"); + -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } @media (prefers-reduced-motion: no-preference) { From 60e69dff4a37c78246dba8b1b6cdb917a874e6d9 Mon Sep 17 00:00:00 2001 From: Chris Swithinbank Date: Fri, 17 May 2024 18:40:54 +0200 Subject: [PATCH 12/13] Delete test page --- docs/src/content/docs/reference/details.mdx | 320 -------------------- 1 file changed, 320 deletions(-) delete mode 100644 docs/src/content/docs/reference/details.mdx diff --git a/docs/src/content/docs/reference/details.mdx b/docs/src/content/docs/reference/details.mdx deleted file mode 100644 index ee4af4f632..0000000000 --- a/docs/src/content/docs/reference/details.mdx +++ /dev/null @@ -1,320 +0,0 @@ ---- -title: ⚠️ Details styles demo page ⚠️ ---- - -:::danger -// TODO(HiDeoo) Remove this page -::: - -## Basics - -The following is a basic `
` element with no block content: - -
- This is the summary - This is the details content -
- -The following is a basic `
` element with block content: - -
-This is the summary - -This is the details content - -
- -The following is a blockquote: - -> This is the blockquote content - -## Opened by default - -The following is a `
` element opened by default: - -
- This is the summary - This is the details content -
- -## Long summary - -The following is a `
` element with a very long summary: - -
- - This is the very very very very very very very very very very very very very - very very very very very very very very very very very very very very very - very very very very very long summary - - This is the details content -
- -## Long content - -The following is a `
` element with a very long content: - -
-This is the summary - -This is the details content - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas euismod ante lorem, quis posuere massa sodales id. Donec a dapibus nisi, id volutpat lorem. Aenean eleifend nisl at ex feugiat, at vulputate lorem luctus. Aliquam eget accumsan ipsum. Maecenas ut elit hendrerit, sodales leo at, tincidunt elit. Nullam ut venenatis libero. In vel molestie tellus. Suspendisse vitae nibh in felis faucibus aliquet. Nunc tortor enim, pellentesque sit amet justo eget, auctor elementum enim. Nam posuere et ipsum lobortis porttitor. Proin consectetur ullamcorper augue, a fermentum neque dapibus eget. Praesent feugiat orci vulputate turpis mattis, eget placerat mi volutpat. - -Maecenas vehicula orci metus, quis dapibus turpis suscipit vitae. Nullam velit ante, convallis fermentum massa a, condimentum mattis lorem. Nunc interdum consequat mollis. Suspendisse semper diam tellus. Maecenas mollis congue mi, eu hendrerit dui hendrerit sed. Aliquam quis ornare dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. - -Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed posuere arcu ut leo ultrices, in volutpat leo eleifend. Proin facilisis tempus maximus. Sed eu nulla ultricies, accumsan libero sed, commodo nunc. Curabitur sit amet metus vitae erat laoreet cursus et ut magna. Nam euismod justo a orci sagittis molestie. Phasellus et interdum ipsum, sed egestas ligula. Vestibulum congue eros ac neque posuere molestie. Nunc id enim aliquet, vestibulum diam at, fermentum justo. - -Duis ac mauris purus. Etiam viverra nisi vel facilisis eleifend. Ut dapibus, eros ac cursus faucibus, augue mi facilisis lacus, ut ullamcorper arcu diam eu nulla. Praesent tincidunt placerat augue eget cursus. Integer magna felis, malesuada in interdum eu, efficitur vel dolor. In feugiat nisl sit amet pharetra ullamcorper. Quisque odio ante, convallis a lectus id, consectetur finibus enim. Curabitur pretium quam ut lectus tristique, ac ornare lorem varius. Ut maximus aliquet est vitae hendrerit. In vitae massa mattis, volutpat dui sagittis, semper arcu. In a ligula tincidunt, elementum nisi ut, tincidunt odio. Etiam accumsan massa a justo convallis blandit. Integer in felis arcu. Nullam id felis et velit blandit convallis vitae a turpis. Nunc vitae erat ac ipsum mattis rutrum nec ut justo. Mauris ullamcorper id metus nec pretium. - -Donec purus nibh, ornare ac sagittis porta, porta ac neque. Donec efficitur dictum nibh et hendrerit. Mauris gravida mollis leo posuere posuere. In hac habitasse platea dictumst. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean sit amet massa felis. Fusce lectus neque, auctor quis est et, interdum lobortis ante. Nulla aliquet euismod libero, sit amet maximus orci mattis eu. Nullam sed cursus felis. Sed dapibus faucibus dolor, id volutpat eros varius a. - -
- -## Interleaved content - -The following are two `
` elements with a code block in between: - -
- This is the summary - This is the details content -
- -```js -console.log('some content in between'); -``` - -
- This is the summary - This is the details content -
- -## Markdown content - -The following is a `
` element with markdown content: - -
-This is the summary - -This is the details content - -```ts -console.log('Hello world'); -``` - -This is `a` paragraph. - -:::note -This is a note -::: - -
- -## Uncontrolled accordion - -The following are `
` elements forming an uncontrolled accordion, where each `
` element can be opened or closed independently: - -
- This is the summary (1) - This is the details content (1) -
- -
- This is the summary (2) - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas euismod ante - lorem, quis posuere massa sodales id. Donec a dapibus nisi, id volutpat lorem. - Aenean eleifend nisl at ex feugiat, at vulputate lorem luctus. Aliquam eget accumsan - ipsum. Maecenas ut elit hendrerit, sodales leo at, tincidunt elit. Nullam ut venenatis - libero. In vel molestie tellus. Suspendisse vitae nibh in felis faucibus aliquet. - Nunc tortor enim, pellentesque sit amet justo eget, auctor elementum enim. Nam - posuere et ipsum lobortis porttitor. Proin consectetur ullamcorper augue, a fermentum - neque dapibus eget. Praesent feugiat orci vulputate turpis mattis, eget placerat - mi volutpat. -
- -
- This is the summary (3) - Maecenas vehicula orci metus, quis dapibus turpis suscipit vitae. Nullam velit - ante, convallis fermentum massa a, condimentum mattis lorem. Nunc interdum consequat - mollis. Suspendisse semper diam tellus. Maecenas mollis congue mi, eu hendrerit - dui hendrerit sed. Aliquam quis ornare dolor. Pellentesque habitant morbi tristique - senectus et netus et malesuada fames ac turpis egestas. -
- -## Controlled accordion - -The following are `
` elements forming an controlled accordion, where only one `
` element can be opened at a time: - -:::caution -Note that this feature is not supported in Firefox. -::: - -
- This is the summary (1) - This is the details content (1) -
- -
- This is the summary (2) - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas euismod ante - lorem, quis posuere massa sodales id. Donec a dapibus nisi, id volutpat lorem. - Aenean eleifend nisl at ex feugiat, at vulputate lorem luctus. Aliquam eget accumsan - ipsum. Maecenas ut elit hendrerit, sodales leo at, tincidunt elit. Nullam ut venenatis - libero. In vel molestie tellus. Suspendisse vitae nibh in felis faucibus aliquet. - Nunc tortor enim, pellentesque sit amet justo eget, auctor elementum enim. Nam - posuere et ipsum lobortis porttitor. Proin consectetur ullamcorper augue, a fermentum - neque dapibus eget. Praesent feugiat orci vulputate turpis mattis, eget placerat - mi volutpat. -
- -
- This is the summary (3) - Maecenas vehicula orci metus, quis dapibus turpis suscipit vitae. Nullam velit - ante, convallis fermentum massa a, condimentum mattis lorem. Nunc interdum consequat - mollis. Suspendisse semper diam tellus. Maecenas mollis congue mi, eu hendrerit - dui hendrerit sed. Aliquam quis ornare dolor. Pellentesque habitant morbi tristique - senectus et netus et malesuada fames ac turpis egestas. -
- -## Nested details - -The following is a `
` element with a nested `
` element: - -
-This is the summary - -This is the details content - -
- This is the nested summary - This is the nested details content -
- -And some content after the nested details - -
- -## `not-content` class - -
- -

- The following is a <details> element wrapped with the{' '} - not-content CSS class: -

- -
- -
- This is the summary - This is the details content -
- -
- -## RTL - -The following is a `
` element nested in a block in RTL: - -
- -
- This is the summary - This is the details content -
- -
- -The following is a `
` element in RTL: - -
- This is the summary - With a summary and some details not in a paragraph -
- -## Asides - -The following are `
` elements nested in asides: - -:::note -This is the note aside content - -
- This is the summary - This is the details content -
- -::: - -:::tip -This is the tip aside content - -
- This is the summary - This is the details content -
- -::: - -:::caution -This is the caution aside content - -
- This is the summary - This is the details content -
- -::: - -:::danger -This is the danger aside content - -
- This is the summary - This is the details content -
- -::: - -## Steps - -## In steps - -The following is a `
` element nested in a `` component: - -import { Steps } from '@astrojs/starlight/components'; - - - -1. Step one has some information - -
- - Need to know more? - - You might need more information for step one. - - So we're here to help. - -
- -2. Step two has some more information - - - -## With steps - -The following is a `
` element containing a `` component: - -
- Need more details? - - -1. Step one has some information. - - These steps help if you need extra details to complete this task. - -2. Step two has some more information. - - -
From 535328d2a6367d8b536b9becc36bee8c2d0e614f Mon Sep 17 00:00:00 2001 From: Chris Swithinbank Date: Fri, 17 May 2024 18:44:24 +0200 Subject: [PATCH 13/13] Increase CSS budget by 500 bytes --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b6e662cec1..93e7622763 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ { "name": "/_astro/*.css", "path": "examples/basics/dist/_astro/*.css", - "limit": "14 kB" + "limit": "14.5 kB" } ] }