diff --git a/snippets/floating-list-titles.md b/snippets/floating-list-titles.md new file mode 100644 index 000000000..6bda962dd --- /dev/null +++ b/snippets/floating-list-titles.md @@ -0,0 +1,101 @@ +--- +title: List with floating section headings +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` +- Finally, apply `position: sticky` and `top: 0.5rem` to headings to create a floating effect. + +```html +
+
+
+
A
+
Algeria
+
Angola
+ +
B
+
Benin
+
Botswana
+
Burkina Faso
+
Burundi
+ +
C
+
Cabo Verde
+
Cameroon
+
Central African Republic
+
Chad
+
Comoros
+
Congo, Democratic Republic of the
+
Congo, Republic of the
+
Cote d'Ivoire
+ +
D
+
Djibouti
+ +
E
+
Egypt
+
Equatorial Guinea
+
Eritrea
+
Eswatini (formerly Swaziland)
+
Ethiopia
+
+
+
+``` + +```css +.container { + display: grid; + place-items: center; + min-height: 100vh; +} + +.floating-stack { + background: #455A64; + color: #fff; + height: 80vh; + height: 320px; + border-radius: 1rem; + overflow-y: auto; +} + +.floating-stack > dl { + margin: 0 0 1rem; + display: grid; + grid-template-columns: 2.5rem 1fr; + align-items: center; +} + +.floating-stack dt { + position: sticky; + top: 0.5rem; + left: 0.5rem; + font-weight: bold; + background: #263238; + color: #cfd8dc; + height: 2rem; + width: 2rem; + border-radius: 50%; + padding: 0.25rem 1rem; + grid-column: 1; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; +} + +.floating-stack dd { + grid-column: 2; + margin: 0; + padding: 0.75rem; +} + +.floating-stack > dl:first-of-type > dd:first-of-type { + margin-top: 0.25rem; +} +``` diff --git a/snippets/sticky-list-titles.md b/snippets/sticky-list-titles.md new file mode 100644 index 000000000..e6447ac0c --- /dev/null +++ b/snippets/sticky-list-titles.md @@ -0,0 +1,80 @@ +--- +title: List with sticky section headings +tags: visual,intermediate +--- + +Creates a list with sticky headings for each section. + +- Use `overflow-y: auto` to allow the list container (`dl`) to overflow vertically. +- Set headings (`dt`) `position` to `sticky` and apply `top: 0` to stick to the top of the container. + +```html +
+
+
A
+
Algeria
+
Angola
+ +
B
+
Benin
+
Botswana
+
Burkina Faso
+
Burundi
+ +
C
+
Cabo Verde
+
Cameroon
+
Central African Republic
+
Chad
+
Comoros
+
Congo, Democratic Republic of the
+
Congo, Republic of the
+
Cote d'Ivoire
+ +
D
+
Djibouti
+ +
E
+
Egypt
+
Equatorial Guinea
+
Eritrea
+
Eswatini (formerly Swaziland)
+
Ethiopia
+
+
+``` + +```css +.container { + display: grid; + place-items: center; + min-height: 100vh; +} + +.sticky-stack { + background: #37474f; + color: #fff; + margin: 0; + height: 320px; + border-radius: 1rem; + overflow-y: auto; +} + +.sticky-stack dt { + position: sticky; + top: 0; + font-weight: bold; + background: #263238; + color: #cfd8dc; + padding: 0.25rem 1rem; +} + +.sticky-stack dd { + margin: 0; + padding: 0.75rem 1rem; +} + +.sticky-stack dd + dt { + margin-top: 1rem; +} +```