feat: Dot navigation

contents/_includes/covers/dot-navigation.njk

@@ -0,0 +1,7 @@
+<div class="dot-navigation">
+    <div class="dot-navigation__item"></div>
+    <div class="dot-navigation__item dot-navigation__item--active"></div>
+    <div class="dot-navigation__item"></div>
+    <div class="dot-navigation__item"></div>
+    <div class="dot-navigation__item"></div>
+</div>

contents/dot-navigation.md

@@ -0,0 +1,54 @@
+---
+layout: layouts/post.njk
+title: Dot navigation
+description: Create dot navigation with CSS flexbox
+keywords: css dot navigation, css flexbox
+---
+
+## HTML
+
+```html
+<div class="dot-navigation">
+    <div class="dot-navigation__item"></div>
+
+    <!-- Repeat other dots -->
+    ...
+</div>
+```
+
+## CSS
+
+```css
+.dot-navigation {
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Reset styles */
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.dot-navigation__item {
+    /* Rounded border */
+    border-radius: 9999px;
+    height: 0.75rem;
+    width: 0.75rem;
+
+    /* Inactive dot */
+    background-color: transparent;
+    border: 1px solid #d1d5db;
+
+    /* OPTIONAL: Spacing between dots */
+    margin: 0 0.25rem;
+}
+
+/* Active dot */
+.dot-navigation__item--active {
+    background-color: #d1d5db;
+}
+```
+
+{% demo %}{% include "covers/dot-navigation.njk" %}{% enddemo %}

contents/index.njk

@@ -127,6 +127,7 @@ eleventyExcludeFromCollections: true
         <div class="category__posts">
             {% pattern "Breadcrumb" %}{% include "covers/breadcrumb.njk" %}{% endpattern %}
             {% pattern "Circular navigation" %}{% include "covers/circular-navigation.njk" %}{% endpattern %}
+            {% pattern "Dot navigation" %}{% include "covers/dot-navigation.njk" %}{% endpattern %}
         </div>
     </div>