diff --git a/assets/favicon.png b/assets/favicon.png deleted file mode 100644 index 14f67a6..0000000 Binary files a/assets/favicon.png and /dev/null differ diff --git a/assets/favicon.svg b/assets/favicon.svg deleted file mode 100644 index a3498e6..0000000 --- a/assets/favicon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/mask-favicon.svg b/assets/mask-favicon.svg deleted file mode 100644 index 6e36b53..0000000 --- a/assets/mask-favicon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/contents/_includes/patterns/accordion.njk b/contents/_includes/covers/accordion.njk similarity index 100% rename from contents/_includes/patterns/accordion.njk rename to contents/_includes/covers/accordion.njk diff --git a/contents/_includes/patterns/arrow-buttons.njk b/contents/_includes/covers/arrow-buttons.njk similarity index 100% rename from contents/_includes/patterns/arrow-buttons.njk rename to contents/_includes/covers/arrow-buttons.njk diff --git a/contents/_includes/patterns/avatar-list.njk b/contents/_includes/covers/avatar-list.njk similarity index 100% rename from contents/_includes/patterns/avatar-list.njk rename to contents/_includes/covers/avatar-list.njk diff --git a/contents/_includes/patterns/avatar.njk b/contents/_includes/covers/avatar.njk similarity index 100% rename from contents/_includes/patterns/avatar.njk rename to contents/_includes/covers/avatar.njk diff --git a/contents/_includes/patterns/badge.njk b/contents/_includes/covers/badge.njk similarity index 100% rename from contents/_includes/patterns/badge.njk rename to contents/_includes/covers/badge.njk diff --git a/contents/_includes/patterns/button-with-icon.njk b/contents/_includes/covers/button-with-icon.njk similarity index 100% rename from contents/_includes/patterns/button-with-icon.njk rename to contents/_includes/covers/button-with-icon.njk diff --git a/contents/_includes/patterns/card-layout.njk b/contents/_includes/covers/card-layout.njk similarity index 100% rename from contents/_includes/patterns/card-layout.njk rename to contents/_includes/covers/card-layout.njk diff --git a/contents/_includes/patterns/card.njk b/contents/_includes/covers/card.njk similarity index 100% rename from contents/_includes/patterns/card.njk rename to contents/_includes/covers/card.njk diff --git a/contents/_includes/patterns/centering.njk b/contents/_includes/covers/centering.njk similarity index 100% rename from contents/_includes/patterns/centering.njk rename to contents/_includes/covers/centering.njk diff --git a/contents/_includes/patterns/chip.njk b/contents/_includes/covers/chip.njk similarity index 100% rename from contents/_includes/patterns/chip.njk rename to contents/_includes/covers/chip.njk diff --git a/contents/_includes/patterns/close-button.njk b/contents/_includes/covers/close-button.njk similarity index 100% rename from contents/_includes/patterns/close-button.njk rename to contents/_includes/covers/close-button.njk diff --git a/contents/_includes/patterns/color-swatch.njk b/contents/_includes/covers/color-swatch.njk similarity index 100% rename from contents/_includes/patterns/color-swatch.njk rename to contents/_includes/covers/color-swatch.njk diff --git a/contents/_includes/patterns/concave-corners.njk b/contents/_includes/covers/concave-corners.njk similarity index 100% rename from contents/_includes/patterns/concave-corners.njk rename to contents/_includes/covers/concave-corners.njk diff --git a/contents/_includes/patterns/cookie-banner.njk b/contents/_includes/covers/cookie-banner.njk similarity index 100% rename from contents/_includes/patterns/cookie-banner.njk rename to contents/_includes/covers/cookie-banner.njk diff --git a/contents/_includes/patterns/corner-ribbon.njk b/contents/_includes/covers/corner-ribbon.njk similarity index 100% rename from contents/_includes/patterns/corner-ribbon.njk rename to contents/_includes/covers/corner-ribbon.njk diff --git a/contents/_includes/patterns/curved-background.njk b/contents/_includes/covers/curved-background.njk similarity index 100% rename from contents/_includes/patterns/curved-background.njk rename to contents/_includes/covers/curved-background.njk diff --git a/contents/_includes/patterns/custom-checkbox-button.njk b/contents/_includes/covers/custom-checkbox-button.njk similarity index 100% rename from contents/_includes/patterns/custom-checkbox-button.njk rename to contents/_includes/covers/custom-checkbox-button.njk diff --git a/contents/_includes/patterns/custom-radio-button.njk b/contents/_includes/covers/custom-radio-button.njk similarity index 100% rename from contents/_includes/patterns/custom-radio-button.njk rename to contents/_includes/covers/custom-radio-button.njk diff --git a/contents/_includes/patterns/diagonal-section.njk b/contents/_includes/covers/diagonal-section.njk similarity index 100% rename from contents/_includes/patterns/diagonal-section.njk rename to contents/_includes/covers/diagonal-section.njk diff --git a/contents/_includes/patterns/docked-at-corner.njk b/contents/_includes/covers/docked-at-corner.njk similarity index 100% rename from contents/_includes/patterns/docked-at-corner.njk rename to contents/_includes/covers/docked-at-corner.njk diff --git a/contents/_includes/patterns/dot-leader.njk b/contents/_includes/covers/dot-leader.njk similarity index 100% rename from contents/_includes/patterns/dot-leader.njk rename to contents/_includes/covers/dot-leader.njk diff --git a/contents/_includes/patterns/drop-area.njk b/contents/_includes/covers/drop-area.njk similarity index 100% rename from contents/_includes/patterns/drop-area.njk rename to contents/_includes/covers/drop-area.njk diff --git a/contents/_includes/patterns/drop-cap.njk b/contents/_includes/covers/drop-cap.njk similarity index 100% rename from contents/_includes/patterns/drop-cap.njk rename to contents/_includes/covers/drop-cap.njk diff --git a/contents/_includes/patterns/fading-long-section.njk b/contents/_includes/covers/fading-long-section.njk similarity index 100% rename from contents/_includes/patterns/fading-long-section.njk rename to contents/_includes/covers/fading-long-section.njk diff --git a/contents/_includes/patterns/feature-comparison.njk b/contents/_includes/covers/feature-comparison.njk similarity index 100% rename from contents/_includes/patterns/feature-comparison.njk rename to contents/_includes/covers/feature-comparison.njk diff --git a/contents/_includes/patterns/feature-list.njk b/contents/_includes/covers/feature-list.njk similarity index 100% rename from contents/_includes/patterns/feature-list.njk rename to contents/_includes/covers/feature-list.njk diff --git a/contents/_includes/patterns/fixed-at-corner.njk b/contents/_includes/covers/fixed-at-corner.njk similarity index 100% rename from contents/_includes/patterns/fixed-at-corner.njk rename to contents/_includes/covers/fixed-at-corner.njk diff --git a/contents/_includes/patterns/fixed-at-side.njk b/contents/_includes/covers/fixed-at-side.njk similarity index 100% rename from contents/_includes/patterns/fixed-at-side.njk rename to contents/_includes/covers/fixed-at-side.njk diff --git a/contents/_includes/patterns/floating-label.njk b/contents/_includes/covers/floating-label.njk similarity index 100% rename from contents/_includes/patterns/floating-label.njk rename to contents/_includes/covers/floating-label.njk diff --git a/contents/_includes/patterns/folder-structure.njk b/contents/_includes/covers/folder-structure.njk similarity index 100% rename from contents/_includes/patterns/folder-structure.njk rename to contents/_includes/covers/folder-structure.njk diff --git a/contents/_includes/patterns/full-background.njk b/contents/_includes/covers/full-background.njk similarity index 100% rename from contents/_includes/patterns/full-background.njk rename to contents/_includes/covers/full-background.njk diff --git a/contents/_includes/patterns/holy-grail.njk b/contents/_includes/covers/holy-grail.njk similarity index 100% rename from contents/_includes/patterns/holy-grail.njk rename to contents/_includes/covers/holy-grail.njk diff --git a/contents/_includes/patterns/initial-avatar.njk b/contents/_includes/covers/initial-avatar.njk similarity index 100% rename from contents/_includes/patterns/initial-avatar.njk rename to contents/_includes/covers/initial-avatar.njk diff --git a/contents/_includes/patterns/input-addon.njk b/contents/_includes/covers/input-addon.njk similarity index 100% rename from contents/_includes/patterns/input-addon.njk rename to contents/_includes/covers/input-addon.njk diff --git a/contents/_includes/patterns/inverted-corners.njk b/contents/_includes/covers/inverted-corners.njk similarity index 100% rename from contents/_includes/patterns/inverted-corners.njk rename to contents/_includes/covers/inverted-corners.njk diff --git a/contents/_includes/patterns/keyboard-shortcut.njk b/contents/_includes/covers/keyboard-shortcut.njk similarity index 100% rename from contents/_includes/patterns/keyboard-shortcut.njk rename to contents/_includes/covers/keyboard-shortcut.njk diff --git a/contents/_includes/patterns/layered-card.njk b/contents/_includes/covers/layered-card.njk similarity index 100% rename from contents/_includes/patterns/layered-card.njk rename to contents/_includes/covers/layered-card.njk diff --git a/contents/_includes/patterns/lined-paper.njk b/contents/_includes/covers/lined-paper.njk similarity index 100% rename from contents/_includes/patterns/lined-paper.njk rename to contents/_includes/covers/lined-paper.njk diff --git a/contents/_includes/patterns/masonry-grid.njk b/contents/_includes/covers/masonry-grid.njk similarity index 100% rename from contents/_includes/patterns/masonry-grid.njk rename to contents/_includes/covers/masonry-grid.njk diff --git a/contents/_includes/patterns/media-object.njk b/contents/_includes/covers/media-object.njk similarity index 100% rename from contents/_includes/patterns/media-object.njk rename to contents/_includes/covers/media-object.njk diff --git a/contents/_includes/patterns/modal.njk b/contents/_includes/covers/modal.njk similarity index 100% rename from contents/_includes/patterns/modal.njk rename to contents/_includes/covers/modal.njk diff --git a/contents/_includes/patterns/notification.njk b/contents/_includes/covers/notification.njk similarity index 100% rename from contents/_includes/patterns/notification.njk rename to contents/_includes/covers/notification.njk diff --git a/contents/_includes/patterns/overlay-play-button.njk b/contents/_includes/covers/overlay-play-button.njk similarity index 100% rename from contents/_includes/patterns/overlay-play-button.njk rename to contents/_includes/covers/overlay-play-button.njk diff --git a/contents/_includes/patterns/popover-arrow.njk b/contents/_includes/covers/popover-arrow.njk similarity index 100% rename from contents/_includes/patterns/popover-arrow.njk rename to contents/_includes/covers/popover-arrow.njk diff --git a/contents/_includes/patterns/presence-indicator.njk b/contents/_includes/covers/presence-indicator.njk similarity index 100% rename from contents/_includes/patterns/presence-indicator.njk rename to contents/_includes/covers/presence-indicator.njk diff --git a/contents/_includes/patterns/price-tag.njk b/contents/_includes/covers/price-tag.njk similarity index 100% rename from contents/_includes/patterns/price-tag.njk rename to contents/_includes/covers/price-tag.njk diff --git a/contents/_includes/patterns/pricing-table.njk b/contents/_includes/covers/pricing-table.njk similarity index 100% rename from contents/_includes/patterns/pricing-table.njk rename to contents/_includes/covers/pricing-table.njk diff --git a/contents/_includes/patterns/progress-bar.njk b/contents/_includes/covers/progress-bar.njk similarity index 100% rename from contents/_includes/patterns/progress-bar.njk rename to contents/_includes/covers/progress-bar.njk diff --git a/contents/_includes/patterns/property-list.njk b/contents/_includes/covers/property-list.njk similarity index 100% rename from contents/_includes/patterns/property-list.njk rename to contents/_includes/covers/property-list.njk diff --git a/contents/_includes/patterns/questions-and-answers.njk b/contents/_includes/covers/questions-and-answers.njk similarity index 100% rename from contents/_includes/patterns/questions-and-answers.njk rename to contents/_includes/covers/questions-and-answers.njk diff --git a/contents/_includes/patterns/radial-progress-bar.njk b/contents/_includes/covers/radial-progress-bar.njk similarity index 100% rename from contents/_includes/patterns/radial-progress-bar.njk rename to contents/_includes/covers/radial-progress-bar.njk diff --git a/contents/_includes/patterns/radio-button-group.njk b/contents/_includes/covers/radio-button-group.njk similarity index 100% rename from contents/_includes/patterns/radio-button-group.njk rename to contents/_includes/covers/radio-button-group.njk diff --git a/contents/_includes/patterns/radio-switch.njk b/contents/_includes/covers/radio-switch.njk similarity index 100% rename from contents/_includes/patterns/radio-switch.njk rename to contents/_includes/covers/radio-switch.njk diff --git a/contents/_includes/patterns/rating.njk b/contents/_includes/covers/rating.njk similarity index 100% rename from contents/_includes/patterns/rating.njk rename to contents/_includes/covers/rating.njk diff --git a/contents/_includes/patterns/resizable-element.njk b/contents/_includes/covers/resizable-element.njk similarity index 100% rename from contents/_includes/patterns/resizable-element.njk rename to contents/_includes/covers/resizable-element.njk diff --git a/contents/_includes/patterns/ribbon.njk b/contents/_includes/covers/ribbon.njk similarity index 100% rename from contents/_includes/patterns/ribbon.njk rename to contents/_includes/covers/ribbon.njk diff --git a/contents/_includes/patterns/same-height-columns.njk b/contents/_includes/covers/same-height-columns.njk similarity index 100% rename from contents/_includes/patterns/same-height-columns.njk rename to contents/_includes/covers/same-height-columns.njk diff --git a/contents/_includes/patterns/search-box.njk b/contents/_includes/covers/search-box.njk similarity index 100% rename from contents/_includes/patterns/search-box.njk rename to contents/_includes/covers/search-box.njk diff --git a/contents/_includes/patterns/separator.njk b/contents/_includes/covers/separator.njk similarity index 100% rename from contents/_includes/patterns/separator.njk rename to contents/_includes/covers/separator.njk diff --git a/contents/_includes/patterns/sidebar.njk b/contents/_includes/covers/sidebar.njk similarity index 100% rename from contents/_includes/patterns/sidebar.njk rename to contents/_includes/covers/sidebar.njk diff --git a/contents/_includes/patterns/simple-grid.njk b/contents/_includes/covers/simple-grid.njk similarity index 100% rename from contents/_includes/patterns/simple-grid.njk rename to contents/_includes/covers/simple-grid.njk diff --git a/contents/_includes/patterns/slider.njk b/contents/_includes/covers/slider.njk similarity index 100% rename from contents/_includes/patterns/slider.njk rename to contents/_includes/covers/slider.njk diff --git a/contents/_includes/patterns/spin-button.njk b/contents/_includes/covers/spin-button.njk similarity index 100% rename from contents/_includes/patterns/spin-button.njk rename to contents/_includes/covers/spin-button.njk diff --git a/contents/_includes/patterns/split-screen.njk b/contents/_includes/covers/split-screen.njk similarity index 100% rename from contents/_includes/patterns/split-screen.njk rename to contents/_includes/covers/split-screen.njk diff --git a/contents/_includes/patterns/stacked-cards.njk b/contents/_includes/covers/stacked-cards.njk similarity index 100% rename from contents/_includes/patterns/stacked-cards.njk rename to contents/_includes/covers/stacked-cards.njk diff --git a/contents/_includes/patterns/stamp-border.njk b/contents/_includes/covers/stamp-border.njk similarity index 100% rename from contents/_includes/patterns/stamp-border.njk rename to contents/_includes/covers/stamp-border.njk diff --git a/contents/_includes/patterns/statistic.njk b/contents/_includes/covers/statistic.njk similarity index 100% rename from contents/_includes/patterns/statistic.njk rename to contents/_includes/covers/statistic.njk diff --git a/contents/_includes/patterns/status-light.njk b/contents/_includes/covers/status-light.njk similarity index 100% rename from contents/_includes/patterns/status-light.njk rename to contents/_includes/covers/status-light.njk diff --git a/contents/_includes/patterns/stepper-input.njk b/contents/_includes/covers/stepper-input.njk similarity index 100% rename from contents/_includes/patterns/stepper-input.njk rename to contents/_includes/covers/stepper-input.njk diff --git a/contents/_includes/patterns/sticky-footer.njk b/contents/_includes/covers/sticky-footer.njk similarity index 100% rename from contents/_includes/patterns/sticky-footer.njk rename to contents/_includes/covers/sticky-footer.njk diff --git a/contents/_includes/patterns/sticky-header.njk b/contents/_includes/covers/sticky-header.njk similarity index 100% rename from contents/_includes/patterns/sticky-header.njk rename to contents/_includes/covers/sticky-header.njk diff --git a/contents/_includes/covers/sticky-sections.njk b/contents/_includes/covers/sticky-sections.njk new file mode 100644 index 0000000..327adf2 --- /dev/null +++ b/contents/_includes/covers/sticky-sections.njk @@ -0,0 +1,5 @@ +
+ {% for i in range(0, 4) -%} +
+ {%- endfor %} +
diff --git a/contents/_includes/patterns/sticky-table-column.njk b/contents/_includes/covers/sticky-table-column.njk similarity index 100% rename from contents/_includes/patterns/sticky-table-column.njk rename to contents/_includes/covers/sticky-table-column.njk diff --git a/contents/_includes/patterns/sticky-table-headers.njk b/contents/_includes/covers/sticky-table-headers.njk similarity index 100% rename from contents/_includes/patterns/sticky-table-headers.njk rename to contents/_includes/covers/sticky-table-headers.njk diff --git a/contents/_includes/patterns/switch.njk b/contents/_includes/covers/switch.njk similarity index 100% rename from contents/_includes/patterns/switch.njk rename to contents/_includes/covers/switch.njk diff --git a/contents/_includes/patterns/teardrop.njk b/contents/_includes/covers/teardrop.njk similarity index 100% rename from contents/_includes/patterns/teardrop.njk rename to contents/_includes/covers/teardrop.njk diff --git a/contents/_includes/patterns/three-dimensions-card.njk b/contents/_includes/covers/three-dimensions-card.njk similarity index 100% rename from contents/_includes/patterns/three-dimensions-card.njk rename to contents/_includes/covers/three-dimensions-card.njk diff --git a/contents/_includes/patterns/timeline.njk b/contents/_includes/covers/timeline.njk similarity index 100% rename from contents/_includes/patterns/timeline.njk rename to contents/_includes/covers/timeline.njk diff --git a/contents/_includes/patterns/toggle-password-visibility.njk b/contents/_includes/covers/toggle-password-visibility.njk similarity index 100% rename from contents/_includes/patterns/toggle-password-visibility.njk rename to contents/_includes/covers/toggle-password-visibility.njk diff --git a/contents/_includes/patterns/tooltip.njk b/contents/_includes/covers/tooltip.njk similarity index 100% rename from contents/_includes/patterns/tooltip.njk rename to contents/_includes/covers/tooltip.njk diff --git a/contents/_includes/patterns/tree-diagram.njk b/contents/_includes/covers/tree-diagram.njk similarity index 100% rename from contents/_includes/patterns/tree-diagram.njk rename to contents/_includes/covers/tree-diagram.njk diff --git a/contents/_includes/patterns/triangle-buttons.njk b/contents/_includes/covers/triangle-buttons.njk similarity index 100% rename from contents/_includes/patterns/triangle-buttons.njk rename to contents/_includes/covers/triangle-buttons.njk diff --git a/contents/_includes/patterns/upload-button.njk b/contents/_includes/covers/upload-button.njk similarity index 100% rename from contents/_includes/patterns/upload-button.njk rename to contents/_includes/covers/upload-button.njk diff --git a/contents/_includes/patterns/validation-icon.njk b/contents/_includes/covers/validation-icon.njk similarity index 100% rename from contents/_includes/patterns/validation-icon.njk rename to contents/_includes/covers/validation-icon.njk diff --git a/contents/_includes/patterns/video-background.njk b/contents/_includes/covers/video-background.njk similarity index 100% rename from contents/_includes/patterns/video-background.njk rename to contents/_includes/covers/video-background.njk diff --git a/contents/_includes/patterns/voting.njk b/contents/_includes/covers/voting.njk similarity index 100% rename from contents/_includes/patterns/voting.njk rename to contents/_includes/covers/voting.njk diff --git a/contents/_includes/patterns/watermark.njk b/contents/_includes/covers/watermark.njk similarity index 100% rename from contents/_includes/patterns/watermark.njk rename to contents/_includes/covers/watermark.njk diff --git a/contents/_includes/patterns/zigzag-timeline.njk b/contents/_includes/covers/zigzag-timeline.njk similarity index 100% rename from contents/_includes/patterns/zigzag-timeline.njk rename to contents/_includes/covers/zigzag-timeline.njk diff --git a/contents/_includes/layouts/base.njk b/contents/_includes/layouts/base.njk index a8225b9..e22f82d 100644 --- a/contents/_includes/layouts/base.njk +++ b/contents/_includes/layouts/base.njk @@ -2,9 +2,6 @@ {{ title or metadata.title }} - CSS Layout - - - diff --git a/contents/accordion.md b/contents/accordion.md index d95f61b..10c998a 100644 --- 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 %} diff --git a/contents/arrow-buttons.md b/contents/arrow-buttons.md index ec8f844..2722b83 100644 --- 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 %} diff --git a/contents/avatar-list.md b/contents/avatar-list.md index 12750af..401fbe5 100644 --- 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 %} diff --git a/contents/avatar.md b/contents/avatar.md index dd7707a..6672c59 100644 --- 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 %} diff --git a/contents/badge.md b/contents/badge.md index d929d06..da3b3e9 100644 --- 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 %} diff --git a/contents/button-with-icon.md b/contents/button-with-icon.md index 9da5edc..c8aad11 100644 --- 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 %} diff --git a/contents/card-layout.md b/contents/card-layout.md index a717b17..f407d5f 100644 --- 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 %} diff --git a/contents/card.md b/contents/card.md index ebb373b..610d23b 100644 --- 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 %} diff --git a/contents/centering.md b/contents/centering.md index edd37a1..0eea8be 100644 --- 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 %} diff --git a/contents/chip.md b/contents/chip.md index d349afe..07bc2e8 100644 --- 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 %} diff --git a/contents/close-button.md b/contents/close-button.md index feb8b1b..06be1c2 100644 --- 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 %} diff --git a/contents/color-swatch.md b/contents/color-swatch.md index c370a0c..65d7a10 100644 --- a/contents/color-swatch.md +++ b/contents/color-swatch.md @@ -36,5 +36,5 @@ keywords: css color swatch, css flexbox ``` {% demo %} -{% include "patterns/color-swatch.njk" %} +{% include "covers/color-swatch.njk" %} {% enddemo %} diff --git a/contents/concave-corners.md b/contents/concave-corners.md index 2b3632c..04de6b6 100644 --- a/contents/concave-corners.md +++ b/contents/concave-corners.md @@ -84,5 +84,5 @@ keywords: css border radius, css concave border radius, css concave corners ``` {% demo %} -{% include "patterns/concave-corners.njk" %} +{% include "covers/concave-corners.njk" %} {% enddemo %} diff --git a/contents/cookie-banner.md b/contents/cookie-banner.md index 6d43347..de00c70 100644 --- a/contents/cookie-banner.md +++ b/contents/cookie-banner.md @@ -42,5 +42,5 @@ keywords: css cookie banner, css flexbox ``` {% demo %} -{% include "patterns/cookie-banner.njk" %} +{% include "covers/cookie-banner.njk" %} {% enddemo %} diff --git a/contents/corner-ribbon.md b/contents/corner-ribbon.md index 3547e3b..6308f29 100644 --- a/contents/corner-ribbon.md +++ b/contents/corner-ribbon.md @@ -61,5 +61,5 @@ keywords: css flexbox, css ribbon ``` {% demo %} -{% include "patterns/corner-ribbon.njk" %} +{% include "covers/corner-ribbon.njk" %} {% enddemo %} diff --git a/contents/curved-background.md b/contents/curved-background.md index 71ee6d1..656e2ac 100644 --- a/contents/curved-background.md +++ b/contents/curved-background.md @@ -34,5 +34,5 @@ keywords: css border radius, css curved background ``` {% demo %} -{% include "patterns/curved-background.njk" %} +{% include "covers/curved-background.njk" %} {% enddemo %} diff --git a/contents/custom-checkbox-button.md b/contents/custom-checkbox-button.md index 7548973..adcff45 100644 --- a/contents/custom-checkbox-button.md +++ b/contents/custom-checkbox-button.md @@ -62,4 +62,4 @@ keywords: css checkbox, css flexbox } ``` -{% demo %}{% include "patterns/custom-checkbox-button.njk" %}{% enddemo %} +{% demo %}{% include "covers/custom-checkbox-button.njk" %}{% enddemo %} diff --git a/contents/custom-radio-button.md b/contents/custom-radio-button.md index 34a378e..b39a907 100644 --- a/contents/custom-radio-button.md +++ b/contents/custom-radio-button.md @@ -66,4 +66,4 @@ keywords: css flexbox, css radio } ``` -{% demo %}{% include "patterns/custom-radio-button.njk" %}{% enddemo %} +{% demo %}{% include "covers/custom-radio-button.njk" %}{% enddemo %} diff --git a/contents/diagonal-section.md b/contents/diagonal-section.md index 8981e4f..c904fa0 100644 --- a/contents/diagonal-section.md +++ b/contents/diagonal-section.md @@ -47,5 +47,5 @@ keywords: css diagonal section, css transform skew ``` {% demo %} -{% include "patterns/diagonal-section.njk" %} +{% include "covers/diagonal-section.njk" %} {% enddemo %} diff --git a/contents/docked-at-corner.md b/contents/docked-at-corner.md index a3b29be..510c1ce 100644 --- a/contents/docked-at-corner.md +++ b/contents/docked-at-corner.md @@ -34,5 +34,5 @@ keywords: css docked, css flexbox ``` {% demo %} -{% include "patterns/docked-at-corner.njk" %} +{% include "covers/docked-at-corner.njk" %} {% enddemo %} diff --git a/contents/dot-leader.md b/contents/dot-leader.md index 39083a5..7e75794 100644 --- a/contents/dot-leader.md +++ b/contents/dot-leader.md @@ -43,5 +43,5 @@ keywords: css dot leader, css flexbox ``` {% demo %} -{% include "patterns/dot-leader.njk" %} +{% include "covers/dot-leader.njk" %} {% enddemo %} diff --git a/contents/drop-area.md b/contents/drop-area.md index 64f6521..45e6870 100644 --- a/contents/drop-area.md +++ b/contents/drop-area.md @@ -29,5 +29,5 @@ keywords: css dropping area, css flexbox ``` {% demo %} -{% include "patterns/drop-area.njk" %} +{% include "covers/drop-area.njk" %} {% enddemo %} diff --git a/contents/drop-cap.md b/contents/drop-cap.md index d6d799a..5168a7a 100644 --- a/contents/drop-cap.md +++ b/contents/drop-cap.md @@ -33,5 +33,5 @@ keywords: css drop cap, css :first-letter ``` {% demo %} -{% include "patterns/drop-cap.njk" %} +{% include "covers/drop-cap.njk" %} {% enddemo %} diff --git a/contents/fading-long-section.md b/contents/fading-long-section.md index 813993d..cd4bb0d 100644 --- a/contents/fading-long-section.md +++ b/contents/fading-long-section.md @@ -51,5 +51,5 @@ The pattern is often used to indicate there is more content. ``` {% demo %} -{% include "patterns/fading-long-section.njk" %} +{% include "covers/fading-long-section.njk" %} {% enddemo %} diff --git a/contents/feature-comparison.md b/contents/feature-comparison.md index 95e13dd..ddc4220 100644 --- a/contents/feature-comparison.md +++ b/contents/feature-comparison.md @@ -58,5 +58,5 @@ keywords: css feature comparison, css flexbox ``` {% demo %} -{% include "patterns/feature-comparison.njk" %} +{% include "covers/feature-comparison.njk" %} {% enddemo %} diff --git a/contents/feature-list.md b/contents/feature-list.md index 8b6dde7..e0ca7d4 100644 --- a/contents/feature-list.md +++ b/contents/feature-list.md @@ -51,5 +51,5 @@ keywords: css feature list, css flexbox ``` {% demo %} -{% include "patterns/feature-list.njk" %} +{% include "covers/feature-list.njk" %} {% enddemo %} diff --git a/contents/fixed-at-corner.md b/contents/fixed-at-corner.md index 145c2c6..c653cdc 100644 --- a/contents/fixed-at-corner.md +++ b/contents/fixed-at-corner.md @@ -64,5 +64,5 @@ keywords: css fixed ``` {% demo %} -{% include "patterns/fixed-at-corner.njk" %} +{% include "covers/fixed-at-corner.njk" %} {% enddemo %} diff --git a/contents/fixed-at-side.md b/contents/fixed-at-side.md index 8ddead2..20211b5 100644 --- a/contents/fixed-at-side.md +++ b/contents/fixed-at-side.md @@ -36,5 +36,5 @@ keywords: css fixed ``` {% demo %} -{% include "patterns/fixed-at-side.njk" %} +{% include "covers/fixed-at-side.njk" %} {% enddemo %} diff --git a/contents/floating-label.md b/contents/floating-label.md index 139e160..910fa29 100644 --- a/contents/floating-label.md +++ b/contents/floating-label.md @@ -58,4 +58,4 @@ placeholder of input isn't shown Type something in the input to see how the label is shown up. -{% demo %}{% include "patterns/floating-label.njk" %}{% enddemo %} +{% demo %}{% include "covers/floating-label.njk" %}{% enddemo %} diff --git a/contents/folder-structure.md b/contents/folder-structure.md index 3ccdd4c..ee80fca 100644 --- a/contents/folder-structure.md +++ b/contents/folder-structure.md @@ -95,5 +95,5 @@ keywords: css folder structure, css folder tree ``` {% demo %} -{% include "patterns/folder-structure.njk" %} +{% include "covers/folder-structure.njk" %} {% enddemo %} diff --git a/contents/full-background.md b/contents/full-background.md index c4adb02..f7e7c3a 100644 --- a/contents/full-background.md +++ b/contents/full-background.md @@ -33,5 +33,5 @@ keywords: css background size cover, css full background ``` {% demo %} -{% include "patterns/full-background.njk" %} +{% include "covers/full-background.njk" %} {% enddemo %} diff --git a/contents/holy-grail.md b/contents/holy-grail.md index 1353f11..6b15992 100644 --- a/contents/holy-grail.md +++ b/contents/holy-grail.md @@ -59,4 +59,4 @@ keywords: css flexbox, css holy grail layout, css layout } ``` -{% demo %}{% include "patterns/holy-grail.njk" %}{% enddemo %} +{% demo %}{% include "covers/holy-grail.njk" %}{% enddemo %} diff --git a/contents/index.njk b/contents/index.njk index 75be72f..1892320 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -13,111 +13,112 @@ eleventyExcludeFromCollections: true

