diff --git a/snippet-template.md b/snippet-template.md index 16a988886..782c0e7b7 100644 --- a/snippet-template.md +++ b/snippet-template.md @@ -1,8 +1,9 @@ --- title: Snippet Name -tags: other +type: snippet +tags: [other] cover: image -firstSeen: 2021-06-13T05:00:00-04:00 +dateModified: 2021-06-13T05:00:00-04:00 --- Explain briefly what the snippet does. diff --git a/snippets/aspect-ratio.md b/snippets/aspect-ratio.md index d0f39111c..307b0179c 100644 --- a/snippets/aspect-ratio.md +++ b/snippets/aspect-ratio.md @@ -1,9 +1,10 @@ --- title: Aspect ratio -tags: layout +type: snippet +tags: [layout] author: chalarangelo cover: digital-nomad-12 -firstSeen: 2022-08-14T05:00:00-04:00 +dateModified: 2022-08-14T05:00:00-04:00 --- Creates a responsive container with a specified aspect ratio. diff --git a/snippets/border-with-top-triangle.md b/snippets/border-with-top-triangle.md index e836aef10..cfd3d7cf4 100644 --- a/snippets/border-with-top-triangle.md +++ b/snippets/border-with-top-triangle.md @@ -1,9 +1,9 @@ --- title: Border with top triangle -tags: visual +type: snippet +tags: [visual] cover: greek-coffee -firstSeen: 2019-01-18T12:18:43+02:00 -lastUpdated: 2021-01-07T23:52:15+02:00 +dateModified: 2021-01-07T23:52:15+02:00 --- Creates a content container with a triangle at the top. diff --git a/snippets/bouncing-loader.md b/snippets/bouncing-loader.md index 7b3af7266..74caefac7 100644 --- a/snippets/bouncing-loader.md +++ b/snippets/bouncing-loader.md @@ -1,9 +1,9 @@ --- title: Bouncing loader -tags: animation +type: snippet +tags: [animation] cover: digital-nomad-12 -firstSeen: 2018-03-04T06:24:22+02:00 -lastUpdated: 2021-10-11T18:44:51+03:00 +dateModified: 2021-10-11T18:44:51+03:00 --- Creates a bouncing loader animation. diff --git a/snippets/box-sizing-reset.md b/snippets/box-sizing-reset.md index bfc1ab9d9..3c8034f8f 100644 --- a/snippets/box-sizing-reset.md +++ b/snippets/box-sizing-reset.md @@ -1,9 +1,9 @@ --- title: Box-sizing reset -tags: layout +type: snippet +tags: [layout] cover: interior -firstSeen: 2018-02-27T18:59:09+02:00 -lastUpdated: 2020-12-30T15:37:37+02:00 +dateModified: 2020-12-30T15:37:37+02:00 --- Resets the box-model so that `width` and `height` are not affected by `border` or `padding`. diff --git a/snippets/broken-image-fallback.md b/snippets/broken-image-fallback.md index d6aadb994..831217fd6 100644 --- a/snippets/broken-image-fallback.md +++ b/snippets/broken-image-fallback.md @@ -1,10 +1,11 @@ --- title: Fallback for images that fail to load +type: snippet shortTitle: Broken image fallback -tags: visual +tags: [visual] author: chalarangelo cover: building-facade -firstSeen: 2022-11-04T05:00:00-04:00 +dateModified: 2022-11-04T05:00:00-04:00 --- Displays an error message when an image fails to load. diff --git a/snippets/button-border-animation.md b/snippets/button-border-animation.md index ec3cc8a17..60977819a 100644 --- a/snippets/button-border-animation.md +++ b/snippets/button-border-animation.md @@ -1,9 +1,9 @@ --- title: Button border animation -tags: animation +type: snippet +tags: [animation] cover: highlands -firstSeen: 2019-01-21T18:52:46+02:00 -lastUpdated: 2021-05-24T15:28:52+03:00 +dateModified: 2021-05-24T15:28:52+03:00 --- Creates a border animation on hover. diff --git a/snippets/button-focus-swing-animation.md b/snippets/button-focus-swing-animation.md index 77e418916..24d0dabfb 100644 --- a/snippets/button-focus-swing-animation.md +++ b/snippets/button-focus-swing-animation.md @@ -1,10 +1,10 @@ --- title: Button swing animation -tags: animation +type: snippet +tags: [animation] author: chalarangelo cover: painters-desk -firstSeen: 2021-05-24T15:28:52+03:00 -lastUpdated: 2021-05-24T15:28:52+03:00 +dateModified: 2021-05-24T15:28:52+03:00 --- Creates a swing animation on focus. diff --git a/snippets/button-hover-fill-animation.md b/snippets/button-hover-fill-animation.md index 31a00558c..231bae2ff 100644 --- a/snippets/button-hover-fill-animation.md +++ b/snippets/button-hover-fill-animation.md @@ -1,9 +1,9 @@ --- title: Button fill animation -tags: animation +type: snippet +tags: [animation] cover: beach-pineapple -firstSeen: 2020-10-08T20:48:11+03:00 -lastUpdated: 2021-04-02T21:34:43+03:00 +dateModified: 2021-04-02T21:34:43+03:00 --- Creates a fill animation on hover. diff --git a/snippets/button-hover-grow-animation.md b/snippets/button-hover-grow-animation.md index 8b678ee58..83814fc04 100644 --- a/snippets/button-hover-grow-animation.md +++ b/snippets/button-hover-grow-animation.md @@ -1,10 +1,10 @@ --- title: Button grow animation -tags: animation +type: snippet +tags: [animation] author: chalarangelo cover: white-laptop -firstSeen: 2021-05-24T15:28:52+03:00 -lastUpdated: 2021-05-24T15:28:52+03:00 +dateModified: 2021-05-24T15:28:52+03:00 --- Creates a grow animation on hover. diff --git a/snippets/button-hover-shrink-animation.md b/snippets/button-hover-shrink-animation.md index 3ed2b68fc..2b0f7371f 100644 --- a/snippets/button-hover-shrink-animation.md +++ b/snippets/button-hover-shrink-animation.md @@ -1,10 +1,10 @@ --- title: Button shrink animation -tags: animation +type: snippet +tags: [animation] author: chalarangelo cover: clay-pot-horizon -firstSeen: 2021-05-24T15:28:52+03:00 -lastUpdated: 2021-05-24T15:28:52+03:00 +dateModified: 2021-05-24T15:28:52+03:00 --- Creates a shrink animation on hover. diff --git a/snippets/card-image-cutout.md b/snippets/card-image-cutout.md index 5df62016c..7c70d07d9 100644 --- a/snippets/card-image-cutout.md +++ b/snippets/card-image-cutout.md @@ -1,9 +1,10 @@ --- title: Card with image cutout -tags: visual +type: snippet +tags: [visual] author: chalarangelo cover: radio-monstera -firstSeen: 2022-12-11T05:00:00-04:00 +dateModified: 2022-12-11T05:00:00-04:00 --- Creates a card with an image cutout. diff --git a/snippets/checkerboard-pattern.md b/snippets/checkerboard-pattern.md index 5001c7138..7a9bbf8af 100644 --- a/snippets/checkerboard-pattern.md +++ b/snippets/checkerboard-pattern.md @@ -1,9 +1,9 @@ --- title: Checkerboard background pattern -tags: visual +type: snippet +tags: [visual] cover: digital-nomad-2 -firstSeen: 2021-01-11T09:51:43+02:00 -lastUpdated: 2021-10-13T19:29:39+02:00 +dateModified: 2021-10-13T19:29:39+02:00 --- Creates a checkerboard background pattern. diff --git a/snippets/circle.md b/snippets/circle.md index d447036e3..3c5ed7518 100644 --- a/snippets/circle.md +++ b/snippets/circle.md @@ -1,9 +1,9 @@ --- title: Circle -tags: visual +type: snippet +tags: [visual] cover: oven-paddle -firstSeen: 2018-03-04T08:19:52+02:00 -lastUpdated: 2020-12-30T15:37:37+02:00 +dateModified: 2020-12-30T15:37:37+02:00 --- Creates a circular shape with pure CSS. diff --git a/snippets/clearfix.md b/snippets/clearfix.md index 442645f05..864fe4b63 100644 --- a/snippets/clearfix.md +++ b/snippets/clearfix.md @@ -1,9 +1,9 @@ --- title: Clearfix -tags: layout +type: snippet +tags: [layout] cover: memories-of-pineapple-3 -firstSeen: 2018-02-25T15:14:39+02:00 -lastUpdated: 2020-12-30T15:37:37+02:00 +dateModified: 2020-12-30T15:37:37+02:00 --- Ensures that an element self-clears its children. diff --git a/snippets/constant-width-to-height-ratio.md b/snippets/constant-width-to-height-ratio.md index ae6941db6..68a91da6d 100644 --- a/snippets/constant-width-to-height-ratio.md +++ b/snippets/constant-width-to-height-ratio.md @@ -1,9 +1,9 @@ --- title: Constant width to height ratio -tags: layout +type: snippet +tags: [layout] cover: clutter -firstSeen: 2018-02-27T10:45:26+02:00 -lastUpdated: 2020-12-30T15:37:37+02:00 +dateModified: 2020-12-30T15:37:37+02:00 --- Ensures that an element with variable `width` will retain a proportionate `height` value. diff --git a/snippets/counter.md b/snippets/counter.md index 2391f8dd9..491cc9cd1 100644 --- a/snippets/counter.md +++ b/snippets/counter.md @@ -1,9 +1,9 @@ --- title: Counter -tags: visual +type: snippet +tags: [visual] cover: laptop-plants -firstSeen: 2018-03-07T22:12:42+02:00 -lastUpdated: 2020-12-30T15:37:37+02:00 +dateModified: 2020-12-30T15:37:37+02:00 --- Creates a custom list counter that accounts for nested list elements. diff --git a/snippets/custom-checkbox.md b/snippets/custom-checkbox.md index b6014bdaa..b5ad2a36f 100644 --- a/snippets/custom-checkbox.md +++ b/snippets/custom-checkbox.md @@ -1,10 +1,10 @@ --- title: Custom checkbox -tags: visual,animation +type: snippet +tags: [visual,animation] author: chalarangelo cover: interior-8 -firstSeen: 2021-05-16T13:09:15+03:00 -lastUpdated: 2021-10-11T18:44:51+03:00 +dateModified: 2021-10-11T18:44:51+03:00 --- Creates a styled checkbox with animation on state change. diff --git a/snippets/custom-radio.md b/snippets/custom-radio.md index 8f795a256..ccf21ce25 100644 --- a/snippets/custom-radio.md +++ b/snippets/custom-radio.md @@ -1,9 +1,10 @@ --- title: Custom radio button -tags: visual,animation +type: snippet +tags: [visual,animation] author: chalarangelo cover: messy-computer -firstSeen: 2022-11-16T05:00:00-04:00 +dateModified: 2022-11-16T05:00:00-04:00 --- Creates a styled radio button with animation on state change. diff --git a/snippets/custom-scrollbar.md b/snippets/custom-scrollbar.md index 2aa5372bd..f0f3f12b5 100644 --- a/snippets/custom-scrollbar.md +++ b/snippets/custom-scrollbar.md @@ -1,9 +1,9 @@ --- title: Custom scrollbar -tags: visual +type: snippet +tags: [visual] cover: sea-view -firstSeen: 2018-03-01T10:34:55+02:00 -lastUpdated: 2021-05-16T13:09:15+03:00 +dateModified: 2021-05-16T13:09:15+03:00 --- Customizes the scrollbar style for elements with scrollable overflow. diff --git a/snippets/custom-text-selection.md b/snippets/custom-text-selection.md index f4c4a47c7..67d7440bb 100644 --- a/snippets/custom-text-selection.md +++ b/snippets/custom-text-selection.md @@ -1,9 +1,9 @@ --- title: Custom text selection -tags: visual +type: snippet +tags: [visual] cover: digital-nomad -firstSeen: 2018-02-25T15:14:39+02:00 -lastUpdated: 2020-12-30T15:37:37+02:00 +dateModified: 2020-12-30T15:37:37+02:00 --- Changes the styling of text selection. diff --git a/snippets/disable-selection.md b/snippets/disable-selection.md index a0b85da83..02084424b 100644 --- a/snippets/disable-selection.md +++ b/snippets/disable-selection.md @@ -1,9 +1,9 @@ --- title: Disable selection -tags: interactivity +type: snippet +tags: [interactivity] cover: interior-9 -firstSeen: 2018-02-26T19:09:58+02:00 -lastUpdated: 2020-12-30T15:37:37+02:00 +dateModified: 2020-12-30T15:37:37+02:00 --- Makes the content unselectable. diff --git a/snippets/display-empty-links.md b/snippets/display-empty-links.md index 5de07b1e7..96a0be7dc 100644 --- a/snippets/display-empty-links.md +++ b/snippets/display-empty-links.md @@ -1,9 +1,10 @@ --- title: Style links with no text -tags: visual +type: snippet +tags: [visual] author: chalarangelo cover: metro-tunnel -firstSeen: 2022-11-11T05:00:00-04:00 +dateModified: 2022-11-11T05:00:00-04:00 --- Displays the link URL for links with no text. diff --git a/snippets/display-table-centering.md b/snippets/display-table-centering.md index 96ba0df87..45275d4df 100644 --- a/snippets/display-table-centering.md +++ b/snippets/display-table-centering.md @@ -1,9 +1,9 @@ --- title: Display table centering -tags: layout +type: snippet +tags: [layout] cover: malibu -firstSeen: 2018-03-30T01:15:54+03:00 -lastUpdated: 2020-12-30T15:37:37+02:00 +dateModified: 2020-12-30T15:37:37+02:00 --- Vertically and horizontally centers a child element within its parent element, using `display: table`. diff --git a/snippets/donut-spinner.md b/snippets/donut-spinner.md index f8e5ed90f..175fe3b6e 100644 --- a/snippets/donut-spinner.md +++ b/snippets/donut-spinner.md @@ -1,9 +1,9 @@ --- title: Donut spinner -tags: animation +type: snippet +tags: [animation] cover: digital-nomad-3 -firstSeen: 2018-02-27T17:32:35+02:00 -lastUpdated: 2021-10-13T19:29:39+02:00 +dateModified: 2021-10-13T19:29:39+02:00 --- Creates a donut spinner that can be used to indicate the loading of content. diff --git a/snippets/drop-cap.md b/snippets/drop-cap.md index 48d352cb7..a5abaa947 100644 --- a/snippets/drop-cap.md +++ b/snippets/drop-cap.md @@ -1,9 +1,9 @@ --- title: Drop cap -tags: visual +type: snippet +tags: [visual] cover: bamboo-lamp -firstSeen: 2018-10-13T07:47:30+03:00 -lastUpdated: 2020-12-30T15:37:37+02:00 +dateModified: 2020-12-30T15:37:37+02:00 --- Makes the first letter of the first paragraph bigger than the rest of the text. diff --git a/snippets/dynamic-shadow.md b/snippets/dynamic-shadow.md index 1d2e012e6..a4ade87f7 100644 --- a/snippets/dynamic-shadow.md +++ b/snippets/dynamic-shadow.md @@ -1,9 +1,9 @@ --- title: Dynamic shadow -tags: visual +type: snippet +tags: [visual] cover: couch-laptop -firstSeen: 2018-03-05T13:51:36+02:00 -lastUpdated: 2020-12-30T15:37:37+02:00 +dateModified: 2020-12-30T15:37:37+02:00 --- Creates a shadow similar to `box-shadow` but based on the colors of the element itself. diff --git a/snippets/etched-text.md b/snippets/etched-text.md index c1edb2ca9..639766083 100644 --- a/snippets/etched-text.md +++ b/snippets/etched-text.md @@ -1,9 +1,9 @@ --- title: Etched text -tags: visual +type: snippet +tags: [visual] cover: memories-of-pineapple-2 -firstSeen: 2018-02-25T15:14:39+02:00 -lastUpdated: 2020-12-30T15:37:37+02:00 +dateModified: 2020-12-30T15:37:37+02:00 --- Creates an effect where text appears to be "etched" or engraved into the background. diff --git a/snippets/evenly-distributed-children.md b/snippets/evenly-distributed-children.md index 92223aca3..41852ad62 100644 --- a/snippets/evenly-distributed-children.md +++ b/snippets/evenly-distributed-children.md @@ -1,9 +1,9 @@ --- title: Evenly distributed children -tags: layout +type: snippet +tags: [layout] cover: little-bird -firstSeen: 2018-02-28T13:47:02+02:00 -lastUpdated: 2021-10-13T19:29:39+02:00 +dateModified: 2021-10-13T19:29:39+02:00 --- Evenly distributes child elements within a parent element. diff --git a/snippets/fit-image-in-container.md b/snippets/fit-image-in-container.md index 3db7d4f05..ce81c131b 100644 --- a/snippets/fit-image-in-container.md +++ b/snippets/fit-image-in-container.md @@ -1,9 +1,9 @@ --- title: Fit image in container -tags: layout,visual +type: snippet +tags: [layout,visual] cover: succulent-3 -firstSeen: 2018-10-31T08:34:49+02:00 -lastUpdated: 2020-12-30T15:37:37+02:00 +dateModified: 2020-12-30T15:37:37+02:00 --- Fits an positions an image appropriately inside its container while preserving its aspect ratio. diff --git a/snippets/flexbox-centering.md b/snippets/flexbox-centering.md index 881737392..d5c140cad 100644 --- a/snippets/flexbox-centering.md +++ b/snippets/flexbox-centering.md @@ -1,9 +1,9 @@ --- title: Flexbox centering -tags: layout +type: snippet +tags: [layout] cover: basket-paper -firstSeen: 2018-03-03T11:57:27+02:00 -lastUpdated: 2020-12-30T15:37:37+02:00 +dateModified: 2020-12-30T15:37:37+02:00 --- Horizontally and vertically centers a child element within a parent element using flexbox. diff --git a/snippets/floating-list-titles.md b/snippets/floating-list-titles.md index 02fb90b41..4ff22ff78 100644 --- a/snippets/floating-list-titles.md +++ b/snippets/floating-list-titles.md @@ -1,10 +1,10 @@ --- title: List with floating section headings -tags: visual +type: snippet +tags: [visual] author: chalarangelo cover: pop-of-green -firstSeen: 2020-08-18T15:44:01+03:00 -lastUpdated: 2021-10-11T18:44:51+03:00 +dateModified: 2021-10-11T18:44:51+03:00 --- Creates a list with floating headings for each section. diff --git a/snippets/fluid-typography.md b/snippets/fluid-typography.md index dd098f01d..0eb94e936 100644 --- a/snippets/fluid-typography.md +++ b/snippets/fluid-typography.md @@ -1,10 +1,10 @@ --- title: Fluid typography -tags: visual +type: snippet +tags: [visual] author: chalarangelo cover: shell-focus -firstSeen: 2021-05-16T11:23:05+03:00 -lastUpdated: 2021-05-16T11:23:05+03:00 +dateModified: 2021-05-16T11:23:05+03:00 --- Creates text that scales according to the viewport width. diff --git a/snippets/focus-within.md b/snippets/focus-within.md index 52a2e51ad..a8d9fcc82 100644 --- a/snippets/focus-within.md +++ b/snippets/focus-within.md @@ -1,9 +1,9 @@ --- title: Focus Within -tags: visual,interactivity +type: snippet +tags: [visual,interactivity] cover: boats -firstSeen: 2018-10-23T03:58:13+03:00 -lastUpdated: 2020-12-30T15:37:37+02:00 +dateModified: 2020-12-30T15:37:37+02:00 --- Changes the appearance of a form if any of its children are focused. diff --git a/snippets/full-width.md b/snippets/full-width.md index 6c55ea0cd..a1a3aaf82 100644 --- a/snippets/full-width.md +++ b/snippets/full-width.md @@ -1,10 +1,10 @@ --- title: Full-width image -tags: layout +type: snippet +tags: [layout] author: chalarangelo cover: yellow-white-mug-2 -firstSeen: 2021-01-07T10:14:46+02:00 -lastUpdated: 2021-01-07T10:14:46+02:00 +dateModified: 2021-01-07T10:14:46+02:00 --- Creates a full-width image. diff --git a/snippets/fullscreen.md b/snippets/fullscreen.md index 79ef4f450..3538ebac5 100644 --- a/snippets/fullscreen.md +++ b/snippets/fullscreen.md @@ -1,9 +1,9 @@ --- title: Fullscreen -tags: visual +type: snippet +tags: [visual] cover: flower-portrait-3 -firstSeen: 2019-01-12T13:08:40+02:00 -lastUpdated: 2021-10-13T19:29:39+02:00 +dateModified: 2021-10-13T19:29:39+02:00 --- Applies styles to an element when in fullscreen mode. diff --git a/snippets/gradient-text.md b/snippets/gradient-text.md index 32ae5725f..a87ac5706 100644 --- a/snippets/gradient-text.md +++ b/snippets/gradient-text.md @@ -1,9 +1,9 @@ --- title: Gradient text -tags: visual +type: snippet +tags: [visual] cover: red-berries -firstSeen: 2018-02-25T15:14:39+02:00 -lastUpdated: 2020-12-30T15:37:37+02:00 +dateModified: 2020-12-30T15:37:37+02:00 --- Gives text a gradient color. diff --git a/snippets/grid-centering.md b/snippets/grid-centering.md index ed6569d9a..5e18ea077 100644 --- a/snippets/grid-centering.md +++ b/snippets/grid-centering.md @@ -1,9 +1,9 @@ --- title: Grid centering -tags: layout +type: snippet +tags: [layout] cover: work-hard-computer -firstSeen: 2018-03-03T12:13:59+02:00 -lastUpdated: 2020-12-30T15:37:37+02:00 +dateModified: 2020-12-30T15:37:37+02:00 --- Horizontally and vertically centers a child element within a parent element using `grid`. diff --git a/snippets/hamburger-button.md b/snippets/hamburger-button.md index ec540c38a..16734bf65 100644 --- a/snippets/hamburger-button.md +++ b/snippets/hamburger-button.md @@ -1,9 +1,9 @@ --- title: Hamburger Button -tags: interactivity +type: snippet +tags: [interactivity] cover: volcano-sunset -firstSeen: 2019-10-10T03:49:38+03:00 -lastUpdated: 2020-12-30T15:37:37+02:00 +dateModified: 2020-12-30T15:37:37+02:00 --- Displays a hamburger menu which transitions to a cross button on hover. diff --git a/snippets/height-transition.md b/snippets/height-transition.md index 4ee0df444..e06ff5bb8 100644 --- a/snippets/height-transition.md +++ b/snippets/height-transition.md @@ -1,9 +1,9 @@ --- title: Height transition -tags: animation +type: snippet +tags: [animation] cover: washed-ashore -firstSeen: 2018-03-17T10:53:02+02:00 -lastUpdated: 2020-12-30T15:37:37+02:00 +dateModified: 2020-12-30T15:37:37+02:00 --- Transitions an element's height from `0` to `auto` when its height is unknown. diff --git a/snippets/hide-empty-elements.md b/snippets/hide-empty-elements.md index de6cdc136..124dfae10 100644 --- a/snippets/hide-empty-elements.md +++ b/snippets/hide-empty-elements.md @@ -1,9 +1,10 @@ --- title: Hide empty elements -tags: visual +type: snippet +tags: [visual] author: chalarangelo cover: metro-arrival -firstSeen: 2022-11-18T05:00:00-04:00 +dateModified: 2022-11-18T05:00:00-04:00 --- Hides elements with no content. diff --git a/snippets/hide-scrollbars.md b/snippets/hide-scrollbars.md index 84b88fd6a..3a7a35cc3 100644 --- a/snippets/hide-scrollbars.md +++ b/snippets/hide-scrollbars.md @@ -1,9 +1,10 @@ --- title: Hide scroll bars -tags: visual +type: snippet +tags: [visual] author: chalarangelo cover: by-the-lighthouse -firstSeen: 2022-05-13T05:00:00-04:00 +dateModified: 2022-05-13T05:00:00-04:00 --- Hides scrollbars on an element, while still allowing it to be scrollable. diff --git a/snippets/horizontal-gallery.md b/snippets/horizontal-gallery.md index 486be6e78..33a94bd27 100644 --- a/snippets/horizontal-gallery.md +++ b/snippets/horizontal-gallery.md @@ -1,8 +1,9 @@ --- title: Image gallery with horizontal scroll -tags: visual,interactivity +type: snippet +tags: [visual,interactivity] cover: flower-portrait-5 -firstSeen: 2022-05-01T05:00:00-04:00 +dateModified: 2022-05-01T05:00:00-04:00 --- Creates a horizontally scrollable image gallery. diff --git a/snippets/horizontal-scroll-snap.md b/snippets/horizontal-scroll-snap.md index 52df05180..a98d54509 100644 --- a/snippets/horizontal-scroll-snap.md +++ b/snippets/horizontal-scroll-snap.md @@ -1,9 +1,9 @@ --- title: Horizontal scroll snap -tags: interactivity +type: snippet +tags: [interactivity] cover: waves-from-above -firstSeen: 2020-08-18T14:25:46+03:00 -lastUpdated: 2021-10-11T18:44:51+03:00 +dateModified: 2021-10-11T18:44:51+03:00 --- Creates a horizontally scrollable container that will snap on elements when scrolling. diff --git a/snippets/hover-additional-content.md b/snippets/hover-additional-content.md index eae9e3d0e..b9d76e1b1 100644 --- a/snippets/hover-additional-content.md +++ b/snippets/hover-additional-content.md @@ -1,9 +1,9 @@ --- title: Show additional content on hover -tags: visual +type: snippet +tags: [visual] cover: dark-leaves-5 -firstSeen: 2020-08-18T16:40:23+03:00 -lastUpdated: 2021-10-11T18:44:51+03:00 +dateModified: 2021-10-11T18:44:51+03:00 --- Creates a card that displays additional content on hover. diff --git a/snippets/hover-perspective.md b/snippets/hover-perspective.md index 844765f4a..e79c86014 100644 --- a/snippets/hover-perspective.md +++ b/snippets/hover-perspective.md @@ -1,10 +1,10 @@ --- title: Perspective transform on hover -tags: animation +type: snippet +tags: [animation] author: chalarangelo cover: tropical-bike -firstSeen: 2021-05-17T13:58:04+03:00 -lastUpdated: 2021-05-17T13:58:04+03:00 +dateModified: 2021-05-17T13:58:04+03:00 --- Applies a perspective transform with a hover animation to an element. diff --git a/snippets/hover-shadow-box-animation.md b/snippets/hover-shadow-box-animation.md index 168598f0d..28461ec3b 100644 --- a/snippets/hover-shadow-box-animation.md +++ b/snippets/hover-shadow-box-animation.md @@ -1,10 +1,10 @@ --- title: Hover shadow box animation -tags: animation +type: snippet +tags: [animation] unlisted: true cover: dark-cloud -firstSeen: 2018-03-06T23:41:55+02:00 -lastUpdated: 2021-01-04T12:30:40+02:00 +dateModified: 2021-01-04T12:30:40+02:00 --- Creates a shadow box around the text when it is hovered. diff --git a/snippets/hover-underline-animation.md b/snippets/hover-underline-animation.md index 2be74ddfb..ce1c07671 100644 --- a/snippets/hover-underline-animation.md +++ b/snippets/hover-underline-animation.md @@ -1,9 +1,9 @@ --- title: Hover underline animation -tags: animation +type: snippet +tags: [animation] cover: coffee-phone-tray-2 -firstSeen: 2018-02-28T13:19:22+02:00 -lastUpdated: 2021-10-11T18:44:51+03:00 +dateModified: 2021-10-11T18:44:51+03:00 --- Creates an animated underline effect when the user hovers over the text. diff --git a/snippets/image-hover-menu.md b/snippets/image-hover-menu.md index 0b853a535..e550c0468 100644 --- a/snippets/image-hover-menu.md +++ b/snippets/image-hover-menu.md @@ -1,9 +1,9 @@ --- title: Menu on image hover -tags: layout,animation +type: snippet +tags: [layout,animation] cover: compass -firstSeen: 2020-04-20T19:15:11+03:00 -lastUpdated: 2021-10-11T18:44:51+03:00 +dateModified: 2021-10-11T18:44:51+03:00 --- Displays a menu overlay when the user hovers over the image. diff --git a/snippets/image-hover-rotate.md b/snippets/image-hover-rotate.md index c9f7a4797..904414c34 100644 --- a/snippets/image-hover-rotate.md +++ b/snippets/image-hover-rotate.md @@ -1,9 +1,9 @@ --- title: Image rotate on hover -tags: animation,visual +type: snippet +tags: [animation,visual] cover: succulent-1 -firstSeen: 2020-04-20T18:36:11+03:00 -lastUpdated: 2021-10-11T18:44:51+03:00 +dateModified: 2021-10-11T18:44:51+03:00 --- Creates a rotate effect for the image on hover. diff --git a/snippets/image-mosaic.md b/snippets/image-mosaic.md index f5b671c3b..a12f8676d 100644 --- a/snippets/image-mosaic.md +++ b/snippets/image-mosaic.md @@ -1,10 +1,10 @@ --- title: Responsive image mosaic -tags: layout +type: snippet +tags: [layout] author: chalarangelo cover: beach-riders -firstSeen: 2020-08-18T17:18:03+03:00 -lastUpdated: 2020-12-30T15:37:37+02:00 +dateModified: 2020-12-30T15:37:37+02:00 --- Creates a responsive image mosaic. diff --git a/snippets/image-overlay-hover.md b/snippets/image-overlay-hover.md index 5250359b9..4d1eaa0e3 100644 --- a/snippets/image-overlay-hover.md +++ b/snippets/image-overlay-hover.md @@ -1,9 +1,9 @@ --- title: Image overlay on hover -tags: visual,animation +type: snippet +tags: [visual,animation] cover: architectural -firstSeen: 2020-04-20T14:12:33+03:00 -lastUpdated: 2021-10-11T18:44:51+03:00 +dateModified: 2021-10-11T18:44:51+03:00 --- Displays an image overlay effect on hover. diff --git a/snippets/image-text-overlay.md b/snippets/image-text-overlay.md index a1a6e8133..e48f3cce1 100644 --- a/snippets/image-text-overlay.md +++ b/snippets/image-text-overlay.md @@ -1,9 +1,10 @@ --- title: Image with text overlay -tags: visual +type: snippet +tags: [visual] author: chalarangelo cover: icebreaker -firstSeen: 2023-01-29T05:00:00-04:00 +dateModified: 2023-01-29T05:00:00-04:00 --- Displays an image with a text overlay. diff --git a/snippets/input-with-prefix.md b/snippets/input-with-prefix.md index 5e58f21d7..9d865f149 100644 --- a/snippets/input-with-prefix.md +++ b/snippets/input-with-prefix.md @@ -1,9 +1,9 @@ --- title: Input with prefix -tags: interactivity,visual +type: snippet +tags: [interactivity,visual] cover: flower-portrait-4 -firstSeen: 2020-10-14T14:16:57+03:00 -lastUpdated: 2021-10-13T19:29:39+02:00 +dateModified: 2021-10-13T19:29:39+02:00 --- Creates an input with a visual, non-editable prefix. diff --git a/snippets/isometric-card.md b/snippets/isometric-card.md index 18200465c..e98973b4c 100644 --- a/snippets/isometric-card.md +++ b/snippets/isometric-card.md @@ -1,10 +1,10 @@ --- title: Isometric card -tags: visual +type: snippet +tags: [visual] author: chalarangelo cover: guitar-living-room -firstSeen: 2021-05-17T14:04:52+03:00 -lastUpdated: 2021-05-17T14:04:52+03:00 +dateModified: 2021-05-17T14:04:52+03:00 --- Creates an isometric card. diff --git a/snippets/line-clamp.md b/snippets/line-clamp.md index 30c23a2eb..cd05c6f93 100644 --- a/snippets/line-clamp.md +++ b/snippets/line-clamp.md @@ -1,10 +1,10 @@ --- title: Trim multiline text -tags: layout,visual +type: snippet +tags: [layout,visual] author: chalarangelo cover: pink-flower-tree -firstSeen: 2021-05-16T20:19:13+03:00 -lastUpdated: 2021-05-16T20:19:13+03:00 +dateModified: 2021-05-16T20:19:13+03:00 --- Limit multiline text to a given number of lines. diff --git a/snippets/masonry-layout.md b/snippets/masonry-layout.md index f3552e5d6..d503978a1 100644 --- a/snippets/masonry-layout.md +++ b/snippets/masonry-layout.md @@ -1,9 +1,9 @@ --- title: Masonry Layout -tags: layout +type: snippet +tags: [layout] cover: interior-2 -firstSeen: 2019-12-11T02:19:05+02:00 -lastUpdated: 2021-10-13T19:29:39+02:00 +dateModified: 2021-10-13T19:29:39+02:00 --- Creates a masonry-style layout that is especially useful when working with images. diff --git a/snippets/mouse-cursor-gradient-tracking.md b/snippets/mouse-cursor-gradient-tracking.md index 861f32848..fe4faf614 100644 --- a/snippets/mouse-cursor-gradient-tracking.md +++ b/snippets/mouse-cursor-gradient-tracking.md @@ -1,9 +1,9 @@ --- title: Mouse cursor gradient tracking -tags: visual,interactivity +type: snippet +tags: [visual,interactivity] cover: tram-car -firstSeen: 2018-02-25T15:14:39+02:00 -lastUpdated: 2021-01-07T23:52:15+02:00 +dateModified: 2021-01-07T23:52:15+02:00 --- A hover effect where the gradient follows the mouse cursor. diff --git a/snippets/navigation-list-item-hover-and-focus-effect.md b/snippets/navigation-list-item-hover-and-focus-effect.md index 88c9d6c4c..8a429134b 100644 --- a/snippets/navigation-list-item-hover-and-focus-effect.md +++ b/snippets/navigation-list-item-hover-and-focus-effect.md @@ -1,9 +1,9 @@ --- title: Navigation list item hover and focus effect -tags: visual +type: snippet +tags: [visual] cover: cloudy-rock-formation -firstSeen: 2019-09-19T22:48:57+03:00 -lastUpdated: 2021-10-11T18:44:51+03:00 +dateModified: 2021-10-11T18:44:51+03:00 --- Creates a custom hover and focus effect for navigation items, using CSS transformations. diff --git a/snippets/offscreen.md b/snippets/offscreen.md index 299f43823..d79379856 100644 --- a/snippets/offscreen.md +++ b/snippets/offscreen.md @@ -1,9 +1,9 @@ --- title: Offscreen -tags: layout,visual +type: snippet +tags: [layout,visual] cover: succulent-2 -firstSeen: 2018-03-30T18:50:31+03:00 -lastUpdated: 2021-10-11T18:44:51+03:00 +dateModified: 2021-10-11T18:44:51+03:00 --- Hides an element completely (visually and positionally) in the DOM while still allowing it to be accessible. diff --git a/snippets/overflow-scroll-gradient.md b/snippets/overflow-scroll-gradient.md index cb91ad168..5d4e2b4ad 100644 --- a/snippets/overflow-scroll-gradient.md +++ b/snippets/overflow-scroll-gradient.md @@ -1,9 +1,9 @@ --- title: Overflow scroll gradient -tags: visual +type: snippet +tags: [visual] cover: memories-of-pineapple-1 -firstSeen: 2018-02-25T15:14:39+02:00 -lastUpdated: 2021-10-13T19:29:39+02:00 +dateModified: 2021-10-13T19:29:39+02:00 --- Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled. diff --git a/snippets/polka-dot-pattern.md b/snippets/polka-dot-pattern.md index bf12890a1..723dc5532 100644 --- a/snippets/polka-dot-pattern.md +++ b/snippets/polka-dot-pattern.md @@ -1,9 +1,9 @@ --- title: Polka dot background pattern -tags: visual +type: snippet +tags: [visual] cover: bag-waiting -firstSeen: 2021-01-11T09:51:43+02:00 -lastUpdated: 2021-10-13T19:29:39+02:00 +dateModified: 2021-10-13T19:29:39+02:00 --- Creates a polka dot background pattern. diff --git a/snippets/popout-menu.md b/snippets/popout-menu.md index 4c9275eda..8443aa2c4 100644 --- a/snippets/popout-menu.md +++ b/snippets/popout-menu.md @@ -1,9 +1,9 @@ --- title: Popout menu -tags: interactivity +type: snippet +tags: [interactivity] cover: city-view -firstSeen: 2018-02-25T15:14:39+02:00 -lastUpdated: 2020-12-30T15:37:37+02:00 +dateModified: 2020-12-30T15:37:37+02:00 --- Reveals an interactive popout menu on hover/focus. diff --git a/snippets/pretty-text-underline.md b/snippets/pretty-text-underline.md index 3987d8f9a..cb932f514 100644 --- a/snippets/pretty-text-underline.md +++ b/snippets/pretty-text-underline.md @@ -1,9 +1,9 @@ --- title: Pretty text underline -tags: visual +type: snippet +tags: [visual] cover: flower-portrait-6 -firstSeen: 2018-02-25T15:14:39+02:00 -lastUpdated: 2021-10-13T19:29:39+02:00 +dateModified: 2021-10-13T19:29:39+02:00 --- Provides a nicer alternative to `text-decoration: underline` where descenders do not clip the underline. diff --git a/snippets/pulse-loader.md b/snippets/pulse-loader.md index 123579dfe..f60aa52a9 100644 --- a/snippets/pulse-loader.md +++ b/snippets/pulse-loader.md @@ -1,9 +1,9 @@ --- title: Pulse loader -tags: animation +type: snippet +tags: [animation] cover: digital-nomad-8 -firstSeen: 2019-10-05T14:29:36+03:00 -lastUpdated: 2021-10-13T19:29:39+02:00 +dateModified: 2021-10-13T19:29:39+02:00 --- Creates a pulse effect loader animation using the `animation-delay` property. diff --git a/snippets/reset-all-styles.md b/snippets/reset-all-styles.md index de7878d27..697a619c7 100644 --- a/snippets/reset-all-styles.md +++ b/snippets/reset-all-styles.md @@ -1,9 +1,9 @@ --- title: Reset all styles -tags: visual +type: snippet +tags: [visual] cover: rocky-beach-2 -firstSeen: 2018-02-28T21:51:36+02:00 -lastUpdated: 2020-12-30T15:37:37+02:00 +dateModified: 2020-12-30T15:37:37+02:00 --- Resets all styles to default values using only one property. diff --git a/snippets/responsive-layout-sidebar.md b/snippets/responsive-layout-sidebar.md index c3e0c3af9..6e9530cb3 100644 --- a/snippets/responsive-layout-sidebar.md +++ b/snippets/responsive-layout-sidebar.md @@ -1,10 +1,10 @@ --- title: Responsive layout with sidebar -tags: layout +type: snippet +tags: [layout] author: chalarangelo cover: red-petals -firstSeen: 2020-09-16T18:54:56+03:00 -lastUpdated: 2020-09-16T18:54:56+03:00 +dateModified: 2020-09-16T18:54:56+03:00 --- Creates a responsive layout with a content area and a sidebar. diff --git a/snippets/rotating-card.md b/snippets/rotating-card.md index 48156cc04..eede2b63e 100644 --- a/snippets/rotating-card.md +++ b/snippets/rotating-card.md @@ -1,9 +1,9 @@ --- title: Rotating Card -tags: animation +type: snippet +tags: [animation] cover: digital-nomad-11 -firstSeen: 2020-10-04T14:10:24+03:00 -lastUpdated: 2021-03-30T15:24:01+03:00 +dateModified: 2021-03-30T15:24:01+03:00 --- Creates a two sided card which rotates on hover. diff --git a/snippets/scroll-progress-bar.md b/snippets/scroll-progress-bar.md index a3908c718..8cecdd5c7 100644 --- a/snippets/scroll-progress-bar.md +++ b/snippets/scroll-progress-bar.md @@ -1,10 +1,10 @@ --- title: Scroll progress bar -tags: animation,visual +type: snippet +tags: [animation,visual] author: chalarangelo cover: coworking-space -firstSeen: 2021-05-24T09:42:03+03:00 -lastUpdated: 2021-10-13T19:29:39+02:00 +dateModified: 2021-10-13T19:29:39+02:00 --- Creates a progress bar indicating the scroll percentage of the page. diff --git a/snippets/shake-invalid-input.md b/snippets/shake-invalid-input.md index 9da36b29a..499048f1f 100644 --- a/snippets/shake-invalid-input.md +++ b/snippets/shake-invalid-input.md @@ -1,8 +1,9 @@ --- title: Shake on invalid input -tags: animation +type: snippet +tags: [animation] cover: perfect-timing -firstSeen: 2022-07-31T18:30:11+03:00 +dateModified: 2022-07-31T18:30:11+03:00 --- Creates a shake animation on invalid input. diff --git a/snippets/shape-separator.md b/snippets/shape-separator.md index c7cabf220..3ef7e1024 100644 --- a/snippets/shape-separator.md +++ b/snippets/shape-separator.md @@ -1,10 +1,10 @@ --- title: Shape separator -tags: visual +type: snippet +tags: [visual] unlisted: true cover: shapes -firstSeen: 2018-02-25T15:14:39+02:00 -lastUpdated: 2021-01-04T12:30:40+02:00 +dateModified: 2021-01-04T12:30:40+02:00 --- Uses an SVG shape to create a separator between two different blocks. diff --git a/snippets/shifting-card.md b/snippets/shifting-card.md index cc24766c0..b50e997bd 100644 --- a/snippets/shifting-card.md +++ b/snippets/shifting-card.md @@ -1,9 +1,10 @@ --- title: Shifting Card -tags: animation +type: snippet +tags: [animation] author: chalarangelo cover: clouds-n-mountains -firstSeen: 2022-12-14T05:00:00-04:00 +dateModified: 2022-12-14T05:00:00-04:00 --- Creates a card that shifts on hover. diff --git a/snippets/sibling-fade.md b/snippets/sibling-fade.md index da8414f99..08348719c 100644 --- a/snippets/sibling-fade.md +++ b/snippets/sibling-fade.md @@ -1,9 +1,9 @@ --- title: Sibling fade -tags: interactivity +type: snippet +tags: [interactivity] cover: messy-papers -firstSeen: 2018-03-05T10:17:23+02:00 -lastUpdated: 2020-12-30T15:37:37+02:00 +dateModified: 2020-12-30T15:37:37+02:00 --- Fades out the siblings of a hovered item. diff --git a/snippets/squiggle-link-hover-effect.md b/snippets/squiggle-link-hover-effect.md index 6d36c6aa5..c53fa8f8b 100644 --- a/snippets/squiggle-link-hover-effect.md +++ b/snippets/squiggle-link-hover-effect.md @@ -1,9 +1,10 @@ --- title: Squiggle link hover effect -tags: animation,visual +type: snippet +tags: [animation,visual] author: chalarangelo cover: dreamy-flowers -firstSeen: 2023-01-10T05:00:00-04:00 +dateModified: 2023-01-10T05:00:00-04:00 --- Creates a squiggle effect when hovering over a link. diff --git a/snippets/staggered-animation.md b/snippets/staggered-animation.md index eedccab80..f1d3a51ac 100644 --- a/snippets/staggered-animation.md +++ b/snippets/staggered-animation.md @@ -1,9 +1,9 @@ --- title: Staggered animation -tags: animation +type: snippet +tags: [animation] cover: aerial-view-port -firstSeen: 2020-03-16T12:19:05+02:00 -lastUpdated: 2021-10-11T18:44:51+03:00 +dateModified: 2021-10-11T18:44:51+03:00 --- Creates a staggered animation for the elements of a list. diff --git a/snippets/sticky-list-titles.md b/snippets/sticky-list-titles.md index 64c8a09b7..e8ca50f6c 100644 --- a/snippets/sticky-list-titles.md +++ b/snippets/sticky-list-titles.md @@ -1,10 +1,10 @@ --- title: List with sticky section headings -tags: visual +type: snippet +tags: [visual] author: chalarangelo cover: interior-7 -firstSeen: 2020-08-18T15:44:01+03:00 -lastUpdated: 2020-12-30T15:37:37+02:00 +dateModified: 2020-12-30T15:37:37+02:00 --- Creates a list with sticky headings for each section. diff --git a/snippets/stripes-pattern.md b/snippets/stripes-pattern.md index 60ba9016a..315b0bcf5 100644 --- a/snippets/stripes-pattern.md +++ b/snippets/stripes-pattern.md @@ -1,9 +1,9 @@ --- title: Stripes background pattern -tags: visual +type: snippet +tags: [visual] cover: jars-on-shelf -firstSeen: 2021-01-11T09:51:43+02:00 -lastUpdated: 2021-01-11T09:51:43+02:00 +dateModified: 2021-01-11T09:51:43+02:00 --- Creates a stripes background pattern. diff --git a/snippets/stylized-quotation-marks.md b/snippets/stylized-quotation-marks.md index 5a6f37d30..7a5688974 100644 --- a/snippets/stylized-quotation-marks.md +++ b/snippets/stylized-quotation-marks.md @@ -1,10 +1,10 @@ --- title: Stylized quotation marks -tags: visual +type: snippet +tags: [visual] author: chalarangelo cover: coffee-phone-tray -firstSeen: 2021-05-16T19:53:02+03:00 -lastUpdated: 2021-05-16T19:53:02+03:00 +dateModified: 2021-05-16T19:53:02+03:00 --- Customizes the style of inline quotation marks. diff --git a/snippets/system-font-stack.md b/snippets/system-font-stack.md index 6656f8262..14fdc960a 100644 --- a/snippets/system-font-stack.md +++ b/snippets/system-font-stack.md @@ -1,9 +1,9 @@ --- title: System font stack -tags: visual +type: snippet +tags: [visual] cover: lavender-shelf -firstSeen: 2018-02-25T15:14:39+02:00 -lastUpdated: 2020-12-30T15:37:37+02:00 +dateModified: 2020-12-30T15:37:37+02:00 --- Uses the native font of the operating system to get close to a native app feel. diff --git a/snippets/text-backdrop-overlay.md b/snippets/text-backdrop-overlay.md index 1af62f59d..8663bde56 100644 --- a/snippets/text-backdrop-overlay.md +++ b/snippets/text-backdrop-overlay.md @@ -1,10 +1,10 @@ --- title: Image text overlay -tags: visual +type: snippet +tags: [visual] author: chalarangelo cover: mountain-lake-cottage -firstSeen: 2020-08-18T15:07:32+03:00 -lastUpdated: 2021-10-13T19:29:39+02:00 +dateModified: 2021-10-13T19:29:39+02:00 --- Displays a text on top of an image using an overlay. diff --git a/snippets/tile-layout-using-inline-block.md b/snippets/tile-layout-using-inline-block.md index 3df4769f7..1f3070082 100644 --- a/snippets/tile-layout-using-inline-block.md +++ b/snippets/tile-layout-using-inline-block.md @@ -1,9 +1,9 @@ --- title: 3-tile layout -tags: layout +type: snippet +tags: [layout] cover: godray-computer-mug -firstSeen: 2019-10-02T09:51:59+03:00 -lastUpdated: 2020-12-30T15:37:37+02:00 +dateModified: 2020-12-30T15:37:37+02:00 --- Aligns items horizontally using `display: inline-block` to create a 3-tile layout. diff --git a/snippets/toggle-switch.md b/snippets/toggle-switch.md index 2097f8703..363fc6f23 100644 --- a/snippets/toggle-switch.md +++ b/snippets/toggle-switch.md @@ -1,9 +1,9 @@ --- title: Toggle switch -tags: visual,interactivity +type: snippet +tags: [visual,interactivity] cover: interior-5 -firstSeen: 2018-10-03T08:55:20+03:00 -lastUpdated: 2020-12-30T15:37:37+02:00 +dateModified: 2020-12-30T15:37:37+02:00 --- Creates a toggle switch with CSS only. diff --git a/snippets/transform-centering.md b/snippets/transform-centering.md index 1b60c361e..cca341814 100644 --- a/snippets/transform-centering.md +++ b/snippets/transform-centering.md @@ -1,9 +1,9 @@ --- title: Transform centering -tags: layout +type: snippet +tags: [layout] cover: flower-camera -firstSeen: 2018-03-30T17:59:28+03:00 -lastUpdated: 2020-12-30T15:37:37+02:00 +dateModified: 2020-12-30T15:37:37+02:00 --- Vertically and horizontally centers a child element within its parent element using CSS transforms. diff --git a/snippets/triangle.md b/snippets/triangle.md index 3c1131955..dc0339675 100644 --- a/snippets/triangle.md +++ b/snippets/triangle.md @@ -1,9 +1,9 @@ --- title: Triangle -tags: visual +type: snippet +tags: [visual] cover: yellow-white-mug-1 -firstSeen: 2018-02-25T15:14:39+02:00 -lastUpdated: 2021-10-13T19:29:39+02:00 +dateModified: 2021-10-13T19:29:39+02:00 --- Creates a triangular shape with pure CSS. diff --git a/snippets/truncate-text-multiline.md b/snippets/truncate-text-multiline.md index f2404e477..6c95e8e48 100644 --- a/snippets/truncate-text-multiline.md +++ b/snippets/truncate-text-multiline.md @@ -1,9 +1,9 @@ --- title: Truncate multiline text -tags: layout +type: snippet +tags: [layout] cover: blue-computer -firstSeen: 2019-01-17T07:42:44+02:00 -lastUpdated: 2021-01-07T23:52:15+02:00 +dateModified: 2021-01-07T23:52:15+02:00 --- Truncates text that is longer than one line. diff --git a/snippets/truncate-text.md b/snippets/truncate-text.md index ffc9689a0..e9a6a8878 100644 --- a/snippets/truncate-text.md +++ b/snippets/truncate-text.md @@ -1,9 +1,9 @@ --- title: Truncate text -tags: layout +type: snippet +tags: [layout] cover: houses-rock-sea -firstSeen: 2018-02-25T15:14:39+02:00 -lastUpdated: 2020-12-30T15:37:37+02:00 +dateModified: 2020-12-30T15:37:37+02:00 --- Truncates text that is longer than one line, adding an ellipsis at the end (`…`). diff --git a/snippets/typewriter-effect.md b/snippets/typewriter-effect.md index 648cd312c..652e33867 100644 --- a/snippets/typewriter-effect.md +++ b/snippets/typewriter-effect.md @@ -1,10 +1,10 @@ --- title: Typewriter effect -tags: animation +type: snippet +tags: [animation] author: chalarangelo cover: italian-horizon -firstSeen: 2021-05-24T16:03:40+03:00 -lastUpdated: 2021-05-24T16:03:40+03:00 +dateModified: 2021-05-24T16:03:40+03:00 --- Creates a typewriter effect animation. diff --git a/snippets/vertical-gallery.md b/snippets/vertical-gallery.md index 89da7802a..b36ff9b4e 100644 --- a/snippets/vertical-gallery.md +++ b/snippets/vertical-gallery.md @@ -1,8 +1,9 @@ --- title: Image gallery with vertical scroll -tags: visual,interactivity +type: snippet +tags: [visual,interactivity] cover: lake-loop -firstSeen: 2022-05-05T05:00:00-04:00 +dateModified: 2022-05-05T05:00:00-04:00 --- Creates a horizontally scrollable image gallery. diff --git a/snippets/vertical-scroll-snap.md b/snippets/vertical-scroll-snap.md index a19999016..f63ff4a1e 100644 --- a/snippets/vertical-scroll-snap.md +++ b/snippets/vertical-scroll-snap.md @@ -1,9 +1,9 @@ --- title: Vertical scroll snap -tags: interactivity +type: snippet +tags: [interactivity] cover: baloons-field -firstSeen: 2020-08-18T14:25:46+03:00 -lastUpdated: 2020-08-18T14:25:46+03:00 +dateModified: 2020-08-18T14:25:46+03:00 --- Creates a scrollable container that will snap on elements when scrolling. diff --git a/snippets/zebra-striped-list.md b/snippets/zebra-striped-list.md index 65627e68e..9aa9a0858 100644 --- a/snippets/zebra-striped-list.md +++ b/snippets/zebra-striped-list.md @@ -1,9 +1,9 @@ --- title: Zebra striped list -tags: visual +type: snippet +tags: [visual] cover: forest-balcony -firstSeen: 2018-10-31T08:19:06+02:00 -lastUpdated: 2020-12-30T15:37:37+02:00 +dateModified: 2020-12-30T15:37:37+02:00 --- Creates a striped list with alternating background colors. diff --git a/snippets/zig-zag-pattern.md b/snippets/zig-zag-pattern.md index 6ca7591ce..b95eb0b23 100644 --- a/snippets/zig-zag-pattern.md +++ b/snippets/zig-zag-pattern.md @@ -1,9 +1,9 @@ --- title: Zig zag background pattern -tags: visual +type: snippet +tags: [visual] cover: blue-lake -firstSeen: 2021-01-11T09:51:43+02:00 -lastUpdated: 2021-10-13T19:29:39+02:00 +dateModified: 2021-10-13T19:29:39+02:00 --- Creates a zig zag background pattern. diff --git a/snippets/zoomin-zoomout-animation.md b/snippets/zoomin-zoomout-animation.md index 52f6318b4..27b204732 100644 --- a/snippets/zoomin-zoomout-animation.md +++ b/snippets/zoomin-zoomout-animation.md @@ -1,9 +1,9 @@ --- title: Zoom in zoom out animation -tags: animation +type: snippet +tags: [animation] cover: travel-mug-2 -firstSeen: 2020-10-05T21:42:14+03:00 -lastUpdated: 2021-10-13T19:29:39+02:00 +dateModified: 2021-10-13T19:29:39+02:00 --- Creates a zoom in zoom out animation.