adding angle brackets
This commit is contained in:
parent
5c84594c2a
commit
7016d57e1c
4 changed files with 7 additions and 7 deletions
|
|
@ -3,10 +3,10 @@ title: Details
|
|||
usage: "{% set itemList = collections.docs %}{% include 'partials/details.njk' %}"
|
||||
---
|
||||
|
||||
The `custom-details` WebC component has a corresponding Nunjucks include.
|
||||
It uses the `details` and `summary` elements to create a collapsible section and enhances them aesthetically and functionally.
|
||||
The `<custom-details>` WebC component has a corresponding Nunjucks include.
|
||||
It uses the `<details>` and `<summary>` elements to create a collapsible section and enhances them aesthetically and functionally.
|
||||
|
||||
The JavaScript for the `custom-details` component adds functionality to buttons to expand and collapse the sections with one action. When JavaScript is disabled, the sections are still accessible and collapsible, but the extra buttons are hidden.
|
||||
The JavaScript for the `<custom-details>` component adds functionality to buttons to expand and collapse the sections with one action. When JavaScript is disabled, the sections are still accessible and collapsible, but the extra buttons are hidden.
|
||||
|
||||
On page load, it checks if a hash corresponding to a details ID exists in the URL. If such an ID is found, the corresponding details section is programmatically opened, allowing direct navigation to an open section from a shared URL.
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Easteregg
|
||||
---
|
||||
|
||||
The `custom-easteregg` component is by default in the base layout in `src/_layouts/base.njk`. Just delete the two lines if you don't want to use it. The component is
|
||||
The `<custom-easteregg>` component is by default in the base layout in `src/_layouts/base.njk`. Just delete the two lines if you don't want to use it. The component is
|
||||
designed to trigger a confetti effect when a user types a specific keyword sequence. It uses the dynamic import of the `canvas-confetti` library to render custom-shaped particles based on user input.
|
||||
|
||||
**Defaults**:
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ Masonry layout is not yet a native part of CSS grid. There is a debate if using
|
|||
|
||||
It should be used carefully so we don't create confusion with the tabbing order. In version 3 of the starter I made the masonry layout a web component, and no longer a opt-in feature (was: `masonry: true` in the front matter).
|
||||
|
||||
`custom-masonry` is designed to function as a masonry grid by dynamically adjusting item positions based on the available column space and the size of its content. The necessary JavaScript (`custom-masonry.js`) is loaded only once per component usage due to the `data-island="once"` attribute.
|
||||
`<custom-masonry>` is designed to function as a masonry grid by dynamically adjusting item positions based on the available column space and the size of its content. The necessary JavaScript (`custom-masonry.js`) is loaded only once per component usage due to the `data-island="once"` attribute.
|
||||
Optional: pass in `layout="50-50"` to set a 50% width for each column.
|
||||
|
||||
If no JavaScript is available, the grid will fall back to the regular grid layout defined in `src/assets/css/global/compositions/grid.css`.
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
title: Youtube
|
||||
---
|
||||
|
||||
The `@slug` attribute is used to pass the video ID to the `lite-youtube` element.
|
||||
`@label` ist used for the nested `custom-youtube-link` which adds a link to watch on YouTube. This also serves as a fallback in case JS is deactivated.
|
||||
The `@slug` attribute is used to pass the video ID to the `<lite-youtube>` element.
|
||||
`@label` ist used for the nested `<custom-youtube-link>` which adds a link to watch on YouTube. This also serves as a fallback in case JS is deactivated.
|
||||
Uses the [Lite YouTube Embed repository](https://github.com/paulirish/lite-youtube-embed).
|
||||
|
||||
```
|
||||
|
|
|
|||
Loading…
Reference in a new issue