diff --git a/contents/_data/github.js b/contents/_data/github.js
deleted file mode 100644
index b2ff6d4..0000000
--- a/contents/_data/github.js
+++ /dev/null
@@ -1,25 +0,0 @@
-const EleventyFetch = require("@11ty/eleventy-fetch")
-
-async function fetchGitHubStars(repos) {
- let json = await EleventyFetch(`https://api.github.com/repos/${repos}`, {
- duration: '1d',
- type: 'json'
- });
-
- return {
- stargazers: json.stargazers_count,
- };
-}
-
-module.exports = async function() {
- return {
- 'oneloc': await fetchGitHubStars('phuocng/1loc'),
- 'crossbrowser': await fetchGitHubStars('phuocng/cross-browser'),
- 'cssanimation': await fetchGitHubStars('phuocng/css-animation'),
- 'csslayout': await fetchGitHubStars('phuocng/csslayout'),
- 'frontendtips': await fetchGitHubStars('phuocng/frontend-tips'),
- 'htmldom': await fetchGitHubStars('phuocng/html-dom'),
- 'thisvsthat': await fetchGitHubStars('phuocng/this-vs-that'),
- 'reactpdfviewer': await fetchGitHubStars('react-pdf-viewer/react-pdf-viewer'),
- };
-};
diff --git a/contents/_includes/covers/accordion.njk b/contents/_includes/covers/accordion.njk
deleted file mode 100644
index e6c0ad8..0000000
--- a/contents/_includes/covers/accordion.njk
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
-
-
-
-
- {% lines "hor", 5 %}
-
-
-
9+
\ No newline at end of file
diff --git a/contents/_includes/covers/box-selector.njk b/contents/_includes/covers/box-selector.njk
deleted file mode 100644
index 2e05c13..0000000
--- a/contents/_includes/covers/box-selector.njk
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
{% lines "hor", 5 %}
- {% for i in range(0, 3) -%}
-
{% lines "hor", 5 %}
- {%- endfor %}
-
- {% circle "md" %}
- {% lines "hor", 5 %}
-
\ No newline at end of file
diff --git a/contents/_includes/covers/calendar.njk b/contents/_includes/covers/calendar.njk
deleted file mode 100644
index 92cd4fc..0000000
--- a/contents/_includes/covers/calendar.njk
+++ /dev/null
@@ -1,18 +0,0 @@
-
-
Mon
-
Tue
-
Wed
-
Thu
-
Fri
-
Sat
-
Sun
- {% for i in range(0, 3) -%}
-
{{ i + 29 }}
- {%- endfor %}
- {% for i in range(0, 30) -%}
-
{{ i + 1 }}
- {%- endfor %}
- {% for i in range(0, 2) -%}
-
{{ i + 1}}
- {%- endfor %}
-
- {% for i in range(0, 9) -%}
-
{% rectangle "hor", "md", 100 %}
- {%- endfor %}
-
-
-
-
- {% lines "hor", 5 %}
-
-
- {% circle %}
- {% lines "hor", 5 %}
-
\ No newline at end of file
diff --git a/contents/_includes/covers/chip.njk b/contents/_includes/covers/chip.njk
deleted file mode 100644
index e84bbab..0000000
--- a/contents/_includes/covers/chip.njk
+++ /dev/null
@@ -1,7 +0,0 @@
-
\ No newline at end of file
diff --git a/contents/_includes/covers/circular-navigation.njk b/contents/_includes/covers/circular-navigation.njk
deleted file mode 100644
index 715a47b..0000000
--- a/contents/_includes/covers/circular-navigation.njk
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
- {% for i in range(0, 6) -%}
-
- {%- endfor %}
-
-
-
-
-
\ No newline at end of file
diff --git a/contents/_includes/covers/color-swatch.njk b/contents/_includes/covers/color-swatch.njk
deleted file mode 100644
index ccd6458..0000000
--- a/contents/_includes/covers/color-swatch.njk
+++ /dev/null
@@ -1,8 +0,0 @@
-
\ No newline at end of file
diff --git a/contents/_includes/covers/concave-corners.njk b/contents/_includes/covers/concave-corners.njk
deleted file mode 100644
index 7f0ed22..0000000
--- a/contents/_includes/covers/concave-corners.njk
+++ /dev/null
@@ -1,6 +0,0 @@
-
\ No newline at end of file
diff --git a/contents/_includes/covers/cookie-banner.njk b/contents/_includes/covers/cookie-banner.njk
deleted file mode 100644
index ef2dc00..0000000
--- a/contents/_includes/covers/cookie-banner.njk
+++ /dev/null
@@ -1,5 +0,0 @@
-
-
- {% lines "hor", 5 %}
-
-
-
-{% endfor %}
\ No newline at end of file
diff --git a/contents/_includes/covers/custom-radio-button.njk b/contents/_includes/covers/custom-radio-button.njk
deleted file mode 100644
index dc4010d..0000000
--- a/contents/_includes/covers/custom-radio-button.njk
+++ /dev/null
@@ -1,9 +0,0 @@
-{% for i in range(0, 3) %}
-
-
-{% endfor %}
\ No newline at end of file
diff --git a/contents/_includes/covers/diagonal-section.njk b/contents/_includes/covers/diagonal-section.njk
deleted file mode 100644
index 2b31a41..0000000
--- a/contents/_includes/covers/diagonal-section.njk
+++ /dev/null
@@ -1,3 +0,0 @@
-
\ No newline at end of file
diff --git a/contents/_includes/covers/docked-at-corner.njk b/contents/_includes/covers/docked-at-corner.njk
deleted file mode 100644
index 49bc7ac..0000000
--- a/contents/_includes/covers/docked-at-corner.njk
+++ /dev/null
@@ -1,3 +0,0 @@
-
\ No newline at end of file
diff --git a/contents/_includes/covers/dot-leader.njk b/contents/_includes/covers/dot-leader.njk
deleted file mode 100644
index 45412e4..0000000
--- a/contents/_includes/covers/dot-leader.njk
+++ /dev/null
@@ -1,7 +0,0 @@
-{% for i in range(0, 3) %}
-
- {% rectangle %}
-
- {% circle %}
-
- {% lines "hor", 5 %}
-
\ No newline at end of file
diff --git a/contents/_includes/covers/drop-cap.njk b/contents/_includes/covers/drop-cap.njk
deleted file mode 100644
index ad17c66..0000000
--- a/contents/_includes/covers/drop-cap.njk
+++ /dev/null
@@ -1,3 +0,0 @@
-
- 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.
-
\ No newline at end of file
diff --git a/contents/_includes/covers/dropdown.njk b/contents/_includes/covers/dropdown.njk
deleted file mode 100644
index 34777ec..0000000
--- a/contents/_includes/covers/dropdown.njk
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
- {% rectangle %}
- {% triangle "b" %}
-
-
-
-
- {% lines "hor", 40 %}
-
-
-
-
- {% rectangle %}
-
-
- {% rectangle %}
-
-
- {% rectangle %}
-
-
-
- {% line "hor" %}
-
-
- {% circle %}
-
-
- {% circle %}
-
-
-
- {% line "hor" %}
-
-
-
- {% circle %}
-
-
-
- {% line "hor" %}
-
-
- {% circle %}
-
-
-
-
- {% circle "md" %}
-
-
- {% lines "hor", 5 %}
-
-
-
- {% circle "md" %}
-
-
- {% lines "hor", 5 %}
-
-
-
- {% triangle "tl", "md" %}
-
-
- {% triangle "tr", "md" %}
-
-
- {% triangle "br", "md" %}
-
-
- {% triangle "bl", "md" %}
-
-
-
{% rectangle "ver", "md", 100 %}
-
{% rectangle "ver", "md", 100 %}
-
- Placeholder
-
\ No newline at end of file
diff --git a/contents/_includes/covers/folder-structure.njk b/contents/_includes/covers/folder-structure.njk
deleted file mode 100644
index 9f5d207..0000000
--- a/contents/_includes/covers/folder-structure.njk
+++ /dev/null
@@ -1,28 +0,0 @@
-
-
-
- {% square %}
-
-
-
- {% square %}
-
-
- {% square %}
-
-
-
- {% square %}
-
-
-
-
-
- {% lines "hor", 10 %}
-
\ No newline at end of file
diff --git a/contents/_includes/covers/full-screen-menu.njk b/contents/_includes/covers/full-screen-menu.njk
deleted file mode 100644
index 7ce4ba5..0000000
--- a/contents/_includes/covers/full-screen-menu.njk
+++ /dev/null
@@ -1,4 +0,0 @@
-
\ No newline at end of file
diff --git a/contents/_includes/covers/holy-grail.njk b/contents/_includes/covers/holy-grail.njk
deleted file mode 100644
index 688e63d..0000000
--- a/contents/_includes/covers/holy-grail.njk
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
-
-
{% lines "hor", 4 %}
-
{% lines "hor", 10 %}
-
{% lines "hor", 8 %}
-
-
-
- PN
-
\ No newline at end of file
diff --git a/contents/_includes/covers/input-addon.njk b/contents/_includes/covers/input-addon.njk
deleted file mode 100644
index 5723232..0000000
--- a/contents/_includes/covers/input-addon.njk
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
-
diff --git a/contents/_includes/covers/inverted-corners.njk b/contents/_includes/covers/inverted-corners.njk
deleted file mode 100644
index cc73416..0000000
--- a/contents/_includes/covers/inverted-corners.njk
+++ /dev/null
@@ -1,2 +0,0 @@
-
-
\ No newline at end of file
diff --git a/contents/_includes/covers/keyboard-shortcut.njk b/contents/_includes/covers/keyboard-shortcut.njk
deleted file mode 100644
index ea257d5..0000000
--- a/contents/_includes/covers/keyboard-shortcut.njk
+++ /dev/null
@@ -1 +0,0 @@
-⌘ + C
\ No newline at end of file
diff --git a/contents/_includes/covers/layered-card.njk b/contents/_includes/covers/layered-card.njk
deleted file mode 100644
index dee638a..0000000
--- a/contents/_includes/covers/layered-card.njk
+++ /dev/null
@@ -1,3 +0,0 @@
-
\ No newline at end of file
diff --git a/contents/_includes/covers/lined-paper.njk b/contents/_includes/covers/lined-paper.njk
deleted file mode 100644
index 87bc1a8..0000000
--- a/contents/_includes/covers/lined-paper.njk
+++ /dev/null
@@ -1,3 +0,0 @@
-
- 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.
-
\ No newline at end of file
diff --git a/contents/_includes/covers/masonry-grid.njk b/contents/_includes/covers/masonry-grid.njk
deleted file mode 100644
index b767898..0000000
--- a/contents/_includes/covers/masonry-grid.njk
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
{% rectangle "hor", "sm", 100 %}
-
{% rectangle "hor", "md", 100 %}
-
{% rectangle "hor", "md", 100 %}
-
{% rectangle "hor", "sm", 100 %}
-
{% rectangle "hor", "sm", 100 %}
-
{% rectangle "hor", "sm", 100 %}
-
{% rectangle "hor", "md", 100 %}
-
{% rectangle "hor", "sm", 100 %}
-
{% rectangle "hor", "md", 100 %}
-
{% rectangle "hor", "sm", 100 %}
-
{% rectangle "hor", "sm", 100 %}
-
-
-
{% lines "hor", 8 %}
-
-
- A
-
-
-
- B.1
- B.2
-
-
- B.3
-
{% triangle "r" %}
-
- B.3.1
- B.3.2
- B.3.3
- B.3.4
-
-
- B.4
- B.5
-
-
- C
- D
-
\ No newline at end of file
diff --git a/contents/_includes/covers/notification.njk b/contents/_includes/covers/notification.njk
deleted file mode 100644
index 3426428..0000000
--- a/contents/_includes/covers/notification.njk
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
{% lines "hor", 5 %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
99.99$
\ No newline at end of file
diff --git a/contents/_includes/covers/pricing-table.njk b/contents/_includes/covers/pricing-table.njk
deleted file mode 100644
index d0bf0a9..0000000
--- a/contents/_includes/covers/pricing-table.njk
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
- {% circle "md" %}
- {% lines "hor", 3 %}
- {% rectangle "hor", "sm", 100 %}
-
-
- {% circle "md" %}
- {% lines "hor", 6 %}
- {% rectangle "hor", "sm", 100 %}
-
-
- {% rectangle "hor" %}
- {% circle %}
-
-{% endfor %}
\ No newline at end of file
diff --git a/contents/_includes/covers/questions-and-answers.njk b/contents/_includes/covers/questions-and-answers.njk
deleted file mode 100644
index bd4cd74..0000000
--- a/contents/_includes/covers/questions-and-answers.njk
+++ /dev/null
@@ -1,35 +0,0 @@
-
-
-
-
- {% rectangle %}
-
-
- {% triangle "r" %}
-
-
-
-
-
-
- {% rectangle %}
-
-
- {% triangle "b" %}
-
-
-
- {% lines "hor", 3 %}
-
-
-
-
-
- {% rectangle %}
-
-
- {% triangle "r" %}
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/contents/_includes/covers/radio-switch.njk b/contents/_includes/covers/radio-switch.njk
deleted file mode 100644
index d317213..0000000
--- a/contents/_includes/covers/radio-switch.njk
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
-
-
-
-
\ No newline at end of file
diff --git a/contents/_includes/covers/rating.njk b/contents/_includes/covers/rating.njk
deleted file mode 100644
index ec723d2..0000000
--- a/contents/_includes/covers/rating.njk
+++ /dev/null
@@ -1,7 +0,0 @@
-
- ☆
- ☆
- ☆
- ☆
- ★
-
\ No newline at end of file
diff --git a/contents/_includes/covers/resizable-element.njk b/contents/_includes/covers/resizable-element.njk
deleted file mode 100644
index cead0b9..0000000
--- a/contents/_includes/covers/resizable-element.njk
+++ /dev/null
@@ -1,10 +0,0 @@
-
\ No newline at end of file
diff --git a/contents/_includes/covers/ribbon.njk b/contents/_includes/covers/ribbon.njk
deleted file mode 100644
index 6f64927..0000000
--- a/contents/_includes/covers/ribbon.njk
+++ /dev/null
@@ -1,7 +0,0 @@
-
\ No newline at end of file
diff --git a/contents/_includes/covers/same-height-columns.njk b/contents/_includes/covers/same-height-columns.njk
deleted file mode 100644
index 0100de2..0000000
--- a/contents/_includes/covers/same-height-columns.njk
+++ /dev/null
@@ -1,9 +0,0 @@
-
- {% for i in range(0, 3) -%}
-
- {% rectangle "hor", "md", 100 %}
-
{% lines "hor", (i + 1) * 4 %}
- {% rectangle "hor" %}
-
- {%- endfor %}
-
-
\ No newline at end of file
diff --git a/contents/_includes/covers/separator.njk b/contents/_includes/covers/separator.njk
deleted file mode 100644
index 58735d9..0000000
--- a/contents/_includes/covers/separator.njk
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
{% rectangle "hor", "sm", 100 %}
-
-
-
{% rectangle "hor", "md", 100 %}
-
{% rectangle "hor", "md", 100 %}
-
-
{% rectangle "hor", "md", 100 %}
-
{% rectangle "hor", "md", 100 %}
-
{% rectangle "hor", "md", 100 %}
-
-
{% rectangle "hor", "md", 100 %}
-
{% rectangle "hor", "md", 100 %}
-
{% rectangle "hor", "md", 100 %}
-
{% rectangle "hor", "md", 100 %}
-
\ No newline at end of file
diff --git a/contents/_includes/covers/split-navigation.njk b/contents/_includes/covers/split-navigation.njk
deleted file mode 100644
index d724e06..0000000
--- a/contents/_includes/covers/split-navigation.njk
+++ /dev/null
@@ -1,6 +0,0 @@
-
- {% rectangle "hor", "sm", 100 %}
- {% rectangle "hor", "sm", 100 %}
- {% rectangle "hor", "sm", 100 %}
- {% rectangle "hor", "sm", 100 %}
-
\ No newline at end of file
diff --git a/contents/_includes/covers/split-screen.njk b/contents/_includes/covers/split-screen.njk
deleted file mode 100644
index bf23a4d..0000000
--- a/contents/_includes/covers/split-screen.njk
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
- {% circle "md" %}
-
-
- {% lines "hor", 10 %}
-
-
-
-
- {% rectangle "hor", "sm", 100 %}
-
-
- {% for i in range(0, 4) -%}
-
- {%- endfor %}
-
diff --git a/contents/_includes/covers/sticky-table-column.njk b/contents/_includes/covers/sticky-table-column.njk
deleted file mode 100644
index f46f3f7..0000000
--- a/contents/_includes/covers/sticky-table-column.njk
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
- {% for i in range(0, 3) -%}
-
- {% rectangle %}
- {% lines "hor", 3 %}
- {% lines "hor", 2 %}
-
- {%- endfor %}
-
-
\ No newline at end of file
diff --git a/contents/_includes/covers/sticky-table-headers.njk b/contents/_includes/covers/sticky-table-headers.njk
deleted file mode 100644
index 66d5d7e..0000000
--- a/contents/_includes/covers/sticky-table-headers.njk
+++ /dev/null
@@ -1,18 +0,0 @@
-
\ No newline at end of file
diff --git a/contents/_includes/covers/switch.njk b/contents/_includes/covers/switch.njk
deleted file mode 100644
index 1130b2a..0000000
--- a/contents/_includes/covers/switch.njk
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
-
-
-
-
\ No newline at end of file
diff --git a/contents/_includes/covers/tab.njk b/contents/_includes/covers/tab.njk
deleted file mode 100644
index 6afa51a..0000000
--- a/contents/_includes/covers/tab.njk
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
- {% circle %}
-
-
- {% circle %}
-
-
- {% circle %}
-
-
-
\ No newline at end of file
diff --git a/contents/_includes/covers/timeline.njk b/contents/_includes/covers/timeline.njk
deleted file mode 100644
index 8dfc655..0000000
--- a/contents/_includes/covers/timeline.njk
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
-
- {% for i in range(0, 2) -%}
-
-
-
- {% lines "hor", 5 %}
-
-
- {%- endfor %}
-
-
-
-
- {% square %}
-
-
- {% square %}
-
-
-
- {% square %}
-
-
- {% square %}
-
-
- {% square %}
-
-
-
-
-
-
-
-
-
-
- {% lines "hor", 5 %}
-
-
-
- {% lines "hor", 5 %}
-
- {% for i in range(0, 3) -%}
-
-
- {% lines "hor", 5 %}
-
- {%- endfor %}
-
- {% for i in range(0, 2) -%}
-
-
- {% lines "hor", 5 %}
-
- {%- endfor %}
-
-
-
Have you seen CSS Scan?
-
The fastest and easiest way to check, copy and edit CSS.
-
Learn more →
-
-
\ No newline at end of file
diff --git a/contents/_includes/follow.njk b/contents/_includes/follow.njk
deleted file mode 100644
index c4fe543..0000000
--- a/contents/_includes/follow.njk
+++ /dev/null
@@ -1,3 +0,0 @@
-
\ No newline at end of file
diff --git a/contents/_includes/layouts/base.njk b/contents/_includes/layouts/base.njk
deleted file mode 100644
index 9adee03..0000000
--- a/contents/_includes/layouts/base.njk
+++ /dev/null
@@ -1,63 +0,0 @@
-
-
-
- {{ title or metadata.title }} - CSS Layout
-
-
-
-
-
diff --git a/contents/_includes/layouts/post.njk b/contents/_includes/layouts/post.njk
deleted file mode 100644
index aae51ba..0000000
--- a/contents/_includes/layouts/post.njk
+++ /dev/null
@@ -1,26 +0,0 @@
----
-layout: layouts/base.njk
----
-{% set previousPost = collections.sortByTitle | getPreviousCollectionItem(page) %}
-{% set nextPost = collections.sortByTitle | getNextCollectionItem(page) %}
-
-
-
-
- {% include "css-scan.njk" %}
-
-
-
{{ title }}
-
{{ content | safe }}
-
-
- {% include "follow.njk" %}
-
-
-
-
-
-
...
-
-
- ...
-
+
+
+
+
+
...
+
+
+ ...
+
+```css placeholders.css hidden
+.lines {
+ padding: 0.25rem 0;
+ width: 100%;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+}
+.line {
+ background: #d1d5db;
+ height: 1px;
+ margin-bottom: 0.25rem;
+}
+.line.line--20 {
+ width: 20%;
+}
+.line.line--40 {
+ width: 40%;
+}
+.line.line--60 {
+ width: 60%;
+}
+.line.line--80 {
+ width: 80%;
+}
+.line.line--100 {
+ width: 100%;
+}
+.rectangle {
+ background: #d1d5db;
+ border-radius: 0.25rem;
+ height: var(--rectangle-height);
+ width: var(--rectangle-width);
+}
+.rectangle--hor.rectangle--20 {
+ --rectangle-width: 20%;
+}
+.rectangle--hor.rectangle--40 {
+ --rectangle-width: 40%;
+}
+.rectangle--hor.rectangle--60 {
+ --rectangle-width: 60%;
+}
+.rectangle--hor.rectangle--80 {
+ --rectangle-width: 80%;
+}
+.rectangle--hor.rectangle--100 {
+ --rectangle-width: 100%;
+}
+.rectangle--hor.rectangle--sm {
+ --rectangle-height: 0.5rem;
+}
+.rectangle--hor.rectangle--md {
+ --rectangle-height: 2rem;
+}
+.rectangle--hor.rectangle--lg {
+ --rectangle-height: 4rem;
+}
+.rectangle--ver.rectangle--20 {
+ --rectangle-height: 20%;
+}
+.rectangle--ver.rectangle--40 {
+ --rectangle-height: 40%;
+}
+.rectangle--ver.rectangle--60 {
+ --rectangle-height: 60%;
+}
+.rectangle--ver.rectangle--80 {
+ --rectangle-height: 80%;
+}
+.rectangle--ver.rectangle--100 {
+ --rectangle-height: 100%;
+}
+.rectangle--ver.rectangle--sm {
+ --rectangle-width: 0.5rem;
+}
+.rectangle--ver.rectangle--md {
+ --rectangle-width: 2rem;
+}
+.rectangle--ver.rectangle--lg {
+ --rectangle-width: 4rem;
+}
+.triangle {
+ border-style: solid;
+ height: 0;
+ width: 0;
+}
+.triangle--t {
+ border-color: transparent transparent #d1d5db transparent;
+ border-width: 0 var(--triangle-size) var(--triangle-size) var(--triangle-size);
+}
+.triangle--r {
+ border-color: transparent transparent transparent #d1d5db;
+ border-width: var(--triangle-size) 0 var(--triangle-size) 1rem;
+}
+.triangle--b {
+ border-color: #d1d5db transparent transparent transparent;
+ border-width: var(--triangle-size) var(--triangle-size) 0 var(--triangle-size);
+}
+.triangle--l {
+ border-color: transparent #d1d5db transparent transparent;
+ border-width: var(--triangle-size) 1rem var(--triangle-size) 0;
+}
+.triangle--tr {
+ border-color: transparent #d1d5db transparent transparent;
+ border-width: 0 var(--triangle-size) var(--triangle-size) 0;
+}
+.triangle--br {
+ border-color: transparent transparent #d1d5db transparent;
+ border-width: 0 0 var(--triangle-size) var(--triangle-size);
+}
+.triangle--bl {
+ border-color: transparent transparent transparent #d1d5db;
+ border-width: var(--triangle-size) 0 0 var(--triangle-size);
+}
+.triangle--tl {
+ border-color: #d1d5db transparent transparent transparent;
+ border-width: var(--triangle-size) var(--triangle-size) 0 0;
+}
+.triangle--sm {
+ --triangle-size: 0.5rem;
+}
+.triangle--md {
+ --triangle-size: 2rem;
+}
+.triangle--lg {
+ --triangle-size: 4rem;
+}
+```
+
+```css styles.css hidden
+.accordion {
+ border: 1px solid #d1d5db;
+ border-radius: 4px;
+ height: 100%;
+ width: 100%;
+}
+.accordion__item:not(:last-child) {
+ border-bottom: 1px solid #d1d5db;
+}
+.accordion__header {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ cursor: pointer;
+ padding: 0.5rem;
+}
+.accordion__toggle {
+ margin-right: 0.25rem;
+}
+.accordion__title {
+ flex: 1;
+}
+.accordion__content {
+ padding: 0.5rem;
+}
+
+.accordion__item--collapsed .accordion__content {
+ display: none;
+}
+.accordion__item--expanded .accordion__content {
+ display: block;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/arrow-buttons.md b/contents/arrow-buttons.md
deleted file mode 100644
index 2722b83..0000000
--- a/contents/arrow-buttons.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-layout: layouts/post.njk
-title: Arrow buttons
-description: Create arrow buttons with CSS
-keywords: css arrow buttons
----
-
-## HTML
-
-```html
-
-
-
-
-
-
- ...
-
-
-
-
-
- ...
-
-
-
-
-
-
-
-
-
-
-
- ...
-
-
-
-
-
-
-
-
- ...
-
-```
-
-## CSS
-
-```css
-.arrow-button {
- /* Transparent background */
- background-color: transparent;
-
- /* Size */
- height: 12px;
- width: 12px;
-}
-
-.arrow-button--t {
- /* Edges */
- border-left: 1px solid #d1d5db;
- border-top: 1px solid #d1d5db;
- transform: translateY(25%) rotate(45deg);
-}
-
-.arrow-button--r {
- /* Edges */
- border-right: 1px solid #d1d5db;
- border-top: 1px solid #d1d5db;
- transform: translateX(-25%) rotate(45deg);
-}
-
-.arrow-button--b {
- /* Edges */
- border-bottom: 1px solid #d1d5db;
- border-right: 1px solid #d1d5db;
- transform: translateY(-25%) rotate(45deg);
-}
-
-.arrow-button--l {
- /* Edges */
- border-bottom: 1px solid #d1d5db;
- border-left: 1px solid #d1d5db;
- transform: translateX(25%) rotate(45deg);
-}
-```
-
-{% demo %}
-{% include "covers/arrow-buttons.njk" %}
-{% enddemo %}
diff --git a/contents/arrow-buttons.mdx b/contents/arrow-buttons.mdx
new file mode 100644
index 0000000..dbdb338
--- /dev/null
+++ b/contents/arrow-buttons.mdx
@@ -0,0 +1,178 @@
+---
+category: Display
+created: '2020-01-21'
+description: Create arrow buttons with CSS
+keywords: css arrow buttons
+thumbnail: /assets/css-layout/thumbnails/arrow-buttons.png
+title: Arrow buttons
+updated: '2021-04-01'
+---
+
+## HTML
+
+```html
+
+
+
+
+
+
+ ...
+
+
+
+
+
+ ...
+
+
+
+
+
+
+
+
+
+
+
+ ...
+
+
+
+
+
+
+
+
+ ...
+
+```
+
+## CSS
+
+```css
+.arrow-button {
+ /* Transparent background */
+ background-color: transparent;
+
+ /* Size */
+ height: 12px;
+ width: 12px;
+}
+
+.arrow-button--t {
+ /* Edges */
+ border-left: 1px solid #d1d5db;
+ border-top: 1px solid #d1d5db;
+ transform: translateY(25%) rotate(45deg);
+}
+
+.arrow-button--r {
+ /* Edges */
+ border-right: 1px solid #d1d5db;
+ border-top: 1px solid #d1d5db;
+ transform: translateX(-25%) rotate(45deg);
+}
+
+.arrow-button--b {
+ /* Edges */
+ border-bottom: 1px solid #d1d5db;
+ border-right: 1px solid #d1d5db;
+ transform: translateY(-25%) rotate(45deg);
+}
+
+.arrow-button--l {
+ /* Edges */
+ border-bottom: 1px solid #d1d5db;
+ border-left: 1px solid #d1d5db;
+ transform: translateX(25%) rotate(45deg);
+}
+```
+
+
+```css styles.css hidden
+.arrow-buttons {
+ position: relative;
+ height: 100%;
+ width: 100%;
+}
+.arrow-button {
+ /* Transparent background */
+ background-color: transparent;
+
+ /* Size */
+ height: 12px;
+ width: 12px;
+}
+
+.arrow-button--t {
+ /* Edges */
+ border-left: 1px solid #d1d5db;
+ border-top: 1px solid #d1d5db;
+ transform: translateY(25%) rotate(45deg);
+}
+
+.arrow-button--r {
+ /* Edges */
+ border-right: 1px solid #d1d5db;
+ border-top: 1px solid #d1d5db;
+ transform: translateX(-25%) rotate(45deg);
+}
+
+.arrow-button--b {
+ /* Edges */
+ border-bottom: 1px solid #d1d5db;
+ border-right: 1px solid #d1d5db;
+ transform: translateY(-25%) rotate(45deg);
+}
+
+.arrow-button--l {
+ /* Edges */
+ border-bottom: 1px solid #d1d5db;
+ border-left: 1px solid #d1d5db;
+ transform: translateX(25%) rotate(45deg);
+}
+
+/* Demo */
+.arrow-buttons__corner {
+ position: absolute;
+}
+.arrow-buttons__corner--t {
+ left: 50%;
+ top: 0;
+ transform: translate(-50%, 0%);
+}
+.arrow-buttons__corner--r {
+ right: 0;
+ top: 50%;
+ transform: translate(0%, -50%);
+}
+.arrow-buttons__corner--b {
+ bottom: 0;
+ left: 50%;
+ transform: translate(-50%, 0%);
+}
+.arrow-buttons__corner--l {
+ left: 0;
+ top: 50%;
+ transform: translate(0%, -50%);
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/avatar-list.md b/contents/avatar-list.md
deleted file mode 100644
index 401fbe5..0000000
--- a/contents/avatar-list.md
+++ /dev/null
@@ -1,53 +0,0 @@
----
-layout: layouts/post.njk
-title: Avatar list
-description: Create an avatar list with CSS flexbox
-keywords: css avatar, css flexbox
----
-
-## HTML
-
-```html
-
-```
-
-## CSS
-
-```css
-.avatars {
- display: flex;
-}
-
-.avatars__item {
- /* Nagative margin make avatar overlap to previous one */
- margin-left: -0.25rem;
-}
-
-.avatars__image {
- /* Add a white curve between avatars */
- box-shadow: 0 0 0 0.25rem #fff;
-
- /* Center the content */
- align-items: center;
- display: flex;
- justify-content: center;
-
- /* Rounded border */
- border-radius: 9999px;
-}
-```
-
-{% demo %}
-{% include "covers/avatar-list.njk" %}
-{% enddemo %}
diff --git a/contents/avatar-list.mdx b/contents/avatar-list.mdx
new file mode 100644
index 0000000..4232669
--- /dev/null
+++ b/contents/avatar-list.mdx
@@ -0,0 +1,103 @@
+---
+category: Display
+created: '2019-11-29'
+description: Create an avatar list with CSS flexbox
+keywords: css avatar, css flexbox
+thumbnail: /assets/css-layout/thumbnails/avatar-list.png
+title: Avatar list
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.avatars {
+ display: flex;
+}
+
+.avatars__item {
+ /* Nagative margin make avatar overlap to previous one */
+ margin-left: -0.25rem;
+}
+
+.avatars__image {
+ /* Add a white curve between avatars */
+ box-shadow: 0 0 0 0.25rem #fff;
+
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ /* Rounded border */
+ border-radius: 9999px;
+}
+```
+
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+.avatars {
+ display: flex;
+ justify-content: center;
+
+ height: 2rem;
+ width: 100%;
+}
+.avatars__item {
+ margin-left: -0.25rem;
+}
+.avatars__image {
+ background-color: #d1d5db;
+ box-shadow: 0 0 0 0.25rem #fff;
+ color: #fff;
+ font-size: 0.75rem;
+
+ /* Rounded border */
+ border-radius: 50%;
+
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ /* Size */
+ height: 2rem;
+ width: 2rem;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/avatar.md b/contents/avatar.md
deleted file mode 100644
index 6672c59..0000000
--- a/contents/avatar.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-layout: layouts/post.njk
-title: Avatar
-description: Create an avatar component with CSS flexbox
-keywords: css avatar, css flexbox
----
-
-## HTML
-
-```html
-
-
-
-
+
+
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+.avatar {
+ height: 4rem;
+ width: 4rem;
+
+ background-color: #d1d5db;
+ /* Rounded border */
+ border-radius: 50%;
+
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+.avatar__image {
+ height: 50%;
+ width: 50%;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/badge.md b/contents/badge.md
deleted file mode 100644
index 5f8c06d..0000000
--- a/contents/badge.md
+++ /dev/null
@@ -1,34 +0,0 @@
----
-layout: layouts/post.njk
-title: Badge
-description: Create a badge component with CSS flexbox
-keywords: css badge, css flexbox
----
-
-## HTML
-
-```html
-...
-```
-
-## CSS
-
-```css
-.badge {
- /* Center the content */
- align-items: center;
- display: flex;
- justify-content: center;
-
- /* Colors */
- background-color: #d1d5db;
- color: #fff;
-
- /* Rounded border */
- border-radius: 9999px;
- height: 3rem;
- width: 3rem;
-}
-```
-
-{% demo %}{% include "covers/badge.njk" %}{% enddemo %}
diff --git a/contents/badge.mdx b/contents/badge.mdx
new file mode 100644
index 0000000..5b4c2be
--- /dev/null
+++ b/contents/badge.mdx
@@ -0,0 +1,63 @@
+---
+category: Display
+created: '2019-11-16'
+description: Create a badge component with CSS flexbox
+keywords: css badge, css flexbox
+thumbnail: /assets/css-layout/thumbnails/badge.png
+title: Badge
+---
+
+## HTML
+
+```html
+...
+```
+
+## CSS
+
+```css
+.badge {
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ /* Colors */
+ background-color: #d1d5db;
+ color: #fff;
+
+ /* Rounded border */
+ border-radius: 9999px;
+ height: 3rem;
+ width: 3rem;
+}
+```
+
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+.badge {
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ /* Colors */
+ background-color: #d1d5db;
+ color: #fff;
+
+ /* Rounded border */
+ border-radius: 9999px;
+ height: 3rem;
+ width: 3rem;
+}
+```
+
+```html index.html hidden
+9+
+```
+
diff --git a/contents/box-selector.md b/contents/box-selector.md
deleted file mode 100644
index d3e897c..0000000
--- a/contents/box-selector.md
+++ /dev/null
@@ -1,58 +0,0 @@
----
-layout: layouts/post.njk
-title: Box selector
-description: Create a box selector with CSS
-keywords: css box selector
----
-
-## HTML
-
-```html
-...
-
-
-...
-```
-
-## CSS
-
-```css
-.box-selector {
- border: 1px solid #d1d5db;
- border-radius: 0.25rem;
- padding: 0.5rem;
-}
-
-.box-selector--selected {
- /* Change the border color */
- border: 2px solid #3b82f6;
-
- /* Used to position the tick */
- position: relative;
-}
-
-/* The tick */
-.box-selector--selected:before {
- /* Absolute position */
- content: '';
- left: 0.25rem;
- position: absolute;
- top: 0.25rem;
-
- /* Size */
- height: 1rem;
- width: 1rem;
-
- /* Background */
- background-image: url("data:image/svg+xml,%3Csvg fill='%233b82f6' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'%3E%3C/path%3E%3C/svg%3E");
- background-position: center center;
- background-repeat: no-repeat;
-}
-```
-
-{% demo %}{% include "covers/box-selector.njk" %}{% enddemo %}
-
-## See also
-
-- [Custom checkbox button](/custom-checkbox-button/)
-- [Custom radio button](/custom-radio-button/)
diff --git a/contents/box-selector.mdx b/contents/box-selector.mdx
new file mode 100644
index 0000000..be12ea5
--- /dev/null
+++ b/contents/box-selector.mdx
@@ -0,0 +1,175 @@
+---
+category: Input
+created: '2022-09-24'
+description: Create a box selector with CSS
+keywords: css box selector
+thumbnail: /assets/css-layout/thumbnails/box-selector.png
+title: Box selector
+---
+
+## HTML
+
+```html
+...
+
+
+...
+```
+
+## CSS
+
+```css
+.box-selector {
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ padding: 0.5rem;
+}
+
+.box-selector--selected {
+ /* Change the border color */
+ border: 2px solid #3b82f6;
+
+ /* Used to position the tick */
+ position: relative;
+}
+
+/* The tick */
+.box-selector--selected:before {
+ /* Absolute position */
+ content: '';
+ left: 0.25rem;
+ position: absolute;
+ top: 0.25rem;
+
+ /* Size */
+ height: 1rem;
+ width: 1rem;
+
+ /* Background */
+ background-image: url("data:image/svg+xml,%3Csvg fill='%233b82f6' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'%3E%3C/path%3E%3C/svg%3E");
+ background-position: center center;
+ background-repeat: no-repeat;
+}
+```
+
+
+```css placeholders.css hidden
+.lines {
+ padding: 0.25rem 0;
+ width: 100%;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+}
+.line {
+ background: #d1d5db;
+ height: 1px;
+ margin-bottom: 0.25rem;
+}
+.line.line--20 {
+ width: 20%;
+}
+.line.line--40 {
+ width: 40%;
+}
+.line.line--60 {
+ width: 60%;
+}
+.line.line--80 {
+ width: 80%;
+}
+.line.line--100 {
+ width: 100%;
+}
+```
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+.box-selector-container {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ column-gap: 1rem;
+ row-gap: 1rem;
+ width: 16rem;
+}
+
+.box-selector {
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ padding: 0.5rem;
+}
+
+.box-selector--selected {
+ border: 2px solid #3b82f6;
+ position: relative;
+
+ &:before {
+ content: '';
+ left: 0.25rem;
+ position: absolute;
+ top: 0.25rem;
+
+ height: 1rem;
+ width: 1rem;
+
+ background-image: url("data:image/svg+xml,%3Csvg fill='%233b82f6' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'%3E%3C/path%3E%3C/svg%3E");
+ background-position: center center;
+ background-repeat: no-repeat;
+ }
+}
+```
+
+```html index.html hidden
+
+```
+
+
+## See also
+
+- [Custom checkbox button](https://phuoc.ng/collection/css-layout/custom-checkbox-button)
+- [Custom radio button](https://phuoc.ng/collection/css-layout/custom-radio-button)
diff --git a/contents/breadcrumb.md b/contents/breadcrumb.md
deleted file mode 100644
index 5a07883..0000000
--- a/contents/breadcrumb.md
+++ /dev/null
@@ -1,47 +0,0 @@
----
-layout: layouts/post.njk
-title: Breadcrumb
-description: Create a breadcrumb with CSS flexbox
-keywords: css breadcrumb, css flexbox
----
-
-## HTML
-
-```html
-
-```
-
-## CSS
-
-```css
-.breadcrumb {
- /* Content is centered vertically */
- align-items: center;
- display: flex;
-}
-
-.breadcrumb__item {
- margin: 0 0.5rem;
-
- /* Used to position the separator between items */
- position: relative;
-}
-
-.breadcrumb__item:not(:last-child)::after {
- /* Absolute position */
- position: absolute;
- right: 0;
- top: 0;
- transform: translate(0.5rem, 0px);
-
- content: '/';
-}
-```
-
-{% demo %}{% include "covers/breadcrumb.njk" %}{% enddemo %}
diff --git a/contents/breadcrumb.mdx b/contents/breadcrumb.mdx
new file mode 100644
index 0000000..c0b47d9
--- /dev/null
+++ b/contents/breadcrumb.mdx
@@ -0,0 +1,87 @@
+---
+category: Navigation
+created: '2019-11-17'
+description: Create a breadcrumb with CSS flexbox
+keywords: css breadcrumb, css flexbox
+thumbnail: /assets/css-layout/thumbnails/breadcrumb.png
+title: Breadcrumb
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.breadcrumb {
+ /* Content is centered vertically */
+ align-items: center;
+ display: flex;
+}
+
+.breadcrumb__item {
+ margin: 0 0.5rem;
+
+ /* Used to position the separator between items */
+ position: relative;
+}
+
+.breadcrumb__item:not(:last-child)::after {
+ /* Absolute position */
+ position: absolute;
+ right: 0;
+ top: 0;
+ transform: translate(0.5rem, 0px);
+
+ content: '/';
+}
+```
+
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+
+.breadcrumb {
+ /* Content is centered vertically */
+ align-items: center;
+ display: flex;
+}
+
+.breadcrumb__item {
+ margin: 0 0.5rem;
+ position: relative;
+}
+
+.breadcrumb__item:not(:last-child)::after {
+ /* Absolute position */
+ position: absolute;
+ right: 0;
+ top: 0;
+ transform: translate(0.5rem, 0px);
+
+ content: '/';
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/button-with-icon.md b/contents/button-with-icon.md
deleted file mode 100644
index 0bcbd5d..0000000
--- a/contents/button-with-icon.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-layout: layouts/post.njk
-title: Button with icon
-description: Create an icon button with CSS flexbox
-keywords: css flexbox, css icon button
----
-
-## HTML
-
-```html
-
-
- ...
-
-
- ...
-
-```
-
-## CSS
-
-```css
-.button-with-icon {
- /* Center the content */
- align-items: center;
- display: flex;
- flex-direction: row;
- justify-content: center;
-}
-
-.button-with-icon__label {
- margin-left: 0.5rem;
-}
-```
-
-{% demo %}
-{% include "covers/button-with-icon.njk" %}
-{% enddemo %}
diff --git a/contents/button-with-icon.mdx b/contents/button-with-icon.mdx
new file mode 100644
index 0000000..a8b2ae0
--- /dev/null
+++ b/contents/button-with-icon.mdx
@@ -0,0 +1,122 @@
+---
+category: Input
+created: '2019-11-17'
+description: Create an icon button with CSS flexbox
+keywords: css flexbox, css icon button
+thumbnail: /assets/css-layout/thumbnails/button-with-icon.png
+title: Button with icon
+---
+
+## HTML
+
+```html
+
+
+ ...
+
+
+ ...
+
+```
+
+## CSS
+
+```css
+.button-with-icon {
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+}
+
+.button-with-icon__label {
+ margin-left: 0.5rem;
+}
+```
+
+
+```css placeholders.css hidden
+.circle {
+ background: #d1d5db;
+ border-radius: 9999px;
+ height: var(--circle-size);
+ width: var(--circle-size);
+}
+.circle--sm {
+ --circle-size: 0.5rem;
+}
+.circle--md {
+ --circle-size: 1.5rem;
+}
+.circle--lg {
+ --circle-size: 4rem;
+}
+.lines {
+ padding: 0.25rem 0;
+ width: 100%;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+}
+.line {
+ background: #d1d5db;
+ height: 1px;
+ margin-bottom: 0.25rem;
+}
+.line.line--20 {
+ width: 20%;
+}
+.line.line--40 {
+ width: 40%;
+}
+.line.line--60 {
+ width: 60%;
+}
+.line.line--80 {
+ width: 80%;
+}
+.line.line--100 {
+ width: 100%;
+}
+```
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+.button-with-icon {
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+
+ /* Demo */
+ background: #fff;
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ width: 8rem;
+}
+
+.button-with-icon__label {
+ flex: 1;
+ margin-left: 0.5rem;
+}
+```
+
+```html index.html hidden
+
+
+
+
+```
+
diff --git a/contents/calendar.md b/contents/calendar.md
deleted file mode 100644
index 66d0664..0000000
--- a/contents/calendar.md
+++ /dev/null
@@ -1,72 +0,0 @@
----
-layout: layouts/post.njk
-title: Calendar
-description: Create a calendar with CSS grid
-keywords: css calendar, css grid
----
-
-## HTML
-
-```html
-
-
-
Mon
-
Tue
-
Wed
-
Thu
-
Fri
-
Sat
-
Sun
-
-
-
30
-
31
-
-
-
1
-
2
-
-
-
...
-
-
-
1
-
2
-
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+
30
+
31
+
+
+
1
+
2
+
+
+
...
+
+
+
1
+
2
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+.calendar {
+ display: grid;
+ grid-template-columns: repeat(7, 1fr);
+ width: 16rem;
+}
+
+.calendar__weekday {
+ border-bottom: 1px solid #d1d5db;
+ padding: 0.5rem;
+ text-align: center;
+}
+
+.calendar__day {
+ border-bottom: 1px solid #d1d5db;
+ border-right: 1px solid #d1d5db;
+ padding: 0.5rem;
+ 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;
+}
+```
+
+```html index.html hidden
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
29
+
30
+
31
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+
30
+
31
+
+
1
+
2
+
3
+
diff --git a/contents/card-layout.md b/contents/card-layout.md
deleted file mode 100644
index 525e950..0000000
--- a/contents/card-layout.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-layout: layouts/post.njk
-title: Card layout
-description: Create a card layout with CSS flexbox
-keywords: css card layout, css flexbox, css layout
----
-
-## HTML
-
-```html
-
-```
-
-## CSS
-
-```css
-.card-layout {
- display: flex;
-
- /* Put a card in the next row when previous cards take all width */
- flex-wrap: wrap;
-
- margin-left: -0.25rem;
- margin-right: -0.25rem;
-}
-
-.card-layout__item {
- /* There will be 3 cards per row */
- flex-basis: 33.33333%;
-
- padding-left: 0.25rem;
- padding-right: 0.25rem;
-}
-```
-
-{% demo %}{% include "covers/card-layout.njk" %}{% enddemo %}
diff --git a/contents/card-layout.mdx b/contents/card-layout.mdx
new file mode 100644
index 0000000..e43aeff
--- /dev/null
+++ b/contents/card-layout.mdx
@@ -0,0 +1,144 @@
+---
+category: Layout
+created: '2019-12-25'
+description: Create a card layout with CSS flexbox
+keywords: css card layout, css flexbox, css layout
+thumbnail: /assets/css-layout/thumbnails/card-layout.png
+title: Card layout
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.card-layout {
+ display: flex;
+
+ /* Put a card in the next row when previous cards take all width */
+ flex-wrap: wrap;
+
+ margin-left: -0.25rem;
+ margin-right: -0.25rem;
+}
+
+.card-layout__item {
+ /* There will be 3 cards per row */
+ flex-basis: 33.33333%;
+
+ padding-left: 0.25rem;
+ padding-right: 0.25rem;
+}
+```
+
+
+```css placeholders.css hidden
+.rectangle {
+ background: #d1d5db;
+ border-radius: 0.25rem;
+ height: var(--rectangle-height);
+ width: var(--rectangle-width);
+}
+.rectangle--hor.rectangle--20 {
+ --rectangle-width: 20%;
+}
+.rectangle--hor.rectangle--40 {
+ --rectangle-width: 40%;
+}
+.rectangle--hor.rectangle--60 {
+ --rectangle-width: 60%;
+}
+.rectangle--hor.rectangle--80 {
+ --rectangle-width: 80%;
+}
+.rectangle--hor.rectangle--100 {
+ --rectangle-width: 100%;
+}
+.rectangle--hor.rectangle--sm {
+ --rectangle-height: 0.5rem;
+}
+.rectangle--hor.rectangle--md {
+ --rectangle-height: 2rem;
+}
+.rectangle--hor.rectangle--lg {
+ --rectangle-height: 4rem;
+}
+.rectangle--ver.rectangle--20 {
+ --rectangle-height: 20%;
+}
+.rectangle--ver.rectangle--40 {
+ --rectangle-height: 40%;
+}
+.rectangle--ver.rectangle--60 {
+ --rectangle-height: 60%;
+}
+.rectangle--ver.rectangle--80 {
+ --rectangle-height: 80%;
+}
+.rectangle--ver.rectangle--100 {
+ --rectangle-height: 100%;
+}
+.rectangle--ver.rectangle--sm {
+ --rectangle-width: 0.5rem;
+}
+.rectangle--ver.rectangle--md {
+ --rectangle-width: 2rem;
+}
+.rectangle--ver.rectangle--lg {
+ --rectangle-width: 4rem;
+}
+```
+
+```css styles.css hidden
+body {
+ height: 24rem;
+}
+
+.card-layout {
+ display: flex;
+
+ /* Put a card in the next row when previous cards take all width */
+ flex-wrap: wrap;
+
+ margin-left: -0.25rem;
+ margin-right: -0.25rem;
+}
+
+.card-layout__item {
+ /* There will be 3 cards per row */
+ flex-basis: 33.33333%;
+
+ padding-left: 0.25rem;
+ padding-right: 0.25rem;
+
+ /* Demo */
+ margin: 0.25rem 0;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/card.md b/contents/card.md
deleted file mode 100644
index 09c1497..0000000
--- a/contents/card.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-layout: layouts/post.njk
-title: Card
-description: Create a card with CSS flexbox
-keywords: css card, css flexbox
----
-
-## HTML
-
-```html
-
-
-
...
-
-
-
...
- ...
-
+
+
...
+
+
+
...
+ ...
+
+```css placeholders.css hidden
+.lines {
+ padding: 0.25rem 0;
+ width: 100%;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+}
+.line {
+ background: #d1d5db;
+ height: 1px;
+ margin-bottom: 0.25rem;
+}
+.line.line--20 {
+ width: 20%;
+}
+.line.line--40 {
+ width: 40%;
+}
+.line.line--60 {
+ width: 60%;
+}
+.line.line--80 {
+ width: 80%;
+}
+.line.line--100 {
+ width: 100%;
+}
+```
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+.card {
+ display: flex;
+ flex-direction: column;
+ width: 16rem;
+ height: 100%;
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+}
+.card__cover {
+ background: #d1d5db;
+ border-radius: 0.25rem;
+ height: 40%;
+ width: 100%;
+}
+.card__content {
+ /* Take available height */
+ flex: 1;
+ padding: 0.5rem;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/centering.md b/contents/centering.md
deleted file mode 100644
index f05dda3..0000000
--- a/contents/centering.md
+++ /dev/null
@@ -1,26 +0,0 @@
----
-layout: layouts/post.njk
-title: Centering
-description: Center an element with CSS flexbox
-keywords: css centering, css flexbox
----
-
-## HTML
-
-```html
-...
-```
-
-## CSS
-
-```css
-.centering {
- align-items: center;
- display: flex;
- justify-content: center;
-}
-```
-
-{% demo %}
-{% include "covers/centering.njk" %}
-{% enddemo %}
diff --git a/contents/centering.mdx b/contents/centering.mdx
new file mode 100644
index 0000000..8090a2e
--- /dev/null
+++ b/contents/centering.mdx
@@ -0,0 +1,102 @@
+---
+category: Display
+created: '2019-11-15'
+description: Center an element with CSS flexbox
+keywords: css centering, css flexbox
+thumbnail: /assets/css-layout/thumbnails/centering.png
+title: Centering
+---
+
+## HTML
+
+```html
+...
+```
+
+## CSS
+
+```css
+.centering {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+```
+
+
+```css placeholders.css hidden
+.circle {
+ background: #d1d5db;
+ border-radius: 9999px;
+ height: var(--circle-size);
+ width: var(--circle-size);
+}
+.circle--sm {
+ --circle-size: 0.5rem;
+}
+.circle--md {
+ --circle-size: 1.5rem;
+}
+.circle--lg {
+ --circle-size: 4rem;
+}
+.lines {
+ padding: 0.25rem 0;
+ width: 100%;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+}
+.line {
+ background: #d1d5db;
+ height: 1px;
+ margin-bottom: 0.25rem;
+}
+.line.line--20 {
+ width: 20%;
+}
+.line.line--40 {
+ width: 40%;
+}
+.line.line--60 {
+ width: 60%;
+}
+.line.line--80 {
+ width: 80%;
+}
+.line.line--100 {
+ width: 100%;
+}
+```
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+.centering {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ /* Demo */
+ flex-direction: column;
+ width: 16rem;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/chip.md b/contents/chip.md
deleted file mode 100644
index e22849d..0000000
--- a/contents/chip.md
+++ /dev/null
@@ -1,103 +0,0 @@
----
-layout: layouts/post.njk
-title: Chip
-description: Create a chip component with CSS flexbox
-keywords: css chip, css flexbox, css tag
----
-
-## HTML
-
-```html
-
-```
-
-## CSS
-
-```css
-.chip {
- /* Center the content */
- align-items: center;
- display: inline-flex;
- justify-content: center;
-
- /* Background color */
- background-color: #d1d5db;
-
- /* Rounded border */
- border-radius: 9999px;
-
- /* Spacing */
- padding: 0.25rem 0.5rem;
-}
-
-.chip__content {
- margin-right: 0.25rem;
-}
-```
-
-The [close button](/close-button/) is used to create a button for removing the chip:
-
-```css
-.chip__button {
- /* Reset */
- background-color: transparent;
- border-color: transparent;
-
- /* Cursor */
- cursor: pointer;
-
- /* Size */
- height: 1rem;
- width: 1rem;
-
- /* Used to position the inner */
- position: relative;
-}
-
-.chip__button-line {
- /* Background color */
- background-color: #9ca3af;
-
- /* Position */
- position: absolute;
-
- /* Size */
- height: 1px;
- width: 100%;
-}
-
-.chip__button-line--first {
- /* Position */
- left: 0px;
- top: 50%;
- transform: translate(0%, -50%) rotate(45deg);
-
- /* Size */
- height: 1px;
- width: 100%;
-}
-
-.chip__button-line--second {
- /* Position */
- left: 50%;
- top: 0px;
- transform: translate(-50%, 0%) rotate(45deg);
-
- /* Size */
- height: 100%;
- width: 1px;
-}
-```
-
-{% demo %}
-{% include "covers/chip.njk" %}
-{% enddemo %}
diff --git a/contents/chip.mdx b/contents/chip.mdx
new file mode 100644
index 0000000..d009ca0
--- /dev/null
+++ b/contents/chip.mdx
@@ -0,0 +1,191 @@
+---
+category: Input
+created: '2019-12-21'
+description: Create a chip component with CSS flexbox
+keywords: css chip, css flexbox, css tag
+thumbnail: /assets/css-layout/thumbnails/chip.png
+title: Chip
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.chip {
+ /* Center the content */
+ align-items: center;
+ display: inline-flex;
+ justify-content: center;
+
+ /* Background color */
+ background-color: #d1d5db;
+
+ /* Rounded border */
+ border-radius: 9999px;
+
+ /* Spacing */
+ padding: 0.25rem 0.5rem;
+}
+
+.chip__content {
+ margin-right: 0.25rem;
+}
+```
+
+The [close button](https://phuoc.ng/collection/css-layout/close-button) is used to create a button for removing the chip:
+
+```css
+.chip__button {
+ /* Reset */
+ background-color: transparent;
+ border-color: transparent;
+
+ /* Cursor */
+ cursor: pointer;
+
+ /* Size */
+ height: 1rem;
+ width: 1rem;
+
+ /* Used to position the inner */
+ position: relative;
+}
+
+.chip__button-line {
+ /* Background color */
+ background-color: #9ca3af;
+
+ /* Position */
+ position: absolute;
+
+ /* Size */
+ height: 1px;
+ width: 100%;
+}
+
+.chip__button-line--first {
+ /* Position */
+ left: 0px;
+ top: 50%;
+ transform: translate(0%, -50%) rotate(45deg);
+
+ /* Size */
+ height: 1px;
+ width: 100%;
+}
+
+.chip__button-line--second {
+ /* Position */
+ left: 50%;
+ top: 0px;
+ transform: translate(-50%, 0%) rotate(45deg);
+
+ /* Size */
+ height: 100%;
+ width: 1px;
+}
+```
+
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+
+.chip {
+ /* Center the content */
+ align-items: center;
+ display: inline-flex;
+ justify-content: center;
+
+ /* Background color */
+ background-color: #d1d5db;
+
+ /* Rounded border */
+ border-radius: 9999px;
+
+ /* Spacing */
+ padding: 0.25rem 0.5rem;
+}
+
+.chip__content {
+ margin-right: 0.25rem;
+}
+
+.chip__button {
+ /* Reset */
+ background-color: transparent;
+ border-color: transparent;
+
+ /* Cursor */
+ cursor: pointer;
+
+ /* Size */
+ height: 1rem;
+ width: 1rem;
+
+ /* Used to position the inner */
+ position: relative;
+}
+
+.chip__button-line {
+ /* Background color */
+ background-color: #9ca3af;
+
+ /* Position */
+ position: absolute;
+
+ /* Size */
+ height: 1px;
+ width: 100%;
+}
+
+.chip__button-line--first {
+ /* Position */
+ left: 0px;
+ top: 50%;
+ transform: translate(0%, -50%) rotate(45deg);
+
+ /* Size */
+ height: 1px;
+ width: 100%;
+}
+
+.chip__button-line--second {
+ /* Position */
+ left: 50%;
+ top: 0px;
+ transform: translate(-50%, 0%) rotate(45deg);
+
+ /* Size */
+ height: 100%;
+ width: 1px;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/circular-navigation.md b/contents/circular-navigation.md
deleted file mode 100644
index 5d3fca0..0000000
--- a/contents/circular-navigation.md
+++ /dev/null
@@ -1,71 +0,0 @@
----
-layout: layouts/post.njk
-title: Circular navigation
-description: Create a circular navigation with CSS flexbox
-keywords: css circular navigation, css flexbox
----
-
-## HTML
-
-```html
-
-
- ...
-
-
-
-
-
- ...
-
+
+ ...
+
+
+
+
+
+ ...
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+.circular-navigation-container {
+ /* Demo */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ height: 8rem;
+ width: 8rem;
+}
+
+.circular-navigation {
+ position: relative;
+ height: 2rem;
+ width: 2rem;
+}
+
+.circular-navigation__circle {
+ /* Position */
+ position: absolute;
+ top: 0;
+
+ /*
+ 3rem is the distance from the item to the trigger element.
+ Replace 0deg with 60deg, 180deg, 240deg, 300deg for another item
+ in case you want to have a total of 6 menu items.
+ The formulation is 360 / numberOfItems * indexOfItem
+ */
+ transform: rotate(var(--circular-navigation__circle-degree)) translateX(-3rem);
+
+ /* Must have the same size as the trigger element */
+ height: 2rem;
+ width: 2rem;
+
+ /* Demo */
+ background-color: #d1d5db;
+ border-radius: 9999px;
+}
+
+.circular-navigation__content {
+ /*
+ Rotate it to make it displayed vertically
+ Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item
+ in case you want to have a total of 6 menu items.
+ The formulation is -(360 / numberOfItems * indexOfItem)
+ */
+ transform: rotate(var(--circular-navigation__content-degree));
+
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ /* Take full size */
+ height: 100%;
+ width: 100%;
+}
+
+.circular-navigation__circle--1 {
+ --circular-navigation__circle-degree: 0deg;
+ --circular-navigation__content-degree: -0deg;
+}
+.circular-navigation__circle--2 {
+ --circular-navigation__circle-degree: 60deg;
+ --circular-navigation__content-degree: -60deg;
+}
+.circular-navigation__circle--3 {
+ --circular-navigation__circle-degree: 120deg;
+ --circular-navigation__content-degree: -120deg;
+}
+.circular-navigation__circle--4 {
+ --circular-navigation__circle-degree: 180deg;
+ --circular-navigation__content-degree: -180deg;
+}
+.circular-navigation__circle--5 {
+ --circular-navigation__circle-degree: 240deg;
+ --circular-navigation__content-degree: -240deg;
+}
+.circular-navigation__circle--6 {
+ --circular-navigation__circle-degree: 300deg;
+ --circular-navigation__content-degree: -300deg;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/close-button.md b/contents/close-button.md
deleted file mode 100644
index 06be1c2..0000000
--- a/contents/close-button.md
+++ /dev/null
@@ -1,73 +0,0 @@
----
-layout: layouts/post.njk
-title: Close button
-description: Create a close button with CSS flexbox
-keywords: css close button, css flexbox
----
-
-## HTML
-
-```html
-
-
-
-
-```
-
-## CSS
-
-```css
-.close-button {
- /* Reset */
- background-color: transparent;
- border-color: transparent;
-
- /* Cursor */
- cursor: pointer;
-
- /* Size */
- height: 3rem;
- width: 3rem;
-
- /* Used to position the inner */
- position: relative;
-}
-
-.close-button__line {
- /* Background color */
- background-color: #d1d5db;
-
- /* Position */
- position: absolute;
-
- /* Size */
- height: 1px;
- width: 100%;
-}
-
-.close-button__line--first {
- /* Position */
- left: 0px;
- top: 50%;
- transform: translate(0%, -50%) rotate(45deg);
-
- /* Size */
- height: 1px;
- width: 100%;
-}
-
-.close-button__line--second {
- /* Position */
- left: 50%;
- top: 0px;
- transform: translate(-50%, 0%) rotate(45deg);
-
- /* Size */
- height: 100%;
- width: 1px;
-}
-```
-
-{% demo %}
-{% include "covers/close-button.njk" %}
-{% enddemo %}
diff --git a/contents/close-button.mdx b/contents/close-button.mdx
new file mode 100644
index 0000000..17ef69a
--- /dev/null
+++ b/contents/close-button.mdx
@@ -0,0 +1,137 @@
+---
+category: Display
+created: '2019-12-11'
+description: Create a close button with CSS flexbox
+keywords: css close button, css flexbox
+thumbnail: /assets/css-layout/thumbnails/close-button.png
+title: Close button
+---
+
+## HTML
+
+```html
+
+
+
+
+```
+
+## CSS
+
+```css
+.close-button {
+ /* Reset */
+ background-color: transparent;
+ border-color: transparent;
+
+ /* Cursor */
+ cursor: pointer;
+
+ /* Size */
+ height: 3rem;
+ width: 3rem;
+
+ /* Used to position the inner */
+ position: relative;
+}
+
+.close-button__line {
+ /* Background color */
+ background-color: #d1d5db;
+
+ /* Position */
+ position: absolute;
+
+ /* Size */
+ height: 1px;
+ width: 100%;
+}
+
+.close-button__line--first {
+ /* Position */
+ left: 0px;
+ top: 50%;
+ transform: translate(0%, -50%) rotate(45deg);
+
+ /* Size */
+ height: 1px;
+ width: 100%;
+}
+
+.close-button__line--second {
+ /* Position */
+ left: 50%;
+ top: 0px;
+ transform: translate(-50%, 0%) rotate(45deg);
+
+ /* Size */
+ height: 100%;
+ width: 1px;
+}
+```
+
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+.close-button {
+ /* Reset */
+ background-color: transparent;
+ border-color: transparent;
+
+ /* Cursor */
+ cursor: pointer;
+
+ /* Size */
+ height: 3rem;
+ width: 3rem;
+
+ /* Used to position the inner */
+ position: relative;
+}
+
+.close-button__line {
+ /* Background color */
+ background-color: #d1d5db;
+
+ /* Position */
+ position: absolute;
+
+ /* Size */
+ height: 1px;
+ width: 100%;
+}
+
+.close-button__line--first {
+ /* Position */
+ left: 0px;
+ top: 50%;
+ transform: translate(0%, -50%) rotate(45deg);
+
+ /* Size */
+ height: 1px;
+ width: 100%;
+}
+
+.close-button__line--second {
+ /* Position */
+ left: 50%;
+ top: 0px;
+ transform: translate(-50%, 0%) rotate(45deg);
+
+ /* Size */
+ height: 100%;
+ width: 1px;
+}
+```
+
+```html index.html hidden
+
+
+
+
+```
+
diff --git a/contents/color-swatch.md b/contents/color-swatch.md
deleted file mode 100644
index 65d7a10..0000000
--- a/contents/color-swatch.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-layout: layouts/post.njk
-title: Color swatch
-description: Create a color swatch with CSS flexbox
-keywords: css color swatch, css flexbox
----
-
-## HTML
-
-```html
-
-```
-
-## CSS
-
-```css
-.swatch {
- /* Wrap the items */
- display: flex;
- flex-wrap: wrap;
-}
-.swatch__item {
- /* Rounded border */
- border-radius: 9999px;
- height: 1.5rem;
- width: 1.5rem;
-
- /* Space between items */
- margin: 0.5rem;
-}
-```
-
-{% demo %}
-{% include "covers/color-swatch.njk" %}
-{% enddemo %}
diff --git a/contents/color-swatch.mdx b/contents/color-swatch.mdx
new file mode 100644
index 0000000..071ede7
--- /dev/null
+++ b/contents/color-swatch.mdx
@@ -0,0 +1,93 @@
+---
+category: Display
+created: '2021-05-08'
+description: Create a color swatch with CSS flexbox
+keywords: css color swatch, css flexbox
+thumbnail: /assets/css-layout/thumbnails/color-swatch.png
+title: Color swatch
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.swatch {
+ /* Wrap the items */
+ display: flex;
+ flex-wrap: wrap;
+}
+.swatch__item {
+ /* Rounded border */
+ border-radius: 9999px;
+ height: 1.5rem;
+ width: 1.5rem;
+
+ /* Space between items */
+ margin: 0.5rem;
+}
+```
+
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+.swatch {
+ /* Wrap the items */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+}
+.swatch__item {
+ /* Rounded border */
+ border-radius: 9999px;
+ height: 1.5rem;
+ width: 1.5rem;
+
+ /* Space between items */
+ margin: 0.5rem;
+}
+.swatch__item--1st {
+ background-color: rgba(0, 0, 0, 0.1);
+}
+.swatch__item--2nd {
+ background-color: rgba(0, 0, 0, 0.2);
+}
+.swatch__item--3rd {
+ background-color: #d1d5db;
+}
+.swatch__item--4th {
+ background-color: rgba(0, 0, 0, 0.4);
+}
+.swatch__item--5th {
+ background-color: rgba(0, 0, 0, 0.5);
+}
+.swatch__item--6th {
+ background-color: rgba(0, 0, 0, 0.6);
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/concave-corners.md b/contents/concave-corners.mdx
similarity index 51%
rename from contents/concave-corners.md
rename to contents/concave-corners.mdx
index 04de6b6..9efac83 100644
--- a/contents/concave-corners.md
+++ b/contents/concave-corners.mdx
@@ -1,8 +1,10 @@
---
-layout: layouts/post.njk
-title: Concave corners
+category: Display
+created: '2021-05-09'
description: Create concave corners with CSS
keywords: css border radius, css concave border radius, css concave corners
+thumbnail: /assets/css-layout/thumbnails/concave-corners.png
+title: Concave corners
---
## HTML
@@ -83,6 +85,75 @@ keywords: css border radius, css concave border radius, css concave corners
}
```
-{% demo %}
-{% include "covers/concave-corners.njk" %}
-{% enddemo %}
+
+```css styles.css hidden
+body {
+ height: 24rem;
+}
+.concave-corners {
+ background-color: #d1d5db;
+
+ /* Used to position the corners */
+ position: relative;
+
+ /* Misc */
+ height: 100%;
+ width: 100%;
+}
+.concave-corners__corner {
+ /* Absolute position */
+ position: absolute;
+
+ /* Size */
+ height: 1rem;
+ width: 1rem;
+
+ background: #fff;
+}
+
+.concave-corners__corner--tl {
+ /* Position */
+ left: 0;
+ top: 0;
+
+ /* Border radius */
+ border-radius: 0 0 1rem 0;
+}
+
+.concave-corners__corner--tr {
+ /* Position */
+ right: 0;
+ top: 0;
+
+ /* Border radius */
+ border-radius: 0 0 0 1rem;
+}
+
+.concave-corners__corner--bl {
+ /* Position */
+ bottom: 0;
+ left: 0;
+
+ /* Border radius */
+ border-radius: 0 1rem 0 0;
+}
+
+.concave-corners__corner--br {
+ /* Position */
+ bottom: 0;
+ right: 0;
+
+ /* Border radius */
+ border-radius: 1rem 0 0 0;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/cookie-banner.md b/contents/cookie-banner.md
deleted file mode 100644
index 6096967..0000000
--- a/contents/cookie-banner.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-layout: layouts/post.njk
-title: Cookie banner
-description: Create a cookie banner with CSS flexbox
-keywords: css cookie banner, css flexbox
----
-
-## HTML
-
-```html
-
-```
-
-## CSS
-
-```css
-.cookie-banner {
- /* Banner is displayed at the bottom */
- bottom: 0;
- left: 0;
- position: fixed;
- width: 100%;
-
- /* Center the content */
- align-items: center;
- display: flex;
- justify-content: center;
-}
-
-.cookie-banner__content {
- /* Take available width */
- flex: 1;
-}
-```
-
-{% demo %}
-{% include "covers/cookie-banner.njk" %}
-{% enddemo %}
diff --git a/contents/cookie-banner.mdx b/contents/cookie-banner.mdx
new file mode 100644
index 0000000..937095d
--- /dev/null
+++ b/contents/cookie-banner.mdx
@@ -0,0 +1,112 @@
+---
+category: Display
+created: '2019-11-30'
+description: Create a cookie banner with CSS flexbox
+keywords: css cookie banner, css flexbox
+thumbnail: /assets/css-layout/thumbnails/cookie-banner.png
+title: Cookie banner
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.cookie-banner {
+ /* Banner is displayed at the bottom */
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ width: 100%;
+
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+
+.cookie-banner__content {
+ /* Take available width */
+ flex: 1;
+}
+```
+
+
+```css placeholders.css hidden
+.lines {
+ padding: 0.25rem 0;
+ width: 100%;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+}
+.line {
+ background: #d1d5db;
+ height: 1px;
+ margin-bottom: 0.25rem;
+}
+.line.line--20 {
+ width: 20%;
+}
+.line.line--40 {
+ width: 40%;
+}
+.line.line--60 {
+ width: 60%;
+}
+.line.line--80 {
+ width: 80%;
+}
+.line.line--100 {
+ width: 100%;
+}
+```
+
+```css styles.css hidden
+body {
+ height: 24rem;
+}
+.cookie-banner {
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+
+ height: 100%;
+ width: 100%;
+
+ align-items: end;
+ display: flex;
+}
+
+.cookie-banner__content {
+ border-top: 1px solid #d1d5db;
+ /* Take available width */
+ flex: 1;
+ padding: 0 0.5rem;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/corner-ribbon.md b/contents/corner-ribbon.md
deleted file mode 100644
index 415fb33..0000000
--- a/contents/corner-ribbon.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-layout: layouts/post.njk
-title: Corner ribbon
-description: Create a corner ribbon with CSS flexbox
-keywords: css flexbox, css ribbon
----
-
-## HTML
-
-```html
-
-```
-
-## CSS
-
-```css
-.corner-ribbon {
- position: relative;
-}
-
-.corner-ribbon__inner {
- /* Displayed at the top left corner */
- left: 0px;
- position: absolute;
- top: 0px;
-
- /* Size */
- height: 4rem;
- width: 4rem;
-
- /* Hide the part of its children which is displayed outside */
- overflow: hidden;
-}
-
-.corner-ribbon__ribbon {
- /* Position */
- left: 1rem;
- position: absolute;
- top: 1rem;
-
- /* Size */
- height: 1.5rem;
- width: 5.656rem;
-
- /* Displayed diagonally */
- transform: translate(-38px, -8px) rotate(-45deg);
-
- /* Background color */
- background-color: #d1d5db;
-
- /* Centerize the text content */
- text-align: center;
-}
-```
-
-{% demo %}
-{% include "covers/corner-ribbon.njk" %}
-{% enddemo %}
diff --git a/contents/corner-ribbon.mdx b/contents/corner-ribbon.mdx
new file mode 100644
index 0000000..742edd9
--- /dev/null
+++ b/contents/corner-ribbon.mdx
@@ -0,0 +1,120 @@
+---
+category: Display
+created: '2019-12-01'
+description: Create a corner ribbon with CSS flexbox
+keywords: css flexbox, css ribbon
+thumbnail: /assets/css-layout/thumbnails/corner-ribbon.png
+title: Corner ribbon
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.corner-ribbon {
+ position: relative;
+}
+
+.corner-ribbon__inner {
+ /* Displayed at the top left corner */
+ left: 0px;
+ position: absolute;
+ top: 0px;
+
+ /* Size */
+ height: 4rem;
+ width: 4rem;
+
+ /* Hide the part of its children which is displayed outside */
+ overflow: hidden;
+}
+
+.corner-ribbon__ribbon {
+ /* Position */
+ left: 1rem;
+ position: absolute;
+ top: 1rem;
+
+ /* Size */
+ height: 1.5rem;
+ width: 5.656rem;
+
+ /* Displayed diagonally */
+ transform: translate(-38px, -8px) rotate(-45deg);
+
+ /* Background color */
+ background-color: #d1d5db;
+
+ /* Centerize the text content */
+ text-align: center;
+}
+```
+
+
+```css styles.css hidden
+body {
+ height: 24rem;
+}
+.corner-ribbon {
+ position: relative;
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ height: 100%;
+ width: 100%;
+}
+
+.corner-ribbon__inner {
+ /* Displayed at the top left corner */
+ left: 0px;
+ position: absolute;
+ top: 0px;
+
+ /* Size */
+ height: 4rem;
+ width: 4rem;
+
+ /* Hide the part of its children which is displayed outside */
+ overflow: hidden;
+}
+
+.corner-ribbon__ribbon {
+ /* Position */
+ left: 1rem;
+ position: absolute;
+ top: 1rem;
+
+ /* Size */
+ height: 1.5rem;
+ width: 5.656rem;
+
+ /* Displayed diagonally */
+ transform: translate(-38px, -8px) rotate(-45deg);
+
+ /* Background color */
+ background-color: #d1d5db;
+
+ /* Centerize the text content */
+ text-align: center;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/curved-background.md b/contents/curved-background.mdx
similarity index 52%
rename from contents/curved-background.md
rename to contents/curved-background.mdx
index 656e2ac..5f4c1f6 100644
--- a/contents/curved-background.md
+++ b/contents/curved-background.mdx
@@ -1,8 +1,10 @@
---
-layout: layouts/post.njk
-title: Curved background
+category: Display
+created: '2020-01-17'
description: Create an element with curved background
keywords: css border radius, css curved background
+thumbnail: /assets/css-layout/thumbnails/curved-background.png
+title: Curved background
---
## HTML
@@ -33,6 +35,30 @@ keywords: css border radius, css curved background
}
```
-{% demo %}
-{% include "covers/curved-background.njk" %}
-{% enddemo %}
+
+```css styles.css hidden
+body {
+ height: 24rem;
+}
+.curved-background {
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ height: 100%;
+ width: 100%;
+}
+.curved-background__curved {
+ background-color: #d1d5db;
+ border-bottom-left-radius: 50% 40%;
+ border-bottom-right-radius: 50% 40%;
+
+ height: 8rem;
+ width: 100%;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/custom-checkbox-button.md b/contents/custom-checkbox-button.md
deleted file mode 100644
index 23751b5..0000000
--- a/contents/custom-checkbox-button.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-layout: layouts/post.njk
-title: Custom checkbox button
-description: Create a custom checkbox button with CSS flexbox
-keywords: css checkbox, css flexbox
----
-
-## HTML
-
-```html
-
-
-
-```
-
-## CSS
-
-```css
-.custom-checkbox-button {
- /* Center the content horizontally */
- align-items: center;
- display: inline-flex;
-
- /* Cursor */
- cursor: pointer;
-}
-
-.custom-checkbox-button__input {
- /* Hide it */
- display: none;
-}
-
-.custom-checkbox-button__square {
- border: 1px solid #d1d5db;
- border-radius: 0.25rem;
-
- /* Spacing */
- margin-right: 0.5rem;
- padding: 0.25rem;
-}
-
-.custom-checkbox-button__checkbox {
- background-color: transparent;
- border-radius: 0.25rem;
- height: 1rem;
- width: 1rem;
-}
-
-.custom-checkbox-button__checkbox--selected {
- /* For selected checkbox */
- background-color: #3b82f6;
-}
-```
-
-{% demo %}{% include "covers/custom-checkbox-button.njk" %}{% enddemo %}
-
-## See also
-
-- [Box selector](/box-selector/)
-- [Custom radio button](/custom-radio-button/)
diff --git a/contents/custom-checkbox-button.mdx b/contents/custom-checkbox-button.mdx
new file mode 100644
index 0000000..538b858
--- /dev/null
+++ b/contents/custom-checkbox-button.mdx
@@ -0,0 +1,201 @@
+---
+category: Input
+created: '2019-12-01'
+description: Create a custom checkbox button with CSS flexbox
+keywords: css checkbox, css flexbox
+thumbnail: /assets/css-layout/thumbnails/custom-checkbox-button.png
+title: Custom checkbox button
+---
+
+## HTML
+
+```html
+
+
+
+```
+
+## CSS
+
+```css
+.custom-checkbox-button {
+ /* Center the content horizontally */
+ align-items: center;
+ display: inline-flex;
+
+ /* Cursor */
+ cursor: pointer;
+}
+
+.custom-checkbox-button__input {
+ /* Hide it */
+ display: none;
+}
+
+.custom-checkbox-button__square {
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+
+ /* Spacing */
+ margin-right: 0.5rem;
+ padding: 0.25rem;
+}
+
+.custom-checkbox-button__checkbox {
+ background-color: transparent;
+ border-radius: 0.25rem;
+ height: 1rem;
+ width: 1rem;
+}
+
+.custom-checkbox-button__checkbox--selected {
+ /* For selected checkbox */
+ background-color: #3b82f6;
+}
+```
+
+
+```css placeholders.css hidden
+.rectangle {
+ background: #d1d5db;
+ border-radius: 0.25rem;
+ height: var(--rectangle-height);
+ width: var(--rectangle-width);
+}
+.rectangle--hor.rectangle--20 {
+ --rectangle-width: 20%;
+}
+.rectangle--hor.rectangle--40 {
+ --rectangle-width: 40%;
+}
+.rectangle--hor.rectangle--60 {
+ --rectangle-width: 60%;
+}
+.rectangle--hor.rectangle--80 {
+ --rectangle-width: 80%;
+}
+.rectangle--hor.rectangle--100 {
+ --rectangle-width: 100%;
+}
+.rectangle--hor.rectangle--sm {
+ --rectangle-height: 0.5rem;
+}
+.rectangle--hor.rectangle--md {
+ --rectangle-height: 2rem;
+}
+.rectangle--hor.rectangle--lg {
+ --rectangle-height: 4rem;
+}
+.rectangle--ver.rectangle--20 {
+ --rectangle-height: 20%;
+}
+.rectangle--ver.rectangle--40 {
+ --rectangle-height: 40%;
+}
+.rectangle--ver.rectangle--60 {
+ --rectangle-height: 60%;
+}
+.rectangle--ver.rectangle--80 {
+ --rectangle-height: 80%;
+}
+.rectangle--ver.rectangle--100 {
+ --rectangle-height: 100%;
+}
+.rectangle--ver.rectangle--sm {
+ --rectangle-width: 0.5rem;
+}
+.rectangle--ver.rectangle--md {
+ --rectangle-width: 2rem;
+}
+.rectangle--ver.rectangle--lg {
+ --rectangle-width: 4rem;
+}
+```
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+.custom-checkbox-button {
+ /* Center the content horizontally */
+ align-items: center;
+ display: flex;
+
+ /* Cursor */
+ cursor: pointer;
+
+ /* Demo */
+ margin: 0.25rem 0;
+ width: 16rem;
+}
+
+.custom-checkbox-button__input {
+ /* Hide it */
+ display: none;
+}
+
+.custom-checkbox-button__square {
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+
+ /* Spacing */
+ margin-right: 0.5rem;
+ padding: 0.25rem;
+}
+
+.custom-checkbox-button__checkbox {
+ background-color: transparent;
+ border-radius: 0.25rem;
+ height: 1rem;
+ width: 1rem;
+}
+
+.custom-checkbox-button__checkbox--selected {
+ /* For selected checkbox */
+ background-color: #3b82f6;
+}
+```
+
+```html index.html hidden
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+## See also
+
+- [Box selector](https://phuoc.ng/collection/css-layout/box-selector)
+- [Custom radio button](https://phuoc.ng/collection/css-layout/custom-radio-button)
diff --git a/contents/custom-radio-button.md b/contents/custom-radio-button.md
deleted file mode 100644
index a69befb..0000000
--- a/contents/custom-radio-button.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-layout: layouts/post.njk
-title: Custom radio button
-description: Create a custom radio button with CSS flexbox
-keywords: css flexbox, css radio
----
-
-## HTML
-
-```html
-
-
-
-```
-
-## CSS
-
-```css
-.custom-radio-button {
- /* Center the content horizontally */
- align-items: center;
- display: inline-flex;
-
- /* Cursor */
- cursor: pointer;
-}
-
-.custom-radio-button__input {
- /* Hide it */
- display: none;
-}
-
-.custom-radio-button__circle {
- /* Rounded border */
- border: 1px solid #d1d5db;
- border-radius: 9999px;
-
- /* Spacing */
- margin-right: 0.5rem;
- padding: 0.25rem;
-}
-
-.custom-radio-button__radio {
- /* Rounded border */
- border-radius: 9999px;
- height: 1rem;
- width: 1rem;
-
- /* For not selected radio */
- background-color: transparent;
-}
-
-.custom-radio-button__radio--selected {
- /* For selected radio */
- background-color: #3b82f6;
-}
-```
-
-{% demo %}{% include "covers/custom-radio-button.njk" %}{% enddemo %}
-
-## See also
-
-- [Box selector](/box-selector/)
-- [Custom checkbox button](/custom-checkbox-button/)
diff --git a/contents/custom-radio-button.mdx b/contents/custom-radio-button.mdx
new file mode 100644
index 0000000..ee679c9
--- /dev/null
+++ b/contents/custom-radio-button.mdx
@@ -0,0 +1,209 @@
+---
+category: Input
+created: '2019-12-01'
+description: Create a custom radio button with CSS flexbox
+keywords: css flexbox, css radio
+thumbnail: /assets/css-layout/thumbnails/custom-radio-button.png
+title: Custom radio button
+---
+
+## HTML
+
+```html
+
+
+
+```
+
+## CSS
+
+```css
+.custom-radio-button {
+ /* Center the content horizontally */
+ align-items: center;
+ display: inline-flex;
+
+ /* Cursor */
+ cursor: pointer;
+}
+
+.custom-radio-button__input {
+ /* Hide it */
+ display: none;
+}
+
+.custom-radio-button__circle {
+ /* Rounded border */
+ border: 1px solid #d1d5db;
+ border-radius: 9999px;
+
+ /* Spacing */
+ margin-right: 0.5rem;
+ padding: 0.25rem;
+}
+
+.custom-radio-button__radio {
+ /* Rounded border */
+ border-radius: 9999px;
+ height: 1rem;
+ width: 1rem;
+
+ /* For not selected radio */
+ background-color: transparent;
+}
+
+.custom-radio-button__radio--selected {
+ /* For selected radio */
+ background-color: #3b82f6;
+}
+```
+
+
+```css placeholders.css hidden
+.rectangle {
+ background: #d1d5db;
+ border-radius: 0.25rem;
+ height: var(--rectangle-height);
+ width: var(--rectangle-width);
+}
+.rectangle--hor.rectangle--20 {
+ --rectangle-width: 20%;
+}
+.rectangle--hor.rectangle--40 {
+ --rectangle-width: 40%;
+}
+.rectangle--hor.rectangle--60 {
+ --rectangle-width: 60%;
+}
+.rectangle--hor.rectangle--80 {
+ --rectangle-width: 80%;
+}
+.rectangle--hor.rectangle--100 {
+ --rectangle-width: 100%;
+}
+.rectangle--hor.rectangle--sm {
+ --rectangle-height: 0.5rem;
+}
+.rectangle--hor.rectangle--md {
+ --rectangle-height: 2rem;
+}
+.rectangle--hor.rectangle--lg {
+ --rectangle-height: 4rem;
+}
+.rectangle--ver.rectangle--20 {
+ --rectangle-height: 20%;
+}
+.rectangle--ver.rectangle--40 {
+ --rectangle-height: 40%;
+}
+.rectangle--ver.rectangle--60 {
+ --rectangle-height: 60%;
+}
+.rectangle--ver.rectangle--80 {
+ --rectangle-height: 80%;
+}
+.rectangle--ver.rectangle--100 {
+ --rectangle-height: 100%;
+}
+.rectangle--ver.rectangle--sm {
+ --rectangle-width: 0.5rem;
+}
+.rectangle--ver.rectangle--md {
+ --rectangle-width: 2rem;
+}
+.rectangle--ver.rectangle--lg {
+ --rectangle-width: 4rem;
+}
+```
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+.custom-radio-button {
+ /* Center the content horizontally */
+ align-items: center;
+ display: flex;
+
+ /* Cursor */
+ cursor: pointer;
+
+ /* Demo */
+ margin: 0.25rem 0;
+ width: 16rem;
+}
+
+.custom-radio-button__input {
+ /* Hide it */
+ display: none;
+}
+
+.custom-radio-button__circle {
+ /* Rounded border */
+ border: 1px solid #d1d5db;
+ border-radius: 9999px;
+
+ /* Spacing */
+ margin-right: 0.5rem;
+ padding: 0.25rem;
+}
+
+.custom-radio-button__radio {
+ /* Rounded border */
+ border-radius: 9999px;
+ height: 1rem;
+ width: 1rem;
+
+ /* For not selected radio */
+ background-color: transparent;
+}
+
+.custom-radio-button__radio--selected {
+ /* For selected radio */
+ background-color: #3b82f6;
+}
+```
+
+```html index.html hidden
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+## See also
+
+- [Box selector](https://phuoc.ng/collection/css-layout/box-selector)
+- [Custom checkbox button](https://phuoc.ng/collection/css-layout/custom-checkbox-button)
diff --git a/contents/diagonal-section.md b/contents/diagonal-section.mdx
similarity index 50%
rename from contents/diagonal-section.md
rename to contents/diagonal-section.mdx
index c904fa0..1bd6a46 100644
--- a/contents/diagonal-section.md
+++ b/contents/diagonal-section.mdx
@@ -1,8 +1,10 @@
---
-layout: layouts/post.njk
-title: Diagonal section
+category: Display
+created: '2019-12-25'
description: Create a diagonal section with CSS
keywords: css diagonal section, css transform skew
+thumbnail: /assets/css-layout/thumbnails/diagonal-section.png
+title: Diagonal section
---
## HTML
@@ -46,6 +48,40 @@ keywords: css diagonal section, css transform skew
}
```
-{% demo %}
-{% include "covers/diagonal-section.njk" %}
-{% enddemo %}
+
+```css styles.css hidden
+body {
+ height: 24rem;
+}
+.diagonal-section {
+ /* Used to position the diagonal area */
+ position: relative;
+
+ height: 100%;
+ width: 100%;
+}
+
+.diagonal-section__diagonal {
+ /* Absolute position */
+ left: 0px;
+ position: absolute;
+ top: 50%;
+
+ /* Take full size */
+ height: 2rem;
+ width: 100%;
+
+ /* Create diagonal sides */
+ transform: translate(0, -50%) skewY(-15deg);
+
+ /* Background color */
+ background-color: #d1d5db;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/docked-at-corner.md b/contents/docked-at-corner.md
deleted file mode 100644
index 510c1ce..0000000
--- a/contents/docked-at-corner.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-layout: layouts/post.njk
-title: Docked at corner
-description: Dock an element at corner with CSS
-keywords: css docked, css flexbox
----
-
-## HTML
-
-```html
-
-```
-
-## CSS
-
-```css
-.docked-at-corner {
- position: relative;
-}
-.docked-at-corner__docker {
- position: absolute;
- right: 0;
- top: 0;
- transform: translate(50%, -50%);
-
- /* Center the content */
- align-items: center;
- display: flex;
- justify-content: center;
-}
-```
-
-{% demo %}
-{% include "covers/docked-at-corner.njk" %}
-{% enddemo %}
diff --git a/contents/docked-at-corner.mdx b/contents/docked-at-corner.mdx
new file mode 100644
index 0000000..f57cd27
--- /dev/null
+++ b/contents/docked-at-corner.mdx
@@ -0,0 +1,79 @@
+---
+category: Display
+created: '2019-11-23'
+description: Dock an element at corner with CSS
+keywords: css docked, css flexbox
+thumbnail: /assets/css-layout/thumbnails/docked-at-corner.png
+title: Docked at corner
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.docked-at-corner {
+ position: relative;
+}
+.docked-at-corner__docker {
+ position: absolute;
+ right: 0;
+ top: 0;
+ transform: translate(50%, -50%);
+
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+```
+
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ height: 24rem;
+ justify-content: center;
+}
+
+.docked-at-corner {
+ position: relative;
+ height: 16rem;
+ width: 20rem;
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+}
+.docked-at-corner__docker {
+ background-color: #22c55e;
+ border-radius: 9999px;
+
+ position: absolute;
+ right: 0;
+ top: 0;
+ transform: translate(50%, -50%);
+
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ /* Size */
+ height: 1rem;
+ width: 1rem;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/dot-leader.md b/contents/dot-leader.md
deleted file mode 100644
index 7e75794..0000000
--- a/contents/dot-leader.md
+++ /dev/null
@@ -1,47 +0,0 @@
----
-layout: layouts/post.njk
-title: Dot leader
-description: Create dot leaders with CSS flexbox
-keywords: css dot leader, css flexbox
----
-
-## HTML
-
-```html
-
-
-
...
-
-
-
-
-
-
...
-
+
+
...
+
+
+
+
+
+
...
+
+```css placeholders.css hidden
+.circle {
+ background: #d1d5db;
+ border-radius: 9999px;
+ height: var(--circle-size);
+ width: var(--circle-size);
+}
+.circle--sm {
+ --circle-size: 0.5rem;
+}
+.circle--md {
+ --circle-size: 1.5rem;
+}
+.circle--lg {
+ --circle-size: 4rem;
+}
+.rectangle {
+ background: #d1d5db;
+ border-radius: 0.25rem;
+ height: var(--rectangle-height);
+ width: var(--rectangle-width);
+}
+.rectangle--hor.rectangle--20 {
+ --rectangle-width: 20%;
+}
+.rectangle--hor.rectangle--40 {
+ --rectangle-width: 40%;
+}
+.rectangle--hor.rectangle--60 {
+ --rectangle-width: 60%;
+}
+.rectangle--hor.rectangle--80 {
+ --rectangle-width: 80%;
+}
+.rectangle--hor.rectangle--100 {
+ --rectangle-width: 100%;
+}
+.rectangle--hor.rectangle--sm {
+ --rectangle-height: 0.5rem;
+}
+.rectangle--hor.rectangle--md {
+ --rectangle-height: 2rem;
+}
+.rectangle--hor.rectangle--lg {
+ --rectangle-height: 4rem;
+}
+.rectangle--ver.rectangle--20 {
+ --rectangle-height: 20%;
+}
+.rectangle--ver.rectangle--40 {
+ --rectangle-height: 40%;
+}
+.rectangle--ver.rectangle--60 {
+ --rectangle-height: 60%;
+}
+.rectangle--ver.rectangle--80 {
+ --rectangle-height: 80%;
+}
+.rectangle--ver.rectangle--100 {
+ --rectangle-height: 100%;
+}
+.rectangle--ver.rectangle--sm {
+ --rectangle-width: 0.5rem;
+}
+.rectangle--ver.rectangle--md {
+ --rectangle-width: 2rem;
+}
+.rectangle--ver.rectangle--lg {
+ --rectangle-width: 4rem;
+}
+```
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+.dot-leader {
+ width: 16rem;
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ margin: 1rem 0;
+}
+
+.dot-leader__dots {
+ /* Bottom border */
+ border-bottom: 1px dotted #d1d5db;
+
+ /* Take remaining width */
+ flex: 1;
+
+ /* Spacing */
+ margin: 0 0.25rem;
+}
+```
+
+```html index.html hidden
+
+
+
+
+
+
+
+
+
+```
+
diff --git a/contents/dot-navigation.md b/contents/dot-navigation.md
deleted file mode 100644
index b935dfb..0000000
--- a/contents/dot-navigation.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-layout: layouts/post.njk
-title: Dot navigation
-description: Create dot navigation with CSS flexbox
-keywords: css dot navigation, css flexbox
----
-
-## HTML
-
-```html
-
-```
-
-## 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 %}
diff --git a/contents/dot-navigation.mdx b/contents/dot-navigation.mdx
new file mode 100644
index 0000000..366d76a
--- /dev/null
+++ b/contents/dot-navigation.mdx
@@ -0,0 +1,104 @@
+---
+category: Navigation
+created: '2019-11-22'
+description: Create dot navigation with CSS flexbox
+keywords: css dot navigation, css flexbox
+thumbnail: /assets/css-layout/thumbnails/dot-navigation.png
+title: Dot navigation
+---
+
+## HTML
+
+```html
+
+```
+
+## 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;
+}
+```
+
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+
+.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;
+}
+
+.dot-navigation__item--active {
+ background-color: #d1d5db;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/drawer.md b/contents/drawer.md
deleted file mode 100644
index cb46e0a..0000000
--- a/contents/drawer.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-layout: layouts/post.njk
-title: Drawer
-description: Create a drawer navigation with CSS
-keywords: css drawer, css off-canvas
----
-
-This pattern is also known as off-canvas.
-
-## HTML
-
-```html
-
-```
-
-## CSS
-
-```css
-.drawer {
- /* Take full size */
- height: 100%;
- left: 0;
- position: fixed;
- top: 0;
- width: 100%;
-
- z-index: 9999;
-}
-
-.drawer__overlay {
- /* Take full size */
- height: 100%;
- left: 0;
- position: fixed;
- top: 0;
- width: 100%;
-
- /* User still can see the content of main page */
- background-color: rgba(0, 0, 0, 0.5);
-
- z-index: -1;
-}
-
-.drawer__sidebar {
- /* Take full height */
- height: 100%;
- left: 0;
- position: fixed;
- top: 0;
- width: 200px;
-
- /* Background */
- background-color: #fff;
-}
-```
-
-{% demo %}{% include "covers/drawer.njk" %}{% enddemo %}
diff --git a/contents/drawer.mdx b/contents/drawer.mdx
new file mode 100644
index 0000000..b08c5f7
--- /dev/null
+++ b/contents/drawer.mdx
@@ -0,0 +1,139 @@
+---
+category: Navigation
+created: '2019-12-13'
+description: Create a drawer navigation with CSS
+keywords: css drawer, css off-canvas
+thumbnail: /assets/css-layout/thumbnails/drawer.png
+title: Drawer
+---
+
+This pattern is also known as off-canvas.
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.drawer {
+ /* Take full size */
+ height: 100%;
+ left: 0;
+ position: fixed;
+ top: 0;
+ width: 100%;
+
+ z-index: 9999;
+}
+
+.drawer__overlay {
+ /* Take full size */
+ height: 100%;
+ left: 0;
+ position: fixed;
+ top: 0;
+ width: 100%;
+
+ /* User still can see the content of main page */
+ background-color: rgba(0, 0, 0, 0.5);
+
+ z-index: -1;
+}
+
+.drawer__sidebar {
+ /* Take full height */
+ height: 100%;
+ left: 0;
+ position: fixed;
+ top: 0;
+ width: 200px;
+
+ /* Background */
+ background-color: #fff;
+}
+```
+
+
+```css placeholders.css hidden
+.lines {
+ padding: 0.25rem 0;
+ width: 100%;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+}
+.line {
+ background: #d1d5db;
+ height: 1px;
+ margin-bottom: 0.25rem;
+}
+.line.line--20 {
+ width: 20%;
+}
+.line.line--40 {
+ width: 40%;
+}
+.line.line--60 {
+ width: 60%;
+}
+.line.line--80 {
+ width: 80%;
+}
+.line.line--100 {
+ width: 100%;
+}
+```
+
+```css styles.css hidden
+body {
+ height: 24rem;
+}
+
+.drawer {
+ /* Demo */
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ height: 100%;
+ width: 100%;
+
+ display: flex;
+}
+
+.drawer__sidebar {
+ /* Demo */
+ border-right: 1px solid #d1d5db;
+ width: 25%;
+}
+
+.drawer__overlay {
+ /* Demo */
+ background: #4b5563;
+ flex: 1;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/drop-area.md b/contents/drop-area.md
deleted file mode 100644
index 984d26f..0000000
--- a/contents/drop-area.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-layout: layouts/post.njk
-title: Drop area
-description: Create a dropping area with CSS flexbox
-keywords: css dropping area, css flexbox
----
-
-## HTML
-
-```html
-...
-```
-
-## CSS
-
-```css
-.drop-area {
- /* Center the content */
- align-items: center;
- display: flex;
- justify-content: center;
-
- /* Border */
- border: 0.25rem dashed #d1d5db;
- border-radius: 0.25rem;
-}
-```
-
-{% demo %}
-{% include "covers/drop-area.njk" %}
-{% enddemo %}
diff --git a/contents/drop-area.mdx b/contents/drop-area.mdx
new file mode 100644
index 0000000..07bfdfc
--- /dev/null
+++ b/contents/drop-area.mdx
@@ -0,0 +1,95 @@
+---
+category: Display
+created: '2019-11-27'
+description: Create a dropping area with CSS flexbox
+keywords: css dropping area, css flexbox
+thumbnail: /assets/css-layout/thumbnails/drop-area.png
+title: Drop area
+---
+
+## HTML
+
+```html
+...
+```
+
+## CSS
+
+```css
+.drop-area {
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ /* Border */
+ border: 0.25rem dashed #d1d5db;
+ border-radius: 0.25rem;
+}
+```
+
+
+```css placeholders.css hidden
+.lines {
+ padding: 0.25rem 0;
+ width: 100%;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+}
+.line {
+ background: #d1d5db;
+ height: 1px;
+ margin-bottom: 0.25rem;
+}
+.line.line--20 {
+ width: 20%;
+}
+.line.line--40 {
+ width: 40%;
+}
+.line.line--60 {
+ width: 60%;
+}
+.line.line--80 {
+ width: 80%;
+}
+.line.line--100 {
+ width: 100%;
+}
+```
+
+```css styles.css hidden
+body {
+ height: 24rem;
+}
+
+.drop-area {
+ padding: 0.5rem;
+ height: 100%;
+ width: 100%;
+
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ /* Border */
+ border: 0.25rem dashed #d1d5db;
+ border-radius: 0.25rem;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/drop-cap.md b/contents/drop-cap.md
deleted file mode 100644
index 131218e..0000000
--- a/contents/drop-cap.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-layout: layouts/post.njk
-title: Drop cap
-description: Create a drop cap with CSS
-keywords: css drop cap, css :first-letter
----
-
-## HTML
-
-```html
-...
-```
-
-## CSS
-
-```css
-.drop-cap:first-letter {
- /* Display at the left */
- float: left;
- line-height: 1;
-
- /* Spacing */
- margin: 0 0.5rem 0 0;
- padding: 0 0.5rem;
-
- /* Optional */
- border: 2px solid #d1d5db;
- font-size: 2rem;
- font-weight: 700;
-}
-```
-
-{% demo %}
-{% include "covers/drop-cap.njk" %}
-{% enddemo %}
diff --git a/contents/drop-cap.mdx b/contents/drop-cap.mdx
new file mode 100644
index 0000000..fd85271
--- /dev/null
+++ b/contents/drop-cap.mdx
@@ -0,0 +1,67 @@
+---
+category: Display
+created: '2019-11-29'
+description: Create a drop cap with CSS
+keywords: css drop cap, css :first-letter
+thumbnail: /assets/css-layout/thumbnails/drop-cap.png
+title: Drop cap
+---
+
+## HTML
+
+```html
+...
+```
+
+## CSS
+
+```css
+.drop-cap:first-letter {
+ /* Display at the left */
+ float: left;
+ line-height: 1;
+
+ /* Spacing */
+ margin: 0 0.5rem 0 0;
+ padding: 0 0.5rem;
+
+ /* Optional */
+ border: 2px solid #d1d5db;
+ font-size: 2rem;
+ font-weight: 700;
+}
+```
+
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+.drop-cap {
+ overflow: hidden;
+}
+.drop-cap:first-letter {
+ border: 2px solid #d1d5db;
+
+ /* Display at the left */
+ float: left;
+ line-height: 1;
+
+ /* Spacing */
+ margin: 0 0.5rem 0 0;
+ padding: 0 0.5rem;
+
+ /* Optional */
+ font-size: 2rem;
+ font-weight: 700;
+}
+```
+
+```html index.html hidden
+
+ 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.
+
+```
+
diff --git a/contents/dropdown.md b/contents/dropdown.md
deleted file mode 100644
index a78a377..0000000
--- a/contents/dropdown.md
+++ /dev/null
@@ -1,56 +0,0 @@
----
-layout: layouts/post.njk
-title: Dropdown
-description: Create a dropdown with CSS
-keywords: css dropdown, css menu
----
-
-## HTML
-
-```html
-
-```
-
-## CSS
-
-```css
-.dropdown {
- position: relative;
-}
-
-.dropdown__trigger {
- cursor: pointer;
-}
-
-/* Hide the dropdown's content by default */
-.dropdown__content {
- display: none;
-
- /* Position it right below the trigger element */
- left: 0;
- padding-top: 0.25rem;
- position: absolute;
- top: 100%;
-
- /* It should be on the top of other elements */
- background-color: #fff;
- z-index: 9999;
-}
-
-/* Show the content when hover on the container */
-.dropdown:hover .dropdown__content {
- display: block;
-}
-```
-
-You can use a [triangle button](/triangle-buttons/) to indicate that there is content under it.
-
-Move the mouse over the button to see the dropdown.
-
-{% demo %}{% include "covers/dropdown.njk" %}{% enddemo %}
diff --git a/contents/dropdown.mdx b/contents/dropdown.mdx
new file mode 100644
index 0000000..f5a8ebe
--- /dev/null
+++ b/contents/dropdown.mdx
@@ -0,0 +1,271 @@
+---
+category: Navigation
+created: '2019-11-29'
+description: Create a dropdown with CSS
+keywords: css dropdown, css menu
+thumbnail: /assets/css-layout/thumbnails/dropdown.png
+title: Dropdown
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.dropdown {
+ position: relative;
+}
+
+.dropdown__trigger {
+ cursor: pointer;
+}
+
+/* Hide the dropdown's content by default */
+.dropdown__content {
+ display: none;
+
+ /* Position it right below the trigger element */
+ left: 0;
+ padding-top: 0.25rem;
+ position: absolute;
+ top: 100%;
+
+ /* It should be on the top of other elements */
+ background-color: #fff;
+ z-index: 9999;
+}
+
+/* Show the content when hover on the container */
+.dropdown:hover .dropdown__content {
+ display: block;
+}
+```
+
+You can use a [triangle button](https://phuoc.ng/collection/css-layout/triangle-buttons) to indicate that there is content under it.
+
+Move the mouse over the button to see the dropdown.
+
+
+```css placeholders.css hidden
+.lines {
+ padding: 0.25rem 0;
+ width: 100%;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+}
+.line {
+ background: #d1d5db;
+ height: 1px;
+ margin-bottom: 0.25rem;
+}
+.line.line--20 {
+ width: 20%;
+}
+.line.line--40 {
+ width: 40%;
+}
+.line.line--60 {
+ width: 60%;
+}
+.line.line--80 {
+ width: 80%;
+}
+.line.line--100 {
+ width: 100%;
+}
+.rectangle {
+ background: #d1d5db;
+ border-radius: 0.25rem;
+ height: var(--rectangle-height);
+ width: var(--rectangle-width);
+}
+.rectangle--hor.rectangle--20 {
+ --rectangle-width: 20%;
+}
+.rectangle--hor.rectangle--40 {
+ --rectangle-width: 40%;
+}
+.rectangle--hor.rectangle--60 {
+ --rectangle-width: 60%;
+}
+.rectangle--hor.rectangle--80 {
+ --rectangle-width: 80%;
+}
+.rectangle--hor.rectangle--100 {
+ --rectangle-width: 100%;
+}
+.rectangle--hor.rectangle--sm {
+ --rectangle-height: 0.5rem;
+}
+.rectangle--hor.rectangle--md {
+ --rectangle-height: 2rem;
+}
+.rectangle--hor.rectangle--lg {
+ --rectangle-height: 4rem;
+}
+.rectangle--ver.rectangle--20 {
+ --rectangle-height: 20%;
+}
+.rectangle--ver.rectangle--40 {
+ --rectangle-height: 40%;
+}
+.rectangle--ver.rectangle--60 {
+ --rectangle-height: 60%;
+}
+.rectangle--ver.rectangle--80 {
+ --rectangle-height: 80%;
+}
+.rectangle--ver.rectangle--100 {
+ --rectangle-height: 100%;
+}
+.rectangle--ver.rectangle--sm {
+ --rectangle-width: 0.5rem;
+}
+.rectangle--ver.rectangle--md {
+ --rectangle-width: 2rem;
+}
+.rectangle--ver.rectangle--lg {
+ --rectangle-width: 4rem;
+}
+.triangle {
+ border-style: solid;
+ height: 0;
+ width: 0;
+}
+.triangle--t {
+ border-color: transparent transparent #d1d5db transparent;
+ border-width: 0 var(--triangle-size) var(--triangle-size) var(--triangle-size);
+}
+.triangle--r {
+ border-color: transparent transparent transparent #d1d5db;
+ border-width: var(--triangle-size) 0 var(--triangle-size) 1rem;
+}
+.triangle--b {
+ border-color: #d1d5db transparent transparent transparent;
+ border-width: var(--triangle-size) var(--triangle-size) 0 var(--triangle-size);
+}
+.triangle--l {
+ border-color: transparent #d1d5db transparent transparent;
+ border-width: var(--triangle-size) 1rem var(--triangle-size) 0;
+}
+.triangle--tr {
+ border-color: transparent #d1d5db transparent transparent;
+ border-width: 0 var(--triangle-size) var(--triangle-size) 0;
+}
+.triangle--br {
+ border-color: transparent transparent #d1d5db transparent;
+ border-width: 0 0 var(--triangle-size) var(--triangle-size);
+}
+.triangle--bl {
+ border-color: transparent transparent transparent #d1d5db;
+ border-width: var(--triangle-size) 0 0 var(--triangle-size);
+}
+.triangle--tl {
+ border-color: #d1d5db transparent transparent transparent;
+ border-width: var(--triangle-size) var(--triangle-size) 0 0;
+}
+.triangle--sm {
+ --triangle-size: 0.5rem;
+}
+.triangle--md {
+ --triangle-size: 2rem;
+}
+.triangle--lg {
+ --triangle-size: 4rem;
+}
+```
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ height: 24rem;
+}
+.dropdown {
+ position: relative;
+
+ /* Demo */
+ width: 6rem;
+
+ align-items: flex-start;
+ display: flex;
+ justify-content: center;
+}
+
+.dropdown__trigger {
+ cursor: pointer;
+
+ /* Demo */
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ height: 2rem;
+ width: 6rem;
+ padding: 0.25rem 0.5rem;
+
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+
+/* Hide the dropdown's content by default */
+.dropdown__content {
+ display: none;
+
+ /* Position it right below the trigger element */
+ left: 0;
+ padding-top: 0.25rem;
+ position: absolute;
+ top: 100%;
+
+ /* It should be on the top of other elements */
+ background-color: #fff;
+ z-index: 9999;
+}
+
+.dropdown__body {
+ /* Demo */
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ height: 6rem;
+ width: 8rem;
+}
+
+/* Show the content when hover on the container */
+.dropdown:hover .dropdown__content {
+ display: block;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/fading-long-section.md b/contents/fading-long-section.md
deleted file mode 100644
index bbe3ab2..0000000
--- a/contents/fading-long-section.md
+++ /dev/null
@@ -1,53 +0,0 @@
----
-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
-
-```
-
-## 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 "covers/fading-long-section.njk" %}
-{% enddemo %}
diff --git a/contents/fading-long-section.mdx b/contents/fading-long-section.mdx
new file mode 100644
index 0000000..abf7743
--- /dev/null
+++ b/contents/fading-long-section.mdx
@@ -0,0 +1,179 @@
+---
+category: Display
+created: '2020-01-10'
+description: Fading long section to indicate there is more content
+keywords: css fading overflow, css linear gradient
+thumbnail: /assets/css-layout/thumbnails/fading-long-section.png
+title: Fading long section
+---
+
+The pattern is often used to indicate there is more content.
+
+## HTML
+
+```html
+
+```
+
+## 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);
+}
+```
+
+
+```css placeholders.css hidden
+.rectangle {
+ background: #d1d5db;
+ border-radius: 0.25rem;
+ margin: 0.5rem 0;
+ height: var(--rectangle-height);
+ width: var(--rectangle-width);
+}
+.rectangle--hor.rectangle--20 {
+ --rectangle-width: 20%;
+}
+.rectangle--hor.rectangle--40 {
+ --rectangle-width: 40%;
+}
+.rectangle--hor.rectangle--60 {
+ --rectangle-width: 60%;
+}
+.rectangle--hor.rectangle--80 {
+ --rectangle-width: 80%;
+}
+.rectangle--hor.rectangle--100 {
+ --rectangle-width: 100%;
+}
+.rectangle--hor.rectangle--sm {
+ --rectangle-height: 0.5rem;
+}
+.rectangle--hor.rectangle--md {
+ --rectangle-height: 2rem;
+}
+.rectangle--hor.rectangle--lg {
+ --rectangle-height: 4rem;
+}
+.rectangle--ver.rectangle--20 {
+ --rectangle-height: 20%;
+}
+.rectangle--ver.rectangle--40 {
+ --rectangle-height: 40%;
+}
+.rectangle--ver.rectangle--60 {
+ --rectangle-height: 60%;
+}
+.rectangle--ver.rectangle--80 {
+ --rectangle-height: 80%;
+}
+.rectangle--ver.rectangle--100 {
+ --rectangle-height: 100%;
+}
+.rectangle--ver.rectangle--sm {
+ --rectangle-width: 0.5rem;
+}
+.rectangle--ver.rectangle--md {
+ --rectangle-width: 2rem;
+}
+.rectangle--ver.rectangle--lg {
+ --rectangle-width: 4rem;
+}
+```
+
+```css styles.css hidden
+.fading-long-section {
+ /* Used to position the faded element */
+ position: relative;
+
+ height: 24rem;
+}
+
+.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);
+}
+```
+
+```html index.html hidden
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/contents/feature-comparison.md b/contents/feature-comparison.md
deleted file mode 100644
index 217ed97..0000000
--- a/contents/feature-comparison.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-layout: layouts/post.njk
-title: Feature comparison
-description: Create a feature comparison list with CSS flexbox
-keywords: css feature comparison, css flexbox
----
-
-## HTML
-
-```html
-
-
-
...
-
-
-
-
- ...
-
-
-
- ...
-
+
+
...
+
+
+
+
+ ...
+
+
+
+ ...
+
+```css placeholders.css hidden
+.circle {
+ background: #d1d5db;
+ border-radius: 9999px;
+ height: var(--circle-size);
+ width: var(--circle-size);
+}
+.circle--sm {
+ --circle-size: 0.5rem;
+}
+.circle--md {
+ --circle-size: 1.5rem;
+}
+.circle--lg {
+ --circle-size: 4rem;
+}
+.lines {
+ padding: 0.25rem 0;
+ width: 100%;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+}
+.line {
+ background: #d1d5db;
+ height: 1px;
+ margin-bottom: 0.25rem;
+}
+.line.line--20 {
+ width: 20%;
+}
+.line.line--40 {
+ width: 40%;
+}
+.line.line--60 {
+ width: 60%;
+}
+.line.line--80 {
+ width: 80%;
+}
+.line.line--100 {
+ width: 100%;
+}
+.rectangle {
+ background: #d1d5db;
+ border-radius: 0.25rem;
+ height: var(--rectangle-height);
+ width: var(--rectangle-width);
+}
+.rectangle--hor.rectangle--20 {
+ --rectangle-width: 20%;
+}
+.rectangle--hor.rectangle--40 {
+ --rectangle-width: 40%;
+}
+.rectangle--hor.rectangle--60 {
+ --rectangle-width: 60%;
+}
+.rectangle--hor.rectangle--80 {
+ --rectangle-width: 80%;
+}
+.rectangle--hor.rectangle--100 {
+ --rectangle-width: 100%;
+}
+.rectangle--hor.rectangle--sm {
+ --rectangle-height: 0.5rem;
+}
+.rectangle--hor.rectangle--md {
+ --rectangle-height: 2rem;
+}
+.rectangle--hor.rectangle--lg {
+ --rectangle-height: 4rem;
+}
+.rectangle--ver.rectangle--20 {
+ --rectangle-height: 20%;
+}
+.rectangle--ver.rectangle--40 {
+ --rectangle-height: 40%;
+}
+.rectangle--ver.rectangle--60 {
+ --rectangle-height: 60%;
+}
+.rectangle--ver.rectangle--80 {
+ --rectangle-height: 80%;
+}
+.rectangle--ver.rectangle--100 {
+ --rectangle-height: 100%;
+}
+.rectangle--ver.rectangle--sm {
+ --rectangle-width: 0.5rem;
+}
+.rectangle--ver.rectangle--md {
+ --rectangle-width: 2rem;
+}
+.rectangle--ver.rectangle--lg {
+ --rectangle-width: 4rem;
+}
+```
+
+```css styles.css hidden
+.feature-comparison {
+ align-items: center;
+ display: flex;
+
+ /* Bottom border */
+ border-bottom: 1px solid #d1d5db;
+
+ /* Spacing */
+ padding: 0.25rem 0;
+
+ width: 100%;
+}
+
+.feature-comparison__feature {
+ /* Take available width */
+ flex: 1;
+}
+
+.feature-comparison__model {
+ /* Center the content */
+ display: flex;
+ justify-content: center;
+
+ /* Demo */
+ width: 1.5rem;
+}
+```
+
+```html index.html hidden
+
+
+
+
+
+
+
+```
+
diff --git a/contents/feature-list.md b/contents/feature-list.md
deleted file mode 100644
index 30495a3..0000000
--- a/contents/feature-list.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-layout: layouts/post.njk
-title: Feature list
-description: Create a feature list with CSS flexbox
-keywords: css feature list, css flexbox
----
-
-## HTML
-
-```html
-
-
-
-
-...
-```
-
-## CSS
-
-```css
-.feature-list {
- display: flex;
-
- /* OPTIONAL: Spacing between items */
- margin: 0.5rem 0;
-}
-
-/* Reverse the order of image and content */
-.feature-list--reverse {
- flex-direction: row-reverse;
-}
-
-.feature-list__image {
- width: 2rem;
-}
-
-.feature-list__desc {
- /* Take the remaining width */
- flex: 1;
-}
-```
-
-{% demo %}
-{% include "covers/feature-list.njk" %}
-{% enddemo %}
diff --git a/contents/feature-list.mdx b/contents/feature-list.mdx
new file mode 100644
index 0000000..b4591fa
--- /dev/null
+++ b/contents/feature-list.mdx
@@ -0,0 +1,156 @@
+---
+category: Display
+created: '2019-11-21'
+description: Create a feature list with CSS flexbox
+keywords: css feature list, css flexbox
+thumbnail: /assets/css-layout/thumbnails/feature-list.png
+title: Feature list
+---
+
+## HTML
+
+```html
+
+
+
+
+...
+```
+
+## CSS
+
+```css
+.feature-list {
+ display: flex;
+
+ /* OPTIONAL: Spacing between items */
+ margin: 0.5rem 0;
+}
+
+/* Reverse the order of image and content */
+.feature-list--reverse {
+ flex-direction: row-reverse;
+}
+
+.feature-list__image {
+ width: 2rem;
+}
+
+.feature-list__desc {
+ /* Take the remaining width */
+ flex: 1;
+}
+```
+
+
+```css placeholders.css hidden
+.circle {
+ background: #d1d5db;
+ border-radius: 9999px;
+ height: var(--circle-size);
+ width: var(--circle-size);
+}
+.circle--sm {
+ --circle-size: 0.5rem;
+}
+.circle--md {
+ --circle-size: 1.5rem;
+}
+.circle--lg {
+ --circle-size: 4rem;
+}
+.lines {
+ padding: 0.25rem 0;
+ width: 100%;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+}
+.line {
+ background: #d1d5db;
+ height: 1px;
+ margin-bottom: 0.25rem;
+}
+.line.line--20 {
+ width: 20%;
+}
+.line.line--40 {
+ width: 40%;
+}
+.line.line--60 {
+ width: 60%;
+}
+.line.line--80 {
+ width: 80%;
+}
+.line.line--100 {
+ width: 100%;
+}
+```
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+.feature-list {
+ display: flex;
+
+ /* OPTIONAL: Spacing between items */
+ margin: 0.5rem 0;
+ width: 16rem;
+}
+
+.feature-list--reverse {
+ flex-direction: row-reverse;
+}
+
+.feature-list__image {
+ width: 2rem;
+}
+
+.feature-list__desc {
+ /* Take the remaining width */
+ flex: 1;
+}
+```
+
+```html index.html hidden
+
+
+```
+
diff --git a/contents/fixed-at-corner.md b/contents/fixed-at-corner.md
deleted file mode 100644
index 6e2d44e..0000000
--- a/contents/fixed-at-corner.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-layout: layouts/post.njk
-title: Fixed at corner
-description: Fix an element at corner with CSS
-keywords: css fixed
----
-
-## HTML
-
-```html
-
-
-
...
-
-
-
...
-
-
-
...
-
-
-
...
-
+
+
...
+
+
+
...
+
+
+
...
+
+
+
...
+
+```css placeholders.css hidden
+.triangle {
+ border-style: solid;
+ height: 0;
+ width: 0;
+}
+.triangle--t {
+ border-color: transparent transparent #d1d5db transparent;
+ border-width: 0 var(--triangle-size) var(--triangle-size) var(--triangle-size);
+}
+.triangle--r {
+ border-color: transparent transparent transparent #d1d5db;
+ border-width: var(--triangle-size) 0 var(--triangle-size) 1rem;
+}
+.triangle--b {
+ border-color: #d1d5db transparent transparent transparent;
+ border-width: var(--triangle-size) var(--triangle-size) 0 var(--triangle-size);
+}
+.triangle--l {
+ border-color: transparent #d1d5db transparent transparent;
+ border-width: var(--triangle-size) 1rem var(--triangle-size) 0;
+}
+.triangle--tr {
+ border-color: transparent #d1d5db transparent transparent;
+ border-width: 0 var(--triangle-size) var(--triangle-size) 0;
+}
+.triangle--br {
+ border-color: transparent transparent #d1d5db transparent;
+ border-width: 0 0 var(--triangle-size) var(--triangle-size);
+}
+.triangle--bl {
+ border-color: transparent transparent transparent #d1d5db;
+ border-width: var(--triangle-size) 0 0 var(--triangle-size);
+}
+.triangle--tl {
+ border-color: #d1d5db transparent transparent transparent;
+ border-width: var(--triangle-size) var(--triangle-size) 0 0;
+}
+.triangle--sm {
+ --triangle-size: 0.5rem;
+}
+.triangle--md {
+ --triangle-size: 2rem;
+}
+.triangle--lg {
+ --triangle-size: 4rem;
+}
+```
+
+```css styles.css hidden
+body {
+ height: 24rem;
+}
+.fixed-at-corner {
+ width: 100%;
+ height: 100%;
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+
+ position: relative;
+}
+
+.fixed-at-corner__corner {
+ position: absolute;
+}
+
+.fixed-at-corner__corner--tl {
+ left: 0;
+ top: 0;
+}
+
+.fixed-at-corner__corner--tr {
+ top: 0;
+ right: 0;
+}
+
+.fixed-at-corner__corner--br {
+ bottom: 0;
+ right: 0;
+}
+
+.fixed-at-corner__corner--bl {
+ bottom: 0;
+ left: 0;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/fixed-at-side.md b/contents/fixed-at-side.md
deleted file mode 100644
index ef93347..0000000
--- a/contents/fixed-at-side.md
+++ /dev/null
@@ -1,36 +0,0 @@
----
-layout: layouts/post.njk
-title: Fixed at side
-description: Fix an element at the middle of side with CSS
-keywords: css fixed
----
-
-## HTML
-
-```html
-
-...
-
-
-...
-```
-
-## CSS
-
-```css
-.fixed-at-side {
- position: fixed;
- top: 50%;
- transform: translate(0px, -50%);
-}
-.fixed-at-side--l {
- left: 0;
-}
-.fixed-at-side--r {
- right: 0;
-}
-```
-
-{% demo %}
-{% include "covers/fixed-at-side.njk" %}
-{% enddemo %}
diff --git a/contents/fixed-at-side.mdx b/contents/fixed-at-side.mdx
new file mode 100644
index 0000000..6cb710e
--- /dev/null
+++ b/contents/fixed-at-side.mdx
@@ -0,0 +1,128 @@
+---
+category: Display
+created: '2019-12-21'
+description: Fix an element at the middle of side with CSS
+keywords: css fixed
+thumbnail: /assets/css-layout/thumbnails/fixed-at-side.png
+title: Fixed at side
+---
+
+## HTML
+
+```html
+
+...
+
+
+...
+```
+
+## CSS
+
+```css
+.fixed-at-side {
+ position: fixed;
+ top: 50%;
+ transform: translate(0px, -50%);
+}
+.fixed-at-side--l {
+ left: 0;
+}
+.fixed-at-side--r {
+ right: 0;
+}
+```
+
+
+```css placeholders.css hidden
+.rectangle {
+ background: #d1d5db;
+ border-radius: 0.25rem;
+ height: var(--rectangle-height);
+ width: var(--rectangle-width);
+}
+.rectangle--hor.rectangle--20 {
+ --rectangle-width: 20%;
+}
+.rectangle--hor.rectangle--40 {
+ --rectangle-width: 40%;
+}
+.rectangle--hor.rectangle--60 {
+ --rectangle-width: 60%;
+}
+.rectangle--hor.rectangle--80 {
+ --rectangle-width: 80%;
+}
+.rectangle--hor.rectangle--100 {
+ --rectangle-width: 100%;
+}
+.rectangle--hor.rectangle--sm {
+ --rectangle-height: 0.5rem;
+}
+.rectangle--hor.rectangle--md {
+ --rectangle-height: 2rem;
+}
+.rectangle--hor.rectangle--lg {
+ --rectangle-height: 4rem;
+}
+.rectangle--ver.rectangle--20 {
+ --rectangle-height: 20%;
+}
+.rectangle--ver.rectangle--40 {
+ --rectangle-height: 40%;
+}
+.rectangle--ver.rectangle--60 {
+ --rectangle-height: 60%;
+}
+.rectangle--ver.rectangle--80 {
+ --rectangle-height: 80%;
+}
+.rectangle--ver.rectangle--100 {
+ --rectangle-height: 100%;
+}
+.rectangle--ver.rectangle--sm {
+ --rectangle-width: 0.5rem;
+}
+.rectangle--ver.rectangle--md {
+ --rectangle-width: 2rem;
+}
+.rectangle--ver.rectangle--lg {
+ --rectangle-width: 4rem;
+}
+```
+
+```css styles.css hidden
+body {
+ height: 24rem;
+}
+
+.fixed-at-side {
+ width: 100%;
+ height: 100%;
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+
+ position: relative;
+}
+
+.fixed-at-side__side {
+ height: 40%;
+ position: absolute;
+ top: 50%;
+ transform: translate(0px, -50%);
+}
+.fixed-at-side__side--l {
+ left: 0;
+}
+.fixed-at-side__side--r {
+ right: 0;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/floating-label.md b/contents/floating-label.md
deleted file mode 100644
index 910fa29..0000000
--- a/contents/floating-label.md
+++ /dev/null
@@ -1,61 +0,0 @@
----
-layout: layouts/post.njk
-title: Floating label
-description: Create a floating label with CSS
-keywords: css floating label, placeholder shown
----
-
-## HTML
-
-```html
-
-
- Placeholder
-
-```
-
-## CSS
-
-```css
-.floating-label {
- border: 1px solid #d1d5db;
- border-radius: 0.25rem;
- position: relative;
-}
-
-.floating-label__input {
- border: none;
- padding: 0.5rem;
- height: 100%;
-}
-
-/*
-Show the label at desired position when the
-placeholder of input isn't shown
-*/
-.floating-label__input:not(:placeholder-shown) + .floating-label__label {
- background: #fff;
- transform: translate(0, -200%);
- opacity: 1;
-}
-
-.floating-label__label {
- /* Position the label */
- left: 1rem;
- position: absolute;
- top: 100%;
-
- /* Hide it by default */
- opacity: 0;
- transition: all 200ms;
-
- padding: 0 0.5rem;
-}
-```
-
-Type something in the input to see how the label is shown up.
-
-{% demo %}{% include "covers/floating-label.njk" %}{% enddemo %}
diff --git a/contents/floating-label.mdx b/contents/floating-label.mdx
new file mode 100644
index 0000000..b1ff32e
--- /dev/null
+++ b/contents/floating-label.mdx
@@ -0,0 +1,117 @@
+---
+category: Input
+created: '2019-11-28'
+description: Create a floating label with CSS
+keywords: css floating label, placeholder shown
+thumbnail: /assets/css-layout/thumbnails/floating-label.png
+title: Floating label
+---
+
+## HTML
+
+```html
+
+
+ Placeholder
+
+```
+
+## CSS
+
+```css
+.floating-label {
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ position: relative;
+}
+
+.floating-label__input {
+ border: none;
+ padding: 0.5rem;
+ height: 100%;
+}
+
+/*
+Show the label at desired position when the
+placeholder of input isn't shown
+*/
+.floating-label__input:not(:placeholder-shown) + .floating-label__label {
+ background: #fff;
+ transform: translate(0, -200%);
+ opacity: 1;
+}
+
+.floating-label__label {
+ /* Position the label */
+ left: 1rem;
+ position: absolute;
+ top: 100%;
+
+ /* Hide it by default */
+ opacity: 0;
+ transition: all 200ms;
+
+ padding: 0 0.5rem;
+}
+```
+
+Type something in the input to see how the label is shown up.
+
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+
+.floating-label {
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ position: relative;
+
+ /* Demo */
+ padding: 0px 1px;
+ height: 2.5rem;
+}
+
+.floating-label__input {
+ border: none;
+ padding: 0.5rem;
+ height: 100%;
+}
+
+/*
+Show the label at desired position when the
+placeholder of input isn't shown
+*/
+.floating-label__input:not(:placeholder-shown) + .floating-label__label {
+ background: #fff;
+ transform: translate(0, -200%);
+ opacity: 1;
+}
+
+.floating-label__label {
+ /* Position the label */
+ left: 1rem;
+ position: absolute;
+ top: 100%;
+
+ /* Hide it by default */
+ opacity: 0;
+ transition: all 200ms;
+
+ padding: 0 0.5rem;
+}
+```
+
+```html index.html hidden
+
+ Placeholder
+
+```
+
diff --git a/contents/folder-structure.md b/contents/folder-structure.md
deleted file mode 100644
index ddea9d9..0000000
--- a/contents/folder-structure.md
+++ /dev/null
@@ -1,97 +0,0 @@
----
-layout: layouts/post.njk
-title: Folder structure
-description: Create a folder structure with CSS
-keywords: css folder structure, css folder tree
----
-
-## HTML
-
-```html
-
-
-
-
- ...
-
-
-
-
-
- ...
-
-
-
-
- ...
- ...
-
-
-
-
- ...
-
-
+
+
+
+ ...
+
+
+
+
+
+ ...
+
+
+
+
+ ...
+ ...
+
+
+
+
+ ...
+
+
+```css placeholders.css hidden
+.square {
+ background: #d1d5db;
+ height: var(--square-size);
+ width: var(--square-size);
+}
+.square--sm {
+ --square-size: 0.5rem;
+}
+.square--md {
+ --square-size: 2rem;
+}
+.square--lg {
+ --square-size: 4rem;
+}
+```
+
+```css styles.css hidden
+:root {
+ --folder-structure-item-height: 0.5rem;
+ --folder-structure-item-margin-left: 2.25rem;
+ --folder-structure-item-padding-top: 0.5rem;
+}
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+
+.folder-structure ul {
+ /* Reset */
+ list-style-type: none;
+ margin: 0;
+}
+
+.folder-structure li {
+ padding: var(--folder-structure-item-padding-top) 0rem 0rem 0rem;
+ position: relative;
+}
+
+.folder-structure li::before {
+ border-left: 1px solid #d1d5db;
+ content: '';
+
+ /* Position */
+ left: 0;
+ position: absolute;
+ top: 0;
+ transform: translate(calc(-1 * var(--folder-structure-item-margin-left)), 0);
+
+ /* Size */
+ height: 100%;
+}
+
+.folder-structure li::after {
+ border-bottom: 1px solid #d1d5db;
+ content: '';
+
+ /* Position */
+ left: 0;
+ position: absolute;
+ top: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
+ transform: translate(-100%, 0);
+
+ /* Size */
+ width: var(--folder-structure-item-margin-left);
+}
+
+/* Remove the border from the last item */
+.folder-structure li:last-child::before {
+ height: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/full-background.md b/contents/full-background.md
deleted file mode 100644
index 0f6216d..0000000
--- a/contents/full-background.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-layout: layouts/post.njk
-title: Full background
-description: Create a full background element with CSS
-keywords: css background size cover, css full background
----
-
-## HTML
-
-```html
-...
-```
-
-## CSS
-
-```css
-.full-background {
- /* Center the content */
- align-items: center;
- display: flex;
- flex-direction: column;
- justify-content: center;
-
- /* Take full size */
- height: 100vh;
- width: 100%;
-
- /* Background */
- background: url('/assets/full-background.jpeg') center center / cover no-repeat;
-}
-```
-
-{% demo %}
-{% include "covers/full-background.njk" %}
-{% enddemo %}
diff --git a/contents/full-background.mdx b/contents/full-background.mdx
new file mode 100644
index 0000000..bd37419
--- /dev/null
+++ b/contents/full-background.mdx
@@ -0,0 +1,98 @@
+---
+category: Display
+created: '2020-01-18'
+description: Create a full background element with CSS
+keywords: css background size cover, css full background
+thumbnail: /assets/css-layout/thumbnails/full-background.png
+title: Full background
+---
+
+## HTML
+
+```html
+...
+```
+
+## CSS
+
+```css
+.full-background {
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ /* Take full size */
+ height: 100vh;
+ width: 100%;
+
+ /* Background */
+ background: url('/path/to/background.jpeg') center center / cover no-repeat;
+}
+```
+
+
+```css placeholders.css hidden
+.lines {
+ padding: 0.25rem 0;
+ width: 100%;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+}
+.line {
+ background: #d1d5db;
+ height: 1px;
+ margin-bottom: 0.25rem;
+}
+.line.line--20 {
+ width: 20%;
+}
+.line.line--40 {
+ width: 40%;
+}
+.line.line--60 {
+ width: 60%;
+}
+.line.line--80 {
+ width: 80%;
+}
+.line.line--100 {
+ width: 100%;
+}
+```
+
+```css styles.css hidden
+body {
+ height: 24rem;
+}
+
+.full-background {
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ /* Take full size */
+ height: 100%;
+ width: 100%;
+
+ background: url('/assets/css-layout/full-background.jpeg') center center / cover no-repeat;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/full-screen-menu.md b/contents/full-screen-menu.md
deleted file mode 100644
index e5a90cd..0000000
--- a/contents/full-screen-menu.md
+++ /dev/null
@@ -1,49 +0,0 @@
----
-layout: layouts/post.njk
-title: Full screen menu
-description: Create a full screen menu with CSS flexbox
-keywords: css fixed, css flexbox, css menu
----
-
-## HTML
-
-```html
-
-```
-
-## CSS
-
-```css
-.full-screen-menu {
- /* Full screen overlay */
- height: 100%;
- left: 0;
- position: fixed;
- top: 0;
- width: 100%;
-
- /* Center the content */
- align-items: center;
- display: flex;
- justify-content: center;
-}
-
-.full-screen-menu__close {
- /* Shown at top left corner */
- left: 1rem;
- position: absolute;
- top: 1rem;
-}
-```
-
-You can use the [close button](/close-button/) to create a button for closing the menu.
-
-{% demo %}{% include "covers/full-screen-menu.njk" %}{% enddemo %}
diff --git a/contents/full-screen-menu.mdx b/contents/full-screen-menu.mdx
new file mode 100644
index 0000000..6862e4d
--- /dev/null
+++ b/contents/full-screen-menu.mdx
@@ -0,0 +1,169 @@
+---
+category: Navigation
+created: '2019-11-30'
+description: Create a full screen menu with CSS flexbox
+keywords: css fixed, css flexbox, css menu
+thumbnail: /assets/css-layout/thumbnails/full-screen-menu.png
+title: Full screen menu
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.full-screen-menu {
+ /* Full screen overlay */
+ height: 100%;
+ left: 0;
+ position: fixed;
+ top: 0;
+ width: 100%;
+
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+
+.full-screen-menu__close {
+ /* Shown at top left corner */
+ left: 1rem;
+ position: absolute;
+ top: 1rem;
+}
+```
+
+You can use the [close button](https://phuoc.ng/collection/css-layout/close-button) to create a button for closing the menu.
+
+
+```css placeholders.css hidden
+.lines {
+ padding: 0.25rem 0;
+ width: 100%;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+}
+.line {
+ background: #d1d5db;
+ height: 1px;
+ margin-bottom: 0.25rem;
+}
+.line.line--20 {
+ width: 20%;
+}
+.line.line--40 {
+ width: 40%;
+}
+.line.line--60 {
+ width: 60%;
+}
+.line.line--80 {
+ width: 80%;
+}
+.line.line--100 {
+ width: 100%;
+}
+```
+
+```css styles.css hidden
+body {
+ height: 24rem;
+}
+
+.full-screen-menu {
+ /* Take full size */
+ height: 100%;
+ width: 100%;
+
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ position: relative;
+
+ background: #374151;
+}
+
+.full-screen-menu__close {
+ left: 0.5rem;
+ position: absolute;
+ top: 0.5rem;
+
+ /* Reset */
+ background-color: transparent;
+ border-color: transparent;
+
+ /* Cursor */
+ cursor: pointer;
+
+ /* Size */
+ height: 1rem;
+ width: 1rem;
+}
+
+.full-screen-menu__close::before,
+.full-screen-menu__close::after {
+ content: '';
+ /* Background color */
+ background-color: #d1d5db;
+
+ /* Position */
+ position: absolute;
+
+ /* Size */
+ height: 1px;
+ width: 100%;
+}
+
+.full-screen-menu__close::before {
+ /* Position */
+ left: 0px;
+ top: 50%;
+ transform: translate(0%, -50%) rotate(45deg);
+
+ /* Size */
+ height: 1px;
+ width: 100%;
+}
+
+.full-screen-menu__close::after {
+ /* Position */
+ left: 50%;
+ top: 0px;
+ transform: translate(-50%, 0%) rotate(45deg);
+
+ /* Size */
+ height: 100%;
+ width: 1px;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/holy-grail.md b/contents/holy-grail.md
deleted file mode 100644
index 6435cd3..0000000
--- a/contents/holy-grail.md
+++ /dev/null
@@ -1,58 +0,0 @@
----
-layout: layouts/post.njk
-title: Holy grail
-description: Create a holy grail layout with CSS flexbox
-keywords: css flexbox, css holy grail layout, css layout
----
-
-## HTML
-
-```html
-
-
-
-
-
-
-
- ...
-
-
- ...
-
-
-
+
+
+
+
+
+
+ ...
+
+
+ ...
+
+
+
+```css placeholders.css hidden
+.lines {
+ padding: 0.25rem 0;
+ width: 100%;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+}
+.line {
+ background: #d1d5db;
+ height: 1px;
+ margin-bottom: 0.25rem;
+}
+.line.line--20 {
+ width: 20%;
+}
+.line.line--40 {
+ width: 40%;
+}
+.line.line--60 {
+ width: 60%;
+}
+.line.line--80 {
+ width: 80%;
+}
+.line.line--100 {
+ width: 100%;
+}
+.rectangle {
+ background: #d1d5db;
+ border-radius: 0.25rem;
+ height: var(--rectangle-height);
+ width: var(--rectangle-width);
+}
+.rectangle--hor.rectangle--20 {
+ --rectangle-width: 20%;
+}
+.rectangle--hor.rectangle--40 {
+ --rectangle-width: 40%;
+}
+.rectangle--hor.rectangle--60 {
+ --rectangle-width: 60%;
+}
+.rectangle--hor.rectangle--80 {
+ --rectangle-width: 80%;
+}
+.rectangle--hor.rectangle--100 {
+ --rectangle-width: 100%;
+}
+.rectangle--hor.rectangle--sm {
+ --rectangle-height: 0.5rem;
+}
+.rectangle--hor.rectangle--md {
+ --rectangle-height: 2rem;
+}
+.rectangle--hor.rectangle--lg {
+ --rectangle-height: 4rem;
+}
+.rectangle--ver.rectangle--20 {
+ --rectangle-height: 20%;
+}
+.rectangle--ver.rectangle--40 {
+ --rectangle-height: 40%;
+}
+.rectangle--ver.rectangle--60 {
+ --rectangle-height: 60%;
+}
+.rectangle--ver.rectangle--80 {
+ --rectangle-height: 80%;
+}
+.rectangle--ver.rectangle--100 {
+ --rectangle-height: 100%;
+}
+.rectangle--ver.rectangle--sm {
+ --rectangle-width: 0.5rem;
+}
+.rectangle--ver.rectangle--md {
+ --rectangle-width: 2rem;
+}
+.rectangle--ver.rectangle--lg {
+ --rectangle-width: 4rem;
+}
+```
+
+```css styles.css hidden
+body {
+ height: 24rem;
+}
+
+.holy-grail {
+ display: flex;
+ flex-direction: column;
+
+ /* Demo */
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ height: 100%;
+ width: 100%;
+}
+
+.holy-grail__header,
+.holy-grail__footer {
+ padding: 0.25rem;
+}
+
+.holy-grail__main {
+ border-top: 1px solid #d1d5db;
+ border-bottom: 1px solid #d1d5db;
+
+ /* Take the remaining height */
+ flex-grow: 1;
+
+ /* Layout the left sidebar, main content and right sidebar */
+ display: flex;
+ flex-direction: row;
+}
+
+.holy-grail__left {
+ width: 25%;
+}
+
+.holy-grail__middle {
+ border-left: 1px solid #d1d5db;
+ border-right: 1px solid #d1d5db;
+
+ /* Take the remaining width */
+ flex-grow: 1;
+}
+
+.holy-grail__right {
+ width: 20%;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/indeterminate-progress-bar.md b/contents/indeterminate-progress-bar.md
deleted file mode 100644
index 092d085..0000000
--- a/contents/indeterminate-progress-bar.md
+++ /dev/null
@@ -1,67 +0,0 @@
----
-layout: layouts/post.njk
-title: Indeterminate progress bar
-description: Create an indeterminate progress bar with CSS
-keywords: css indeterminate progress bar, css progress bar
----
-
-## HTML
-
-```html
-
-```
-
-## CSS
-
-```css
-.indeterminate-progress-bar {
- /* Color */
- background-color: #d1d5db;
-
- /* Rounded border */
- border-radius: 9999px;
-
- /* Size */
- height: 0.5rem;
-
- position: relative;
- overflow: hidden;
-}
-
-.indeterminate-progress-bar__progress {
- /* Color */
- background-color: #3b82f6;
-
- /* Rounded border */
- border-radius: 9999px;
-
- /* Absolute position */
- position: absolute;
- bottom: 0;
- top: 0;
- width: 50%;
-
- /* Move the bar infinitely */
- animation-duration: 2s;
- animation-iteration-count: infinite;
- animation-name: indeterminate-progress-bar;
-}
-
-@keyframes indeterminate-progress-bar {
- from {
- left: -50%;
- }
- to {
- left: 100%;
- }
-}
-```
-
-{% demo %}{% include "covers/indeterminate-progress-bar.njk" %}{% enddemo %}
-
-## See also
-
-- [Progress bar](/progress-bar/)
-- [Spinner](/spinner/)
diff --git a/contents/indeterminate-progress-bar.mdx b/contents/indeterminate-progress-bar.mdx
new file mode 100644
index 0000000..717166f
--- /dev/null
+++ b/contents/indeterminate-progress-bar.mdx
@@ -0,0 +1,123 @@
+---
+category: Feedback
+created: '2022-10-02'
+description: Create an indeterminate progress bar with CSS
+keywords: css indeterminate progress bar, css progress bar
+thumbnail: /assets/css-layout/thumbnails/indeterminate-progress-bar.png
+title: Indeterminate progress bar
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.indeterminate-progress-bar {
+ /* Color */
+ background-color: #d1d5db;
+
+ /* Rounded border */
+ border-radius: 9999px;
+
+ /* Size */
+ height: 0.5rem;
+
+ position: relative;
+ overflow: hidden;
+}
+
+.indeterminate-progress-bar__progress {
+ /* Color */
+ background-color: #3b82f6;
+
+ /* Rounded border */
+ border-radius: 9999px;
+
+ /* Absolute position */
+ position: absolute;
+ bottom: 0;
+ top: 0;
+ width: 50%;
+
+ /* Move the bar infinitely */
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+ animation-name: indeterminate-progress-bar;
+}
+
+@keyframes indeterminate-progress-bar {
+ from {
+ left: -50%;
+ }
+ to {
+ left: 100%;
+ }
+}
+```
+
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+
+.indeterminate-progress-bar {
+ /* Color */
+ background-color: #d1d5db;
+
+ /* Rounded border */
+ border-radius: 9999px;
+
+ width: 16rem;
+ height: 0.5rem;
+
+ position: relative;
+ overflow: hidden;
+}
+
+.indeterminate-progress-bar__progress {
+ /* Color */
+ background-color: #3b82f6;
+
+ /* Rounded border */
+ border-radius: 9999px;
+
+ position: absolute;
+ bottom: 0;
+ top: 0;
+ width: 50%;
+
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+ animation-name: indeterminate-progress-bar;
+}
+
+@keyframes indeterminate-progress-bar {
+ from {
+ left: -50%;
+ }
+ to {
+ left: 100%;
+ }
+}
+```
+
+```html index.html hidden
+
+```
+
+
+## See also
+
+- [Progress bar](https://phuoc.ng/collection/css-layout/progress-bar)
+- [Spinner](https://phuoc.ng/collection/css-layout/spinner)
diff --git a/contents/index.njk b/contents/index.njk
deleted file mode 100644
index cb99266..0000000
--- a/contents/index.njk
+++ /dev/null
@@ -1,154 +0,0 @@
----
-layout: layouts/base.njk
-title: A collection of popular layouts and patterns made with CSS
-eleventyExcludeFromCollections: true
----
-
-
-
-
- {% include "css-scan.njk" %}
-
-
Following covers are made with CSS only. Inspect them!
-
-
-
Display
-
- {% pattern "Accordion" %}{% include "covers/accordion.njk" %}{% endpattern %}
- {% pattern "Arrow buttons" %}{% include "covers/arrow-buttons.njk" %}{% endpattern %}
- {% 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 %}
- {% pattern "Color swatch" %}{% include "covers/color-swatch.njk" %}{% endpattern %}
- {% pattern "Concave corners" %}{% include "covers/concave-corners.njk" %}{% endpattern %}
- {% pattern "Cookie banner" %}{% include "covers/cookie-banner.njk" %}{% endpattern %}
- {% pattern "Corner ribbon" %}{% include "covers/corner-ribbon.njk" %}{% endpattern %}
- {% pattern "Curved background" %}{% include "covers/curved-background.njk" %}{% endpattern %}
- {% pattern "Diagonal section" %}{% include "covers/diagonal-section.njk" %}{% endpattern %}
- {% pattern "Docked at corner" %}{% include "covers/docked-at-corner.njk" %}{% endpattern %}
- {% pattern "Dot leader" %}{% include "covers/dot-leader.njk" %}{% endpattern %}
- {% pattern "Drop area" %}{% include "covers/drop-area.njk" %}{% endpattern %}
- {% pattern "Drop cap" %}{% include "covers/drop-cap.njk" %}{% endpattern %}
- {% pattern "Fading long section" %}{% include "covers/fading-long-section.njk" %}{% endpattern %}
- {% pattern "Feature comparison" %}{% include "covers/feature-comparison.njk" %}{% endpattern %}
- {% pattern "Feature list" %}{% include "covers/feature-list.njk" %}{% endpattern %}
- {% pattern "Fixed at corner" %}{% include "covers/fixed-at-corner.njk" %}{% endpattern %}
- {% pattern "Fixed at side" %}{% include "covers/fixed-at-side.njk" %}{% endpattern %}
- {% pattern "Folder structure" %}{% include "covers/folder-structure.njk" %}{% endpattern %}
- {% pattern "Full background" %}{% include "covers/full-background.njk" %}{% endpattern %}
- {% pattern "Initial avatar" %}{% include "covers/initial-avatar.njk" %}{% endpattern %}
- {% pattern "Inverted corners" %}{% include "covers/inverted-corners.njk" %}{% endpattern %}
- {% pattern "Keyboard shortcut" %}{% include "covers/keyboard-shortcut.njk" %}{% endpattern %}
- {% pattern "Layered card" %}{% include "covers/layered-card.njk" %}{% endpattern %}
- {% pattern "Lined paper" %}{% include "covers/lined-paper.njk" %}{% endpattern %}
- {% pattern "Media object" %}{% include "covers/media-object.njk" %}{% endpattern %}
- {% pattern "Overlay play button" %}{% include "covers/overlay-play-button.njk" %}{% endpattern %}
- {% pattern "Price tag" %}{% include "covers/price-tag.njk" %}{% endpattern %}
- {% pattern "Pricing table" %}{% include "covers/pricing-table.njk" %}{% endpattern %}
- {% pattern "Property list" %}{% include "covers/property-list.njk" %}{% endpattern %}
- {% pattern "Questions and answers" %}{% include "covers/questions-and-answers.njk" %}{% endpattern %}
- {% pattern "Ribbon" %}{% include "covers/ribbon.njk" %}{% endpattern %}
- {% pattern "Separator" %}{% include "covers/separator.njk" %}{% endpattern %}
- {% pattern "Stacked cards" %}{% include "covers/stacked-cards.njk" %}{% endpattern %}
- {% pattern "Stamp border" %}{% include "covers/stamp-border.njk" %}{% endpattern %}
- {% pattern "Statistic" %}{% include "covers/statistic.njk" %}{% endpattern %}
- {% pattern "Status light" %}{% include "covers/status-light.njk" %}{% endpattern %}
- {% pattern "Sticky table column" %}{% include "covers/sticky-table-column.njk" %}{% endpattern %}
- {% pattern "Sticky table headers" %}{% include "covers/sticky-table-headers.njk" %}{% endpattern %}
- {% pattern "Teardrop" %}{% include "covers/teardrop.njk" %}{% endpattern %}
- {% pattern "Three dimensions card" %}{% include "covers/three-dimensions-card.njk" %}{% endpattern %}
- {% pattern "Timeline" %}{% include "covers/timeline.njk" %}{% endpattern %}
- {% pattern "Tree diagram" %}{% include "covers/tree-diagram.njk" %}{% endpattern %}
- {% pattern "Triangle buttons" %}{% include "covers/triangle-buttons.njk" %}{% endpattern %}
- {% pattern "Video background" %}{% include "covers/video-background.njk" %}{% endpattern %}
- {% pattern "Voting" %}{% include "covers/voting.njk" %}{% endpattern %}
- {% pattern "Watermark" %}{% include "covers/watermark.njk" %}{% endpattern %}
- {% pattern "Zigzag timeline" %}{% include "covers/zigzag-timeline.njk" %}{% endpattern %}
-
-
-
-
-
Feedback
-
- {% pattern "Indeterminate progress bar" %}{% include "covers/indeterminate-progress-bar.njk" %}{% endpattern %}
- {% pattern "Modal" %}{% include "covers/modal.njk" %}{% endpattern %}
- {% pattern "Notification" %}{% include "covers/notification.njk" %}{% endpattern %}
- {% pattern "Popover arrow" %}{% include "covers/popover-arrow.njk" %}{% endpattern %}
- {% pattern "Presence indicator" %}{% include "covers/presence-indicator.njk" %}{% endpattern %}
- {% pattern "Progress bar" %}{% include "covers/progress-bar.njk" %}{% endpattern %}
- {% pattern "Radial progress bar" %}{% include "covers/radial-progress-bar.njk" %}{% endpattern %}
- {% pattern "Resizable element" %}{% include "covers/resizable-element.njk" %}{% endpattern %}
- {% pattern "Spinner" %}{% include "covers/spinner.njk" %}{% endpattern %}
- {% pattern "Tooltip" %}{% include "covers/tooltip.njk" %}{% endpattern %}
- {% pattern "Validation icon" %}{% include "covers/validation-icon.njk" %}{% endpattern %}
-
-
-
-
-
Input
-
- {% pattern "Box selector" %}{% include "covers/box-selector.njk" %}{% endpattern %}
- {% pattern "Button with icon" %}{% include "covers/button-with-icon.njk" %}{% endpattern %}
- {% pattern "Chip" %}{% include "covers/chip.njk" %}{% endpattern %}
- {% pattern "Custom checkbox button" %}{% include "covers/custom-checkbox-button.njk" %}{% endpattern %}
- {% pattern "Custom radio button" %}{% include "covers/custom-radio-button.njk" %}{% endpattern %}
- {% pattern "Floating label" %}{% include "covers/floating-label.njk" %}{% endpattern %}
- {% pattern "Input addon" %}{% include "covers/input-addon.njk" %}{% endpattern %}
- {% pattern "Radio button group" %}{% include "covers/radio-button-group.njk" %}{% endpattern %}
- {% pattern "Radio switch" %}{% include "covers/radio-switch.njk" %}{% endpattern %}
- {% pattern "Rating" %}{% include "covers/rating.njk" %}{% endpattern %}
- {% pattern "Search box" %}{% include "covers/search-box.njk" %}{% endpattern %}
- {% pattern "Slider" %}{% include "covers/slider.njk" %}{% endpattern %}
- {% pattern "Spin button" %}{% include "covers/spin-button.njk" %}{% endpattern %}
- {% pattern "Stepper input" %}{% include "covers/stepper-input.njk" %}{% endpattern %}
- {% pattern "Switch" %}{% include "covers/switch.njk" %}{% endpattern %}
- {% pattern "Toggle password visibility" %}{% include "covers/toggle-password-visibility.njk" %}{% endpattern %}
- {% pattern "Upload button" %}{% include "covers/upload-button.njk" %}{% endpattern %}
-
-
-
-
-
Layout
-
- {% pattern "Card layout" %}{% include "covers/card-layout.njk" %}{% endpattern %}
- {% pattern "Holy grail" %}{% include "covers/holy-grail.njk" %}{% endpattern %}
- {% pattern "Masonry grid" %}{% include "covers/masonry-grid.njk" %}{% endpattern %}
- {% pattern "Same height columns" %}{% include "covers/same-height-columns.njk" %}{% endpattern %}
- {% pattern "Sidebar" %}{% include "covers/sidebar.njk" %}{% endpattern %}
- {% pattern "Simple grid" %}{% include "covers/simple-grid.njk" %}{% endpattern %}
- {% pattern "Split screen" %}{% include "covers/split-screen.njk" %}{% endpattern %}
- {% pattern "Sticky footer" %}{% include "covers/sticky-footer.njk" %}{% endpattern %}
- {% pattern "Sticky header" %}{% include "covers/sticky-header.njk" %}{% endpattern %}
- {% pattern "Sticky sections" %}{% include "covers/sticky-sections.njk" %}{% endpattern %}
-
-
-
-
-
Navigation
-
- {% 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 %}
- {% pattern "Drawer" %}{% include "covers/drawer.njk" %}{% endpattern %}
- {% pattern "Dropdown" %}{% include "covers/dropdown.njk" %}{% endpattern %}
- {% pattern "Full screen menu" %}{% include "covers/full-screen-menu.njk" %}{% endpattern %}
- {% pattern "Mega menu" %}{% include "covers/mega-menu.njk" %}{% endpattern %}
- {% pattern "Menu" %}{% include "covers/menu.njk" %}{% endpattern %}
- {% pattern "Nested dropdowns" %}{% include "covers/nested-dropdowns.njk" %}{% endpattern %}
- {% pattern "Pagination" %}{% include "covers/pagination.njk" %}{% endpattern %}
- {% pattern "Previous next buttons" %}{% include "covers/previous-next-buttons.njk" %}{% endpattern %}
- {% pattern "Split navigation" %}{% include "covers/split-navigation.njk" %}{% endpattern %}
- {% pattern "Tab" %}{% include "covers/tab.njk" %}{% endpattern %}
- {% pattern "Wizard" %}{% include "covers/wizard.njk" %}{% endpattern %}
-
-
-
- {% include "follow.njk" %}
-
...
-```
-
-## CSS
-
-```css
-.initial-avatar {
- /* Center the content */
- align-items: center;
- display: flex;
- justify-content: center;
-
- /* Colors */
- background-color: #d1d5db;
- color: #fff;
-
- /* Rounded border */
- border-radius: 50%;
- height: 3rem;
- width: 3rem;
-}
-```
-
-{% demo %}
-{% include "covers/initial-avatar.njk" %}
-{% enddemo %}
diff --git a/contents/initial-avatar.mdx b/contents/initial-avatar.mdx
new file mode 100644
index 0000000..fb852d8
--- /dev/null
+++ b/contents/initial-avatar.mdx
@@ -0,0 +1,65 @@
+---
+category: Display
+created: '2019-12-04'
+description: Create an initial avatar with CSS
+keywords: css avatar
+thumbnail: /assets/css-layout/thumbnails/initial-avatar.png
+title: Initial avatar
+---
+
+## HTML
+
+```html
+...
+```
+
+## CSS
+
+```css
+.initial-avatar {
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ /* Colors */
+ background-color: #d1d5db;
+ color: #fff;
+
+ /* Rounded border */
+ border-radius: 50%;
+ height: 3rem;
+ width: 3rem;
+}
+```
+
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+.initial-avatar {
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ /* Colors */
+ background-color: #d1d5db;
+ color: #fff;
+
+ /* Rounded border */
+ border-radius: 50%;
+ height: 3rem;
+ width: 3rem;
+}
+```
+
+```html index.html hidden
+
+ PN
+
+```
+
diff --git a/contents/input-addon.md b/contents/input-addon.md
deleted file mode 100644
index 068217a..0000000
--- a/contents/input-addon.md
+++ /dev/null
@@ -1,73 +0,0 @@
----
-layout: layouts/post.njk
-title: Input addon
-description: Create an input add-on with CSS flexbox
-keywords: css flexbox, css input add-on
----
-
-## HTML
-
-```html
-
-
-
-
-
-
-
-
-```
-
-## CSS
-
-```css
-.input-addon {
- border: 1px solid #d1d5db;
- border-radius: 0.25rem;
- display: flex;
-}
-
-.input-addon__input {
- border: none;
-
- /* Take the remaining width */
- flex: 1;
-}
-
-.input-addon__addon {
- /* Center the content */
- align-items: center;
- display: flex;
- justify-content: center;
-}
-
-.input-addon__addon--prepended {
- border-right: 1px solid #d1d5db;
-}
-.input-addon__addon--appended {
- border-left: 1px solid #d1d5db;
-}
-```
-
-{% demo %}{% include "covers/input-addon.njk" %}{% enddemo %}
diff --git a/contents/input-addon.mdx b/contents/input-addon.mdx
new file mode 100644
index 0000000..c808876
--- /dev/null
+++ b/contents/input-addon.mdx
@@ -0,0 +1,151 @@
+---
+category: Input
+created: '2019-11-16'
+description: Create an input add-on with CSS flexbox
+keywords: css flexbox, css input add-on
+thumbnail: /assets/css-layout/thumbnails/input-addon.png
+title: Input addon
+---
+
+## HTML
+
+```html
+
+
+
+
+
+
+
+
+```
+
+## CSS
+
+```css
+.input-addon {
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ display: flex;
+}
+
+.input-addon__input {
+ border: none;
+
+ /* Take the remaining width */
+ flex: 1;
+}
+
+.input-addon__addon {
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+
+.input-addon__addon--prepended {
+ border-right: 1px solid #d1d5db;
+}
+.input-addon__addon--appended {
+ border-left: 1px solid #d1d5db;
+}
+```
+
+
+```css placeholders.css hidden
+.circle {
+ background: #d1d5db;
+ border-radius: 9999px;
+ height: var(--circle-size);
+ width: var(--circle-size);
+}
+.circle--sm {
+ --circle-size: 0.5rem;
+}
+.circle--md {
+ --circle-size: 1.5rem;
+}
+.circle--lg {
+ --circle-size: 4rem;
+}
+```
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+
+.input-addon {
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ display: flex;
+
+ /* Demo */
+ margin-bottom: 0.5rem;
+ width: 16rem;
+}
+
+.input-addon__input {
+ border: none;
+ /* Take the remaining width */
+ flex: 1;
+
+ /* Demo */
+ padding: 0.25rem;
+ margin: 0 0.25rem;
+ width: 5rem;
+}
+
+.input-addon__addon {
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ /* Demo */
+ padding: 0.25rem;
+}
+
+.input-addon__addon--prepended {
+ border-right: 1px solid #d1d5db;
+}
+.input-addon__addon--appended {
+ border-left: 1px solid #d1d5db;
+}
+```
+
+```html index.html hidden
+
+
+
+```
+
diff --git a/contents/inverted-corners.md b/contents/inverted-corners.md
deleted file mode 100644
index 181113f..0000000
--- a/contents/inverted-corners.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-layout: layouts/post.njk
-title: Inverted corners
-description: Create inverted corners with CSS
-keywords: css border radius, css inverted border radius, css inverted corners
----
-
-## HTML
-
-```html
-...
-```
-
-## CSS
-
-```css
-:root {
- --inverted-corners-background: #d1d5db;
- --inverted-corners-size: 2rem;
-}
-
-.inverted-corners {
- background-color: var(--inverted-corners-background);
-
- /* Used to position the corner */
- position: relative;
-}
-
-.inverted-corners::before {
- content: '';
-
- /* Absolute position */
- bottom: calc(-2 * var(--inverted-corners-size));
- left: 0;
- position: absolute;
-
- /* Size */
- height: calc(2 * var(--inverted-corners-size));
- width: var(--inverted-corners-size);
-
- /* Border */
- background-color: transparent;
- border-top-left-radius: var(--inverted-corners-size);
- box-shadow: var(--inverted-corners-background) 0px calc(-1 * var(--inverted-corners-size)) 0px 0px;
-}
-```
-
-{% demo %}
-{% include "covers/inverted-corners.njk" %}
-{% enddemo %}
diff --git a/contents/inverted-corners.mdx b/contents/inverted-corners.mdx
new file mode 100644
index 0000000..412bda4
--- /dev/null
+++ b/contents/inverted-corners.mdx
@@ -0,0 +1,95 @@
+---
+category: Display
+created: '2021-05-09'
+description: Create inverted corners with CSS
+keywords: css border radius, css inverted border radius, css inverted corners
+thumbnail: /assets/css-layout/thumbnails/inverted-corners.png
+title: Inverted corners
+---
+
+## HTML
+
+```html
+...
+```
+
+## CSS
+
+```css
+:root {
+ --inverted-corners-background: #d1d5db;
+ --inverted-corners-size: 2rem;
+}
+
+.inverted-corners {
+ background-color: var(--inverted-corners-background);
+
+ /* Used to position the corner */
+ position: relative;
+}
+
+.inverted-corners::before {
+ content: '';
+
+ /* Absolute position */
+ bottom: calc(-2 * var(--inverted-corners-size));
+ left: 0;
+ position: absolute;
+
+ /* Size */
+ height: calc(2 * var(--inverted-corners-size));
+ width: var(--inverted-corners-size);
+
+ /* Border */
+ background-color: transparent;
+ border-top-left-radius: var(--inverted-corners-size);
+ box-shadow: var(--inverted-corners-background) 0px calc(-1 * var(--inverted-corners-size)) 0px 0px;
+}
+```
+
+
+```css styles.css hidden
+:root {
+ --inverted-corners-background: #d1d5db;
+ --inverted-corners-size: 2rem;
+}
+
+body {
+ height: 24rem;
+}
+
+.inverted-corners {
+ background-color: var(--inverted-corners-background);
+
+ /* Used to position the corner */
+ position: relative;
+
+ /* Demo */
+ height: 2rem;
+ width: 100%;
+}
+
+.inverted-corners::before {
+ content: '';
+
+ /* Absolute position */
+ bottom: calc(-2 * var(--inverted-corners-size));
+ left: 0;
+ position: absolute;
+
+ /* Size */
+ height: calc(2 * var(--inverted-corners-size));
+ width: var(--inverted-corners-size);
+
+ /* Border */
+ background-color: transparent;
+ border-top-left-radius: var(--inverted-corners-size);
+ box-shadow: var(--inverted-corners-background) 0px calc(-1 * var(--inverted-corners-size)) 0px 0px;
+}
+```
+
+```html index.html hidden
+
+
+```
+
diff --git a/contents/keyboard-shortcut.md b/contents/keyboard-shortcut.md
deleted file mode 100644
index 4cef446..0000000
--- a/contents/keyboard-shortcut.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-layout: layouts/post.njk
-title: Keyboard shortcut
-description: Create a keyboard shortcut with CSS
-keywords: kbd tag, keyboard shortcut
----
-
-We use the native `kbd` tag to display the keyboard shortcut.
-
-## HTML
-
-```html
-...
-```
-
-## CSS
-
-```css
-.keyboard-shortcut {
- /* Background and color */
- background-color: rgba(0, 0, 0, 0.1);
- border-radius: 0.25rem;
- color: rgba(0, 0, 0, 0.7);
-
- /* Bottom shadow */
- box-shadow: #d1d5db 0px -4px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px;
-
- /* Spacing */
- padding: 0.25rem 0.5rem;
-}
-```
-
-{% demo %}
-{% include "covers/keyboard-shortcut.njk" %}
-{% enddemo %}
diff --git a/contents/keyboard-shortcut.mdx b/contents/keyboard-shortcut.mdx
new file mode 100644
index 0000000..6e76f25
--- /dev/null
+++ b/contents/keyboard-shortcut.mdx
@@ -0,0 +1,59 @@
+---
+category: Display
+created: '2019-12-16'
+description: Create a keyboard shortcut with CSS
+keywords: kbd tag, keyboard shortcut
+thumbnail: /assets/css-layout/thumbnails/keyboard-shortcut.png
+title: Keyboard shortcut
+---
+
+We use the native `kbd` tag to display the keyboard shortcut.
+
+## HTML
+
+```html
+...
+```
+
+## CSS
+
+```css
+.keyboard-shortcut {
+ /* Background and color */
+ background-color: rgba(0, 0, 0, 0.1);
+ border-radius: 0.25rem;
+ color: rgba(0, 0, 0, 0.7);
+
+ /* Bottom shadow */
+ box-shadow: #d1d5db 0px -4px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px;
+
+ /* Spacing */
+ padding: 0.25rem 0.5rem;
+}
+```
+
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+.keyboard-shortcut {
+ /* Background and color */
+ background-color: rgba(0, 0, 0, 0.1);
+ border-radius: 0.25rem;
+ color: rgba(0, 0, 0, 0.7);
+
+ /* Bottom shadow */
+ box-shadow: #d1d5db 0px -4px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px;
+
+ /* Spacing */
+ padding: 0.25rem 0.5rem;
+}
+```
+
+```html index.html hidden
+⌘ + C
+```
+
diff --git a/contents/layered-card.md b/contents/layered-card.md
deleted file mode 100644
index fd7a10f..0000000
--- a/contents/layered-card.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-layout: layouts/post.njk
-title: Layered card
-description: Create a layered card with CSS
-keywords: css layered card
----
-
-## HTML
-
-```html
-
-```
-
-## CSS
-
-```css
-.layered-card {
- position: relative;
-
- /* Demo */
- height: 6rem;
- width: 6rem;
-}
-
-.layered-card::before {
- background: #d1d5db;
- content: '';
-
- /* Position */
- top: 0;
- left: 0;
- position: absolute;
- transform: translate(1rem, 1rem);
-
- /* Size */
- height: 100%;
- width: 100%;
-
- /* Display under the main content */
- z-index: 0;
-}
-
-.layered-card__content {
- /* Position */
- left: 0;
- position: absolute;
- top: 0;
-
- /* Size */
- height: 100%;
- width: 100%;
-
- z-index: 1;
-
- background: #fff;
-}
-```
-
-{% demo %}
-{% include "covers/layered-card.njk" %}
-{% enddemo %}
diff --git a/contents/layered-card.mdx b/contents/layered-card.mdx
new file mode 100644
index 0000000..96b72fb
--- /dev/null
+++ b/contents/layered-card.mdx
@@ -0,0 +1,116 @@
+---
+category: Display
+created: '2021-04-04'
+description: Create a layered card with CSS
+keywords: css layered card
+thumbnail: /assets/css-layout/thumbnails/layered-card.png
+title: Layered card
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.layered-card {
+ position: relative;
+
+ /* Demo */
+ height: 6rem;
+ width: 6rem;
+}
+
+.layered-card::before {
+ background: #d1d5db;
+ content: '';
+
+ /* Position */
+ top: 0;
+ left: 0;
+ position: absolute;
+ transform: translate(1rem, 1rem);
+
+ /* Size */
+ height: 100%;
+ width: 100%;
+
+ /* Display under the main content */
+ z-index: 0;
+}
+
+.layered-card__content {
+ /* Position */
+ left: 0;
+ position: absolute;
+ top: 0;
+
+ /* Size */
+ height: 100%;
+ width: 100%;
+
+ z-index: 1;
+
+ background: #fff;
+}
+```
+
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+.layered-card {
+ position: relative;
+
+ /* Demo */
+ height: 6rem;
+ width: 6rem;
+}
+
+.layered-card::before {
+ background: #d1d5db;
+ content: '';
+
+ /* Position */
+ top: 0;
+ left: 0;
+ position: absolute;
+ transform: translate(1rem, 1rem);
+
+ /* Size */
+ height: 100%;
+ width: 100%;
+
+ /* Display under the main content */
+ z-index: 0;
+}
+
+.layered-card__content {
+ left: 0;
+ position: absolute;
+ top: 0;
+
+ /* Size */
+ height: 100%;
+ width: 100%;
+ z-index: 1;
+
+ border: 1px solid #d1d5db;
+ background: #fff;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/lined-paper.md b/contents/lined-paper.md
deleted file mode 100644
index 91d087f..0000000
--- a/contents/lined-paper.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-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
-...
-```
-
-## CSS
-
-```css
-.lined-paper {
- /* Lined background */
- background-image: linear-gradient(#d1d5db 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 "covers/lined-paper.njk" %}
-{% enddemo %}
diff --git a/contents/lined-paper.mdx b/contents/lined-paper.mdx
new file mode 100644
index 0000000..2cfd12d
--- /dev/null
+++ b/contents/lined-paper.mdx
@@ -0,0 +1,62 @@
+---
+category: Display
+created: '2020-01-17'
+description: Create lined paper with CSS
+keywords: css linear gradient, css lined paper, css multiple horizontal lines
+thumbnail: /assets/css-layout/thumbnails/lined-paper.png
+title: Lined paper
+---
+
+## HTML
+
+```html
+...
+```
+
+## CSS
+
+```css
+.lined-paper {
+ /* Lined background */
+ background-image: linear-gradient(#d1d5db 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;
+}
+```
+
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+.lined-paper {
+ /* Lined background */
+ background-image: linear-gradient(#d1d5db 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 */
+ overflow: hidden;
+}
+```
+
+```html index.html hidden
+
+ 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.
+
+```
+
diff --git a/contents/masonry-grid.md b/contents/masonry-grid.md
deleted file mode 100644
index 7a648bb..0000000
--- a/contents/masonry-grid.md
+++ /dev/null
@@ -1,36 +0,0 @@
----
-layout: layouts/post.njk
-title: Masonry grid
-description: Create a masonry grid with CSS
-keywords: css column-count, css column-gap, css masonry, css masonry grid
----
-
-## HTML
-
-```html
-
-```
-
-## CSS
-
-```css
-.masonry-grid {
- /* It is split into 3 columns */
- column-count: 3;
-
- /* The space between columns */
- column-gap: 1rem;
-}
-
-.masonry-grid__item {
- /* Prevent a column from breaking into multiple columns */
- break-inside: avoid;
-}
-```
-
-{% demo %}{% include "covers/masonry-grid.njk" %}{% enddemo %}
diff --git a/contents/masonry-grid.mdx b/contents/masonry-grid.mdx
new file mode 100644
index 0000000..4a3d4ae
--- /dev/null
+++ b/contents/masonry-grid.mdx
@@ -0,0 +1,137 @@
+---
+category: Layout
+created: '2021-04-28'
+description: Create a masonry grid with CSS
+keywords: css column-count, css column-gap, css masonry, css masonry grid
+thumbnail: /assets/css-layout/thumbnails/masonry-grid.png
+title: Masonry grid
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.masonry-grid {
+ /* It is split into 3 columns */
+ column-count: 3;
+
+ /* The space between columns */
+ column-gap: 1rem;
+}
+
+.masonry-grid__item {
+ /* Prevent a column from breaking into multiple columns */
+ break-inside: avoid;
+}
+```
+
+
+```css placeholders.css hidden
+.rectangle {
+ background: #d1d5db;
+ border-radius: 0.25rem;
+ height: var(--rectangle-height);
+ width: var(--rectangle-width);
+}
+.rectangle--hor.rectangle--20 {
+ --rectangle-width: 20%;
+}
+.rectangle--hor.rectangle--40 {
+ --rectangle-width: 40%;
+}
+.rectangle--hor.rectangle--60 {
+ --rectangle-width: 60%;
+}
+.rectangle--hor.rectangle--80 {
+ --rectangle-width: 80%;
+}
+.rectangle--hor.rectangle--100 {
+ --rectangle-width: 100%;
+}
+.rectangle--hor.rectangle--sm {
+ --rectangle-height: 0.5rem;
+}
+.rectangle--hor.rectangle--md {
+ --rectangle-height: 2rem;
+}
+.rectangle--hor.rectangle--lg {
+ --rectangle-height: 4rem;
+}
+.rectangle--ver.rectangle--20 {
+ --rectangle-height: 20%;
+}
+.rectangle--ver.rectangle--40 {
+ --rectangle-height: 40%;
+}
+.rectangle--ver.rectangle--60 {
+ --rectangle-height: 60%;
+}
+.rectangle--ver.rectangle--80 {
+ --rectangle-height: 80%;
+}
+.rectangle--ver.rectangle--100 {
+ --rectangle-height: 100%;
+}
+.rectangle--ver.rectangle--sm {
+ --rectangle-width: 0.5rem;
+}
+.rectangle--ver.rectangle--md {
+ --rectangle-width: 2rem;
+}
+.rectangle--ver.rectangle--lg {
+ --rectangle-width: 4rem;
+}
+```
+
+```css styles.css hidden
+body {
+ height: 24rem;
+}
+
+.masonry-grid {
+ /* It is split into 3 columns */
+ column-count: 3;
+
+ /* The space between columns */
+ column-gap: 1rem;
+
+ /* Demo */
+ height: 100%;
+ width: 100%;
+}
+
+.masonry-grid__item {
+ /* Prevent a column from breaking into multiple columns */
+ break-inside: avoid;
+
+ /* Misc */
+ margin-bottom: 1rem;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/media-object.md b/contents/media-object.md
deleted file mode 100644
index bc74818..0000000
--- a/contents/media-object.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-layout: layouts/post.njk
-title: Media object
-description: Create a media object with CSS flexbox
-keywords: css flexbox, media object
----
-
-## HTML
-
-```html
-
-```
-
-## CSS
-
-```css
-.media-object {
- /* Align sub-items to top */
- align-items: start;
- display: flex;
-}
-
-.media-object__media {
- margin-right: 0.5rem;
-}
-
-.media-object__content {
- /* Take the remaining width */
- flex: 1;
-}
-```
-
-{% demo %}
-{% include "covers/media-object.njk" %}
-{% enddemo %}
diff --git a/contents/media-object.mdx b/contents/media-object.mdx
new file mode 100644
index 0000000..f58c013
--- /dev/null
+++ b/contents/media-object.mdx
@@ -0,0 +1,143 @@
+---
+category: Display
+created: '2019-11-16'
+description: Create a media object with CSS flexbox
+keywords: css flexbox, media object
+thumbnail: /assets/css-layout/thumbnails/media-object.png
+title: Media object
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.media-object {
+ /* Align sub-items to top */
+ align-items: start;
+ display: flex;
+}
+
+.media-object__media {
+ margin-right: 0.5rem;
+}
+
+.media-object__content {
+ /* Take the remaining width */
+ flex: 1;
+}
+```
+
+
+```css placeholders.css hidden
+.lines {
+ padding: 0.25rem 0;
+ width: 100%;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+}
+.line {
+ background: #d1d5db;
+ height: 1px;
+ margin-bottom: 0.25rem;
+}
+.line.line--20 {
+ width: 20%;
+}
+.line.line--40 {
+ width: 40%;
+}
+.line.line--60 {
+ width: 60%;
+}
+.line.line--80 {
+ width: 80%;
+}
+.line.line--100 {
+ width: 100%;
+}
+.square {
+ background: #d1d5db;
+ height: var(--square-size);
+ width: var(--square-size);
+}
+.square--sm {
+ --square-size: 0.5rem;
+}
+.square--md {
+ --square-size: 2rem;
+}
+.square--lg {
+ --square-size: 4rem;
+}
+```
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+.media-object {
+ /* Align sub-items to top */
+ align-items: start;
+ display: flex;
+
+ /* Demo */
+ width: 16rem;
+}
+
+.media-object__media {
+ margin-right: 0.5rem;
+}
+
+.media-object__content {
+ /* Take the remaining width */
+ flex: 1;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/mega-menu.md b/contents/mega-menu.md
deleted file mode 100644
index 6d87794..0000000
--- a/contents/mega-menu.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-layout: layouts/post.njk
-title: Mega menu
-description: Create a mega menu with CSS
-keywords: css mega menu
----
-
-## HTML
-
-```html
-
-```
-
-## CSS
-
-```css
-.mega-menu {
- /* Used to position the mega menu */
- position: relative;
-}
-
-.mega-menu__trigger:hover .mega-menu__content {
- /* Show the mega menu when hovering the trigger item */
- display: block;
-}
-
-.mega-menu__content {
- /* Border */
- border: 1px solid #d1d5db;
- margin-top: -1px;
-
- /* Hidden by default */
- display: none;
-
- /* Absolute position */
- left: 0px;
- position: absolute;
- top: 100%;
-
- /* Take full width */
- width: 100%;
-
- /* Displayed on top of other elements */
- background: #fff;
- z-index: 9999;
-}
-```
-
-{% demo %}{% include "covers/mega-menu.njk" %}{% enddemo %}
diff --git a/contents/mega-menu.mdx b/contents/mega-menu.mdx
new file mode 100644
index 0000000..e12e1cf
--- /dev/null
+++ b/contents/mega-menu.mdx
@@ -0,0 +1,290 @@
+---
+category: Navigation
+created: '2019-12-29'
+description: Create a mega menu with CSS
+keywords: css mega menu
+thumbnail: /assets/css-layout/thumbnails/mega-menu.png
+title: Mega menu
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.mega-menu {
+ /* Used to position the mega menu */
+ position: relative;
+}
+
+.mega-menu__trigger:hover .mega-menu__content {
+ /* Show the mega menu when hovering the trigger item */
+ display: block;
+}
+
+.mega-menu__content {
+ /* Border */
+ border: 1px solid #d1d5db;
+ margin-top: -1px;
+
+ /* Hidden by default */
+ display: none;
+
+ /* Absolute position */
+ left: 0px;
+ position: absolute;
+ top: 100%;
+
+ /* Take full width */
+ width: 100%;
+
+ /* Displayed on top of other elements */
+ background: #fff;
+ z-index: 9999;
+}
+```
+
+
+```css placeholders.css hidden
+.lines {
+ padding: 0.25rem 0;
+ width: 100%;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+}
+.line {
+ background: #d1d5db;
+ height: 1px;
+ margin-bottom: 0.25rem;
+}
+.line.line--20 {
+ width: 20%;
+}
+.line.line--40 {
+ width: 40%;
+}
+.line.line--60 {
+ width: 60%;
+}
+.line.line--80 {
+ width: 80%;
+}
+.line.line--100 {
+ width: 100%;
+}
+.rectangle {
+ background: #d1d5db;
+ border-radius: 0.25rem;
+ height: var(--rectangle-height);
+ width: var(--rectangle-width);
+}
+.rectangle--hor.rectangle--20 {
+ --rectangle-width: 20%;
+}
+.rectangle--hor.rectangle--40 {
+ --rectangle-width: 40%;
+}
+.rectangle--hor.rectangle--60 {
+ --rectangle-width: 60%;
+}
+.rectangle--hor.rectangle--80 {
+ --rectangle-width: 80%;
+}
+.rectangle--hor.rectangle--100 {
+ --rectangle-width: 100%;
+}
+.rectangle--hor.rectangle--sm {
+ --rectangle-height: 0.5rem;
+}
+.rectangle--hor.rectangle--md {
+ --rectangle-height: 2rem;
+}
+.rectangle--hor.rectangle--lg {
+ --rectangle-height: 4rem;
+}
+.rectangle--ver.rectangle--20 {
+ --rectangle-height: 20%;
+}
+.rectangle--ver.rectangle--40 {
+ --rectangle-height: 40%;
+}
+.rectangle--ver.rectangle--60 {
+ --rectangle-height: 60%;
+}
+.rectangle--ver.rectangle--80 {
+ --rectangle-height: 80%;
+}
+.rectangle--ver.rectangle--100 {
+ --rectangle-height: 100%;
+}
+.rectangle--ver.rectangle--sm {
+ --rectangle-width: 0.5rem;
+}
+.rectangle--ver.rectangle--md {
+ --rectangle-width: 2rem;
+}
+.rectangle--ver.rectangle--lg {
+ --rectangle-width: 4rem;
+}
+.triangle {
+ border-style: solid;
+ height: 0;
+ width: 0;
+}
+.triangle--t {
+ border-color: transparent transparent #d1d5db transparent;
+ border-width: 0 var(--triangle-size) var(--triangle-size) var(--triangle-size);
+}
+.triangle--r {
+ border-color: transparent transparent transparent #d1d5db;
+ border-width: var(--triangle-size) 0 var(--triangle-size) 1rem;
+}
+.triangle--b {
+ border-color: #d1d5db transparent transparent transparent;
+ border-width: var(--triangle-size) var(--triangle-size) 0 var(--triangle-size);
+}
+.triangle--l {
+ border-color: transparent #d1d5db transparent transparent;
+ border-width: var(--triangle-size) 1rem var(--triangle-size) 0;
+}
+.triangle--tr {
+ border-color: transparent #d1d5db transparent transparent;
+ border-width: 0 var(--triangle-size) var(--triangle-size) 0;
+}
+.triangle--br {
+ border-color: transparent transparent #d1d5db transparent;
+ border-width: 0 0 var(--triangle-size) var(--triangle-size);
+}
+.triangle--bl {
+ border-color: transparent transparent transparent #d1d5db;
+ border-width: var(--triangle-size) 0 0 var(--triangle-size);
+}
+.triangle--tl {
+ border-color: #d1d5db transparent transparent transparent;
+ border-width: var(--triangle-size) var(--triangle-size) 0 0;
+}
+.triangle--sm {
+ --triangle-size: 0.5rem;
+}
+.triangle--md {
+ --triangle-size: 2rem;
+}
+.triangle--lg {
+ --triangle-size: 4rem;
+}
+```
+
+```css styles.css hidden
+.mega-menu {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ position: relative;
+
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+
+ /* Demo */
+ width: 100%;
+}
+
+.mega-menu__item {
+ display: flex;
+ align-items: center;
+
+ height: 100%;
+ flex: 1;
+
+ padding: 0.25rem 0.5rem;
+}
+.mega-menu__item:not(:last-child) {
+ border-right: 1px solid #d1d5db;
+}
+
+.mega-menu__trigger {
+ cursor: pointer;
+
+ /* Demo */
+ height: 2rem;
+
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+
+.mega-menu__content {
+ /* Border */
+ border: 1px solid #d1d5db;
+ /* margin-top: -1px; */
+
+ /* Hidden by default */
+ display: none;
+
+ /* Position it right below the trigger element */
+ left: 0;
+ padding-top: 0.25rem;
+ position: absolute;
+ top: 100%;
+
+ /* Take full width */
+ width: 100%;
+
+ /* It should be on the top of other elements */
+ background-color: #fff;
+ z-index: 9999;
+}
+
+/* Show the mega menu when hovering the trigger item */
+.mega-menu__trigger:hover .mega-menu__content {
+ display: block;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/menu.md b/contents/menu.md
deleted file mode 100644
index 1a542a3..0000000
--- a/contents/menu.md
+++ /dev/null
@@ -1,69 +0,0 @@
----
-layout: layouts/post.njk
-title: Menu
-description: Create a menu with CSS flexbox
-keywords: css flexbox, css menu
----
-
-## HTML
-
-```html
-
-```
-
-## CSS
-
-```css
-.menu {
- display: flex;
- flex-direction: column;
-
- /* Border */
- border: 1px solid #d1d5db;
- border-radius: 0.25rem;
-}
-
-.menu__item {
- /* Center the content horizontally */
- align-items: center;
- display: flex;
-}
-
-.menu__hotkey {
- /* Push the hot key to the right */
- margin-left: auto;
-}
-
-.menu__divider {
- border-bottom: 1px solid #d1d5db;
- height: 1px;
-}
-```
-
-{% demo %}{% include "covers/menu.njk" %}{% enddemo %}
diff --git a/contents/menu.mdx b/contents/menu.mdx
new file mode 100644
index 0000000..f947f69
--- /dev/null
+++ b/contents/menu.mdx
@@ -0,0 +1,187 @@
+---
+category: Navigation
+created: '2019-11-17'
+description: Create a menu with CSS flexbox
+keywords: css flexbox, css menu
+thumbnail: /assets/css-layout/thumbnails/menu.png
+title: Menu
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.menu {
+ display: flex;
+ flex-direction: column;
+
+ /* Border */
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+}
+
+.menu__item {
+ /* Center the content horizontally */
+ align-items: center;
+ display: flex;
+}
+
+.menu__hotkey {
+ /* Push the hot key to the right */
+ margin-left: auto;
+}
+
+.menu__divider {
+ border-bottom: 1px solid #d1d5db;
+ height: 1px;
+}
+```
+
+
+```css placeholders.css hidden
+.rectangle {
+ background: #d1d5db;
+ border-radius: 0.25rem;
+ height: var(--rectangle-height);
+ width: var(--rectangle-width);
+}
+.rectangle--hor.rectangle--20 {
+ --rectangle-width: 20%;
+}
+.rectangle--hor.rectangle--40 {
+ --rectangle-width: 40%;
+}
+.rectangle--hor.rectangle--60 {
+ --rectangle-width: 60%;
+}
+.rectangle--hor.rectangle--80 {
+ --rectangle-width: 80%;
+}
+.rectangle--hor.rectangle--100 {
+ --rectangle-width: 100%;
+}
+.rectangle--hor.rectangle--sm {
+ --rectangle-height: 0.5rem;
+}
+.rectangle--hor.rectangle--md {
+ --rectangle-height: 2rem;
+}
+.rectangle--hor.rectangle--lg {
+ --rectangle-height: 4rem;
+}
+.rectangle--ver.rectangle--20 {
+ --rectangle-height: 20%;
+}
+.rectangle--ver.rectangle--40 {
+ --rectangle-height: 40%;
+}
+.rectangle--ver.rectangle--60 {
+ --rectangle-height: 60%;
+}
+.rectangle--ver.rectangle--80 {
+ --rectangle-height: 80%;
+}
+.rectangle--ver.rectangle--100 {
+ --rectangle-height: 100%;
+}
+.rectangle--ver.rectangle--sm {
+ --rectangle-width: 0.5rem;
+}
+.rectangle--ver.rectangle--md {
+ --rectangle-width: 2rem;
+}
+.rectangle--ver.rectangle--lg {
+ --rectangle-width: 4rem;
+}
+```
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+
+.menu {
+ display: flex;
+ flex-direction: column;
+
+ /* Border */
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+
+ /* Demo */
+ width: 16rem;
+}
+
+.menu__item {
+ /* Center the content horizontally */
+ align-items: center;
+ display: flex;
+
+ height: 2rem;
+ padding: 0.25rem;
+}
+.menu__item:hover {
+ background: #e5e7eb;
+}
+
+.menu__hotkey {
+ /* Push the hot key to the right */
+ margin-left: auto;
+}
+
+.menu__divider {
+ border-bottom: 1px solid #d1d5db;
+ height: 1px;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/modal.md b/contents/modal.md
deleted file mode 100644
index 271b335..0000000
--- a/contents/modal.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-layout: layouts/post.njk
-title: Modal
-description: Create a modal with CSS flexbox
-keywords: css dialog, css flexbox, css modal
----
-
-## HTML
-
-```html
-
-
-
-
-
- ...
-
-
-
-
-```
-
-## CSS
-
-```css
-.modal {
- /* Border */
- border: 1px solid #d1d5db;
- border-radius: 0.25rem;
-}
-
-.modal__header {
- display: flex;
- justify-content: space-between;
-
- /* Border */
- border-bottom: 1px solid #d1d5db;
-}
-
-.modal__footer {
- display: flex;
- /* Push the buttons to the right */
- justify-content: flex-end;
-
- /* Border */
- border-top: 1px solid #d1d5db;
-}
-```
-
-{% demo %}
-{% include "covers/modal.njk" %}
-{% enddemo %}
diff --git a/contents/modal.mdx b/contents/modal.mdx
new file mode 100644
index 0000000..008f1de
--- /dev/null
+++ b/contents/modal.mdx
@@ -0,0 +1,215 @@
+---
+category: Feedback
+created: '2019-11-17'
+description: Create a modal with CSS flexbox
+keywords: css dialog, css flexbox, css modal
+thumbnail: /assets/css-layout/thumbnails/modal.png
+title: Modal
+---
+
+## HTML
+
+```html
+
+
+
+
+
+ ...
+
+
+
+
+```
+
+## CSS
+
+```css
+.modal {
+ /* Border */
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+}
+
+.modal__header {
+ display: flex;
+ justify-content: space-between;
+
+ /* Border */
+ border-bottom: 1px solid #d1d5db;
+}
+
+.modal__footer {
+ display: flex;
+ /* Push the buttons to the right */
+ justify-content: flex-end;
+
+ /* Border */
+ border-top: 1px solid #d1d5db;
+}
+```
+
+
+```css placeholders.css hidden
+.lines {
+ padding: 0.25rem 0;
+ width: 100%;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+}
+.line {
+ background: #d1d5db;
+ height: 1px;
+ margin-bottom: 0.25rem;
+}
+.line.line--20 {
+ width: 20%;
+}
+.line.line--40 {
+ width: 40%;
+}
+.line.line--60 {
+ width: 60%;
+}
+.line.line--80 {
+ width: 80%;
+}
+.line.line--100 {
+ width: 100%;
+}
+.rectangle {
+ background: #d1d5db;
+ border-radius: 0.25rem;
+ height: var(--rectangle-height);
+ width: var(--rectangle-width);
+}
+.rectangle--hor.rectangle--20 {
+ --rectangle-width: 20%;
+}
+.rectangle--hor.rectangle--40 {
+ --rectangle-width: 40%;
+}
+.rectangle--hor.rectangle--60 {
+ --rectangle-width: 60%;
+}
+.rectangle--hor.rectangle--80 {
+ --rectangle-width: 80%;
+}
+.rectangle--hor.rectangle--100 {
+ --rectangle-width: 100%;
+}
+.rectangle--hor.rectangle--sm {
+ --rectangle-height: 0.5rem;
+}
+.rectangle--hor.rectangle--md {
+ --rectangle-height: 2rem;
+}
+.rectangle--hor.rectangle--lg {
+ --rectangle-height: 4rem;
+}
+.rectangle--ver.rectangle--20 {
+ --rectangle-height: 20%;
+}
+.rectangle--ver.rectangle--40 {
+ --rectangle-height: 40%;
+}
+.rectangle--ver.rectangle--60 {
+ --rectangle-height: 60%;
+}
+.rectangle--ver.rectangle--80 {
+ --rectangle-height: 80%;
+}
+.rectangle--ver.rectangle--100 {
+ --rectangle-height: 100%;
+}
+.rectangle--ver.rectangle--sm {
+ --rectangle-width: 0.5rem;
+}
+.rectangle--ver.rectangle--md {
+ --rectangle-width: 2rem;
+}
+.rectangle--ver.rectangle--lg {
+ --rectangle-width: 4rem;
+}
+```
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+.modal {
+ /* Border */
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+
+ display: flex;
+ flex-direction: column;
+
+ /* Demo */
+ width: 16rem;
+}
+
+.modal__header {
+ display: flex;
+ justify-content: space-between;
+
+ /* Border */
+ border-bottom: 1px solid #d1d5db;
+
+ padding: 0.25rem 0.5rem;
+}
+
+.modal__body {
+ flex: 1;
+ overflow: auto;
+}
+
+.modal__footer {
+ display: flex;
+ /* Push the buttons to the right */
+ justify-content: flex-end;
+
+ /* Border */
+ border-top: 1px solid #d1d5db;
+
+ padding: 0.25rem 0.5rem;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/nested-dropdowns.md b/contents/nested-dropdowns.md
deleted file mode 100644
index e89c2d2..0000000
--- a/contents/nested-dropdowns.md
+++ /dev/null
@@ -1,103 +0,0 @@
----
-layout: layouts/post.njk
-title: Nested dropdowns
-description: Create nested dropdown menu with CSS
-keywords: css dropdown menu, css multi-level dropdown menu, css nested dropdown menu
----
-
-## HTML
-
-```html
-
- A
-
-
-
- B.1
- B.2
-
-
-
- B.3.1
- B.3.2
- B.3.3
- B.3.4
-
-
- B.4
- B.5
-
-
- C
- D
-
-```
-
-## CSS
-
-```css
-.nested-dropdowns {
- /* Border */
- border: 1px solid #d1d5db;
- display: flex;
-
- /* Reset list styles */
- list-style-type: none;
- margin: 0;
- padding: 0;
-}
-
-.nested-dropdowns li {
- cursor: pointer;
-
- /* Spacing */
- padding: 0.25rem;
-
- /* Used to position the sub nested-dropdowns */
- position: relative;
-}
-
-/* The sub nested-dropdowns */
-.nested-dropdowns ul {
- /* Border */
- border: 1px solid #d1d5db;
-
- /* Hidden by default */
- display: none;
-
- /* Absolute position */
- left: 0;
- position: absolute;
- top: 100%;
-
- /* Reset styles */
- list-style-type: none;
- margin: 0;
- padding: 0;
-}
-
-/* The second level sub nested-dropdowns */
-.nested-dropdowns ul ul {
- left: 100%;
- position: absolute;
- top: 0;
-}
-
-/* Change background color of list item when being hovered */
-.nested-dropdowns li:hover {
- background-color: rgba(0, 0, 0, 0.1);
-}
-
-/* Show the direct sub nested-dropdowns when hovering the list item */
-.nested-dropdowns li:hover > ul {
- display: block;
-}
-```
-
-{% demo %}{% include "covers/nested-dropdowns.njk" %}{% enddemo %}
diff --git a/contents/nested-dropdowns.mdx b/contents/nested-dropdowns.mdx
new file mode 100644
index 0000000..ba6561d
--- /dev/null
+++ b/contents/nested-dropdowns.mdx
@@ -0,0 +1,264 @@
+---
+category: Navigation
+created: '2020-01-13'
+description: Create nested dropdown menu with CSS
+keywords: css dropdown menu, css multi-level dropdown menu, css nested dropdown menu
+thumbnail: /assets/css-layout/thumbnails/nested-dropdowns.png
+title: Nested dropdowns
+---
+
+## HTML
+
+```html
+
+ A
+
+
+
+ B.1
+ B.2
+
+
+
+ B.3.1
+ B.3.2
+ B.3.3
+ B.3.4
+
+
+ B.4
+ B.5
+
+
+ C
+ D
+
+```
+
+## CSS
+
+```css
+.nested-dropdowns {
+ /* Border */
+ border: 1px solid #d1d5db;
+ display: flex;
+
+ /* Reset list styles */
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+.nested-dropdowns li {
+ cursor: pointer;
+
+ /* Spacing */
+ padding: 0.25rem;
+
+ /* Used to position the sub nested-dropdowns */
+ position: relative;
+}
+
+/* The sub nested-dropdowns */
+.nested-dropdowns ul {
+ /* Border */
+ border: 1px solid #d1d5db;
+
+ /* Hidden by default */
+ display: none;
+
+ /* Absolute position */
+ left: 0;
+ position: absolute;
+ top: 100%;
+
+ /* Reset styles */
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+/* The second level sub nested-dropdowns */
+.nested-dropdowns ul ul {
+ left: 100%;
+ position: absolute;
+ top: 0;
+}
+
+/* Change background color of list item when being hovered */
+.nested-dropdowns li:hover {
+ background-color: rgba(0, 0, 0, 0.1);
+}
+
+/* Show the direct sub nested-dropdowns when hovering the list item */
+.nested-dropdowns li:hover > ul {
+ display: block;
+}
+```
+
+
+```css placeholders.css hidden
+.triangle {
+ border-style: solid;
+ height: 0;
+ width: 0;
+}
+.triangle--t {
+ border-color: transparent transparent #d1d5db transparent;
+ border-width: 0 var(--triangle-size) var(--triangle-size) var(--triangle-size);
+}
+.triangle--r {
+ border-color: transparent transparent transparent #d1d5db;
+ border-width: var(--triangle-size) 0 var(--triangle-size) 1rem;
+}
+.triangle--b {
+ border-color: #d1d5db transparent transparent transparent;
+ border-width: var(--triangle-size) var(--triangle-size) 0 var(--triangle-size);
+}
+.triangle--l {
+ border-color: transparent #d1d5db transparent transparent;
+ border-width: var(--triangle-size) 1rem var(--triangle-size) 0;
+}
+.triangle--tr {
+ border-color: transparent #d1d5db transparent transparent;
+ border-width: 0 var(--triangle-size) var(--triangle-size) 0;
+}
+.triangle--br {
+ border-color: transparent transparent #d1d5db transparent;
+ border-width: 0 0 var(--triangle-size) var(--triangle-size);
+}
+.triangle--bl {
+ border-color: transparent transparent transparent #d1d5db;
+ border-width: var(--triangle-size) 0 0 var(--triangle-size);
+}
+.triangle--tl {
+ border-color: #d1d5db transparent transparent transparent;
+ border-width: var(--triangle-size) var(--triangle-size) 0 0;
+}
+.triangle--sm {
+ --triangle-size: 0.5rem;
+}
+.triangle--md {
+ --triangle-size: 2rem;
+}
+.triangle--lg {
+ --triangle-size: 4rem;
+}
+```
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ height: 32rem;
+}
+
+.nested-dropdowns {
+ /* Border */
+ border: 1px solid #d1d5db;
+ display: flex;
+
+ /* Reset list styles */
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+.nested-dropdowns li {
+ cursor: pointer;
+
+ /* Spacing */
+ padding: 0.25rem;
+
+ /* Used to position the sub nested-dropdowns */
+ position: relative;
+}
+
+/* The sub nested-dropdowns */
+.nested-dropdowns ul {
+ /* Border */
+ border: 1px solid #d1d5db;
+
+ /* Hidden by default */
+ display: none;
+
+ /* Absolute position */
+ left: 0;
+ position: absolute;
+ top: 100%;
+
+ /* Reset styles */
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+/* The second level sub nested-dropdowns */
+.nested-dropdowns ul ul {
+ left: 100%;
+ position: absolute;
+ top: 0;
+}
+
+/* Change background color of list item when being hovered */
+.nested-dropdowns li:hover {
+ background-color: rgba(0, 0, 0, 0.1);
+}
+
+/* Show the direct sub nested-dropdowns when hovering the list item */
+.nested-dropdowns li:hover > ul {
+ display: block;
+}
+
+/* Demo */
+.nested-dropdowns__item {
+ align-items: center;
+ display: flex;
+}
+.nested-dropdowns__arrow {
+ margin-left: 0.25rem;
+}
+```
+
+```html index.html hidden
+
+ A
+
+
+
+ B.1
+ B.2
+
+
+
+ B.3.1
+ B.3.2
+ B.3.3
+ B.3.4
+
+
+ B.4
+ B.5
+
+
+ C
+ D
+
+```
+
diff --git a/contents/notification.md b/contents/notification.md
deleted file mode 100644
index 514f0c9..0000000
--- a/contents/notification.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-layout: layouts/post.njk
-title: Notification
-description: Create a notification with CSS flexbox
-keywords: css alert, css flexbox, css notification
----
-
-## HTML
-
-```html
-
-```
-
-## CSS
-
-```css
-.notification {
- display: flex;
-}
-.notification__body {
- flex: 1;
- margin-right: 0.5rem;
-}
-```
-
-The [close button](/close-button/) represents the button for closing the notification.
-
-```css
-.notification__close {
- /* Reset */
- background-color: transparent;
- border-color: transparent;
-
- /* Cursor */
- cursor: pointer;
-
- /* Size */
- height: 1rem;
- width: 1rem;
-
- /* Used to position the inner */
- position: relative;
-}
-
-.notification__close-line {
- /* Background color */
- background-color: #d1d5db;
-
- /* Position */
- position: absolute;
-
- /* Size */
- height: 1px;
- width: 100%;
-}
-
-.notification__close-line--first {
- /* Position */
- left: 0px;
- top: 50%;
- transform: translate(0%, -50%) rotate(45deg);
-
- /* Size */
- height: 1px;
- width: 100%;
-}
-
-.notification__close-line--second {
- /* Position */
- left: 50%;
- top: 0px;
- transform: translate(-50%, 0%) rotate(45deg);
-
- /* Size */
- height: 100%;
- width: 1px;
-}
-```
-
-{% demo %}
-{% include "covers/notification.njk" %}
-{% enddemo %}
diff --git a/contents/notification.mdx b/contents/notification.mdx
new file mode 100644
index 0000000..c15488a
--- /dev/null
+++ b/contents/notification.mdx
@@ -0,0 +1,211 @@
+---
+category: Feedback
+created: '2019-11-17'
+description: Create a notification with CSS flexbox
+keywords: css alert, css flexbox, css notification
+thumbnail: /assets/css-layout/thumbnails/notification.png
+title: Notification
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.notification {
+ display: flex;
+}
+.notification__body {
+ flex: 1;
+ margin-right: 0.5rem;
+}
+```
+
+The [close button](https://phuoc.ng/collection/css-layout/close-button) represents the button for closing the notification.
+
+```css
+.notification__close {
+ /* Reset */
+ background-color: transparent;
+ border-color: transparent;
+
+ /* Cursor */
+ cursor: pointer;
+
+ /* Size */
+ height: 1rem;
+ width: 1rem;
+
+ /* Used to position the inner */
+ position: relative;
+}
+
+.notification__close-line {
+ /* Background color */
+ background-color: #d1d5db;
+
+ /* Position */
+ position: absolute;
+
+ /* Size */
+ height: 1px;
+ width: 100%;
+}
+
+.notification__close-line--first {
+ /* Position */
+ left: 0px;
+ top: 50%;
+ transform: translate(0%, -50%) rotate(45deg);
+
+ /* Size */
+ height: 1px;
+ width: 100%;
+}
+
+.notification__close-line--second {
+ /* Position */
+ left: 50%;
+ top: 0px;
+ transform: translate(-50%, 0%) rotate(45deg);
+
+ /* Size */
+ height: 100%;
+ width: 1px;
+}
+```
+
+
+```css placeholders.css hidden
+.lines {
+ padding: 0.25rem 0;
+ width: 100%;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+}
+.line {
+ background: #d1d5db;
+ height: 1px;
+ margin-bottom: 0.25rem;
+}
+.line.line--20 {
+ width: 20%;
+}
+.line.line--40 {
+ width: 40%;
+}
+.line.line--60 {
+ width: 60%;
+}
+.line.line--80 {
+ width: 80%;
+}
+.line.line--100 {
+ width: 100%;
+}
+```
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+.notification {
+ display: flex;
+
+ /* Demo */
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ padding: 0.25rem;
+ width: 16rem;
+}
+.notification__body {
+ flex: 1;
+ margin-right: 0.5rem;
+}
+
+.notification__close {
+ /* Reset */
+ background-color: transparent;
+ border-color: transparent;
+
+ /* Cursor */
+ cursor: pointer;
+
+ /* Size */
+ height: 1rem;
+ width: 1rem;
+
+ /* Used to position the inner */
+ position: relative;
+}
+
+.notification__close-line {
+ /* Background color */
+ background-color: #d1d5db;
+
+ /* Position */
+ position: absolute;
+
+ /* Size */
+ height: 1px;
+ width: 100%;
+}
+
+.notification__close-line--first {
+ /* Position */
+ left: 0px;
+ top: 50%;
+ transform: translate(0%, -50%) rotate(45deg);
+
+ /* Size */
+ height: 1px;
+ width: 100%;
+}
+
+.notification__close-line--second {
+ /* Position */
+ left: 50%;
+ top: 0px;
+ transform: translate(-50%, 0%) rotate(45deg);
+
+ /* Size */
+ height: 100%;
+ width: 1px;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/overlay-play-button.md b/contents/overlay-play-button.md
deleted file mode 100644
index c7e1180..0000000
--- a/contents/overlay-play-button.md
+++ /dev/null
@@ -1,65 +0,0 @@
----
-layout: layouts/post.njk
-title: Overlay play button
-description: Create an overlay play button with CSS flexbox
-keywords: css flexbox
----
-
-## HTML
-
-```html
-
-```
-
-## CSS
-
-```css
-.overlay-play-button {
- /* Used to position the overlay */
- position: relative;
-}
-
-.overlay-play-button__overlay {
- /* Position */
- left: 0;
- position: absolute;
- top: 0;
-
- /* Take full size */
- height: 100%;
- width: 100%;
-
- /* Center the content */
- align-items: center;
- display: flex;
- justify-content: center;
-
- /* Add a dark background */
- background-color: rgba(0, 0, 0, 0.25);
-}
-
-.overlay-play-button__play {
- border: 0.25rem solid #fff;
- border-radius: 9999px;
- height: 3rem;
- width: 3rem;
-
- /* Center the content */
- align-items: center;
- display: flex;
- justify-content: center;
-}
-```
-
-{% demo %}
-{% include "covers/overlay-play-button.njk" %}
-{% enddemo %}
diff --git a/contents/overlay-play-button.mdx b/contents/overlay-play-button.mdx
new file mode 100644
index 0000000..9ed22e9
--- /dev/null
+++ b/contents/overlay-play-button.mdx
@@ -0,0 +1,168 @@
+---
+category: Display
+created: '2019-11-30'
+description: Create an overlay play button with CSS flexbox
+keywords: css flexbox
+thumbnail: /assets/css-layout/thumbnails/overlay-play-button.png
+title: Overlay play button
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.overlay-play-button {
+ /* Used to position the overlay */
+ position: relative;
+}
+
+.overlay-play-button__overlay {
+ /* Position */
+ left: 0;
+ position: absolute;
+ top: 0;
+
+ /* Take full size */
+ height: 100%;
+ width: 100%;
+
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ /* Add a dark background */
+ background-color: rgba(0, 0, 0, 0.25);
+}
+
+.overlay-play-button__play {
+ border: 0.25rem solid #fff;
+ border-radius: 9999px;
+ height: 3rem;
+ width: 3rem;
+
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+```
+
+
+```css placeholders.css hidden
+.triangle {
+ border-style: solid;
+ height: 0;
+ width: 0;
+}
+.triangle--t {
+ border-color: transparent transparent #d1d5db transparent;
+ border-width: 0 var(--triangle-size) var(--triangle-size) var(--triangle-size);
+}
+.triangle--r {
+ border-color: transparent transparent transparent #d1d5db;
+ border-width: var(--triangle-size) 0 var(--triangle-size) 1rem;
+}
+.triangle--b {
+ border-color: #d1d5db transparent transparent transparent;
+ border-width: var(--triangle-size) var(--triangle-size) 0 var(--triangle-size);
+}
+.triangle--l {
+ border-color: transparent #d1d5db transparent transparent;
+ border-width: var(--triangle-size) 1rem var(--triangle-size) 0;
+}
+.triangle--tr {
+ border-color: transparent #d1d5db transparent transparent;
+ border-width: 0 var(--triangle-size) var(--triangle-size) 0;
+}
+.triangle--br {
+ border-color: transparent transparent #d1d5db transparent;
+ border-width: 0 0 var(--triangle-size) var(--triangle-size);
+}
+.triangle--bl {
+ border-color: transparent transparent transparent #d1d5db;
+ border-width: var(--triangle-size) 0 0 var(--triangle-size);
+}
+.triangle--tl {
+ border-color: #d1d5db transparent transparent transparent;
+ border-width: var(--triangle-size) var(--triangle-size) 0 0;
+}
+.triangle--sm {
+ --triangle-size: 0.5rem;
+}
+.triangle--md {
+ --triangle-size: 2rem;
+}
+.triangle--lg {
+ --triangle-size: 4rem;
+}
+```
+
+```css styles.css hidden
+body {
+ height: 24rem;
+}
+.overlay-play-button {
+ /* Used to position the overlay */
+ position: relative;
+
+ /* Demo */
+ height: 100%;
+ width: 100%;
+}
+
+.overlay-play-button__overlay {
+ /* Position */
+ left: 0;
+ position: absolute;
+ top: 0;
+
+ /* Take full size */
+ height: 100%;
+ width: 100%;
+
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ /* Add a dark background */
+ background-color: #4b5563;
+}
+
+.overlay-play-button__play {
+ border: 0.25rem solid #fff;
+ border-radius: 9999px;
+ height: 3rem;
+ width: 3rem;
+
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/pagination.md b/contents/pagination.md
deleted file mode 100644
index 56773ae..0000000
--- a/contents/pagination.md
+++ /dev/null
@@ -1,48 +0,0 @@
----
-layout: layouts/post.njk
-title: Pagination
-description: Create a pagination with CSS flexbox
-keywords: css flexbox, css pagination
----
-
-## HTML
-
-```html
-
-```
-
-## CSS
-
-```css
-.pagination {
- display: flex;
-
- /* Border */
- border: 1px solid #d1d5db;
- border-radius: 4px;
-}
-
-.pagination__item {
- /* Center the content */
- align-items: center;
- display: flex;
- justify-content: center;
-}
-
-.pagination__item:not(:last-child) {
- /* Right border */
- border-right: 1px solid #d1d5db;
-}
-
-.pagination__item--active {
- background-color: #d1d5db;
-}
-```
-
-{% demo %}{% include "covers/pagination.njk" %}{% enddemo %}
diff --git a/contents/pagination.mdx b/contents/pagination.mdx
new file mode 100644
index 0000000..c6233b5
--- /dev/null
+++ b/contents/pagination.mdx
@@ -0,0 +1,93 @@
+---
+category: Navigation
+created: '2019-11-17'
+description: Create a pagination with CSS flexbox
+keywords: css flexbox, css pagination
+thumbnail: /assets/css-layout/thumbnails/pagination.png
+title: Pagination
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.pagination {
+ display: flex;
+
+ /* Border */
+ border: 1px solid #d1d5db;
+ border-radius: 4px;
+}
+
+.pagination__item {
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+
+.pagination__item:not(:last-child) {
+ /* Right border */
+ border-right: 1px solid #d1d5db;
+}
+
+.pagination__item--active {
+ background-color: #d1d5db;
+}
+```
+
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+
+.pagination {
+ display: flex;
+
+ /* Border */
+ border: 1px solid #d1d5db;
+ border-radius: 4px;
+}
+
+.pagination__item {
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ padding: 0.25rem 0.5rem;
+}
+
+.pagination__item:not(:last-child) {
+ /* Right border */
+ border-right: 1px solid #d1d5db;
+}
+
+.pagination__item--active {
+ background-color: #d1d5db;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/popover-arrow.md b/contents/popover-arrow.mdx
similarity index 50%
rename from contents/popover-arrow.md
rename to contents/popover-arrow.mdx
index 1e8909f..08e6329 100644
--- a/contents/popover-arrow.md
+++ b/contents/popover-arrow.mdx
@@ -1,8 +1,10 @@
---
-layout: layouts/post.njk
-title: Popover arrow
+category: Feedback
+created: '2019-12-03'
description: Create a popover arrow with CSS
-keywords: css arrow, css popover
+keywords: css arrow, css
+thumbnail: /assets/css-layout/thumbnails/popover-arrow.png
+title: Popover arrow
---
## HTML
@@ -203,6 +205,184 @@ keywords: css arrow, css popover
}
```
-{% demo %}
-{% include "covers/popover-arrow.njk" %}
-{% enddemo %}
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ height: 24rem;
+}
+
+.popover-arrow {
+ /* Border */
+ border: 1px solid #d1d5db;
+
+ /* Used to position the arrow */
+ position: relative;
+
+ /* Demo */
+ height: 16rem;
+ width: 16rem;
+}
+
+.popover-arrow__arrow {
+ /* Size */
+ height: 1rem;
+ width: 1rem;
+
+ background-color: #fff;
+ position: absolute;
+}
+
+.popover-arrow__arrow--tl {
+ /* Position at the top left corner */
+ left: 1rem;
+ top: 0;
+
+ /* Border */
+ border-left: 1px solid #d1d5db;
+ border-top: 1px solid #d1d5db;
+ transform: translate(50%, -50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--tc {
+ /* Position at the top center */
+ left: 50%;
+ top: 0;
+
+ /* Border */
+ border-left: 1px solid #d1d5db;
+ border-top: 1px solid #d1d5db;
+ transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--tr {
+ /* Position at the top right corner */
+ right: 1rem;
+ top: 0;
+
+ /* Border */
+ border-left: 1px solid #d1d5db;
+ border-top: 1px solid #d1d5db;
+ transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--rt {
+ /* Position at the right top corner */
+ right: 0;
+ top: 1rem;
+
+ /* Border */
+ border-right: 1px solid #d1d5db;
+ border-top: 1px solid #d1d5db;
+ transform: translate(50%, 50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--rc {
+ /* Position at the right center */
+ right: 0;
+ top: 50%;
+
+ /* Border */
+ border-right: 1px solid #d1d5db;
+ border-top: 1px solid #d1d5db;
+ transform: translate(50%, -50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--rb {
+ /* Position at the right bottom corner */
+ bottom: 1rem;
+ right: 0;
+
+ /* Border */
+ border-right: 1px solid #d1d5db;
+ border-top: 1px solid #d1d5db;
+ transform: translate(50%, -50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--bl {
+ /* Position at the bottom left corner */
+ bottom: -1rem;
+ left: 1rem;
+
+ /* Border */
+ border-bottom: 1px solid #d1d5db;
+ border-right: 1px solid #d1d5db;
+ transform: translate(50%, -50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--bc {
+ /* Position at the bottom center */
+ bottom: -1rem;
+ left: 50%;
+
+ /* Border */
+ border-bottom: 1px solid #d1d5db;
+ border-right: 1px solid #d1d5db;
+ transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--br {
+ /* Position at the bottom right corner */
+ bottom: -1rem;
+ right: 1rem;
+
+ /* Border */
+ border-bottom: 1px solid #d1d5db;
+ border-right: 1px solid #d1d5db;
+ transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--lt {
+ /* Position at the left top corner */
+ left: 0;
+ top: 1rem;
+
+ /* Border */
+ border-bottom: 1px solid #d1d5db;
+ border-left: 1px solid #d1d5db;
+ transform: translate(-50%, 50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--lc {
+ /* Position at the left center */
+ left: 0;
+ top: 50%;
+
+ /* Border */
+ border-bottom: 1px solid #d1d5db;
+ border-left: 1px solid #d1d5db;
+ transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--lb {
+ /* Position at the left bottom corner */
+ bottom: 1rem;
+ left: 0;
+
+ /* Border */
+ border-bottom: 1px solid #d1d5db;
+ border-left: 1px solid #d1d5db;
+ transform: translate(-50%, -50%) rotate(45deg);
+}
+```
+
+```html index.html hidden
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/contents/presence-indicator.md b/contents/presence-indicator.md
deleted file mode 100644
index 399cafd..0000000
--- a/contents/presence-indicator.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-layout: layouts/post.njk
-title: Presence indicator
-description: Create a presence indicator with CSS
-keywords: css indicator
----
-
-## HTML
-
-```html
-
-```
-
-## CSS
-
-```css
-.presence-indicator {
- position: relative;
-}
-
-.presence-indicator__indicator {
- /* Shown at the bottom right corner */
- bottom: 0;
- position: absolute;
- right: 0;
- transform: translate(50%, 50%);
-
- /* Rounded border */
- border-radius: 9999px;
- height: 1rem;
- width: 1rem;
-
- /* Background color */
- background-color: #22c55e;
-}
-```
-
-{% demo %}
-{% include "covers/presence-indicator.njk" %}
-{% enddemo %}
diff --git a/contents/presence-indicator.mdx b/contents/presence-indicator.mdx
new file mode 100644
index 0000000..6094065
--- /dev/null
+++ b/contents/presence-indicator.mdx
@@ -0,0 +1,86 @@
+---
+category: Feedback
+created: '2019-11-29'
+description: Create a presence indicator with CSS
+keywords: css indicator
+thumbnail: /assets/css-layout/thumbnails/presence-indicator.png
+title: Presence indicator
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.presence-indicator {
+ position: relative;
+}
+
+.presence-indicator__indicator {
+ /* Shown at the bottom right corner */
+ bottom: 0;
+ position: absolute;
+ right: 0;
+ transform: translate(50%, 50%);
+
+ /* Rounded border */
+ border-radius: 9999px;
+ height: 1rem;
+ width: 1rem;
+
+ /* Background color */
+ background-color: #22c55e;
+}
+```
+
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+
+.presence-indicator {
+ position: relative;
+
+ /* Demo */
+ background-color: #d1d5db;
+ border-radius: 9999px;
+ height: 6rem;
+ width: 6rem;
+}
+
+.presence-indicator__indicator {
+ /* Shown at the bottom right corner */
+ bottom: 0;
+ position: absolute;
+ right: 0;
+ transform: translate(50%, 50%);
+
+ /* Rounded border */
+ border-radius: 9999px;
+ height: 1rem;
+ width: 1rem;
+
+ /* Background color */
+ background-color: #22c55e;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/previous-next-buttons.md b/contents/previous-next-buttons.md
deleted file mode 100644
index 9758dca..0000000
--- a/contents/previous-next-buttons.md
+++ /dev/null
@@ -1,36 +0,0 @@
----
-layout: layouts/post.njk
-title: Previous next buttons
-description: Create previous and next buttons with CSS flexbox
-keywords: css flexbox, css pagination
----
-
-## HTML
-
-```html
-
-```
-
-## CSS
-
-```css
-.previous-next-buttons {
- align-items: center;
- display: flex;
- justify-content: space-between;
-}
-```
-
-You can use the [arrow buttons](/arrow-buttons/) to create the previous and next buttons.
-
-{% demo %}{% include "covers/previous-next-buttons.njk" %}{% enddemo %}
diff --git a/contents/previous-next-buttons.mdx b/contents/previous-next-buttons.mdx
new file mode 100644
index 0000000..175d7e3
--- /dev/null
+++ b/contents/previous-next-buttons.mdx
@@ -0,0 +1,105 @@
+---
+category: Navigation
+created: '2019-11-17'
+description: Create previous and next buttons with CSS flexbox
+keywords: css flexbox, css pagination
+thumbnail: /assets/css-layout/thumbnails/previous-next-buttons.png
+title: Previous next buttons
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.previous-next-buttons {
+ align-items: center;
+ display: flex;
+ justify-content: space-between;
+}
+```
+
+You can use the [arrow buttons](https://phuoc.ng/collection/css-layout/arrow-buttons) to create the previous and next buttons.
+
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+
+.previous-next-buttons {
+ align-items: center;
+ display: flex;
+ justify-content: space-between;
+
+ /* Demo */
+ width: 16rem;
+}
+
+.previous-next-buttons__nav {
+ position: relative;
+
+ /* Demo */
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ padding: 0.25rem 0.5rem;
+
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ height: 2rem;
+ width: 3rem;
+}
+
+.previous-next-buttons__button {
+ /* Transparent background */
+ background-color: transparent;
+
+ /* Size */
+ height: 0.5rem;
+ width: 0.5rem;
+}
+
+.previous-next-buttons__button--r {
+ /* Edges */
+ border-right: 1px solid #d1d5db;
+ border-top: 1px solid #d1d5db;
+ transform: translateX(-25%) rotate(45deg);
+}
+
+.previous-next-buttons__button--l {
+ /* Edges */
+ border-bottom: 1px solid #d1d5db;
+ border-left: 1px solid #d1d5db;
+ transform: translateX(25%) rotate(45deg);
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/price-tag.md b/contents/price-tag.md
deleted file mode 100644
index dac0c56..0000000
--- a/contents/price-tag.md
+++ /dev/null
@@ -1,78 +0,0 @@
----
-layout: layouts/post.njk
-title: Price tag
-description: Create a price tag with CSS
-keywords: css price tag
----
-
-## HTML
-
-```html
-...
-```
-
-## CSS
-
-```css
-:root {
- --price-tag-background: #d1d5db;
- --price-tag-height: 2rem;
-}
-
-.price-tag {
- background: var(--price-tag-background);
- color: #fff;
-
- /* Center the price */
- align-items: center;
- display: flex;
- justify-content: center;
-
- /* Used to position the triangle */
- position: relative;
-
- /* Size */
- height: var(--price-tag-height);
-
- /* Spacing */
- padding: 0.25rem 0.5rem;
-}
-
-/* The triangle */
-.price-tag::before {
- content: '';
-
- border-color: transparent var(--price-tag-background) transparent transparent;
- border-style: solid;
- border-width: calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2) 0rem;
-
- /* Position */
- left: 0px;
- position: absolute;
- top: 0px;
- transform: translate(-100%, 0px);
-}
-
-/* The dot */
-.price-tag::after {
- content: '';
-
- /* Make it like a cirle */
- background: #fff;
- border-radius: 9999rem;
-
- /* Position */
- left: 0;
- position: absolute;
- top: 50%;
- transform: translate(-0.5rem, -50%);
-
- /* Size */
- height: 0.5rem;
- width: 0.5rem;
-}
-```
-
-{% demo %}
-{% include "covers/price-tag.njk" %}
-{% enddemo %}
diff --git a/contents/price-tag.mdx b/contents/price-tag.mdx
new file mode 100644
index 0000000..67e82b4
--- /dev/null
+++ b/contents/price-tag.mdx
@@ -0,0 +1,149 @@
+---
+category: Display
+created: '2021-04-03'
+description: Create a price tag with CSS
+keywords: css price tag
+thumbnail: /assets/css-layout/thumbnails/price-tag.png
+title: Price tag
+---
+
+## HTML
+
+```html
+...
+```
+
+## CSS
+
+```css
+:root {
+ --price-tag-background: #d1d5db;
+ --price-tag-height: 2rem;
+}
+
+.price-tag {
+ background: var(--price-tag-background);
+ color: #fff;
+
+ /* Center the price */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ /* Used to position the triangle */
+ position: relative;
+
+ /* Size */
+ height: var(--price-tag-height);
+
+ /* Spacing */
+ padding: 0.25rem 0.5rem;
+}
+
+/* The triangle */
+.price-tag::before {
+ content: '';
+
+ border-color: transparent var(--price-tag-background) transparent transparent;
+ border-style: solid;
+ border-width: calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2) 0rem;
+
+ /* Position */
+ left: 0px;
+ position: absolute;
+ top: 0px;
+ transform: translate(-100%, 0px);
+}
+
+/* The dot */
+.price-tag::after {
+ content: '';
+
+ /* Make it like a cirle */
+ background: #fff;
+ border-radius: 9999rem;
+
+ /* Position */
+ left: 0;
+ position: absolute;
+ top: 50%;
+ transform: translate(-0.5rem, -50%);
+
+ /* Size */
+ height: 0.5rem;
+ width: 0.5rem;
+}
+```
+
+
+```css styles.css hidden
+:root {
+ --price-tag-background: #d1d5db;
+ --price-tag-height: 2rem;
+}
+
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+
+.price-tag {
+ background: var(--price-tag-background);
+ color: #fff;
+
+ /* Center the price */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ /* Used to position the triangle */
+ position: relative;
+
+ /* Size */
+ height: var(--price-tag-height);
+
+ /* Spacing */
+ padding: 0.25rem 0.5rem;
+}
+
+/* The triangle */
+.price-tag::before {
+ content: '';
+
+ border-color: transparent var(--price-tag-background) transparent transparent;
+ border-style: solid;
+ border-width: calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2)
+ 0rem;
+
+ /* Position */
+ left: 0px;
+ position: absolute;
+ top: 0px;
+ transform: translate(-100%, 0px);
+}
+
+/* The dot */
+.price-tag::after {
+ content: '';
+
+ /* Make it like a cirle */
+ background: #fff;
+ border-radius: 9999rem;
+
+ /* Position */
+ left: 0;
+ position: absolute;
+ top: 50%;
+ transform: translate(-0.5rem, -50%);
+
+ /* Size */
+ height: 0.5rem;
+ width: 0.5rem;
+}
+```
+
+```html index.html hidden
+99.99$
+```
+
diff --git a/contents/pricing-table.md b/contents/pricing-table.md
deleted file mode 100644
index b2824e5..0000000
--- a/contents/pricing-table.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-layout: layouts/post.njk
-title: Pricing table
-description: Create a pricing table with CSS flexbox
-keywords: css flexbox, css pricing table
----
-
-## HTML
-
-```html
-
-
-
-
- ...
-
-
- ...
-
-
- ...
-
-
- ...
-
-
-
- ...
-
+
+
+
+ ...
+
+
+ ...
+
+
+ ...
+
+
+ ...
+
+
+
+ ...
+
+```css placeholders.css hidden
+.circle {
+ background: #d1d5db;
+ border-radius: 9999px;
+ height: var(--circle-size);
+ width: var(--circle-size);
+}
+.circle--sm {
+ --circle-size: 0.5rem;
+}
+.circle--md {
+ --circle-size: 1.5rem;
+}
+.circle--lg {
+ --circle-size: 4rem;
+}
+.lines {
+ padding: 0.25rem 0;
+ width: 100%;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+}
+.line {
+ background: #d1d5db;
+ height: 1px;
+ margin-bottom: 0.25rem;
+}
+.line.line--20 {
+ width: 20%;
+}
+.line.line--40 {
+ width: 40%;
+}
+.line.line--60 {
+ width: 60%;
+}
+.line.line--80 {
+ width: 80%;
+}
+.line.line--100 {
+ width: 100%;
+}
+.rectangle {
+ background: #d1d5db;
+ border-radius: 0.25rem;
+ height: var(--rectangle-height);
+ width: var(--rectangle-width);
+}
+.rectangle--hor.rectangle--20 {
+ --rectangle-width: 20%;
+}
+.rectangle--hor.rectangle--40 {
+ --rectangle-width: 40%;
+}
+.rectangle--hor.rectangle--60 {
+ --rectangle-width: 60%;
+}
+.rectangle--hor.rectangle--80 {
+ --rectangle-width: 80%;
+}
+.rectangle--hor.rectangle--100 {
+ --rectangle-width: 100%;
+}
+.rectangle--hor.rectangle--sm {
+ --rectangle-height: 0.5rem;
+}
+.rectangle--hor.rectangle--md {
+ --rectangle-height: 2rem;
+}
+.rectangle--hor.rectangle--lg {
+ --rectangle-height: 4rem;
+}
+.rectangle--ver.rectangle--20 {
+ --rectangle-height: 20%;
+}
+.rectangle--ver.rectangle--40 {
+ --rectangle-height: 40%;
+}
+.rectangle--ver.rectangle--60 {
+ --rectangle-height: 60%;
+}
+.rectangle--ver.rectangle--80 {
+ --rectangle-height: 80%;
+}
+.rectangle--ver.rectangle--100 {
+ --rectangle-height: 100%;
+}
+.rectangle--ver.rectangle--sm {
+ --rectangle-width: 0.5rem;
+}
+.rectangle--ver.rectangle--md {
+ --rectangle-width: 2rem;
+}
+.rectangle--ver.rectangle--lg {
+ --rectangle-width: 4rem;
+}
+```
+
+```css styles.css hidden
+.pricing-table {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+.pricing-table__column {
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ margin: 0 0.25rem;
+ padding: 0.25rem;
+
+ width: 16rem;
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/progress-bar.md b/contents/progress-bar.md
deleted file mode 100644
index ff6a1ed..0000000
--- a/contents/progress-bar.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-layout: layouts/post.njk
-title: Progress bar
-description: Create a progress bar with CSS flexbox
-keywords: css flexbox, css progress bar
----
-
-## HTML
-
-```html
-
-```
-
-## CSS
-
-```css
-.progress-bar {
- /* Colors */
- background-color: #d1d5db;
-
- /* Rounded border */
- border-radius: 9999px;
- padding: 0.25rem;
-}
-
-.progress-bar__progress {
- /* Center the content */
- align-items: center;
- display: flex;
- justify-content: center;
-
- /* Colors */
- background-color: #3b82f6;
- color: #fff;
-
- /* Rounded border */
- border-radius: 9999px;
-}
-```
-
-{% demo %}{% include "covers/progress-bar.njk" %}{% enddemo %}
-
-## See also
-
-- [Indeterminate progress bar](/indeterminate-progress-bar/)
diff --git a/contents/progress-bar.mdx b/contents/progress-bar.mdx
new file mode 100644
index 0000000..74694c2
--- /dev/null
+++ b/contents/progress-bar.mdx
@@ -0,0 +1,95 @@
+---
+category: Feedback
+created: '2019-11-17'
+description: Create a progress bar with CSS flexbox
+keywords: css flexbox, css progress bar
+thumbnail: /assets/css-layout/thumbnails/progress-bar.png
+title: Progress bar
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.progress-bar {
+ /* Colors */
+ background-color: #d1d5db;
+
+ /* Rounded border */
+ border-radius: 9999px;
+ padding: 0.25rem;
+}
+
+.progress-bar__progress {
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ /* Colors */
+ background-color: #3b82f6;
+ color: #fff;
+
+ /* Rounded border */
+ border-radius: 9999px;
+}
+```
+
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+
+.progress-bar {
+ /* Colors */
+ background-color: #d1d5db;
+
+ /* Rounded border */
+ border-radius: 9999px;
+ padding: 0.25rem;
+
+ /* Demo */
+ width: 16rem;
+}
+
+.progress-bar__progress {
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ /* Colors */
+ background-color: #3b82f6;
+ color: #fff;
+
+ /* Rounded border */
+ border-radius: 9999px;
+
+ width: 40%;
+}
+```
+
+```html index.html hidden
+
+```
+
+
+## See also
+
+- [Indeterminate progress bar](https://phuoc.ng/collection/css-layout/indeterminate-progress-bar)
diff --git a/contents/property-list.md b/contents/property-list.md
deleted file mode 100644
index ebeb537..0000000
--- a/contents/property-list.md
+++ /dev/null
@@ -1,49 +0,0 @@
----
-layout: layouts/post.njk
-title: Property list
-description: Create a property list with CSS flexbox
-keywords: css flexbox, property list
----
-
-## HTML
-
-```html
-
-
-
- ...
-
-
- ...
-
-
-
-...
-```
-
-## CSS
-
-```css
-.property-list {
- /* Content is center horizontally */
- align-items: center;
- display: flex;
-
- border-bottom: 1px solid #d1d5db;
-
- /* Spacing */
- margin: 0;
- padding: 0.25rem 0;
-}
-.property-list__key {
- /* Take the available width */
- flex: 1;
-}
-.property-list__value {
- margin-left: 0.5rem;
-}
-```
-
-{% demo %}
-{% include "covers/property-list.njk" %}
-{% enddemo %}
diff --git a/contents/property-list.mdx b/contents/property-list.mdx
new file mode 100644
index 0000000..e764e18
--- /dev/null
+++ b/contents/property-list.mdx
@@ -0,0 +1,171 @@
+---
+category: Display
+created: '2019-11-25'
+description: Create a property list with CSS flexbox
+keywords: css flexbox, property list
+thumbnail: /assets/css-layout/thumbnails/property-list.png
+title: Property list
+---
+
+## HTML
+
+```html
+
+
+
+ ...
+
+
+ ...
+
+
+
+...
+```
+
+## CSS
+
+```css
+.property-list {
+ /* Content is center horizontally */
+ align-items: center;
+ display: flex;
+
+ border-bottom: 1px solid #d1d5db;
+
+ /* Spacing */
+ margin: 0;
+ padding: 0.25rem 0;
+}
+.property-list__key {
+ /* Take the available width */
+ flex: 1;
+}
+.property-list__value {
+ margin-left: 0.5rem;
+}
+```
+
+
+```css placeholders.css hidden
+.circle {
+ background: #d1d5db;
+ border-radius: 9999px;
+ height: var(--circle-size);
+ width: var(--circle-size);
+}
+.circle--sm {
+ --circle-size: 0.5rem;
+}
+.circle--md {
+ --circle-size: 1.5rem;
+}
+.circle--lg {
+ --circle-size: 4rem;
+}
+.rectangle {
+ background: #d1d5db;
+ border-radius: 0.25rem;
+ height: var(--rectangle-height);
+ width: var(--rectangle-width);
+}
+.rectangle--hor.rectangle--20 {
+ --rectangle-width: 20%;
+}
+.rectangle--hor.rectangle--40 {
+ --rectangle-width: 40%;
+}
+.rectangle--hor.rectangle--60 {
+ --rectangle-width: 60%;
+}
+.rectangle--hor.rectangle--80 {
+ --rectangle-width: 80%;
+}
+.rectangle--hor.rectangle--100 {
+ --rectangle-width: 100%;
+}
+.rectangle--hor.rectangle--sm {
+ --rectangle-height: 0.5rem;
+}
+.rectangle--hor.rectangle--md {
+ --rectangle-height: 2rem;
+}
+.rectangle--hor.rectangle--lg {
+ --rectangle-height: 4rem;
+}
+.rectangle--ver.rectangle--20 {
+ --rectangle-height: 20%;
+}
+.rectangle--ver.rectangle--40 {
+ --rectangle-height: 40%;
+}
+.rectangle--ver.rectangle--60 {
+ --rectangle-height: 60%;
+}
+.rectangle--ver.rectangle--80 {
+ --rectangle-height: 80%;
+}
+.rectangle--ver.rectangle--100 {
+ --rectangle-height: 100%;
+}
+.rectangle--ver.rectangle--sm {
+ --rectangle-width: 0.5rem;
+}
+.rectangle--ver.rectangle--md {
+ --rectangle-width: 2rem;
+}
+.rectangle--ver.rectangle--lg {
+ --rectangle-width: 4rem;
+}
+```
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+.property-list {
+ /* Content is center horizontally */
+ align-items: center;
+ display: flex;
+
+ border-bottom: 1px solid #d1d5db;
+
+ /* Spacing */
+ margin: 0;
+ padding: 0.5rem 0;
+
+ width: 16rem;
+}
+.property-list__key {
+ /* Take the remaining width */
+ flex: 1;
+}
+.property-list__value {
+ margin-left: 0.5rem;
+}
+```
+
+```html index.html hidden
+
+
+
+
+
+
+
+
+
+
+
+```
+
diff --git a/contents/questions-and-answers.md b/contents/questions-and-answers.md
deleted file mode 100644
index 6bb6206..0000000
--- a/contents/questions-and-answers.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-layout: layouts/post.njk
-title: Questions and answers
-description: Create a questions and answers section with CSS flexbox
-keywords: css accordion, css faq, css flexbox
----
-
-## HTML
-
-```html
-
-
-
-
-...
-```
-
-## CSS
-
-```css
-.questions-and-answers__item:not(:last-child) {
- border-bottom: 1px solid #d1d5db;
-}
-.questions-and-answers__header {
- align-items: center;
- display: flex;
- justify-content: center;
- cursor: pointer;
- padding: 0.5rem;
-}
-.questions-and-answers__toggle {
- margin-right: 0.25rem;
-}
-.questions-and-answers__title {
- /* Take the available width */
- flex: 1;
-}
-.questions-and-answers__content {
- padding: 0 0.5rem;
-}
-
-.questions-and-answers__item--collapsed .questions-and-answers__content {
- display: none;
-}
-.questions-and-answers__item--expanded .questions-and-answers__content {
- display: block;
-}
-```
-
-{% demo %}
-{% include "covers/questions-and-answers.njk" %}
-{% enddemo %}
diff --git a/contents/questions-and-answers.mdx b/contents/questions-and-answers.mdx
new file mode 100644
index 0000000..fa7a3ac
--- /dev/null
+++ b/contents/questions-and-answers.mdx
@@ -0,0 +1,284 @@
+---
+category: Display
+created: '2019-11-23'
+description: Create a questions and answers section with CSS flexbox
+keywords: css accordion, css faq, css flexbox
+thumbnail: /assets/css-layout/thumbnails/questions-and-answers.png
+title: Questions and answers
+---
+
+## HTML
+
+```html
+
+
+
+
+...
+```
+
+## CSS
+
+```css
+.questions-and-answers__item:not(:last-child) {
+ border-bottom: 1px solid #d1d5db;
+}
+.questions-and-answers__header {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ cursor: pointer;
+ padding: 0.5rem;
+}
+.questions-and-answers__toggle {
+ margin-right: 0.25rem;
+}
+.questions-and-answers__title {
+ /* Take the available width */
+ flex: 1;
+}
+.questions-and-answers__content {
+ padding: 0 0.5rem;
+}
+
+.questions-and-answers__item--collapsed .questions-and-answers__content {
+ display: none;
+}
+.questions-and-answers__item--expanded .questions-and-answers__content {
+ display: block;
+}
+```
+
+
+```css placeholders.css hidden
+.lines {
+ padding: 0.25rem 0;
+ width: 100%;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+}
+.line {
+ background: #d1d5db;
+ height: 1px;
+ margin-bottom: 0.25rem;
+}
+.line.line--20 {
+ width: 20%;
+}
+.line.line--40 {
+ width: 40%;
+}
+.line.line--60 {
+ width: 60%;
+}
+.line.line--80 {
+ width: 80%;
+}
+.line.line--100 {
+ width: 100%;
+}
+.rectangle {
+ background: #d1d5db;
+ border-radius: 0.25rem;
+ height: var(--rectangle-height);
+ width: var(--rectangle-width);
+}
+.rectangle--hor.rectangle--20 {
+ --rectangle-width: 20%;
+}
+.rectangle--hor.rectangle--40 {
+ --rectangle-width: 40%;
+}
+.rectangle--hor.rectangle--60 {
+ --rectangle-width: 60%;
+}
+.rectangle--hor.rectangle--80 {
+ --rectangle-width: 80%;
+}
+.rectangle--hor.rectangle--100 {
+ --rectangle-width: 100%;
+}
+.rectangle--hor.rectangle--sm {
+ --rectangle-height: 0.5rem;
+}
+.rectangle--hor.rectangle--md {
+ --rectangle-height: 2rem;
+}
+.rectangle--hor.rectangle--lg {
+ --rectangle-height: 4rem;
+}
+.rectangle--ver.rectangle--20 {
+ --rectangle-height: 20%;
+}
+.rectangle--ver.rectangle--40 {
+ --rectangle-height: 40%;
+}
+.rectangle--ver.rectangle--60 {
+ --rectangle-height: 60%;
+}
+.rectangle--ver.rectangle--80 {
+ --rectangle-height: 80%;
+}
+.rectangle--ver.rectangle--100 {
+ --rectangle-height: 100%;
+}
+.rectangle--ver.rectangle--sm {
+ --rectangle-width: 0.5rem;
+}
+.rectangle--ver.rectangle--md {
+ --rectangle-width: 2rem;
+}
+.rectangle--ver.rectangle--lg {
+ --rectangle-width: 4rem;
+}
+.triangle {
+ border-style: solid;
+ height: 0;
+ width: 0;
+}
+.triangle--t {
+ border-color: transparent transparent #d1d5db transparent;
+ border-width: 0 var(--triangle-size) var(--triangle-size) var(--triangle-size);
+}
+.triangle--r {
+ border-color: transparent transparent transparent #d1d5db;
+ border-width: var(--triangle-size) 0 var(--triangle-size) 1rem;
+}
+.triangle--b {
+ border-color: #d1d5db transparent transparent transparent;
+ border-width: var(--triangle-size) var(--triangle-size) 0 var(--triangle-size);
+}
+.triangle--l {
+ border-color: transparent #d1d5db transparent transparent;
+ border-width: var(--triangle-size) 1rem var(--triangle-size) 0;
+}
+.triangle--tr {
+ border-color: transparent #d1d5db transparent transparent;
+ border-width: 0 var(--triangle-size) var(--triangle-size) 0;
+}
+.triangle--br {
+ border-color: transparent transparent #d1d5db transparent;
+ border-width: 0 0 var(--triangle-size) var(--triangle-size);
+}
+.triangle--bl {
+ border-color: transparent transparent transparent #d1d5db;
+ border-width: var(--triangle-size) 0 0 var(--triangle-size);
+}
+.triangle--tl {
+ border-color: #d1d5db transparent transparent transparent;
+ border-width: var(--triangle-size) var(--triangle-size) 0 0;
+}
+.triangle--sm {
+ --triangle-size: 0.5rem;
+}
+.triangle--md {
+ --triangle-size: 2rem;
+}
+.triangle--lg {
+ --triangle-size: 4rem;
+}
+```
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+.questions-and-answers {
+ width: 16rem;
+}
+.questions-and-answers__item:not(:last-child) {
+ border-bottom: 1px solid #d1d5db;
+}
+.questions-and-answers__header {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ cursor: pointer;
+ padding: 0.5rem;
+}
+.questions-and-answers__toggle {
+ margin-right: 0.25rem;
+}
+.questions-and-answers__title {
+ flex: 1;
+}
+.questions-and-answers__content {
+ padding: 0 0.5rem;
+}
+
+.questions-and-answers__item--collapsed .questions-and-answers__content {
+ display: none;
+}
+.questions-and-answers__item--expanded .questions-and-answers__content {
+ display: block;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/radial-progress-bar.md b/contents/radial-progress-bar.mdx
similarity index 50%
rename from contents/radial-progress-bar.md
rename to contents/radial-progress-bar.mdx
index 29a33c7..e8903ca 100644
--- a/contents/radial-progress-bar.md
+++ b/contents/radial-progress-bar.mdx
@@ -1,8 +1,10 @@
---
-layout: layouts/post.njk
-title: Radial progress bar
+category: Feedback
+created: '2019-11-30'
description: Create a radial progress bar with CSS flexbox
keywords: css clip rect, css flexbox, css progress bar
+thumbnail: /assets/css-layout/thumbnails/radial-progress-bar.png
+title: Radial progress bar
---
## HTML
@@ -109,6 +111,100 @@ keywords: css clip rect, css flexbox, css progress bar
}
```
-{% demo %}
-{% include "covers/radial-progress-bar.njk" %}
-{% enddemo %}
+
+```css styles.css hidden
+:root {
+ --radial-progress-bar-size: 8rem;
+ --radial-progress-bar-border-width: 0.75rem;
+}
+
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+
+.radial-progress-bar {
+ position: relative;
+ height: var(--radial-progress-bar-size);
+ width: var(--radial-progress-bar-size);
+}
+
+.radial-progress-bar__percentages {
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ /* Rounded border */
+ border: var(--radial-progress-bar-border-width) solid #d1d5db;
+ border-radius: 9999px;
+
+ /* Size */
+ height: 100%;
+ width: 100%;
+}
+
+.radial-progress-bar__curve {
+ /* Position */
+ left: 0;
+ position: absolute;
+ top: 0;
+
+ /* Take full size */
+ height: 100%;
+ width: 100%;
+
+ /* If percentages is less than 50 */
+ // clip: rect(0px, var(--radial-progress-bar-size), var(--radial-progress-bar-size), calc(var(--radial-progress-bar-size) * 0.5), 0px);
+
+ /* If percentages is greater than or equals to 50 */
+ clip: rect(auto, auto, auto, auto);
+}
+
+.radial-progress-bar__half {
+ /* Take full size */
+ height: 100%;
+ position: absolute;
+ width: 100%;
+
+ /*
+ Background color of curve.
+ The border width should be the same as the area showing the percentages
+ */
+ border: var(--radial-progress-bar-border-width) solid #3b82f6;
+ border-radius: 9999px;
+}
+
+.radial-progress-bar__half--first {
+ /* Position */
+ clip: rect(0px, calc(var(--radial-progress-bar-size) * 0.5), var(--radial-progress-bar-size), 0px);
+
+ /* Number of percentages * 360 / 100 */
+ transform: rotate(270deg);
+}
+
+.radial-progress-bar__half--second {
+ /* Position */
+ clip: rect(0px, calc(var(--radial-progress-bar-size) * 0.5), var(--radial-progress-bar-size), 0px);
+
+ /* If percentages is less than 50 */
+ // transform: rotate(0deg);
+
+ /* If percentages is greater than or equals to 50 */
+ transform: rotate(180deg);
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/radio-button-group.md b/contents/radio-button-group.md
deleted file mode 100644
index 137ed6b..0000000
--- a/contents/radio-button-group.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-layout: layouts/post.njk
-title: Radio button group
-description: Create a radio button group with CSS flexbox
-keywords: css flexbox, css radio button
----
-
-## HTML
-
-```html
-
-
-
-
-
-
-
- ...
-
-
- ...
-
-```
-
-## CSS
-
-```css
-.radio-button-group {
- display: flex;
-
- /* Border */
- border: 1px solid #d1d5db;
- border-radius: 0.25rem;
- height: 2rem;
-}
-
-.radio-button-group__label {
- /* Center the content */
- align-items: center;
- display: inline-flex;
-
- border-right: 1px solid #d1d5db;
- padding: 0.5rem;
-
- /* For not selected radio */
- background-color: transparent;
- color: #ccc;
-}
-
-.radio-button-group__label:last-child {
- /* Remove the right border from the last label */
- border-right-color: transparent;
-}
-
-.radio-button-group__label--selected {
- /* For selected radio */
- background-color: #3b82f6;
- color: #fff;
-
- margin-top: -1px;
- margin-bottom: -1px;
-}
-
-.radio-button-group__input {
- /* Hide it */
- display: none;
-}
-```
-
-{% demo %}{% include "covers/radio-button-group.njk" %}{% enddemo %}
diff --git a/contents/radio-button-group.mdx b/contents/radio-button-group.mdx
new file mode 100644
index 0000000..e6fce51
--- /dev/null
+++ b/contents/radio-button-group.mdx
@@ -0,0 +1,142 @@
+---
+category: Input
+created: '2019-12-01'
+description: Create a radio button group with CSS flexbox
+keywords: css flexbox, css radio button
+thumbnail: /assets/css-layout/thumbnails/radio-button-group.png
+title: Radio button group
+---
+
+## HTML
+
+```html
+
+
+
+
+
+
+
+ ...
+
+
+ ...
+
+```
+
+## CSS
+
+```css
+.radio-button-group {
+ display: flex;
+
+ /* Border */
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ height: 2rem;
+}
+
+.radio-button-group__label {
+ /* Center the content */
+ align-items: center;
+ display: inline-flex;
+
+ border-right: 1px solid #d1d5db;
+ padding: 0.5rem;
+
+ /* For not selected radio */
+ background-color: transparent;
+ color: #ccc;
+}
+
+.radio-button-group__label:last-child {
+ /* Remove the right border from the last label */
+ border-right-color: transparent;
+}
+
+.radio-button-group__label--selected {
+ /* For selected radio */
+ background-color: #3b82f6;
+ color: #fff;
+
+ margin-top: -1px;
+ margin-bottom: -1px;
+}
+
+.radio-button-group__input {
+ /* Hide it */
+ display: none;
+}
+```
+
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+
+.radio-button-group {
+ display: flex;
+
+ /* Border */
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ height: 2rem;
+}
+
+.radio-button-group__label {
+ /* Center the content */
+ align-items: center;
+ display: inline-flex;
+
+ border-right: 1px solid #d1d5db;
+ padding: 0.5rem;
+
+ /* For not selected radio */
+ background-color: transparent;
+ color: #ccc;
+}
+
+.radio-button-group__label:last-child {
+ /* Remove the right border from the last label */
+ border-right-color: transparent;
+}
+
+.radio-button-group__label--selected {
+ /* For selected radio */
+ background-color: #3b82f6;
+ color: #fff;
+
+ margin-top: -1px;
+ margin-bottom: -1px;
+}
+
+.radio-button-group__input {
+ /* Hide it */
+ display: none;
+}
+```
+
+```html index.html hidden
+
+
+
+
+
+
+
+
+
+
+```
+
diff --git a/contents/radio-switch.md b/contents/radio-switch.md
deleted file mode 100644
index fdd5d73..0000000
--- a/contents/radio-switch.md
+++ /dev/null
@@ -1,52 +0,0 @@
----
-layout: layouts/post.njk
-title: Radio switch
-description: Create a radio switch with CSS flexbox
-keywords: css flexbox, css radio switch, css switch
----
-
-## HTML
-
-```html
-
-
-
-
-
-
- ...
-
-```
-
-## CSS
-
-```css
-.radio-switch {
- background-color: #d1d5db;
- border-radius: 9999px;
- display: inline-flex;
- padding: 0.25rem;
-}
-
-.radio-switch__label {
- border-radius: 9999px;
- cursor: pointer;
- padding: 0.25rem 0.5rem;
-}
-
-.radio-switch__label--selected {
- /* For selected radio only */
- background-color: #3b82f6;
- color: #fff;
-}
-
-.radio-switch__input {
- display: none;
-}
-```
-
-{% demo %}{% include "covers/radio-switch.njk" %}{% enddemo %}
diff --git a/contents/radio-switch.mdx b/contents/radio-switch.mdx
new file mode 100644
index 0000000..63ba72f
--- /dev/null
+++ b/contents/radio-switch.mdx
@@ -0,0 +1,96 @@
+---
+category: Input
+created: '2019-11-24'
+description: Create a radio switch with CSS flexbox
+keywords: css flexbox, css radio switch, css switch
+thumbnail: /assets/css-layout/thumbnails/radio-switch.png
+title: Radio switch
+---
+
+## HTML
+
+```html
+
+
+
+
+
+
+ ...
+
+```
+
+## CSS
+
+```css
+.radio-switch {
+ background-color: #d1d5db;
+ border-radius: 9999px;
+ display: inline-flex;
+ padding: 0.25rem;
+}
+
+.radio-switch__label {
+ border-radius: 9999px;
+ cursor: pointer;
+ padding: 0.25rem 0.5rem;
+}
+
+.radio-switch__label--selected {
+ /* For selected radio only */
+ background-color: #3b82f6;
+ color: #fff;
+}
+
+.radio-switch__input {
+ display: none;
+}
+```
+
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+
+.radio-switch {
+ background-color: #d1d5db;
+ border-radius: 9999px;
+ display: inline-flex;
+ padding: 0.25rem;
+}
+
+.radio-switch__label {
+ border-radius: 9999px;
+ cursor: pointer;
+ padding: 0.25rem 0.5rem;
+}
+
+.radio-switch__label--selected {
+ /* For selected radio only */
+ background-color: #3b82f6;
+ color: #fff;
+}
+
+.radio-switch__input {
+ display: none;
+}
+```
+
+```html index.html hidden
+
+
+
+
+
+
+```
+
diff --git a/contents/rating.md b/contents/rating.md
deleted file mode 100644
index e74e380..0000000
--- a/contents/rating.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-layout: layouts/post.njk
-title: Rating
-description: Create a star rating with CSS flexbox
-keywords: css flexbox, css star rating
----
-
-## HTML
-
-```html
-
- ☆
- ☆
- ☆
- ☆
- ★
-
-```
-
-## CSS
-
-```css
-.rating {
- /* Center the content */
- align-items: center;
- display: flex;
- justify-content: center;
-
- flex-direction: row-reverse;
-}
-
-.rating__star:hover,
-.rating__star:hover ~ .rating__star {
- color: transparent;
-}
-
-/*
-Make all previous stars selected when hover on a star
-Note that we use \`flex-direction: row-reverse\` on the container
-*/
-.rating__star:hover:before,
-.rating__star:hover ~ .rating__star:before {
- color: #eab308;
- content: '★';
- left: 0;
- position: absolute;
-}
-
-.rating__star {
- font-size: 1.5rem;
-
- /* Reset styles for button */
- background-color: transparent;
- border: transparent;
- margin: 0 2px;
- padding: 0;
-
- /* Used to position the hover state */
- position: relative;
-}
-```
-
-{% demo %}{% include "covers/rating.njk" %}{% enddemo %}
diff --git a/contents/rating.mdx b/contents/rating.mdx
new file mode 100644
index 0000000..20a8650
--- /dev/null
+++ b/contents/rating.mdx
@@ -0,0 +1,122 @@
+---
+category: Input
+created: '2019-11-26'
+description: Create a star rating with CSS flexbox
+keywords: css flexbox, css star rating
+thumbnail: /assets/css-layout/thumbnails/rating.png
+title: Rating
+---
+
+## HTML
+
+```html
+
+ ☆
+ ☆
+ ☆
+ ☆
+ ★
+
+```
+
+## CSS
+
+```css
+.rating {
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ flex-direction: row-reverse;
+}
+
+.rating__star:hover,
+.rating__star:hover ~ .rating__star {
+ color: transparent;
+}
+
+/*
+Make all previous stars selected when hover on a star
+Note that we use \`flex-direction: row-reverse\` on the container
+*/
+.rating__star:hover:before,
+.rating__star:hover ~ .rating__star:before {
+ color: #eab308;
+ content: '★';
+ left: 0;
+ position: absolute;
+}
+
+.rating__star {
+ font-size: 1.5rem;
+
+ /* Reset styles for button */
+ background-color: transparent;
+ border: transparent;
+ margin: 0 2px;
+ padding: 0;
+
+ /* Used to position the hover state */
+ position: relative;
+}
+```
+
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+
+.rating {
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ flex-direction: row-reverse;
+}
+
+.rating__star:hover,
+.rating__star:hover ~ .rating__star {
+ color: transparent;
+}
+
+/*
+Make all previous stars selected when hover on a star
+Note that we use \`flex-direction: row-reverse\` on the container
+*/
+.rating__star:hover:before,
+.rating__star:hover ~ .rating__star:before {
+ color: #eab308;
+ content: '★';
+ left: 0;
+ position: absolute;
+}
+
+.rating__star {
+ font-size: 1.5rem;
+
+ /* Reset styles for button */
+ background-color: transparent;
+ border: transparent;
+ margin: 0 2px;
+ padding: 0;
+
+ /* Used to position the hover state */
+ position: relative;
+}
+```
+
+```html index.html hidden
+
+ ☆
+ ☆
+ ☆
+ ☆
+ ★
+
+```
+
diff --git a/contents/resizable-element.md b/contents/resizable-element.mdx
similarity index 52%
rename from contents/resizable-element.md
rename to contents/resizable-element.mdx
index 3c0a89c..888f3c2 100644
--- a/contents/resizable-element.md
+++ b/contents/resizable-element.mdx
@@ -1,8 +1,10 @@
---
-layout: layouts/post.njk
-title: Resizable element
+category: Feedback
+created: '2019-12-10'
description: Create resizable indicators with CSS
keywords: css resizable, css resize cursor
+thumbnail: /assets/css-layout/thumbnails/resizable-element.png
+title: Resizable element
---
## HTML
@@ -142,6 +144,129 @@ keywords: css resizable, css resize cursor
You can move the mouse over each squares located at the corners and the middle of sides to see the cursors which indicate the associated side can be resized.
-{% demo %}
-{% include "covers/resizable-element.njk" %}
-{% enddemo %}
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ height: 24rem;
+}
+
+.resizable-element {
+ /* Border */
+ border: 1px dashed #d1d5db;
+
+ /* Used to position the squares */
+ position: relative;
+
+ /* Demo */
+ height: 16rem;
+ width: 16rem;
+}
+
+.resizable-element__resizer {
+ /* Border */
+ border: 1px solid #d1d5db;
+ position: absolute;
+
+ /* Size */
+ height: 0.75rem;
+ width: 0.75rem;
+}
+
+.resizable-element__resizer--tl {
+ /* Resize cursor */
+ cursor: nwse-resize;
+
+ /* Positioned at the top left corner */
+ left: 0px;
+ top: 0px;
+ transform: translate(-50%, -50%);
+}
+
+.resizable-element__resizer--tc {
+ /* Resize cursor */
+ cursor: ns-resize;
+
+ /* Positioned at the middle of top side */
+ left: 50%;
+ top: 0px;
+ transform: translate(-50%, -50%);
+}
+
+.resizable-element__resizer--tr {
+ /* Resize cursor */
+ cursor: nesw-resize;
+
+ /* Positioned at the top right corner */
+ right: 0px;
+ top: 0px;
+ transform: translate(50%, -50%);
+}
+
+.resizable-element__resizer--rc {
+ /* Resize cursor */
+ cursor: ew-resize;
+
+ /* Positioned at the middle of right side */
+ right: 0px;
+ top: 50%;
+ transform: translate(50%, -50%);
+}
+
+.resizable-element__resizer--rb {
+ /* Resize cursor */
+ cursor: nwse-resize;
+
+ /* Positioned at the right bottom corner */
+ bottom: 0px;
+ right: 0px;
+ transform: translate(50%, 50%);
+}
+
+.resizable-element__resizer--bc {
+ /* Resize cursor */
+ cursor: ns-resize;
+
+ /* Positioned at the middle of bottom side */
+ bottom: 0px;
+ right: 50%;
+ transform: translate(50%, 50%);
+}
+
+.resizable-element__resizer--bl {
+ /* Resize cursor */
+ cursor: nesw-resize;
+
+ /* Positioned at the bottom left corner */
+ bottom: 0px;
+ left: 0px;
+ transform: translate(-50%, 50%);
+}
+
+.resizable-element__resizer--lc {
+ /* Resize cursor */
+ cursor: ew-resize;
+
+ /* Positioned at the middle of left side */
+ left: 0px;
+ top: 50%;
+ transform: translate(-50%, -50%);
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/ribbon.md b/contents/ribbon.mdx
similarity index 51%
rename from contents/ribbon.md
rename to contents/ribbon.mdx
index d321f89..6ba4681 100644
--- a/contents/ribbon.md
+++ b/contents/ribbon.mdx
@@ -1,8 +1,10 @@
---
-layout: layouts/post.njk
-title: Ribbon
+category: Display
+created: '2019-12-01'
description: Create a ribbon with CSS
keywords: css ribbon
+thumbnail: /assets/css-layout/thumbnails/ribbon.png
+title: Ribbon
---
## HTML
@@ -93,4 +95,83 @@ keywords: css ribbon
}
```
-{% demo %}{% include "covers/ribbon.njk" %}{% enddemo %}
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+.ribbon {
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ /* Size */
+ height: 2rem;
+ width: 4rem; /* For demo */
+
+ /* Use to position the corners */
+ position: relative;
+}
+
+.ribbon__content {
+ /* Background color */
+ background-color: #9ca3af;
+ z-index: 1;
+
+ height: 100%;
+ width: 100%;
+}
+.ribbon__side {
+ bottom: -0.5rem;
+ position: absolute;
+
+ /* Background */
+ border: 1rem solid #d1d5db;
+}
+
+.ribbon__side--l {
+ /* Position */
+ left: -1.5rem;
+ border-color: #d1d5db #d1d5db #d1d5db transparent;
+}
+
+.ribbon__side--r {
+ /* Position */
+ right: -1.5rem;
+ border-color: #d1d5db transparent #d1d5db #d1d5db;
+}
+
+.ribbon__triangle {
+ position: absolute;
+ top: 100%;
+
+ border: 0.5rem solid transparent;
+ border-bottom-width: 0;
+ border-top-color: #6b7280;
+ z-index: 1;
+}
+
+.ribbon__triangle--l {
+ border-right-width: 0;
+ left: 0;
+}
+
+.ribbon__triangle--r {
+ border-left-width: 0;
+ right: 0;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/robots.njk b/contents/robots.njk
deleted file mode 100644
index 95e8984..0000000
--- a/contents/robots.njk
+++ /dev/null
@@ -1,8 +0,0 @@
----
-permalink: '/robots.txt'
-eleventyExcludeFromCollections: true
----
-
-Sitemap: https://csslayout.io/sitemap.xml
-User-agent: *
-Disallow:
\ No newline at end of file
diff --git a/contents/same-height-columns.md b/contents/same-height-columns.md
deleted file mode 100644
index 3451bcf..0000000
--- a/contents/same-height-columns.md
+++ /dev/null
@@ -1,52 +0,0 @@
----
-layout: layouts/post.njk
-title: Same height columns
-description: Create same height columns with CSS flexbox
-keywords: css flexbox, css layout, css same height columns
----
-
-## HTML
-
-```html
-
-
-
-
- ...
-
-
-
...
-
-
- ...
-
-
-
- ...
-
+
+
+
+ ...
+
+
+
...
+
+
+ ...
+
+
+
+ ...
+
+```css placeholders.css hidden
+.lines {
+ padding: 0.25rem 0;
+ width: 100%;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+}
+.line {
+ background: #d1d5db;
+ height: 1px;
+ margin-bottom: 0.25rem;
+}
+.line.line--20 {
+ width: 20%;
+}
+.line.line--40 {
+ width: 40%;
+}
+.line.line--60 {
+ width: 60%;
+}
+.line.line--80 {
+ width: 80%;
+}
+.line.line--100 {
+ width: 100%;
+}
+```
+
+```css styles.css hidden
+body {
+ height: 24rem;
+}
+
+.same-height-columns {
+ display: flex;
+
+ /* Demo */
+ width: 100%;
+ height: 100%;
+}
+
+.same-height-columns__column {
+ flex: 1;
+ /* Space between columns */
+ margin: 0 0.25rem;
+
+ /* Layout each column */
+ display: flex;
+ flex-direction: column;
+
+ /* Demo */
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ padding: 0.25rem;
+}
+
+.same-height-columns__content {
+ /* Take available height */
+ flex: 1;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/search-box.md b/contents/search-box.md
deleted file mode 100644
index f3c3018..0000000
--- a/contents/search-box.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-layout: layouts/post.njk
-title: Search box
-description: Create a search box with CSS flexbox
-keywords: css flexbox, css search box
----
-
-## HTML
-
-```html
-
-
-
-```
-
-## CSS
-
-```css
-.search-box {
- display: flex;
-
- /* If you want to place the icon before the text input */
- flex-direction: row-reverse;
-
- /* Border */
- border: 1px solid #d1d5db;
-}
-
-.search-box__input {
- border-color: transparent;
- /* Take available width */
- flex: 1;
-}
-```
-
-{% demo %}{% include "covers/search-box.njk" %}{% enddemo %}
diff --git a/contents/search-box.mdx b/contents/search-box.mdx
new file mode 100644
index 0000000..ca99648
--- /dev/null
+++ b/contents/search-box.mdx
@@ -0,0 +1,100 @@
+---
+category: Input
+created: '2019-11-22'
+description: Create a search box with CSS flexbox
+keywords: css flexbox, css search box
+thumbnail: /assets/css-layout/thumbnails/search-box.png
+title: Search box
+---
+
+## HTML
+
+```html
+
+
+
+```
+
+## CSS
+
+```css
+.search-box {
+ display: flex;
+
+ /* If you want to place the icon before the text input */
+ flex-direction: row-reverse;
+
+ /* Border */
+ border: 1px solid #d1d5db;
+}
+
+.search-box__input {
+ border-color: transparent;
+ /* Take available width */
+ flex: 1;
+}
+```
+
+
+```css placeholders.css hidden
+.circle {
+ background: #d1d5db;
+ border-radius: 9999px;
+ height: var(--circle-size);
+ width: var(--circle-size);
+}
+.circle--sm {
+ --circle-size: 0.5rem;
+}
+.circle--md {
+ --circle-size: 1.5rem;
+}
+.circle--lg {
+ --circle-size: 4rem;
+}
+```
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+
+.search-box {
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+
+ display: flex;
+ align-items: center;
+
+ /* Demo */
+ padding: 0.25rem;
+ width: 16rem;
+}
+
+.search-box__input {
+ border-color: transparent;
+
+ /* Take available width */
+ flex: 1;
+
+ height: 2rem;
+ margin-right: 0.25rem;
+
+ /* Demo */
+ width: 6rem;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/separator.md b/contents/separator.md
deleted file mode 100644
index c8e8951..0000000
--- a/contents/separator.md
+++ /dev/null
@@ -1,58 +0,0 @@
----
-layout: layouts/post.njk
-title: Separator
-description: Create a separator with CSS flexbox
-keywords: css divider, css flexbox, css separator
----
-
-## HTML
-
-```html
-
-```
-
-## CSS
-
-```css
-.separator {
- /* Content is centered horizontally */
- align-items: center;
- display: flex;
-
- /* Used to set the position of text */
- position: relative;
-}
-
-.separator__content {
- /* We won't see the separator line */
- background: #fff;
-
- /* Displayed at the center of separator */
- left: 50%;
- position: absolute;
- top: 50%;
- transform: translate(-50%, -50%);
-
- /* Spacing */
- padding: 0 0.25rem;
-
- /* Demo */
- width: 60%;
-}
-
-.separator__separator {
- border-bottom: 1px solid #d1d5db;
- height: 1px;
- width: 100%;
-}
-```
-
-{% demo %}
-{% include "covers/separator.njk" %}
-{% enddemo %}
diff --git a/contents/separator.mdx b/contents/separator.mdx
new file mode 100644
index 0000000..6dfb384
--- /dev/null
+++ b/contents/separator.mdx
@@ -0,0 +1,165 @@
+---
+category: Display
+created: '2019-11-21'
+description: Create a separator with CSS flexbox
+keywords: css divider, css flexbox, css separator
+thumbnail: /assets/css-layout/thumbnails/separator.png
+title: Separator
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.separator {
+ /* Content is centered horizontally */
+ align-items: center;
+ display: flex;
+
+ /* Used to set the position of text */
+ position: relative;
+}
+
+.separator__content {
+ /* We won't see the separator line */
+ background: #fff;
+
+ /* Displayed at the center of separator */
+ left: 50%;
+ position: absolute;
+ top: 50%;
+ transform: translate(-50%, -50%);
+
+ /* Spacing */
+ padding: 0 0.25rem;
+
+ /* Demo */
+ width: 60%;
+}
+
+.separator__separator {
+ border-bottom: 1px solid #d1d5db;
+ height: 1px;
+ width: 100%;
+}
+```
+
+
+```css placeholders.css hidden
+.rectangle {
+ background: #d1d5db;
+ border-radius: 0.25rem;
+ height: var(--rectangle-height);
+ width: var(--rectangle-width);
+}
+.rectangle--hor.rectangle--20 {
+ --rectangle-width: 20%;
+}
+.rectangle--hor.rectangle--40 {
+ --rectangle-width: 40%;
+}
+.rectangle--hor.rectangle--60 {
+ --rectangle-width: 60%;
+}
+.rectangle--hor.rectangle--80 {
+ --rectangle-width: 80%;
+}
+.rectangle--hor.rectangle--100 {
+ --rectangle-width: 100%;
+}
+.rectangle--hor.rectangle--sm {
+ --rectangle-height: 0.5rem;
+}
+.rectangle--hor.rectangle--md {
+ --rectangle-height: 2rem;
+}
+.rectangle--hor.rectangle--lg {
+ --rectangle-height: 4rem;
+}
+.rectangle--ver.rectangle--20 {
+ --rectangle-height: 20%;
+}
+.rectangle--ver.rectangle--40 {
+ --rectangle-height: 40%;
+}
+.rectangle--ver.rectangle--60 {
+ --rectangle-height: 60%;
+}
+.rectangle--ver.rectangle--80 {
+ --rectangle-height: 80%;
+}
+.rectangle--ver.rectangle--100 {
+ --rectangle-height: 100%;
+}
+.rectangle--ver.rectangle--sm {
+ --rectangle-width: 0.5rem;
+}
+.rectangle--ver.rectangle--md {
+ --rectangle-width: 2rem;
+}
+.rectangle--ver.rectangle--lg {
+ --rectangle-width: 4rem;
+}
+```
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+
+.separator {
+ /* Content is centered horizontally */
+ align-items: center;
+ display: flex;
+
+ /* Used to set the position of text */
+ position: relative;
+
+ /* Demo */
+ width: 20rem;
+}
+
+.separator__content {
+ /* We won't see the separator line */
+ background: #fff;
+
+ /* Displayed at the center of separator */
+ left: 50%;
+ position: absolute;
+ top: 50%;
+ transform: translate(-50%, -50%);
+
+ /* Spacing */
+ padding: 0 0.25rem;
+
+ /* Demo */
+ width: 60%;
+}
+
+.separator__separator {
+ border-bottom: 1px solid #d1d5db;
+ height: 1px;
+ width: 100%;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/sidebar.md b/contents/sidebar.md
deleted file mode 100644
index 5008cf4..0000000
--- a/contents/sidebar.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-layout: layouts/post.njk
-title: Sidebar
-description: Create a sidebar with CSS flexbox
-keywords: css flexbox, css layout, css sidebar
----
-
-## HTML
-
-```html
-
-```
-
-## CSS
-
-```css
-.sidebar {
- display: flex;
-}
-
-.sidebar__sidebar {
- width: 30%;
-}
-
-.sidebar__main {
- /* Take the remaining width */
- flex: 1;
-
- /* Make it scrollable */
- overflow: auto;
-}
-```
-
-{% demo %}{% include "covers/sidebar.njk" %}{% enddemo %}
diff --git a/contents/sidebar.mdx b/contents/sidebar.mdx
new file mode 100644
index 0000000..d610e96
--- /dev/null
+++ b/contents/sidebar.mdx
@@ -0,0 +1,130 @@
+---
+category: Layout
+created: '2019-11-16'
+description: Create a sidebar with CSS flexbox
+keywords: css flexbox, css layout, css sidebar
+thumbnail: /assets/css-layout/thumbnails/sidebar.png
+title: Sidebar
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.sidebar {
+ display: flex;
+}
+
+.sidebar__sidebar {
+ width: 30%;
+}
+
+.sidebar__main {
+ /* Take the remaining width */
+ flex: 1;
+
+ /* Make it scrollable */
+ overflow: auto;
+}
+```
+
+
+```css placeholders.css hidden
+.lines {
+ padding: 0.25rem 0;
+ width: 100%;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+}
+.line {
+ background: #d1d5db;
+ height: 1px;
+ margin-bottom: 0.25rem;
+}
+.line.line--20 {
+ width: 20%;
+}
+.line.line--40 {
+ width: 40%;
+}
+.line.line--60 {
+ width: 60%;
+}
+.line.line--80 {
+ width: 80%;
+}
+.line.line--100 {
+ width: 100%;
+}
+```
+
+```css styles.css hidden
+body {
+ height: 24rem;
+}
+
+.sidebar {
+ display: flex;
+
+ /* Demo */
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ height: 100%;
+ width: 100%;
+}
+
+.sidebar__sidebar {
+ border-right: 1px solid #d1d5db;
+ width: 30%;
+
+ /* Demo */
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+}
+
+.sidebar__main {
+ /* Take the remaining width */
+ flex: 1;
+
+ /* Make it scrollable */
+ overflow: auto;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/simple-grid.md b/contents/simple-grid.md
deleted file mode 100644
index 409b841..0000000
--- a/contents/simple-grid.md
+++ /dev/null
@@ -1,52 +0,0 @@
----
-layout: layouts/post.njk
-title: Simple grid
-description: Create a simple grid with CSS flexbox
-keywords: css flexbox, css flexbox grid, css grid, css layout
----
-
-## HTML
-
-```html
-
-
-```
-
-## CSS
-
-```css
-.simple-grid {
- display: flex;
-
- margin-left: -0.25rem;
- margin-right: -0.25rem;
-}
-
-.simple-grid__cell {
- padding-left: 0.25rem;
- padding-right: 0.25rem;
-}
-
-.simple-grid__cell--fill {
- flex: 1;
-}
-
-/* Cell with given width */
-.simple-grid__cell--1\/2 {
- flex: 0 0 50%;
-}
-.simple-grid__cell--1\/3 {
- flex: 0 0 33.3333333%;
-}
-.simple-grid__cell--1\/4 {
- flex: 0 0 25%;
-}
-```
-
-{% demo %}{% include "covers/simple-grid.njk" %}{% enddemo %}
diff --git a/contents/simple-grid.mdx b/contents/simple-grid.mdx
new file mode 100644
index 0000000..9e7ee5b
--- /dev/null
+++ b/contents/simple-grid.mdx
@@ -0,0 +1,164 @@
+---
+category: Layout
+created: '2019-11-22'
+description: Create a simple grid with CSS flexbox
+keywords: css flexbox, css flexbox grid, css grid, css layout
+thumbnail: /assets/css-layout/thumbnails/simple-grid.png
+title: Simple grid
+---
+
+## HTML
+
+```html
+
+
+```
+
+## CSS
+
+```css
+.simple-grid {
+ display: flex;
+
+ margin-left: -0.25rem;
+ margin-right: -0.25rem;
+}
+
+.simple-grid__cell {
+ padding-left: 0.25rem;
+ padding-right: 0.25rem;
+}
+
+.simple-grid__cell--fill {
+ flex: 1;
+}
+
+/* Cell with given width */
+.simple-grid__cell--1\/2 {
+ flex: 0 0 50%;
+}
+.simple-grid__cell--1\/3 {
+ flex: 0 0 33.3333333%;
+}
+.simple-grid__cell--1\/4 {
+ flex: 0 0 25%;
+}
+```
+
+
+```css placeholders.css hidden
+.rectangle {
+ background: #d1d5db;
+ border-radius: 0.25rem;
+ height: var(--rectangle-height);
+ width: var(--rectangle-width);
+}
+.rectangle--hor.rectangle--20 {
+ --rectangle-width: 20%;
+}
+.rectangle--hor.rectangle--40 {
+ --rectangle-width: 40%;
+}
+.rectangle--hor.rectangle--60 {
+ --rectangle-width: 60%;
+}
+.rectangle--hor.rectangle--80 {
+ --rectangle-width: 80%;
+}
+.rectangle--hor.rectangle--100 {
+ --rectangle-width: 100%;
+}
+.rectangle--hor.rectangle--sm {
+ --rectangle-height: 0.5rem;
+}
+.rectangle--hor.rectangle--md {
+ --rectangle-height: 2rem;
+}
+.rectangle--hor.rectangle--lg {
+ --rectangle-height: 4rem;
+}
+.rectangle--ver.rectangle--20 {
+ --rectangle-height: 20%;
+}
+.rectangle--ver.rectangle--40 {
+ --rectangle-height: 40%;
+}
+.rectangle--ver.rectangle--60 {
+ --rectangle-height: 60%;
+}
+.rectangle--ver.rectangle--80 {
+ --rectangle-height: 80%;
+}
+.rectangle--ver.rectangle--100 {
+ --rectangle-height: 100%;
+}
+.rectangle--ver.rectangle--sm {
+ --rectangle-width: 0.5rem;
+}
+.rectangle--ver.rectangle--md {
+ --rectangle-width: 2rem;
+}
+.rectangle--ver.rectangle--lg {
+ --rectangle-width: 4rem;
+}
+```
+
+```css styles.css hidden
+.simple-grid {
+ display: flex;
+
+ margin-left: -0.25rem;
+ margin-right: -0.25rem;
+
+ /* Demo */
+ margin-bottom: 0.25em;
+ margin-top: 0.25em;
+ height: 4rem;
+ width: 100%;
+}
+
+.simple-grid__cell {
+ padding-left: 0.25rem;
+ padding-right: 0.25rem;
+}
+
+/* Cell with given width */
+.simple-grid__cell--1\/2 {
+ flex: 0 0 50%;
+}
+.simple-grid__cell--1\/3 {
+ flex: 0 0 33.3333333%;
+}
+.simple-grid__cell--1\/4 {
+ flex: 0 0 25%;
+}
+
+.simple-grid__cell--fill {
+ flex: 1;
+}
+```
+
+```html index.html hidden
+
+
+
+```
+
diff --git a/contents/sitemap.njk b/contents/sitemap.njk
deleted file mode 100644
index 5532ece..0000000
--- a/contents/sitemap.njk
+++ /dev/null
@@ -1,13 +0,0 @@
----
-permalink: /sitemap.xml
-eleventyExcludeFromCollections: true
----
-
-
- {% for page in collections.all %}
-
- https://csslayout.io{{ page.url | url }}
- {{ page.date.toISOString() }}
-
- {% endfor %}
-
\ No newline at end of file
diff --git a/contents/slider.md b/contents/slider.md
deleted file mode 100644
index 39f2631..0000000
--- a/contents/slider.md
+++ /dev/null
@@ -1,65 +0,0 @@
----
-layout: layouts/post.njk
-title: Slider
-description: Create a slider with CSS flexbox
-keywords: css flexbox, css slider
----
-
-## HTML
-
-```html
-
-```
-
-## CSS
-
-```css
-.slider {
- /* Content is centered horizontally */
- align-items: center;
- display: flex;
-
- /* Size */
- height: 2rem;
-}
-
-.slider__left {
- height: 2px;
-
- /* Colors */
- background-color: #d1d5db;
-}
-
-.slider__circle {
- /* Size */
- height: 2rem;
- width: 2rem;
-
- /* Rounded border */
- border-radius: 9999px;
-
- /* Colors */
- background-color: #3b82f6;
-}
-
-.slider__right {
- /* Take the remaining width */
- flex: 1;
- height: 2px;
-
- /* Colors */
- background-color: #d1d5db;
-}
-```
-
-{% demo %}{% include "covers/slider.njk" %}{% enddemo %}
diff --git a/contents/slider.mdx b/contents/slider.mdx
new file mode 100644
index 0000000..a847469
--- /dev/null
+++ b/contents/slider.mdx
@@ -0,0 +1,123 @@
+---
+category: Input
+created: '2019-11-17'
+description: Create a slider with CSS flexbox
+keywords: css flexbox, css slider
+thumbnail: /assets/css-layout/thumbnails/slider.png
+title: Slider
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.slider {
+ /* Content is centered horizontally */
+ align-items: center;
+ display: flex;
+
+ /* Size */
+ height: 2rem;
+}
+
+.slider__left {
+ height: 2px;
+
+ /* Colors */
+ background-color: #d1d5db;
+}
+
+.slider__circle {
+ /* Size */
+ height: 2rem;
+ width: 2rem;
+
+ /* Rounded border */
+ border-radius: 9999px;
+
+ /* Colors */
+ background-color: #3b82f6;
+}
+
+.slider__right {
+ /* Take the remaining width */
+ flex: 1;
+ height: 2px;
+
+ /* Colors */
+ background-color: #d1d5db;
+}
+```
+
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+
+.slider {
+ /* Content is centered horizontally */
+ align-items: center;
+ display: flex;
+
+ /* Size */
+ height: 2rem;
+
+ /* Demo */
+ width: 16rem;
+}
+
+.slider__left {
+ height: 2px;
+
+ /* Colors */
+ background-color: #d1d5db;
+}
+
+.slider__circle {
+ /* Size */
+ height: 2rem;
+ width: 2rem;
+
+ /* Rounded border */
+ border-radius: 9999px;
+
+ /* Colors */
+ background-color: #3b82f6;
+}
+
+.slider__right {
+ /* Take the remaining width */
+ flex: 1;
+ height: 2px;
+
+ /* Colors */
+ background-color: #d1d5db;
+}
+```
+
+```html index.html hidden
+
+```
+
diff --git a/contents/spin-button.md b/contents/spin-button.md
deleted file mode 100644
index a197646..0000000
--- a/contents/spin-button.md
+++ /dev/null
@@ -1,67 +0,0 @@
----
-layout: layouts/post.njk
-title: Spin button
-description: Create a spin button with CSS flexbox
-keywords: css flexbox, css spin button
----
-
-## HTML
-
-```html
-
-```
-
-## CSS
-
-```css
-.spin-button {
- border: 1px solid #d1d5db;
- border-radius: 0.25rem;
- display: flex;
- overflow: hidden;
-}
-
-.spin-button__input {
- border-color: transparent;
- padding: 0.5rem;
-
- /* Demo */
- width: 8rem;
-}
-
-.spin-button__buttons {
- /* Content is centered vertically */
- display: flex;
- flex-direction: column;
- justify-content: center;
-
- /* Left border */
- border-left: 1px solid #d1d5db;
-}
-
-.spin-button__button {
- /* Reset */
- background: #fff;
- border-color: transparent;
- cursor: pointer;
-
- /* Make buttons have the same height */
- flex: 1;
-}
-```
-
-You can use the [triangle buttons](/triangle-buttons/) to create the up and down buttons:
-
-{% demo %}{% include "covers/spin-button.njk" %}{% enddemo %}
diff --git a/contents/spin-button.mdx b/contents/spin-button.mdx
new file mode 100644
index 0000000..37e6df9
--- /dev/null
+++ b/contents/spin-button.mdx
@@ -0,0 +1,175 @@
+---
+category: Input
+created: '2019-11-25'
+description: Create a spin button with CSS flexbox
+keywords: css flexbox, css spin button
+thumbnail: /assets/css-layout/thumbnails/spin-button.png
+title: Spin button
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.spin-button {
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ display: flex;
+ overflow: hidden;
+}
+
+.spin-button__input {
+ border-color: transparent;
+ padding: 0.5rem;
+
+ /* Demo */
+ width: 8rem;
+}
+
+.spin-button__buttons {
+ /* Content is centered vertically */
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ /* Left border */
+ border-left: 1px solid #d1d5db;
+}
+
+.spin-button__button {
+ /* Reset */
+ background: #fff;
+ border-color: transparent;
+ cursor: pointer;
+
+ /* Make buttons have the same height */
+ flex: 1;
+}
+```
+
+You can use the [triangle buttons](https://phuoc.ng/collection/css-layout/triangle-buttons) to create the up and down buttons:
+
+
+```css placeholders.css hidden
+.triangle {
+ border-style: solid;
+ height: 0;
+ width: 0;
+}
+.triangle--t {
+ border-color: transparent transparent #d1d5db transparent;
+ border-width: 0 var(--triangle-size) var(--triangle-size) var(--triangle-size);
+}
+.triangle--r {
+ border-color: transparent transparent transparent #d1d5db;
+ border-width: var(--triangle-size) 0 var(--triangle-size) 1rem;
+}
+.triangle--b {
+ border-color: #d1d5db transparent transparent transparent;
+ border-width: var(--triangle-size) var(--triangle-size) 0 var(--triangle-size);
+}
+.triangle--l {
+ border-color: transparent #d1d5db transparent transparent;
+ border-width: var(--triangle-size) 1rem var(--triangle-size) 0;
+}
+.triangle--tr {
+ border-color: transparent #d1d5db transparent transparent;
+ border-width: 0 var(--triangle-size) var(--triangle-size) 0;
+}
+.triangle--br {
+ border-color: transparent transparent #d1d5db transparent;
+ border-width: 0 0 var(--triangle-size) var(--triangle-size);
+}
+.triangle--bl {
+ border-color: transparent transparent transparent #d1d5db;
+ border-width: var(--triangle-size) 0 0 var(--triangle-size);
+}
+.triangle--tl {
+ border-color: #d1d5db transparent transparent transparent;
+ border-width: var(--triangle-size) var(--triangle-size) 0 0;
+}
+.triangle--sm {
+ --triangle-size: 0.5rem;
+}
+.triangle--md {
+ --triangle-size: 2rem;
+}
+.triangle--lg {
+ --triangle-size: 4rem;
+}
+```
+
+```css styles.css hidden
+body {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+}
+
+.spin-button {
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ display: flex;
+ overflow: hidden;
+}
+
+.spin-button__input {
+ border-color: transparent;
+ padding: 0.5rem;
+
+ /* Demo */
+ width: 8rem;
+}
+
+.spin-button__buttons {
+ /* Content is centered vertically */
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ /* Left border */
+ border-left: 1px solid #d1d5db;
+}
+
+.spin-button__button {
+ /* Reset */
+ background: #fff;
+ border-color: transparent;
+ cursor: pointer;
+
+ /* Make buttons have the same height */
+ flex: 1;
+}
+```
+
+```html index.html hidden
+ 
-