Display

- {% pattern "Accordion" %}{% include "patterns/accordion.njk" %}{% endpattern %} - {% pattern "Arrow buttons" %}{% include "patterns/arrow-buttons.njk" %}{% endpattern %} - {% pattern "Avatar" %}{% include "patterns/avatar.njk" %}{% endpattern %} - {% pattern "Avatar list" %}{% include "patterns/avatar-list.njk" %}{% endpattern %} - {% pattern "Badge" %}{% include "patterns/badge.njk" %}{% endpattern %} - {% pattern "Card" %}{% include "patterns/card.njk" %}{% endpattern %} - {% pattern "Centering" %}{% include "patterns/centering.njk" %}{% endpattern %} - {% pattern "Close button" %}{% include "patterns/close-button.njk" %}{% endpattern %} - {% pattern "Color swatch" %}{% include "patterns/color-swatch.njk" %}{% endpattern %} - {% pattern "Concave corners" %}{% include "patterns/concave-corners.njk" %}{% endpattern %} - {% pattern "Cookie banner" %}{% include "patterns/cookie-banner.njk" %}{% endpattern %} - {% pattern "Corner ribbon" %}{% include "patterns/corner-ribbon.njk" %}{% endpattern %} - {% pattern "Curved background" %}{% include "patterns/curved-background.njk" %}{% endpattern %} - {% pattern "Diagonal section" %}{% include "patterns/diagonal-section.njk" %}{% endpattern %} - {% pattern "Docked at corner" %}{% include "patterns/docked-at-corner.njk" %}{% endpattern %} - {% pattern "Dot leader" %}{% include "patterns/dot-leader.njk" %}{% endpattern %} - {% pattern "Drop area" %}{% include "patterns/drop-area.njk" %}{% endpattern %} - {% pattern "Drop cap" %}{% include "patterns/drop-cap.njk" %}{% endpattern %} - {% pattern "Fading long section" %}{% include "patterns/fading-long-section.njk" %}{% endpattern %} - {% pattern "Feature comparison" %}{% include "patterns/feature-comparison.njk" %}{% endpattern %} - {% pattern "Feature list" %}{% include "patterns/feature-list.njk" %}{% endpattern %} - {% pattern "Fixed at corner" %}{% include "patterns/fixed-at-corner.njk" %}{% endpattern %} - {% pattern "Fixed at side" %}{% include "patterns/fixed-at-side.njk" %}{% endpattern %} - {% pattern "Folder structure" %}{% include "patterns/folder-structure.njk" %}{% endpattern %} - {% pattern "Full background" %}{% include "patterns/full-background.njk" %}{% endpattern %} - {% pattern "Initial avatar" %}{% include "patterns/initial-avatar.njk" %}{% endpattern %} - {% pattern "Inverted corners" %}{% include "patterns/inverted-corners.njk" %}{% endpattern %} - {% pattern "Keyboard shortcut" %}{% include "patterns/keyboard-shortcut.njk" %}{% endpattern %} - {% pattern "Layered card" %}{% include "patterns/layered-card.njk" %}{% endpattern %} - {% pattern "Lined paper" %}{% include "patterns/lined-paper.njk" %}{% endpattern %} - {% pattern "Media object" %}{% include "patterns/media-object.njk" %}{% endpattern %} - {% pattern "Overlay play button" %}{% include "patterns/overlay-play-button.njk" %}{% endpattern %} - {% pattern "Price tag" %}{% include "patterns/price-tag.njk" %}{% endpattern %} - {% pattern "Pricing table" %}{% include "patterns/pricing-table.njk" %}{% endpattern %} - {% pattern "Property list" %}{% include "patterns/property-list.njk" %}{% endpattern %} - {% pattern "Questions and answers" %}{% include "patterns/questions-and-answers.njk" %}{% endpattern %} - {% pattern "Ribbon" %}{% include "patterns/ribbon.njk" %}{% endpattern %} - {% pattern "Separator" %}{% include "patterns/separator.njk" %}{% endpattern %} - {% pattern "Stacked cards" %}{% include "patterns/stacked-cards.njk" %}{% endpattern %} - {% pattern "Stamp border" %}{% include "patterns/stamp-border.njk" %}{% endpattern %} - {% pattern "Statistic" %}{% include "patterns/statistic.njk" %}{% endpattern %} - {% pattern "Status light" %}{% include "patterns/status-light.njk" %}{% endpattern %} - {% pattern "Sticky table column" %}{% include "patterns/sticky-table-column.njk" %}{% endpattern %} - {% pattern "Sticky table headers" %}{% include "patterns/sticky-table-headers.njk" %}{% endpattern %} - {% pattern "Teardrop" %}{% include "patterns/teardrop.njk" %}{% endpattern %} - {% pattern "Three dimensions card" %}{% include "patterns/three-dimensions-card.njk" %}{% endpattern %} - {% pattern "Timeline" %}{% include "patterns/timeline.njk" %}{% endpattern %} - {% pattern "Tree diagram" %}{% include "patterns/tree-diagram.njk" %}{% endpattern %} - {% pattern "Triangle buttons" %}{% include "patterns/triangle-buttons.njk" %}{% endpattern %} - {% pattern "Video background" %}{% include "patterns/video-background.njk" %}{% endpattern %} - {% pattern "Voting" %}{% include "patterns/voting.njk" %}{% endpattern %} - {% pattern "Watermark" %}{% include "patterns/watermark.njk" %}{% endpattern %} - {% pattern "Zigzag timeline" %}{% include "patterns/zigzag-timeline.njk" %}{% endpattern %} + {% 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 "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 "Modal" %}{% include "patterns/modal.njk" %}{% endpattern %} - {% pattern "Notification" %}{% include "patterns/notification.njk" %}{% endpattern %} - {% pattern "Popover arrow" %}{% include "patterns/popover-arrow.njk" %}{% endpattern %} - {% pattern "Presence indicator" %}{% include "patterns/presence-indicator.njk" %}{% endpattern %} - {% pattern "Progress bar" %}{% include "patterns/progress-bar.njk" %}{% endpattern %} - {% pattern "Radial progress bar" %}{% include "patterns/radial-progress-bar.njk" %}{% endpattern %} - {% pattern "Resizable element" %}{% include "patterns/resizable-element.njk" %}{% endpattern %} - {% pattern "Tooltip" %}{% include "patterns/tooltip.njk" %}{% endpattern %} - {% pattern "Validation icon" %}{% include "patterns/validation-icon.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 "Tooltip" %}{% include "covers/tooltip.njk" %}{% endpattern %} + {% pattern "Validation icon" %}{% include "covers/validation-icon.njk" %}{% endpattern %}

