feat: Sticky sections

2025-08-29 16:49:58 +02:00 · 2022-09-21 14:30:45 +07:00
parent 8191785762
commit d166d682ea
289 changed files with 251 additions and 387 deletions
--- a/contents/_includes/patterns/accordion.njk
+++ b/contents/_includes/patterns/accordion.njk
--- a/contents/_includes/patterns/arrow-buttons.njk
+++ b/contents/_includes/patterns/arrow-buttons.njk
--- a/contents/_includes/patterns/avatar-list.njk
+++ b/contents/_includes/patterns/avatar-list.njk
--- a/contents/_includes/patterns/avatar.njk
+++ b/contents/_includes/patterns/avatar.njk
--- a/contents/_includes/patterns/badge.njk
+++ b/contents/_includes/patterns/badge.njk
--- a/contents/_includes/patterns/button-with-icon.njk
+++ b/contents/_includes/patterns/button-with-icon.njk
--- a/contents/_includes/patterns/card-layout.njk
+++ b/contents/_includes/patterns/card-layout.njk
--- a/contents/_includes/patterns/card.njk
+++ b/contents/_includes/patterns/card.njk
--- a/contents/_includes/patterns/centering.njk
+++ b/contents/_includes/patterns/centering.njk
--- a/contents/_includes/patterns/chip.njk
+++ b/contents/_includes/patterns/chip.njk
--- a/contents/_includes/patterns/close-button.njk
+++ b/contents/_includes/patterns/close-button.njk
--- a/contents/_includes/patterns/color-swatch.njk
+++ b/contents/_includes/patterns/color-swatch.njk
--- a/contents/_includes/patterns/concave-corners.njk
+++ b/contents/_includes/patterns/concave-corners.njk
--- a/contents/_includes/patterns/cookie-banner.njk
+++ b/contents/_includes/patterns/cookie-banner.njk
--- a/contents/_includes/patterns/corner-ribbon.njk
+++ b/contents/_includes/patterns/corner-ribbon.njk
--- a/contents/_includes/patterns/curved-background.njk
+++ b/contents/_includes/patterns/curved-background.njk
--- a/contents/_includes/patterns/custom-checkbox-button.njk
+++ b/contents/_includes/patterns/custom-checkbox-button.njk
--- a/contents/_includes/patterns/custom-radio-button.njk
+++ b/contents/_includes/patterns/custom-radio-button.njk
--- a/contents/_includes/patterns/diagonal-section.njk
+++ b/contents/_includes/patterns/diagonal-section.njk
--- a/contents/_includes/patterns/docked-at-corner.njk
+++ b/contents/_includes/patterns/docked-at-corner.njk
--- a/contents/_includes/patterns/dot-leader.njk
+++ b/contents/_includes/patterns/dot-leader.njk
--- a/contents/_includes/patterns/drop-area.njk
+++ b/contents/_includes/patterns/drop-area.njk
--- a/contents/_includes/patterns/drop-cap.njk
+++ b/contents/_includes/patterns/drop-cap.njk
--- a/contents/_includes/patterns/fading-long-section.njk
+++ b/contents/_includes/patterns/fading-long-section.njk
--- a/contents/_includes/patterns/feature-comparison.njk
+++ b/contents/_includes/patterns/feature-comparison.njk
--- a/contents/_includes/patterns/feature-list.njk
+++ b/contents/_includes/patterns/feature-list.njk
--- a/contents/_includes/patterns/fixed-at-corner.njk
+++ b/contents/_includes/patterns/fixed-at-corner.njk
--- a/contents/_includes/patterns/fixed-at-side.njk
+++ b/contents/_includes/patterns/fixed-at-side.njk
--- a/contents/_includes/patterns/floating-label.njk
+++ b/contents/_includes/patterns/floating-label.njk
--- a/contents/_includes/patterns/folder-structure.njk
+++ b/contents/_includes/patterns/folder-structure.njk
--- a/contents/_includes/patterns/full-background.njk
+++ b/contents/_includes/patterns/full-background.njk
--- a/contents/_includes/patterns/holy-grail.njk
+++ b/contents/_includes/patterns/holy-grail.njk
--- a/contents/_includes/patterns/initial-avatar.njk
+++ b/contents/_includes/patterns/initial-avatar.njk
--- a/contents/_includes/patterns/input-addon.njk
+++ b/contents/_includes/patterns/input-addon.njk
--- a/contents/_includes/patterns/inverted-corners.njk
+++ b/contents/_includes/patterns/inverted-corners.njk
--- a/contents/_includes/patterns/keyboard-shortcut.njk
+++ b/contents/_includes/patterns/keyboard-shortcut.njk
--- a/contents/_includes/patterns/layered-card.njk
+++ b/contents/_includes/patterns/layered-card.njk
--- a/contents/_includes/patterns/lined-paper.njk
+++ b/contents/_includes/patterns/lined-paper.njk
--- a/contents/_includes/patterns/masonry-grid.njk
+++ b/contents/_includes/patterns/masonry-grid.njk
--- a/contents/_includes/patterns/media-object.njk
+++ b/contents/_includes/patterns/media-object.njk
--- a/contents/_includes/patterns/modal.njk
+++ b/contents/_includes/patterns/modal.njk
--- a/contents/_includes/patterns/notification.njk
+++ b/contents/_includes/patterns/notification.njk
--- a/contents/_includes/patterns/overlay-play-button.njk
+++ b/contents/_includes/patterns/overlay-play-button.njk
--- a/contents/_includes/patterns/popover-arrow.njk
+++ b/contents/_includes/patterns/popover-arrow.njk
--- a/contents/_includes/patterns/presence-indicator.njk
+++ b/contents/_includes/patterns/presence-indicator.njk
--- a/contents/_includes/patterns/price-tag.njk
+++ b/contents/_includes/patterns/price-tag.njk
--- a/contents/_includes/patterns/pricing-table.njk
+++ b/contents/_includes/patterns/pricing-table.njk
--- a/contents/_includes/patterns/progress-bar.njk
+++ b/contents/_includes/patterns/progress-bar.njk
--- a/contents/_includes/patterns/property-list.njk
+++ b/contents/_includes/patterns/property-list.njk
--- a/contents/_includes/patterns/questions-and-answers.njk
+++ b/contents/_includes/patterns/questions-and-answers.njk
--- a/contents/_includes/patterns/radial-progress-bar.njk
+++ b/contents/_includes/patterns/radial-progress-bar.njk
--- a/contents/_includes/patterns/radio-button-group.njk
+++ b/contents/_includes/patterns/radio-button-group.njk
--- a/contents/_includes/patterns/radio-switch.njk
+++ b/contents/_includes/patterns/radio-switch.njk
--- a/contents/_includes/patterns/rating.njk
+++ b/contents/_includes/patterns/rating.njk
--- a/contents/_includes/patterns/resizable-element.njk
+++ b/contents/_includes/patterns/resizable-element.njk
--- a/contents/_includes/patterns/ribbon.njk
+++ b/contents/_includes/patterns/ribbon.njk
--- a/contents/_includes/patterns/same-height-columns.njk
+++ b/contents/_includes/patterns/same-height-columns.njk
--- a/contents/_includes/patterns/search-box.njk
+++ b/contents/_includes/patterns/search-box.njk
--- a/contents/_includes/patterns/separator.njk
+++ b/contents/_includes/patterns/separator.njk
--- a/contents/_includes/patterns/sidebar.njk
+++ b/contents/_includes/patterns/sidebar.njk
--- a/contents/_includes/patterns/simple-grid.njk
+++ b/contents/_includes/patterns/simple-grid.njk
--- a/contents/_includes/patterns/slider.njk
+++ b/contents/_includes/patterns/slider.njk
--- a/contents/_includes/patterns/spin-button.njk
+++ b/contents/_includes/patterns/spin-button.njk
--- a/contents/_includes/patterns/split-screen.njk
+++ b/contents/_includes/patterns/split-screen.njk
--- a/contents/_includes/patterns/stacked-cards.njk
+++ b/contents/_includes/patterns/stacked-cards.njk
--- a/contents/_includes/patterns/stamp-border.njk
+++ b/contents/_includes/patterns/stamp-border.njk
--- a/contents/_includes/patterns/statistic.njk
+++ b/contents/_includes/patterns/statistic.njk
--- a/contents/_includes/patterns/status-light.njk
+++ b/contents/_includes/patterns/status-light.njk
--- a/contents/_includes/patterns/stepper-input.njk
+++ b/contents/_includes/patterns/stepper-input.njk
--- a/contents/_includes/patterns/sticky-footer.njk
+++ b/contents/_includes/patterns/sticky-footer.njk
--- a/contents/_includes/patterns/sticky-header.njk
+++ b/contents/_includes/patterns/sticky-header.njk
--- a/contents/_includes/covers/sticky-sections.njk
+++ b/contents/_includes/covers/sticky-sections.njk
@@ -0,0 +1,5 @@
+<div class="sticky-sections">
+    {% for i in range(0, 4) -%}
+    <section class="sticky-sections__section"></section>
+    {%- endfor %}
+</div>
--- a/contents/_includes/patterns/sticky-table-column.njk
+++ b/contents/_includes/patterns/sticky-table-column.njk
--- a/contents/_includes/patterns/sticky-table-headers.njk
+++ b/contents/_includes/patterns/sticky-table-headers.njk
--- a/contents/_includes/patterns/switch.njk
+++ b/contents/_includes/patterns/switch.njk
--- a/contents/_includes/patterns/teardrop.njk
+++ b/contents/_includes/patterns/teardrop.njk
--- a/contents/_includes/patterns/three-dimensions-card.njk
+++ b/contents/_includes/patterns/three-dimensions-card.njk
--- a/contents/_includes/patterns/timeline.njk
+++ b/contents/_includes/patterns/timeline.njk
--- a/contents/_includes/patterns/toggle-password-visibility.njk
+++ b/contents/_includes/patterns/toggle-password-visibility.njk
--- a/contents/_includes/patterns/tooltip.njk
+++ b/contents/_includes/patterns/tooltip.njk
--- a/contents/_includes/patterns/tree-diagram.njk
+++ b/contents/_includes/patterns/tree-diagram.njk
--- a/contents/_includes/patterns/triangle-buttons.njk
+++ b/contents/_includes/patterns/triangle-buttons.njk
--- a/contents/_includes/patterns/upload-button.njk
+++ b/contents/_includes/patterns/upload-button.njk
--- a/contents/_includes/patterns/validation-icon.njk
+++ b/contents/_includes/patterns/validation-icon.njk
--- a/contents/_includes/patterns/video-background.njk
+++ b/contents/_includes/patterns/video-background.njk
--- a/contents/_includes/patterns/voting.njk
+++ b/contents/_includes/patterns/voting.njk
--- a/contents/_includes/patterns/watermark.njk
+++ b/contents/_includes/patterns/watermark.njk
--- a/contents/_includes/patterns/zigzag-timeline.njk
+++ b/contents/_includes/patterns/zigzag-timeline.njk
--- a/contents/_includes/layouts/base.njk
+++ b/contents/_includes/layouts/base.njk
@@ -2,9 +2,6 @@
 <html lang="{{ metadata.language }}">
    <head>
        <title>{{ title or metadata.title }} - CSS Layout</title>   
