feat: Add fading long content pattern

contents/_includes/patterns/fading-long-section.njk

@@ -0,0 +1,6 @@
+<div class="fading-long-section">
+    <div class="fading-long-section__content">
+        {% lines "hor", 40 %}
+    </div>
+    <div class="fading-long-section__fading"></div>
+</div>

contents/fading-long-section.md

@@ -0,0 +1,55 @@
+---
+layout: layouts/post.njk
+title: Fading long section
+description: Fading long section to indicate there is more content
+keywords: css fading overflow, css linear gradient
+---
+
+The pattern is often used to indicate there is more content.
+
+## HTML
+
+```html
+<div class="fading-long-section">
+    <!-- Main content -->
+    <div class="fading-long-section__content">
+        ...
+    </div>
+
+    <!-- The faded element -->
+    <div class="fading-long-section__fading"></div>
+</div>
+```
+
+## CSS
+
+```css
+.fading-long-section {
+    /* Used to position the faded element */
+    position: relative;
+}
+
+.fading-long-section__content {
+    /* Height */
+    height: 100%;
+    overflow-y: hidden;
+}
+
+.fading-long-section__fading {
+    /* Displayed at the bottom */
+    bottom: 0;
+    left: 0;
+    position: absolute;
+
+    /* Size */
+    height: 2rem;
+    width: 100%;
+
+    /* Gradient background */
+    background: linear-gradient(rgba(255, 255, 255, 0.01), #fff);
+}
+```
+
+{% demo %}
+{% include "patterns/fading-long-section.njk" %}
+{% enddemo %}

contents/index.njk

@@ -121,6 +121,12 @@ eleventyExcludeFromCollections: true
                     <div class="pattern__title">Drop cap</div>
                 </a>
             </div>
+            <div class="pattern__item">
+                <a class="pattern__link" href="/fading-long-section/">
+                    <div class="pattern__cover">{% include "patterns/fading-long-section.njk" %}</div>
+                    <div class="pattern__title">Fading long section</div>
+                </a>
+            </div>
         </div>
     </div>