feat: Lined paper

contents/_includes/patterns/lined-paper.njk

@@ -0,0 +1,3 @@
+<div class="lined-paper">
+    Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
+</div>

contents/index.njk

@@ -181,6 +181,12 @@ eleventyExcludeFromCollections: true
                     <div class="pattern__title">Layered card</div>
                 </a>
             </div>
+            <div class="pattern__item">
+                <a class="pattern__link" href="/lined-paper/">
+                    <div class="pattern__cover">{% include "patterns/lined-paper.njk" %}</div>
+                    <div class="pattern__title">Lined paper</div>
+                </a>
+            </div>
             <div class="pattern__item">
                 <a class="pattern__link" href="/triangle-buttons/">
                     <div class="pattern__cover">{% include "patterns/triangle-buttons.njk" %}</div>

contents/lined-paper.md

@@ -0,0 +1,35 @@
+---
+layout: layouts/post.njk
+title: Lined paper
+description: Create lined paper with CSS
+keywords: css linear gradient, css lined paper, css multiple horizontal lines
+---
+
+## HTML
+
+```html
+<div class="lined-paper">
+    ...
+</div>
+```
+
+## CSS
+
+```css
+.lined-paper {
+    /* Lined background */
+    background-image: linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0px);
+    background-size: 100% 2em;
+
+    /*
+    Display the content on top of the lines.
+    The line height must be the same as the background size defined above
+    */
+    background-position-y: 1.5rem;
+    line-height: 2em;
+}
+```
+
+{% demo %}
+{% include "patterns/lined-paper.njk" %}
+{% enddemo %}