Prepare repository for merge

2023-05-01 22:51:44 +03:00
parent 334b4dd6f8
commit e49fc829dd
100 changed files with 0 additions and 593 deletions
--- a/css/snippets/floating-list-titles.md
+++ b/css/snippets/floating-list-titles.md
@ -0,0 +1,105 @@
+---
+title: List with floating section headings
+type: snippet
+tags: [visual]
+author: chalarangelo
+cover: pop-of-green
+dateModified: 2021-10-11T18:44:51+03:00
+---
+
+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
+<div class="container">
+  <div class="floating-stack">
+    <dl>
+      <dt>A</dt>
+      <dd>Algeria</dd>
+      <dd>Angola</dd>
+
+      <dt>B</dt>
+      <dd>Benin</dd>
+      <dd>Botswana</dd>
+      <dd>Burkina Faso</dd>
+      <dd>Burundi</dd>
+
+      <dt>C</dt>
+      <dd>Cabo Verde</dd>
+      <dd>Cameroon</dd>
+      <dd>Central African Republic</dd>
+      <dd>Chad</dd>
+      <dd>Comoros</dd>
+      <dd>Congo, Democratic Republic of the</dd>
+      <dd>Congo, Republic of the</dd>
+      <dd>Cote d'Ivoire</dd>
+
+      <dt>D</dt>
+      <dd>Djibouti</dd>
+
+      <dt>E</dt>
+      <dd>Egypt</dd>
+      <dd>Equatorial Guinea</dd>
+      <dd>Eritrea</dd>
+      <dd>Eswatini (formerly Swaziland)</dd>
+      <dd>Ethiopia</dd>
+    </dl>
+  </div>
+</div>
+```
+
+```css
+.container {
+  display: grid;
+  place-items: center;
+  min-height: 400px;
+}
+
+.floating-stack {
+  background: #455A64;
+  color: #fff;
+  height: 80vh;
+  width: 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;
+}
+```