-        <link rel="icon" href="/assets/favicon.png" type="image/png" />
-        <link rel="icon" href="/assets/favicon.svg" type="image/svg+xml" />
-        <link rel="mask-icon" href="/assets/mask-favicon.svg" color="#1975FF" />
        <meta charset="utf-8">
        <meta name="author" content="Nguyen Huu Phuoc" />
        <meta name="description" content="{{ description or title }}" />
--- a/contents/accordion.md
+++ b/contents/accordion.md
@@ -85,5 +85,5 @@ keywords: css accordion, css flexbox
 ```

 {% demo %}
-{% include "patterns/accordion.njk" %}
+{% include "covers/accordion.njk" %}
 {% enddemo %}
--- a/contents/arrow-buttons.md
+++ b/contents/arrow-buttons.md
@@ -87,5 +87,5 @@ keywords: css arrow buttons
 ```

 {% demo %}
-{% include "patterns/arrow-buttons.njk" %}
+{% include "covers/arrow-buttons.njk" %}
 {% enddemo %}
--- a/contents/avatar-list.md
+++ b/contents/avatar-list.md
@@ -49,5 +49,5 @@ keywords: css avatar, css flexbox
 ```

 {% demo %}
-{% include "patterns/avatar-list.njk" %}
+{% include "covers/avatar-list.njk" %}
 {% enddemo %}
--- a/contents/avatar.md
+++ b/contents/avatar.md
@@ -39,5 +39,5 @@ keywords: css avatar, css flexbox
 ```

 {% demo %}
