feat: Calendar

contents/_includes/covers/calendar.njk

@@ -0,0 +1,18 @@
+<div class="calendar">
+    <div class="calendar__weekday">Mon</div>
+    <div class="calendar__weekday">Tue</div>
+    <div class="calendar__weekday">Wed</div>
+    <div class="calendar__weekday">Thu</div>
+    <div class="calendar__weekday">Fri</div>
+    <div class="calendar__weekday">Sat</div>
+    <div class="calendar__weekday">Sun</div>
+    {% for i in range(0, 3) -%}
+    <div class="calendar__day calendar__day--disabled">{{ i + 29 }}</div>
+    {%- endfor %}
+    {% for i in range(0, 30) -%}
+    <div class="calendar__day{%if i == 23 %} calendar__day--current{% endif %}">{{ i + 1 }}</div>
+    {%- endfor %}
+    {% for i in range(0, 2) -%}
+    <div class="calendar__day calendar__day--disabled">{{ i + 1}}</div>
+    {%- endfor %}
+</div>

contents/calendar.md

@@ -0,0 +1,72 @@
+---
+layout: layouts/post.njk
+title: Calendar
+description: Create a calendar with CSS grid
+keywords: css calendar, css grid
+---
+
+## HTML
+
+```html
+<div class="calendar">
+    <!-- Week days -->
+    <div class="calendar__weekday">Mon</div>
+    <div class="calendar__weekday">Tue</div>
+    <div class="calendar__weekday">Wed</div>
+    <div class="calendar__weekday">Thu</div>
+    <div class="calendar__weekday">Fri</div>
+    <div class="calendar__weekday">Sat</div>
+    <div class="calendar__weekday">Sun</div>
+    
+    <!-- Days of the previous month -->
+    <div class="calendar__day calendar__day--disabled">30</div>
+    <div class="calendar__day calendar__day--disabled">31</div>
+    
+    <!-- Days of the current month -->
+    <div class="calendar__day">1</div>
+    <div class="calendar__day">2</div>
+
+    <!-- The current day -->
+    <div class="calendar__day calendar__day--current">...</div>
+
+    <!-- Days of the next month -->
+    <div class="calendar__day calendar__day--disabled">1</div>
+    <div class="calendar__day calendar__day--disabled">2</div>
+</div>
+```
+
+## CSS
+
+```css
+.calendar {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+}
+
+.calendar__weekday {
+    border-bottom: 1px solid #d1d5db;
+    padding: 0.125rem;
+}
+
+.calendar__day {
+    border-bottom: 1px solid #d1d5db;
+    border-right: 1px solid #d1d5db;
+    padding: 0.25rem;
+    text-align: center;
+}
+
+.calendar__day--current {
+    background-color: #3b82f6;
+    color: #fff;
+}
+
+.calendar__day:nth-child(7n+1) {
+    border-left: 1px solid #d1d5db;
+}
+
+.calendar__day--disabled {
+    color: #d1d5db;   
+}
+```
+
+{% demo %}{% include "covers/calendar.njk" %}{% enddemo %}

contents/index.njk

@@ -22,6 +22,7 @@ eleventyExcludeFromCollections: true
             {% pattern "Avatar" %}{% include "covers/avatar.njk" %}{% endpattern %}
             {% pattern "Avatar list" %}{% include "covers/avatar-list.njk" %}{% endpattern %}
             {% pattern "Badge" %}{% include "covers/badge.njk" %}{% endpattern %}
+            {% pattern "Calendar" %}{% include "covers/calendar.njk" %}{% endpattern %}
             {% pattern "Card" %}{% include "covers/card.njk" %}{% endpattern %}
             {% pattern "Centering" %}{% include "covers/centering.njk" %}{% endpattern %}
             {% pattern "Close button" %}{% include "covers/close-button.njk" %}{% endpattern %}

styles/blocks/_pattern.scss

@@ -18,9 +18,10 @@
     pointer-events: none;
 
     color: #000;
-    height: 8rem;
+    height: 10rem;
     width: 100%;
     margin-bottom: 0.5rem;
+    overflow: hidden;
 }
 .pattern__title {
     color: #6366f1;

styles/index.scss

@@ -23,6 +23,7 @@
 @import './patterns/box-selector';
 @import './patterns/breadcrumb';
 @import './patterns/button-with-icon';
+@import './patterns/calendar';
 @import './patterns/card-layout';
 @import './patterns/card';
 @import './patterns/centering';

styles/patterns/_avatar-list.scss

@@ -9,7 +9,7 @@
     margin-left: -0.25rem;
 }
 .avatars__image {
-    background-color: #BBB;
+    background-color: #d1d5db;
     box-shadow: 0 0 0 0.25rem #FFF;
     color: #FFF;
     font-size: 0.75rem;

styles/patterns/_calendar.scss

@@ -0,0 +1,33 @@
+.calendar {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+
+    /* Demo */
+    font-size: 0.75rem;
+    width: 8rem;
+}
+
+.calendar__weekday {
+    border-bottom: 1px solid #d1d5db;
+    padding: 0.125rem;
+}
+
+.calendar__day {
+    border-bottom: 1px solid #d1d5db;
+    border-right: 1px solid #d1d5db;
+    padding: 0.25rem;
+    text-align: center;
+}
+
+.calendar__day--current {
+    background-color: #3b82f6;
+    color: #fff;
+}
+
+.calendar__day:nth-child(7n+1) {
+    border-left: 1px solid #d1d5db;
+}
+
+.calendar__day--disabled {
+    color: #e5e7eb;   
+}