Input

- {% pattern "Button with icon" %}{% include "patterns/button-with-icon.njk" %}{% endpattern %} - {% pattern "Chip" %}{% include "patterns/chip.njk" %}{% endpattern %} - {% pattern "Custom checkbox button" %}{% include "patterns/custom-checkbox-button.njk" %}{% endpattern %} - {% pattern "Custom radio button" %}{% include "patterns/custom-radio-button.njk" %}{% endpattern %} - {% pattern "Floating label" %}{% include "patterns/floating-label.njk" %}{% endpattern %} - {% pattern "Input addon" %}{% include "patterns/input-addon.njk" %}{% endpattern %} - {% pattern "Radio button group" %}{% include "patterns/radio-button-group.njk" %}{% endpattern %} - {% pattern "Radio switch" %}{% include "patterns/radio-switch.njk" %}{% endpattern %} - {% pattern "Rating" %}{% include "patterns/rating.njk" %}{% endpattern %} - {% pattern "Search box" %}{% include "patterns/search-box.njk" %}{% endpattern %} - {% pattern "Slider" %}{% include "patterns/slider.njk" %}{% endpattern %} - {% pattern "Spin button" %}{% include "patterns/spin-button.njk" %}{% endpattern %} - {% pattern "Stepper input" %}{% include "patterns/stepper-input.njk" %}{% endpattern %} - {% pattern "Switch" %}{% include "patterns/switch.njk" %}{% endpattern %} - {% pattern "Toggle password visibility" %}{% include "patterns/toggle-password-visibility.njk" %}{% endpattern %} - {% pattern "Upload button" %}{% include "patterns/upload-button.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 "patterns/card-layout.njk" %}{% endpattern %} - {% pattern "Holy grail" %}{% include "patterns/holy-grail.njk" %}{% endpattern %} - {% pattern "Masonry grid" %}{% include "patterns/masonry-grid.njk" %}{% endpattern %} - {% pattern "Same height columns" %}{% include "patterns/same-height-columns.njk" %}{% endpattern %} - {% pattern "Sidebar" %}{% include "patterns/sidebar.njk" %}{% endpattern %} - {% pattern "Simple grid" %}{% include "patterns/simple-grid.njk" %}{% endpattern %} - {% pattern "Split screen" %}{% include "patterns/split-screen.njk" %}{% endpattern %} - {% pattern "Sticky footer" %}{% include "patterns/sticky-footer.njk" %}{% endpattern %} - {% pattern "Sticky header" %}{% include "patterns/sticky-header.njk" %}{% endpattern %} + {% 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 %}
diff --git a/contents/initial-avatar.md b/contents/initial-avatar.md index a053302..31df3bd 100644 --- a/contents/initial-avatar.md +++ b/contents/initial-avatar.md @@ -34,5 +34,5 @@ keywords: css avatar ``` {% demo %} -{% include "patterns/initial-avatar.njk" %} +{% include "covers/initial-avatar.njk" %} {% enddemo %} diff --git a/contents/input-addon.md b/contents/input-addon.md index 4296be2..12c339a 100644 --- a/contents/input-addon.md +++ b/contents/input-addon.md @@ -78,4 +78,4 @@ keywords: css flexbox, css input add-on } ``` -{% demo %}{% include "patterns/input-addon.njk" %}{% enddemo %} +{% demo %}{% include "covers/input-addon.njk" %}{% enddemo %} diff --git a/contents/inverted-corners.md b/contents/inverted-corners.md index f28c936..8397291 100644 --- a/contents/inverted-corners.md +++ b/contents/inverted-corners.md @@ -48,5 +48,5 @@ keywords: css border radius, css inverted border radius, css inverted corners ``` {% demo %} -{% include "patterns/inverted-corners.njk" %} +{% include "covers/inverted-corners.njk" %} {% enddemo %} diff --git a/contents/keyboard-shortcut.md b/contents/keyboard-shortcut.md index 990a86f..4cef446 100644 --- a/contents/keyboard-shortcut.md +++ b/contents/keyboard-shortcut.md @@ -31,5 +31,5 @@ We use the native `kbd` tag to display the keyboard shortcut. ``` {% demo %} -{% include "patterns/keyboard-shortcut.njk" %} +{% include "covers/keyboard-shortcut.njk" %} {% enddemo %} diff --git a/contents/layered-card.md b/contents/layered-card.md index 3cc116f..2f8e7dd 100644 --- a/contents/layered-card.md +++ b/contents/layered-card.md @@ -59,5 +59,5 @@ keywords: css layered card ``` {% demo %} -{% include "patterns/layered-card.njk" %} +{% include "covers/layered-card.njk" %} {% enddemo %} diff --git a/contents/lined-paper.md b/contents/lined-paper.md index 3284332..ac6052e 100644 --- a/contents/lined-paper.md +++ b/contents/lined-paper.md @@ -31,5 +31,5 @@ keywords: css linear gradient, css lined paper, css multiple horizontal lines ``` {% demo %} -{% include "patterns/lined-paper.njk" %} +{% include "covers/lined-paper.njk" %} {% enddemo %} diff --git a/contents/masonry-grid.md b/contents/masonry-grid.md index 75ffa36..7a648bb 100644 --- a/contents/masonry-grid.md +++ b/contents/masonry-grid.md @@ -33,4 +33,4 @@ keywords: css column-count, css column-gap, css masonry, css masonry grid } ``` -{% demo %}{% include "patterns/masonry-grid.njk" %}{% enddemo %} +{% demo %}{% include "covers/masonry-grid.njk" %}{% enddemo %} diff --git a/contents/media-object.md b/contents/media-object.md index 1ff775b..14ce45f 100644 --- a/contents/media-object.md +++ b/contents/media-object.md @@ -40,5 +40,5 @@ keywords: css flexbox, media object ``` {% demo %} -{% include "patterns/media-object.njk" %} +{% include "covers/media-object.njk" %} {% enddemo %} diff --git a/contents/modal.md b/contents/modal.md index bedc992..5a7ad28 100644 --- a/contents/modal.md +++ b/contents/modal.md @@ -55,5 +55,5 @@ keywords: css dialog, css flexbox, css modal ``` {% demo %} -{% include "patterns/modal.njk" %} +{% include "covers/modal.njk" %} {% enddemo %} diff --git a/contents/notification.md b/contents/notification.md index ee6e40d..b3bf7e9 100644 --- a/contents/notification.md +++ b/contents/notification.md @@ -89,5 +89,5 @@ The [close button](/close-button/) represents the button for closing the notific ``` {% demo %} -{% include "patterns/notification.njk" %} +{% include "covers/notification.njk" %} {% enddemo %} diff --git a/contents/overlay-play-button.md b/contents/overlay-play-button.md index cd7bdef..e261a20 100644 --- a/contents/overlay-play-button.md +++ b/contents/overlay-play-button.md @@ -63,5 +63,5 @@ keywords: css flexbox ``` {% demo %} -{% include "patterns/overlay-play-button.njk" %} +{% include "covers/overlay-play-button.njk" %} {% enddemo %} diff --git a/contents/popover-arrow.md b/contents/popover-arrow.md index ce8439e..1e8909f 100644 --- a/contents/popover-arrow.md +++ b/contents/popover-arrow.md @@ -204,5 +204,5 @@ keywords: css arrow, css popover ``` {% demo %} -{% include "patterns/popover-arrow.njk" %} +{% include "covers/popover-arrow.njk" %} {% enddemo %} diff --git a/contents/presence-indicator.md b/contents/presence-indicator.md index ae5d3c3..399cafd 100644 --- a/contents/presence-indicator.md +++ b/contents/presence-indicator.md @@ -42,5 +42,5 @@ keywords: css indicator ``` {% demo %} -{% include "patterns/presence-indicator.njk" %} +{% include "covers/presence-indicator.njk" %} {% enddemo %} diff --git a/contents/price-tag.md b/contents/price-tag.md index 5775835..763a231 100644 --- a/contents/price-tag.md +++ b/contents/price-tag.md @@ -77,5 +77,5 @@ keywords: css price tag ``` {% demo %} -{% include "patterns/price-tag.njk" %} +{% include "covers/price-tag.njk" %} {% enddemo %} diff --git a/contents/pricing-table.md b/contents/pricing-table.md index e241f9b..b2824e5 100644 --- a/contents/pricing-table.md +++ b/contents/pricing-table.md @@ -59,5 +59,5 @@ keywords: css flexbox, css pricing table ``` {% demo %} -{% include "patterns/pricing-table.njk" %} +{% include "covers/pricing-table.njk" %} {% enddemo %} diff --git a/contents/progress-bar.md b/contents/progress-bar.md index 1c8f99d..b76ef02 100644 --- a/contents/progress-bar.md +++ b/contents/progress-bar.md @@ -45,5 +45,5 @@ keywords: css flexbox, css progress bar ``` {% demo %} -{% include "patterns/progress-bar.njk" %} +{% include "covers/progress-bar.njk" %} {% enddemo %} diff --git a/contents/property-list.md b/contents/property-list.md index 020fa50..ebeb537 100644 --- a/contents/property-list.md +++ b/contents/property-list.md @@ -45,5 +45,5 @@ keywords: css flexbox, property list ``` {% demo %} -{% include "patterns/property-list.njk" %} +{% include "covers/property-list.njk" %} {% enddemo %} diff --git a/contents/questions-and-answers.md b/contents/questions-and-answers.md index 6c84486..a28668b 100644 --- a/contents/questions-and-answers.md +++ b/contents/questions-and-answers.md @@ -67,5 +67,5 @@ keywords: css accordion, css faq, css flexbox ``` {% demo %} -{% include "patterns/questions-and-answers.njk" %} +{% include "covers/questions-and-answers.njk" %} {% enddemo %} diff --git a/contents/radial-progress-bar.md b/contents/radial-progress-bar.md index 5624186..5d2a744 100644 --- a/contents/radial-progress-bar.md +++ b/contents/radial-progress-bar.md @@ -122,5 +122,5 @@ keywords: css clip rect, css flexbox, css progress bar ``` {% demo %} -{% include "patterns/radial-progress-bar.njk" %} +{% include "covers/radial-progress-bar.njk" %} {% enddemo %} diff --git a/contents/radio-button-group.md b/contents/radio-button-group.md index b94ff6d..e88dd0d 100644 --- a/contents/radio-button-group.md +++ b/contents/radio-button-group.md @@ -73,4 +73,4 @@ keywords: css flexbox, css radio button } ``` -{% demo %}{% include "patterns/radio-button-group.njk" %}{% enddemo %} +{% demo %}{% include "covers/radio-button-group.njk" %}{% enddemo %} diff --git a/contents/radio-switch.md b/contents/radio-switch.md index 4c04ded..fdd5d73 100644 --- a/contents/radio-switch.md +++ b/contents/radio-switch.md @@ -49,4 +49,4 @@ keywords: css flexbox, css radio switch, css switch } ``` -{% demo %}{% include "patterns/radio-switch.njk" %}{% enddemo %} +{% demo %}{% include "covers/radio-switch.njk" %}{% enddemo %} diff --git a/contents/rating.md b/contents/rating.md index d755ee0..e74e380 100644 --- a/contents/rating.md +++ b/contents/rating.md @@ -60,4 +60,4 @@ Note that we use \`flex-direction: row-reverse\` on the container } ``` -{% demo %}{% include "patterns/rating.njk" %}{% enddemo %} +{% demo %}{% include "covers/rating.njk" %}{% enddemo %} diff --git a/contents/resizable-element.md b/contents/resizable-element.md index 0c86b09..3c0a89c 100644 --- a/contents/resizable-element.md +++ b/contents/resizable-element.md @@ -143,5 +143,5 @@ 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 "patterns/resizable-element.njk" %} +{% include "covers/resizable-element.njk" %} {% enddemo %} diff --git a/contents/ribbon.md b/contents/ribbon.md index f877623..d321f89 100644 --- a/contents/ribbon.md +++ b/contents/ribbon.md @@ -93,4 +93,4 @@ keywords: css ribbon } ``` -{% demo %}{% include "patterns/ribbon.njk" %}{% enddemo %} +{% demo %}{% include "covers/ribbon.njk" %}{% enddemo %} diff --git a/contents/same-height-columns.md b/contents/same-height-columns.md index 4108fdf..04d0903 100644 --- a/contents/same-height-columns.md +++ b/contents/same-height-columns.md @@ -51,4 +51,4 @@ keywords: css flexbox, css layout, css same height columns } ``` -{% demo %}{% include "patterns/same-height-columns.njk" %}{% enddemo %} +{% demo %}{% include "covers/same-height-columns.njk" %}{% enddemo %} diff --git a/contents/search-box.md b/contents/search-box.md index 30c28f7..f3c3018 100644 --- a/contents/search-box.md +++ b/contents/search-box.md @@ -37,4 +37,4 @@ keywords: css flexbox, css search box } ``` -{% demo %}{% include "patterns/search-box.njk" %}{% enddemo %} +{% demo %}{% include "covers/search-box.njk" %}{% enddemo %} diff --git a/contents/separator.md b/contents/separator.md index 8bb0db8..feb1e24 100644 --- a/contents/separator.md +++ b/contents/separator.md @@ -56,5 +56,5 @@ keywords: css divider, css flexbox, css separator ``` {% demo %} -{% include "patterns/separator.njk" %} +{% include "covers/separator.njk" %} {% enddemo %} diff --git a/contents/sidebar.md b/contents/sidebar.md index 6a8698f..d4eee1b 100644 --- a/contents/sidebar.md +++ b/contents/sidebar.md @@ -41,4 +41,4 @@ keywords: css flexbox, css layout, css sidebar } ``` -{% demo %}{% include "patterns/sidebar.njk" %}{% enddemo %} +{% demo %}{% include "covers/sidebar.njk" %}{% enddemo %} diff --git a/contents/simple-grid.md b/contents/simple-grid.md index 8ae9235..afe171a 100644 --- a/contents/simple-grid.md +++ b/contents/simple-grid.md @@ -51,4 +51,4 @@ keywords: css flexbox, css flexbox grid, css grid, css layout } ``` -{% demo %}{% include "patterns/simple-grid.njk" %}{% enddemo %} +{% demo %}{% include "covers/simple-grid.njk" %}{% enddemo %} diff --git a/contents/slider.md b/contents/slider.md index 4a2fc53..39f2631 100644 --- a/contents/slider.md +++ b/contents/slider.md @@ -62,4 +62,4 @@ keywords: css flexbox, css slider } ``` -{% demo %}{% include "patterns/slider.njk" %}{% enddemo %} +{% demo %}{% include "covers/slider.njk" %}{% enddemo %} diff --git a/contents/spin-button.md b/contents/spin-button.md index e728d0e..771f6db 100644 --- a/contents/spin-button.md +++ b/contents/spin-button.md @@ -68,4 +68,4 @@ keywords: css flexbox, css spin button You can use the [triangle buttons](/triangle-buttons/) to create the up and down buttons: -{% demo %}{% include "patterns/spin-button.njk" %}{% enddemo %} +{% demo %}{% include "covers/spin-button.njk" %}{% enddemo %} diff --git a/contents/split-screen.md b/contents/split-screen.md index cb3babd..64da366 100644 --- a/contents/split-screen.md +++ b/contents/split-screen.md @@ -33,4 +33,4 @@ keywords: css flexbox, css layout, css split screen } ``` -{% demo %}{% include "patterns/split-screen.njk" %}{% enddemo %} +{% demo %}{% include "covers/split-screen.njk" %}{% enddemo %} diff --git a/contents/stacked-cards.md b/contents/stacked-cards.md index 766dff2..b7953b5 100644 --- a/contents/stacked-cards.md +++ b/contents/stacked-cards.md @@ -51,5 +51,5 @@ keywords: css card, css stacked cards, css transform rotate ``` {% demo %} -{% include "patterns/stacked-cards.njk" %} +{% include "covers/stacked-cards.njk" %} {% enddemo %} diff --git a/contents/stamp-border.md b/contents/stamp-border.md index 2eb3bd4..386d136 100644 --- a/contents/stamp-border.md +++ b/contents/stamp-border.md @@ -38,5 +38,5 @@ keywords: css radial gradient, css stamp border ``` {% demo %} -{% include "patterns/stamp-border.njk" %} +{% include "covers/stamp-border.njk" %} {% enddemo %} diff --git a/contents/statistic.md b/contents/statistic.md index 0e5791f..e229a8f 100644 --- a/contents/statistic.md +++ b/contents/statistic.md @@ -48,5 +48,5 @@ keywords: css flexbox, css statistic ``` {% demo %} -{% include "patterns/statistic.njk" %} +{% include "covers/statistic.njk" %} {% enddemo %} diff --git a/contents/status-light.md b/contents/status-light.md index 261aaeb..df3400b 100644 --- a/contents/status-light.md +++ b/contents/status-light.md @@ -50,5 +50,5 @@ keywords: css flexbox, css status light ``` {% demo %} -{% include "patterns/status-light.njk" %} +{% include "covers/status-light.njk" %} {% enddemo %} diff --git a/contents/stepper-input.md b/contents/stepper-input.md index 4ffd19f..4f3464d 100644 --- a/contents/stepper-input.md +++ b/contents/stepper-input.md @@ -64,4 +64,4 @@ keywords: css flexbox, css stepper input } ``` -{% demo %}{% include "patterns/stepper-input.njk" %}{% enddemo %} +{% demo %}{% include "covers/stepper-input.njk" %}{% enddemo %} diff --git a/contents/sticky-footer.md b/contents/sticky-footer.md index dd28bdc..8244622 100644 --- a/contents/sticky-footer.md +++ b/contents/sticky-footer.md @@ -42,4 +42,4 @@ keywords: css flexbox, css layout, css sticky, css sticky footer The footer always sticks to the bottom if the main content is short. -{% demo %}{% include "patterns/sticky-footer.njk" %}{% enddemo %} +{% demo %}{% include "covers/sticky-footer.njk" %}{% enddemo %} diff --git a/contents/sticky-header.md b/contents/sticky-header.md index 0221513..a2aa714 100644 --- a/contents/sticky-header.md +++ b/contents/sticky-header.md @@ -28,4 +28,4 @@ keywords: css layout, css position sticky, css sticky header } ``` -{% demo %}{% include "patterns/sticky-header.njk" %}{% enddemo %} +{% demo %}{% include "covers/sticky-header.njk" %}{% enddemo %} diff --git a/contents/sticky-sections.md b/contents/sticky-sections.md new file mode 100644 index 0000000..7deb15a --- /dev/null +++ b/contents/sticky-sections.md @@ -0,0 +1,40 @@ +--- +layout: layouts/post.njk +title: Sticky sections +description: Create sticky sections with CSS +keywords: css layout, css sticky, css sticky sections +--- + +## HTML + +```html +
+
+ ... +
+ + + ... +
+``` + +## CSS + +```css +.sticky-sections { + height: 100%; + overflow: scroll; +} + +.sticky-sections__section { + /* Take full size */ + height: 100%; + width: 100%; + + /* Stick to the top */ + position: sticky; + top: 0; +} +``` + +{% demo %}{% include "covers/sticky-sections.njk" %}{% enddemo %} diff --git a/contents/sticky-table-column.md b/contents/sticky-table-column.md index 556c2bf..0166e77 100644 --- a/contents/sticky-table-column.md +++ b/contents/sticky-table-column.md @@ -44,5 +44,5 @@ keywords: css position sticky, css sticky table column ``` {% demo %} -{% include "patterns/sticky-table-column.njk" %} +{% include "covers/sticky-table-column.njk" %} {% enddemo %} diff --git a/contents/sticky-table-headers.md b/contents/sticky-table-headers.md index c01be0a..e0c6b93 100644 --- a/contents/sticky-table-headers.md +++ b/contents/sticky-table-headers.md @@ -35,5 +35,5 @@ keywords: css position sticky, css sticky table headers ``` {% demo %} -{% include "patterns/sticky-table-headers.njk" %} +{% include "covers/sticky-table-headers.njk" %} {% enddemo %} diff --git a/contents/switch.md b/contents/switch.md index 6cbe302..aefd545 100644 --- a/contents/switch.md +++ b/contents/switch.md @@ -80,4 +80,4 @@ The switch comes with two variants: } ``` -{% demo %}{% include "patterns/switch.njk" %}{% enddemo %} +{% demo %}{% include "covers/switch.njk" %}{% enddemo %} diff --git a/contents/teardrop.md b/contents/teardrop.md index 1423025..4508b27 100644 --- a/contents/teardrop.md +++ b/contents/teardrop.md @@ -43,5 +43,5 @@ keywords: css border radius, css teardrop, css water drop shape, css water dropl ``` {% demo %} -{% include "patterns/teardrop.njk" %} +{% include "covers/teardrop.njk" %} {% enddemo %} diff --git a/contents/three-dimensions-card.md b/contents/three-dimensions-card.md index 721a52e..4f4e9db 100644 --- a/contents/three-dimensions-card.md +++ b/contents/three-dimensions-card.md @@ -60,5 +60,5 @@ keywords: css 3D card ``` {% demo %} -{% include "patterns/three-dimensions-card.njk" %} +{% include "covers/three-dimensions-card.njk" %} {% enddemo %} diff --git a/contents/timeline.md b/contents/timeline.md index c52e574..9269b40 100644 --- a/contents/timeline.md +++ b/contents/timeline.md @@ -99,4 +99,4 @@ keywords: css flexbox, css timeline } ``` -{% demo %}{% include "patterns/timeline.njk" %}{% enddemo %} +{% demo %}{% include "covers/timeline.njk" %}{% enddemo %} diff --git a/contents/toggle-password-visibility.md b/contents/toggle-password-visibility.md index 674a405..eefe556 100644 --- a/contents/toggle-password-visibility.md +++ b/contents/toggle-password-visibility.md @@ -62,4 +62,4 @@ document }); ``` -{% demo %}{% include "patterns/toggle-password-visibility.njk" %}{% enddemo %} +{% demo %}{% include "covers/toggle-password-visibility.njk" %}{% enddemo %} diff --git a/contents/tooltip.md b/contents/tooltip.md index 275920d..6da31f7 100644 --- a/contents/tooltip.md +++ b/contents/tooltip.md @@ -85,5 +85,5 @@ keywords: css tooltip ``` {% demo %} -{% include "patterns/tooltip.njk" %} +{% include "covers/tooltip.njk" %} {% enddemo %} diff --git a/contents/tree-diagram.md b/contents/tree-diagram.md index ec99f30..94b11f0 100644 --- a/contents/tree-diagram.md +++ b/contents/tree-diagram.md @@ -128,5 +128,5 @@ You can add a root item to the tree: ``` {% demo %} -{% include "patterns/tree-diagram.njk" %} +{% include "covers/tree-diagram.njk" %} {% enddemo %} diff --git a/contents/triangle-buttons.md b/contents/triangle-buttons.md index 832df70..dbe5d12 100644 --- a/contents/triangle-buttons.md +++ b/contents/triangle-buttons.md @@ -88,5 +88,5 @@ keywords: css triangle buttons ``` {% demo %} -{% include "patterns/triangle-buttons.njk" %} +{% include "covers/triangle-buttons.njk" %} {% enddemo %} diff --git a/contents/upload-button.md b/contents/upload-button.md index 7da5511..e75027f 100644 --- a/contents/upload-button.md +++ b/contents/upload-button.md @@ -54,4 +54,4 @@ keywords: css file input, css flexbox, css upload button } ``` -{% demo %}{% include "patterns/upload-button.njk" %}{% enddemo %} +{% demo %}{% include "covers/upload-button.njk" %}{% enddemo %} diff --git a/contents/validation-icon.md b/contents/validation-icon.md index af310f5..e94c94e 100644 --- a/contents/validation-icon.md +++ b/contents/validation-icon.md @@ -53,5 +53,5 @@ keywords: css validation icon ``` {% demo %} -{% include "patterns/validation-icon.njk" %} +{% include "covers/validation-icon.njk" %} {% enddemo %} diff --git a/contents/video-background.md b/contents/video-background.md index 57294c5..ba0b3f0 100644 --- a/contents/video-background.md +++ b/contents/video-background.md @@ -74,5 +74,5 @@ In this pattern, the video is displayed in the background. ``` {% demo %} -{% include "patterns/video-background.njk" %} +{% include "covers/video-background.njk" %} {% enddemo %} diff --git a/contents/voting.md b/contents/voting.md index 037fbce..e1d14a0 100644 --- a/contents/voting.md +++ b/contents/voting.md @@ -86,5 +86,5 @@ keywords: css flexbox, css triangle buttons, css voting control ``` {% demo %} -{% include "patterns/voting.njk" %} +{% include "covers/voting.njk" %} {% enddemo %} diff --git a/contents/watermark.md b/contents/watermark.md index bc99e53..1fb466b 100644 --- a/contents/watermark.md +++ b/contents/watermark.md @@ -64,5 +64,5 @@ keywords: css watermark ``` {% demo %} -{% include "patterns/watermark.njk" %} +{% include "covers/watermark.njk" %} {% enddemo %} diff --git a/contents/zigzag-timeline.md b/contents/zigzag-timeline.md index 1677c49..71c051c 100644 --- a/contents/zigzag-timeline.md +++ b/contents/zigzag-timeline.md @@ -68,5 +68,5 @@ keywords: css timeline, css zigzag timeline ``` {% demo %} -{% include "patterns/zigzag-timeline.njk" %} +{% include "covers/zigzag-timeline.njk" %} {% enddemo %} diff --git a/layouts/Layout.tsx b/layouts/Layout.tsx deleted file mode 100644 index f7eb32b..0000000 --- a/layouts/Layout.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import Head from 'next/head'; -import * as React from 'react'; -import { FooterBlock } from '../components/FooterBlock'; -import { HeaderBlock } from '../components/HeaderBlock'; - -interface LayoutProps { - title: string; -} - -export const Layout: React.FC = ({ children, title }) => ( - <> - - {title} - CSS Layout - - - - - - - - - {children} - - -); diff --git a/layouts/PatternLayout.tsx b/layouts/PatternLayout.tsx deleted file mode 100644 index 6ae5cc1..0000000 --- a/layouts/PatternLayout.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; -import { Heading, Spacer } from '@1milligram/design'; - -import { CssScanBanner } from '../components/CssScanBanner'; -import { Follow } from '../components/Follow'; -import { Pattern } from '../constants/Pattern'; -import { slug } from '../utils/slug'; -import { Layout } from './Layout'; - -export const PatternLayout: React.FC<{ - pattern: Pattern; -}> = ({ pattern, children }) => { - const patternSlug = slug(pattern); - - return ( - - - {pattern} - CSS Layout - - - - - - - - - - - -
-
- - {pattern} - - - -
- {children} - - -
- - ); -}; diff --git a/pages/sticky-sections/index.tsx b/pages/sticky-sections/index.tsx deleted file mode 100644 index cb10c58..0000000 --- a/pages/sticky-sections/index.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; -import { Spacer } from '@1milligram/design'; - -import { RelatedPatterns } from '../../components/RelatedPatterns'; -import { Pattern } from '../../constants/Pattern'; -import { PatternLayout } from '../../layouts/PatternLayout'; -import BrowserFrame from '../../placeholders/BrowserFrame'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - -
- Try to scroll the main content to see each section sticks to the top of page. -
- -
- ... -
- - - ... - -`} - css={` - .container { - height: 100%; - overflow: scroll; - } - - .container__section { - /* Take full size */ - height: 100%; - width: 100%; - - /* Stick to the top */ - position: sticky; - top: 0; - } - `} - > -
-
-
-
-
- - - - - ); -}; - -export default Details; diff --git a/patterns/sticky-sections/Cover.tsx b/patterns/sticky-sections/Cover.tsx deleted file mode 100644 index 81318aa..0000000 --- a/patterns/sticky-sections/Cover.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
-
-
- - ); -}; - -export default Cover; diff --git a/public/assets/patterns/accordion.png b/public/assets/patterns/accordion.png deleted file mode 100644 index 2d6f6d2..0000000 Binary files a/public/assets/patterns/accordion.png and /dev/null differ diff --git a/public/assets/patterns/arrow-buttons.png b/public/assets/patterns/arrow-buttons.png deleted file mode 100644 index 8fe952e..0000000 Binary files a/public/assets/patterns/arrow-buttons.png and /dev/null differ diff --git a/public/assets/patterns/avatar-list.png b/public/assets/patterns/avatar-list.png deleted file mode 100644 index a456d07..0000000 Binary files a/public/assets/patterns/avatar-list.png and /dev/null differ diff --git a/public/assets/patterns/avatar.png b/public/assets/patterns/avatar.png deleted file mode 100644 index 865cf22..0000000 Binary files a/public/assets/patterns/avatar.png and /dev/null differ diff --git a/public/assets/patterns/badge.png b/public/assets/patterns/badge.png deleted file mode 100644 index 178e81b..0000000 Binary files a/public/assets/patterns/badge.png and /dev/null differ diff --git a/public/assets/patterns/breadcrumb.png b/public/assets/patterns/breadcrumb.png deleted file mode 100644 index 003ab38..0000000 Binary files a/public/assets/patterns/breadcrumb.png and /dev/null differ diff --git a/public/assets/patterns/button-with-icon.png b/public/assets/patterns/button-with-icon.png deleted file mode 100644 index 3c636cc..0000000 Binary files a/public/assets/patterns/button-with-icon.png and /dev/null differ diff --git a/public/assets/patterns/card-layout.png b/public/assets/patterns/card-layout.png deleted file mode 100644 index 04e00e0..0000000 Binary files a/public/assets/patterns/card-layout.png and /dev/null differ diff --git a/public/assets/patterns/card.png b/public/assets/patterns/card.png deleted file mode 100644 index 4783339..0000000 Binary files a/public/assets/patterns/card.png and /dev/null differ diff --git a/public/assets/patterns/centering.png b/public/assets/patterns/centering.png deleted file mode 100644 index 6d7ca1b..0000000 Binary files a/public/assets/patterns/centering.png and /dev/null differ diff --git a/public/assets/patterns/chip.png b/public/assets/patterns/chip.png deleted file mode 100644 index acb6334..0000000 Binary files a/public/assets/patterns/chip.png and /dev/null differ diff --git a/public/assets/patterns/circular-navigation.png b/public/assets/patterns/circular-navigation.png deleted file mode 100644 index bfa697e..0000000 Binary files a/public/assets/patterns/circular-navigation.png and /dev/null differ diff --git a/public/assets/patterns/close-button.png b/public/assets/patterns/close-button.png deleted file mode 100644 index 679db2e..0000000 Binary files a/public/assets/patterns/close-button.png and /dev/null differ diff --git a/public/assets/patterns/color-swatch.png b/public/assets/patterns/color-swatch.png deleted file mode 100644 index a6a3063..0000000 Binary files a/public/assets/patterns/color-swatch.png and /dev/null differ diff --git a/public/assets/patterns/concave-corners.png b/public/assets/patterns/concave-corners.png deleted file mode 100644 index db2b111..0000000 Binary files a/public/assets/patterns/concave-corners.png and /dev/null differ diff --git a/public/assets/patterns/cookie-banner.png b/public/assets/patterns/cookie-banner.png deleted file mode 100644 index 22e2d9a..0000000 Binary files a/public/assets/patterns/cookie-banner.png and /dev/null differ diff --git a/public/assets/patterns/corner-ribbon.png b/public/assets/patterns/corner-ribbon.png deleted file mode 100644 index 4b24dde..0000000 Binary files a/public/assets/patterns/corner-ribbon.png and /dev/null differ diff --git a/public/assets/patterns/curved-background.png b/public/assets/patterns/curved-background.png deleted file mode 100644 index af7faa2..0000000 Binary files a/public/assets/patterns/curved-background.png and /dev/null differ diff --git a/public/assets/patterns/custom-checkbox-button.png b/public/assets/patterns/custom-checkbox-button.png deleted file mode 100644 index 4e1b878..0000000 Binary files a/public/assets/patterns/custom-checkbox-button.png and /dev/null differ diff --git a/public/assets/patterns/custom-radio-button.png b/public/assets/patterns/custom-radio-button.png deleted file mode 100644 index 95299c4..0000000 Binary files a/public/assets/patterns/custom-radio-button.png and /dev/null differ diff --git a/public/assets/patterns/diagonal-section.png b/public/assets/patterns/diagonal-section.png deleted file mode 100644 index 2437fa0..0000000 Binary files a/public/assets/patterns/diagonal-section.png and /dev/null differ diff --git a/public/assets/patterns/docked-at-corner.png b/public/assets/patterns/docked-at-corner.png deleted file mode 100644 index 73cec63..0000000 Binary files a/public/assets/patterns/docked-at-corner.png and /dev/null differ diff --git a/public/assets/patterns/dot-leader.png b/public/assets/patterns/dot-leader.png deleted file mode 100644 index d45f6b3..0000000 Binary files a/public/assets/patterns/dot-leader.png and /dev/null differ diff --git a/public/assets/patterns/dot-navigation.png b/public/assets/patterns/dot-navigation.png deleted file mode 100644 index 5265724..0000000 Binary files a/public/assets/patterns/dot-navigation.png and /dev/null differ diff --git a/public/assets/patterns/drawer.png b/public/assets/patterns/drawer.png deleted file mode 100644 index baa0789..0000000 Binary files a/public/assets/patterns/drawer.png and /dev/null differ diff --git a/public/assets/patterns/drop-area.png b/public/assets/patterns/drop-area.png deleted file mode 100644 index 5fe3efe..0000000 Binary files a/public/assets/patterns/drop-area.png and /dev/null differ diff --git a/public/assets/patterns/drop-cap.png b/public/assets/patterns/drop-cap.png deleted file mode 100644 index c98cd7b..0000000 Binary files a/public/assets/patterns/drop-cap.png and /dev/null differ diff --git a/public/assets/patterns/dropdown.png b/public/assets/patterns/dropdown.png deleted file mode 100644 index 4a125be..0000000 Binary files a/public/assets/patterns/dropdown.png and /dev/null differ diff --git a/public/assets/patterns/fading-long-section.png b/public/assets/patterns/fading-long-section.png deleted file mode 100644 index f70ebbc..0000000 Binary files a/public/assets/patterns/fading-long-section.png and /dev/null differ diff --git a/public/assets/patterns/feature-comparison.png b/public/assets/patterns/feature-comparison.png deleted file mode 100644 index 837156e..0000000 Binary files a/public/assets/patterns/feature-comparison.png and /dev/null differ diff --git a/public/assets/patterns/feature-list.png b/public/assets/patterns/feature-list.png deleted file mode 100644 index ed786d4..0000000 Binary files a/public/assets/patterns/feature-list.png and /dev/null differ diff --git a/public/assets/patterns/fixed-at-corner.png b/public/assets/patterns/fixed-at-corner.png deleted file mode 100644 index e65db60..0000000 Binary files a/public/assets/patterns/fixed-at-corner.png and /dev/null differ diff --git a/public/assets/patterns/fixed-at-side.png b/public/assets/patterns/fixed-at-side.png deleted file mode 100644 index d17cc9a..0000000 Binary files a/public/assets/patterns/fixed-at-side.png and /dev/null differ diff --git a/public/assets/patterns/floating-label.png b/public/assets/patterns/floating-label.png deleted file mode 100644 index 90da812..0000000 Binary files a/public/assets/patterns/floating-label.png and /dev/null differ diff --git a/public/assets/patterns/folder-structure.png b/public/assets/patterns/folder-structure.png deleted file mode 100644 index 460f972..0000000 Binary files a/public/assets/patterns/folder-structure.png and /dev/null differ diff --git a/public/assets/patterns/full-background.png b/public/assets/patterns/full-background.png deleted file mode 100644 index 97b91c6..0000000 Binary files a/public/assets/patterns/full-background.png and /dev/null differ diff --git a/public/assets/patterns/full-screen-menu.png b/public/assets/patterns/full-screen-menu.png deleted file mode 100644 index ef9cbe5..0000000 Binary files a/public/assets/patterns/full-screen-menu.png and /dev/null differ diff --git a/public/assets/patterns/holy-grail.png b/public/assets/patterns/holy-grail.png deleted file mode 100644 index 3830ea0..0000000 Binary files a/public/assets/patterns/holy-grail.png and /dev/null differ diff --git a/public/assets/patterns/initial-avatar.png b/public/assets/patterns/initial-avatar.png deleted file mode 100644 index e6d31b4..0000000 Binary files a/public/assets/patterns/initial-avatar.png and /dev/null differ diff --git a/public/assets/patterns/input-addon.png b/public/assets/patterns/input-addon.png deleted file mode 100644 index df2cd7d..0000000 Binary files a/public/assets/patterns/input-addon.png and /dev/null differ diff --git a/public/assets/patterns/inverted-corners.png b/public/assets/patterns/inverted-corners.png deleted file mode 100644 index 27fb51f..0000000 Binary files a/public/assets/patterns/inverted-corners.png and /dev/null differ diff --git a/public/assets/patterns/keyboard-shortcut.png b/public/assets/patterns/keyboard-shortcut.png deleted file mode 100644 index 27158e8..0000000 Binary files a/public/assets/patterns/keyboard-shortcut.png and /dev/null differ diff --git a/public/assets/patterns/layered-card.png b/public/assets/patterns/layered-card.png deleted file mode 100644 index 38402ce..0000000 Binary files a/public/assets/patterns/layered-card.png and /dev/null differ diff --git a/public/assets/patterns/lined-paper.png b/public/assets/patterns/lined-paper.png deleted file mode 100644 index 93a52fe..0000000 Binary files a/public/assets/patterns/lined-paper.png and /dev/null differ diff --git a/public/assets/patterns/masonry-grid.png b/public/assets/patterns/masonry-grid.png deleted file mode 100644 index 59e61a7..0000000 Binary files a/public/assets/patterns/masonry-grid.png and /dev/null differ diff --git a/public/assets/patterns/media-object.png b/public/assets/patterns/media-object.png deleted file mode 100644 index de025d8..0000000 Binary files a/public/assets/patterns/media-object.png and /dev/null differ diff --git a/public/assets/patterns/mega-menu.png b/public/assets/patterns/mega-menu.png deleted file mode 100644 index 39ea617..0000000 Binary files a/public/assets/patterns/mega-menu.png and /dev/null differ diff --git a/public/assets/patterns/menu.png b/public/assets/patterns/menu.png deleted file mode 100644 index 4d8db97..0000000 Binary files a/public/assets/patterns/menu.png and /dev/null differ diff --git a/public/assets/patterns/modal.png b/public/assets/patterns/modal.png deleted file mode 100644 index 4a4875a..0000000 Binary files a/public/assets/patterns/modal.png and /dev/null differ diff --git a/public/assets/patterns/nested-dropdowns.png b/public/assets/patterns/nested-dropdowns.png deleted file mode 100644 index 69a87a7..0000000 Binary files a/public/assets/patterns/nested-dropdowns.png and /dev/null differ diff --git a/public/assets/patterns/notification.png b/public/assets/patterns/notification.png deleted file mode 100644 index b1c0667..0000000 Binary files a/public/assets/patterns/notification.png and /dev/null differ diff --git a/public/assets/patterns/overlay-play-button.png b/public/assets/patterns/overlay-play-button.png deleted file mode 100644 index 5a650e9..0000000 Binary files a/public/assets/patterns/overlay-play-button.png and /dev/null differ diff --git a/public/assets/patterns/pagination.png b/public/assets/patterns/pagination.png deleted file mode 100644 index 8578523..0000000 Binary files a/public/assets/patterns/pagination.png and /dev/null differ diff --git a/public/assets/patterns/popover-arrow.png b/public/assets/patterns/popover-arrow.png deleted file mode 100644 index 7a3de9a..0000000 Binary files a/public/assets/patterns/popover-arrow.png and /dev/null differ diff --git a/public/assets/patterns/presence-indicator.png b/public/assets/patterns/presence-indicator.png deleted file mode 100644 index 29aa7e1..0000000 Binary files a/public/assets/patterns/presence-indicator.png and /dev/null differ diff --git a/public/assets/patterns/previous-next-buttons.png b/public/assets/patterns/previous-next-buttons.png deleted file mode 100644 index 608d909..0000000 Binary files a/public/assets/patterns/previous-next-buttons.png and /dev/null differ diff --git a/public/assets/patterns/price-tag.png b/public/assets/patterns/price-tag.png deleted file mode 100644 index 185a501..0000000 Binary files a/public/assets/patterns/price-tag.png and /dev/null differ diff --git a/public/assets/patterns/pricing-table.png b/public/assets/patterns/pricing-table.png deleted file mode 100644 index 1683743..0000000 Binary files a/public/assets/patterns/pricing-table.png and /dev/null differ diff --git a/public/assets/patterns/progress-bar.png b/public/assets/patterns/progress-bar.png deleted file mode 100644 index 4e5b545..0000000 Binary files a/public/assets/patterns/progress-bar.png and /dev/null differ diff --git a/public/assets/patterns/property-list.png b/public/assets/patterns/property-list.png deleted file mode 100644 index 4e312dd..0000000 Binary files a/public/assets/patterns/property-list.png and /dev/null differ diff --git a/public/assets/patterns/questions-and-answers.png b/public/assets/patterns/questions-and-answers.png deleted file mode 100644 index 94742ec..0000000 Binary files a/public/assets/patterns/questions-and-answers.png and /dev/null differ diff --git a/public/assets/patterns/radial-progress-bar.png b/public/assets/patterns/radial-progress-bar.png deleted file mode 100644 index 80fc7cc..0000000 Binary files a/public/assets/patterns/radial-progress-bar.png and /dev/null differ diff --git a/public/assets/patterns/radio-button-group.png b/public/assets/patterns/radio-button-group.png deleted file mode 100644 index 5810530..0000000 Binary files a/public/assets/patterns/radio-button-group.png and /dev/null differ diff --git a/public/assets/patterns/radio-switch.png b/public/assets/patterns/radio-switch.png deleted file mode 100644 index c795cc8..0000000 Binary files a/public/assets/patterns/radio-switch.png and /dev/null differ diff --git a/public/assets/patterns/rating.png b/public/assets/patterns/rating.png deleted file mode 100644 index 76c320b..0000000 Binary files a/public/assets/patterns/rating.png and /dev/null differ diff --git a/public/assets/patterns/resizable-element.png b/public/assets/patterns/resizable-element.png deleted file mode 100644 index 4f9af5a..0000000 Binary files a/public/assets/patterns/resizable-element.png and /dev/null differ diff --git a/public/assets/patterns/ribbon.png b/public/assets/patterns/ribbon.png deleted file mode 100644 index 5ed1fa7..0000000 Binary files a/public/assets/patterns/ribbon.png and /dev/null differ diff --git a/public/assets/patterns/same-height-columns.png b/public/assets/patterns/same-height-columns.png deleted file mode 100644 index 82be54f..0000000 Binary files a/public/assets/patterns/same-height-columns.png and /dev/null differ diff --git a/public/assets/patterns/search-box.png b/public/assets/patterns/search-box.png deleted file mode 100644 index 130befc..0000000 Binary files a/public/assets/patterns/search-box.png and /dev/null differ diff --git a/public/assets/patterns/separator.png b/public/assets/patterns/separator.png deleted file mode 100644 index 466a9d4..0000000 Binary files a/public/assets/patterns/separator.png and /dev/null differ diff --git a/public/assets/patterns/sidebar.png b/public/assets/patterns/sidebar.png deleted file mode 100644 index f46a465..0000000 Binary files a/public/assets/patterns/sidebar.png and /dev/null differ diff --git a/public/assets/patterns/simple-grid.png b/public/assets/patterns/simple-grid.png deleted file mode 100644 index 52fee43..0000000 Binary files a/public/assets/patterns/simple-grid.png and /dev/null differ diff --git a/public/assets/patterns/slider.png b/public/assets/patterns/slider.png deleted file mode 100644 index 5f6ae91..0000000 Binary files a/public/assets/patterns/slider.png and /dev/null differ diff --git a/public/assets/patterns/spin-button.png b/public/assets/patterns/spin-button.png deleted file mode 100644 index c31b877..0000000 Binary files a/public/assets/patterns/spin-button.png and /dev/null differ diff --git a/public/assets/patterns/split-navigation.png b/public/assets/patterns/split-navigation.png deleted file mode 100644 index 00d114f..0000000 Binary files a/public/assets/patterns/split-navigation.png and /dev/null differ diff --git a/public/assets/patterns/split-screen.png b/public/assets/patterns/split-screen.png deleted file mode 100644 index ca30c1c..0000000 Binary files a/public/assets/patterns/split-screen.png and /dev/null differ diff --git a/public/assets/patterns/stacked-cards.png b/public/assets/patterns/stacked-cards.png deleted file mode 100644 index c86a130..0000000 Binary files a/public/assets/patterns/stacked-cards.png and /dev/null differ diff --git a/public/assets/patterns/stamp-border.png b/public/assets/patterns/stamp-border.png deleted file mode 100644 index a78223d..0000000 Binary files a/public/assets/patterns/stamp-border.png and /dev/null differ diff --git a/public/assets/patterns/statistic.png b/public/assets/patterns/statistic.png deleted file mode 100644 index 2a69fe2..0000000 Binary files a/public/assets/patterns/statistic.png and /dev/null differ diff --git a/public/assets/patterns/status-light.png b/public/assets/patterns/status-light.png deleted file mode 100644 index 58afc12..0000000 Binary files a/public/assets/patterns/status-light.png and /dev/null differ diff --git a/public/assets/patterns/stepper-input.png b/public/assets/patterns/stepper-input.png deleted file mode 100644 index 0c3cd2e..0000000 Binary files a/public/assets/patterns/stepper-input.png and /dev/null differ diff --git a/public/assets/patterns/sticky-footer.png b/public/assets/patterns/sticky-footer.png deleted file mode 100644 index 7287954..0000000 Binary files a/public/assets/patterns/sticky-footer.png and /dev/null differ diff --git a/public/assets/patterns/sticky-header.png b/public/assets/patterns/sticky-header.png deleted file mode 100644 index fcc5fca..0000000 Binary files a/public/assets/patterns/sticky-header.png and /dev/null differ diff --git a/public/assets/patterns/sticky-sections.png b/public/assets/patterns/sticky-sections.png deleted file mode 100644 index 3f1ab0f..0000000 Binary files a/public/assets/patterns/sticky-sections.png and /dev/null differ diff --git a/public/assets/patterns/sticky-table-column.png b/public/assets/patterns/sticky-table-column.png deleted file mode 100644 index 78f04b0..0000000 Binary files a/public/assets/patterns/sticky-table-column.png and /dev/null differ diff --git a/public/assets/patterns/sticky-table-headers.png b/public/assets/patterns/sticky-table-headers.png deleted file mode 100644 index 283efbc..0000000 Binary files a/public/assets/patterns/sticky-table-headers.png and /dev/null differ diff --git a/public/assets/patterns/switch.png b/public/assets/patterns/switch.png deleted file mode 100644 index 46df6c5..0000000 Binary files a/public/assets/patterns/switch.png and /dev/null differ diff --git a/public/assets/patterns/tab.png b/public/assets/patterns/tab.png deleted file mode 100644 index cfd3c62..0000000 Binary files a/public/assets/patterns/tab.png and /dev/null differ diff --git a/public/assets/patterns/teardrop.png b/public/assets/patterns/teardrop.png deleted file mode 100644 index 9a45d97..0000000 Binary files a/public/assets/patterns/teardrop.png and /dev/null differ diff --git a/public/assets/patterns/three-dimensions-card.png b/public/assets/patterns/three-dimensions-card.png deleted file mode 100644 index a941123..0000000 Binary files a/public/assets/patterns/three-dimensions-card.png and /dev/null differ diff --git a/public/assets/patterns/timeline.png b/public/assets/patterns/timeline.png deleted file mode 100644 index 751adbf..0000000 Binary files a/public/assets/patterns/timeline.png and /dev/null differ diff --git a/public/assets/patterns/toggle-password-visibility.png b/public/assets/patterns/toggle-password-visibility.png deleted file mode 100644 index 79c02e3..0000000 Binary files a/public/assets/patterns/toggle-password-visibility.png and /dev/null differ diff --git a/public/assets/patterns/tooltip.png b/public/assets/patterns/tooltip.png deleted file mode 100644 index fa9d7f6..0000000 Binary files a/public/assets/patterns/tooltip.png and /dev/null differ diff --git a/public/assets/patterns/tree-diagram.png b/public/assets/patterns/tree-diagram.png deleted file mode 100644 index a86e45d..0000000 Binary files a/public/assets/patterns/tree-diagram.png and /dev/null differ diff --git a/public/assets/patterns/triangle-buttons.png b/public/assets/patterns/triangle-buttons.png deleted file mode 100644 index 6d2e2bc..0000000 Binary files a/public/assets/patterns/triangle-buttons.png and /dev/null differ diff --git a/public/assets/patterns/upload-button.png b/public/assets/patterns/upload-button.png deleted file mode 100644 index d886b64..0000000 Binary files a/public/assets/patterns/upload-button.png and /dev/null differ diff --git a/public/assets/patterns/validation-icon.png b/public/assets/patterns/validation-icon.png deleted file mode 100644 index 17a47ef..0000000 Binary files a/public/assets/patterns/validation-icon.png and /dev/null differ diff --git a/public/assets/patterns/video-background.png b/public/assets/patterns/video-background.png deleted file mode 100644 index bdba596..0000000 Binary files a/public/assets/patterns/video-background.png and /dev/null differ diff --git a/public/assets/patterns/voting.png b/public/assets/patterns/voting.png deleted file mode 100644 index e6cd3c7..0000000 Binary files a/public/assets/patterns/voting.png and /dev/null differ diff --git a/public/assets/patterns/watermark.png b/public/assets/patterns/watermark.png deleted file mode 100644 index e6f758d..0000000 Binary files a/public/assets/patterns/watermark.png and /dev/null differ diff --git a/public/assets/patterns/wizard.png b/public/assets/patterns/wizard.png deleted file mode 100644 index 4b1b61f..0000000 Binary files a/public/assets/patterns/wizard.png and /dev/null differ diff --git a/public/assets/patterns/zigzag-timeline.png b/public/assets/patterns/zigzag-timeline.png deleted file mode 100644 index 6b121b3..0000000 Binary files a/public/assets/patterns/zigzag-timeline.png and /dev/null differ diff --git a/styles/index.scss b/styles/index.scss index 67c40c1..878acc2 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -82,6 +82,7 @@ @import './patterns/stepper-input'; @import './patterns/sticky-footer'; @import './patterns/sticky-header'; +@import './patterns/sticky-sections'; @import './patterns/sticky-table-column'; @import './patterns/sticky-table-headers'; @import './patterns/switch'; diff --git a/styles/patterns/_sticky-sections.scss b/styles/patterns/_sticky-sections.scss new file mode 100644 index 0000000..9e2514c --- /dev/null +++ b/styles/patterns/_sticky-sections.scss @@ -0,0 +1,30 @@ +.sticky-sections { + height: 100%; + + /* Demo */ + width: 100%; +} + +.sticky-sections__section { + /* Take full size */ + height: 25%; + width: 100%; + + /* Stick to the top */ + position: sticky; + top: 0; +} + +/* Demo */ +.sticky-sections__section:nth-child(1) { + background-color: #e5e7eb; +} +.sticky-sections__section:nth-child(2) { + background-color: #d1d5db; +} +.sticky-sections__section:nth-child(3) { + background-color: #9ca3af; +} +.sticky-sections__section:nth-child(4) { + background-color: #6b7280; +} \ No newline at end of file