-{% include "patterns/avatar.njk" %}
+{% include "covers/avatar.njk" %}
 {% enddemo %}
--- a/contents/badge.md
+++ b/contents/badge.md
@@ -33,4 +33,4 @@ keywords: css badge, css flexbox
 }
 ```

-{% demo %}{% include "patterns/badge.njk" %}{% enddemo %}
+{% demo %}{% include "covers/badge.njk" %}{% enddemo %}
--- a/contents/button-with-icon.md
+++ b/contents/button-with-icon.md
@@ -36,5 +36,5 @@ keywords: css flexbox, css icon button
 ```

 {% demo %}
-{% include "patterns/button-with-icon.njk" %}
+{% include "covers/button-with-icon.njk" %}
 {% enddemo %}
--- a/contents/card-layout.md
+++ b/contents/card-layout.md
@@ -41,4 +41,4 @@ keywords: css card layout, css flexbox, css layout
 }
 ```

-{% demo %}{% include "patterns/card-layout.njk" %}{% enddemo %}
+{% demo %}{% include "covers/card-layout.njk" %}{% enddemo %}
--- a/contents/card.md
+++ b/contents/card.md
@@ -42,5 +42,5 @@ keywords: css card, css flexbox
 ```

 {% demo %}
-{% include "patterns/card.njk" %}
+{% include "covers/card.njk" %}
 {% enddemo %}
--- a/contents/centering.md
+++ b/contents/centering.md
@@ -24,5 +24,5 @@ keywords: css centering, css flexbox
 ```

 {% demo %}
-{% include "patterns/centering.njk" %}
+{% include "covers/centering.njk" %}
 {% enddemo %}
--- a/contents/chip.md
+++ b/contents/chip.md
@@ -101,5 +101,5 @@ The [close button](/close-button/) is used to create a button for removing the c
 ```

 {% demo %}
-{% include "patterns/chip.njk" %}
+{% include "covers/chip.njk" %}
 {% enddemo %}
--- a/contents/close-button.md
+++ b/contents/close-button.md
@@ -69,5 +69,5 @@ keywords: css close button, css flexbox
 ```

 {% demo %}
-{% include "patterns/close-button.njk" %}
+{% include "covers/close-button.njk" %}
 {% enddemo %}
--- a/Show More
+++ b/Show More