feat: Sticky sections

2025-08-06 14:16:50 +02:00 · 2022-09-21 14:30:45 +07:00
parent 8191785762
commit d166d682ea
289 changed files with 251 additions and 387 deletions
--- a/assets/favicon.png
+++ b/assets/favicon.png
--- a/assets/favicon.svg
+++ b/assets/favicon.svg
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM4 11.5518V12.9531H11.6836V9.72656H9.85156L9.79688 11.1143H7.43164V4.62695L8.68945 4.4082V3H7.43164H5.03223H4V4.4082L5.03223 4.62695V11.333L4 11.5518Z" fill="#1975FF"/>
-</svg>
--- a/assets/mask-favicon.svg
+++ b/assets/mask-favicon.svg
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM4 11.5518V12.9531H11.6836V9.72656H9.85156L9.79688 11.1143H7.43164V4.62695L8.68945 4.4082V3H7.43164H5.03223H4V4.4082L5.03223 4.62695V11.333L4 11.5518Z" fill="black"/>
-</svg>
--- 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/Show More
+++ b/Show More