andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Revamp snippet descriptions

Browse Source
This commit is contained in:
Chalarangelo
2020-12-30 15:37:37 +02:00
parent 27bae0477f
commit 16a4e06e85
59 changed files with 341 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
snippets/floating-list-titles.md
View File

@ -6,8 +6,8 @@ tags: visual,advanced
Creates a list with floating headings for each section.
- Use `overflow-y: auto` to allow the list container to overflow vertically.
- Use `display: grid` on the inner container (`dl`) to create a layout with two columns.
- Set headings (`dt`) to `grid-column: 1` and content (`dd`) to `grid-column: 2`
- Use `display: grid` on the inner container (`<dl>`) to create a layout with two columns.
- Set headings (`<dt>`) to `grid-column: 1` and content (`<dd>`) to `grid-column: 2`
- Finally, apply `position: sticky` and `top: 0.5rem` to headings to create a floating effect.
```html