Merge pull request #219 from 30-seconds/redate

.github/config.yml

@@ -1,14 +0,0 @@
-# Configuration for request-info - https://github.com/behaviorbot/request-info
-
-# *Required* Comment to reply with
-requestInfoReplyComment: >
-  We would appreciate it if you could provide us with some more information about this issue/PR!
-
-# *OPTIONAL* default titles to check against for lack of descriptiveness
-# MUST BE ALL LOWERCASE
-requestInfoDefaultTitles:
-  - update readme.md
-  - updates
-
-# *OPTIONAL* Label to be added to Issues and Pull Requests with insufficient information given
-requestInfoLabelToAdd: needs-more-info

.github/lock.yml

@@ -1,35 +0,0 @@
-# Configuration for Lock Threads - https://github.com/dessant/lock-threads
-
-# Number of days of inactivity before a closed issue or pull request is locked
-daysUntilLock: 60
-
-# Skip issues and pull requests created before a given timestamp. Timestamp must
-# follow ISO 8601 (`YYYY-MM-DD`). Set to `false` to disable
-skipCreatedBefore: false
-
-# Issues and pull requests with these labels will be ignored. Set to `[]` to disable
-exemptLabels: []
-
-# Label to add before locking, such as `outdated`. Set to `false` to disable
-lockLabel: false
-
-# Comment to post before locking. Set to `false` to disable
-lockComment: false
-
-# Assign `resolved` as the reason for locking. Set to `false` to disable
-setLockReason: true
-
-# Limit to only `issues` or `pulls`
-# only: issues
-
-# Optionally, specify configuration settings just for `issues` or `pulls`
-# issues:
-#   exemptLabels:
-#     - help-wanted
-#   lockLabel: outdated
-
-# pulls:
-#   daysUntilLock: 30
-
-# Repository to extend settings from
-# _extends: repo

.github/stale.yml

@@ -1,18 +0,0 @@
-# Number of days of inactivity before an issue becomes stale
-daysUntilStale: 21
-# Number of days of inactivity before a stale issue is closed
-daysUntilClose: 7
-# Issues with these labels will never be considered stale
-exemptLabels:
-  - not-stale
-  - pinned
-  - security
-# Label to use when marking an issue as stale
-staleLabel: false
-# Comment to post when marking an issue as stale. Set to `false` to disable
-markComment: >
-  This issue has been automatically marked as stale because it has not had
-  recent activity. It will be closed if no further activity occurs. Thank you
-  for your contributions.
-# Comment to post when closing a stale issue. Set to `false` to disable
-closeComment: false

CONTRIBUTING.md

@@ -1,17 +1,6 @@
 # Contribution Guidelines
 
 **30 seconds of code** is powered by the community, so feel free to contribute in any way you can to help us!
-
-## Tools
-
-Before you begin contributing, you should install the integration-tools globally on your machine:
-
-```sh
-npm install -g @30-seconds/integration-tools
-```
-
-This will allow you to use our customized tools for all of our content repositories.
-
 ## How you can help
 
 - Submit pull requests with new snippets (see guidelines below) or snippet updates (tags, descriptions, explanations, typos, examples, code improvements).
@@ -23,25 +12,24 @@ Breaking any of these rules will result in your pull request being closed. Pleas
 
 - **Always be polite and respectful to others** and try to follow the advice of the moderators/collaborators/owners.
 - **Only modify snippet files**, never modify the generated files in the `snippet_data` directory.
-- **Use the integration tools commands** to generate new snippets, ensuring they have the correct name and are in the correct location.
+- **Use the snippet template** to create new snippets, ensure they have the correct name and are in the correct location.
 - **Follow snippet format exactly**, otherwise your snippets will not be recognized correctly by the tools responsible for publishing them on the website. This includes such things as spacing and empty lines - if you accidentally make a mistake, consult the repository's [snippet template](snippet-template.md).
 - **Snippets should solve real-world problems**, no matter how simple and should be abstract enough to be applied to different scenarios.
 
 ## Snippet creation
 
-After installing the integration tools, you can run the following command:
+In order to create a new snippet, you should follow the steps below:
 
-```sh
+- Crate a copy of the [snippet template](snippet-template.md) in the `snippets` directory.
-create-new-snippet <my-snippet-name>
+- Change the name of the newly created file to the name of your snippet.
-```
+- Edit the file, adding your snippet based on the guidelines.
-
-Replace `<my-snippet-name>` with the name of the snippet you are adding.
 
 ## Snippet guidelines
 
 - Snippets must have all their frontmatter sections (title, tags etc.) filled.
 - Snippet titles must correspond to the filename and follow the language and repository's naming conventions.
 - Snippet tags must be comma-separated, contain a primary tag as seen on the website as their first tag and an expertise tag (`beginner`, `intermediate` or `advanced`) as their last tag.
+- Snippets must have their `firstSeen` dates formatted using [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601).
 - Snippet descriptions must be short and to the point. Explain *what* the snippet does and detail *how* the snippet works and the language features used in it. Snippet description should be written as lists of points (unordered for a few points, ordered otherwise), describing the implemented functionality.
 - Snippet code and examples must be enclosed in appropriate, language-tagged blocks as shown in the snippet template, be short and use modern techniques and features. Also make sure to test your code before submitting.
 - If your snippet contains arguments with default parameters, explain what happens if they are omitted when calling the function and what the default case is. Specify default parameters for arguments only if necessary.

README.md

@@ -1,14 +1,14 @@
 [![Logo](/logo.png)](https://30secondsofcode.org/css/p/1)
 
-# 30 seconds of CSS
+# 30 seconds of code
 
 > Short CSS code snippets for all your development needs
 
 * Visit [our website](https://30secondsofcode.org) to view our snippet collection.
 * Use the [Search page](https://30secondsofcode.org/search) to find snippets that suit your needs. You can search by name, tag, language or using a snippet's description. Just start typing a term and see what comes up.
-* Browse the [CSS Snippet List](https://30secondsofcode.org/css/p/1) to see all the snippets in this project or click individual tags at the top of the same page to narrow down your search to a specific tag.
+* Browse the [CSS Snippet collection](https://30secondsofcode.org/css/p/1) to see all the snippets in this project or click individual tags at the top of the same page to narrow down your search to a specific tag.
 * Click on each snippet card to view the whole snippet, including code, explanation and examples.
-* You can use the button on the right side of a snippet card to copy the code to clipboard.
+* You can use the button at the bottom of a snippet card to view the snippet in Codepen.
 * If you like the project, give it a star. It means a lot to the people maintaining it.
 
 ## Want to contribute?
@@ -18,9 +18,9 @@
 * If you find a problem with a specific snippet, please [open an issue](https://github.com/30-seconds/30-seconds-of-css/issues/new).
 * If you find a problem with the website, please [report it in the web repository](https://github.com/30-seconds/30-seconds-web/issues/new).
 
-## Credits & Sponsors
+## Credits
 
-* This repository is maintained by the [30-seconds organization on GitHub](https://github.com/30-seconds).
+* This repository is maintained by the [30 seconds of code organization on GitHub](https://github.com/30-seconds).
 * All snippets are licensed under the CC0-1.0 License, unless explicitly stated otherwise.
-* Logos, names and trademarks are not to be used without the explicit consent of the maintainers or owners of the 30 seconds GitHub organization.
+* Logos, names and trademarks are not to be used without the explicit consent of the owners of the 30 seconds of code GitHub organization.
-* Our website is powered by [Netlify](https://www.netlify.com/), [Gatsby](https://www.gatsbyjs.org/), [Travis CI](https://travis-ci.com/) & [GitHub](https://github.com/).
+* Our website is powered by [Netlify](https://www.netlify.com/), [Next.js](https://nextjs.org/) & [GitHub](https://github.com/).

snippet-template.md

@@ -1,6 +1,7 @@
 ---
 title: Snippet Name
 tags: other,intermediate
+firstSeen: 2021-06-13T05:00:00-04:00
 ---
 
 Explain briefly what the snippet does.

snippets/border-with-top-triangle.md

@@ -1,6 +1,8 @@
 ---
 title: Border with top triangle
 tags: visual,beginner
+firstSeen: 2019-01-18T12:18:43+02:00
+lastUpdated: 2021-01-07T23:52:15+02:00
 ---
 
 Creates a content container with a triangle at the top.

snippets/bouncing-loader.md

@@ -1,6 +1,8 @@
 ---
 title: Bouncing loader
 tags: animation,intermediate
+firstSeen: 2018-03-04T06:24:22+02:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Creates a bouncing loader animation.

snippets/box-sizing-reset.md

@@ -1,6 +1,8 @@
 ---
 title: Box-sizing reset
 tags: layout,beginner
+firstSeen: 2018-02-27T18:59:09+02:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Resets the box-model so that `width` and `height` are not affected by `border` or `padding`.

snippets/button-border-animation.md

@@ -1,6 +1,8 @@
 ---
 title: Button border animation
 tags: animation,intermediate
+firstSeen: 2019-01-21T18:52:46+02:00
+lastUpdated: 2021-05-24T15:28:52+03:00
 ---
 
 Creates a border animation on hover.

snippets/button-focus-swing-animation.md

@@ -1,6 +1,8 @@
 ---
 title: Button swing animation
 tags: animation,intermediate
+firstSeen: 2021-05-24T15:28:52+03:00
+lastUpdated: 2021-05-24T15:28:52+03:00
 ---
 
 Creates a swing animation on focus.

snippets/button-hover-fill-animation.md

@@ -1,6 +1,8 @@
 ---
 title: Button fill animation
 tags: animation,beginner
+firstSeen: 2020-10-08T20:48:11+03:00
+lastUpdated: 2021-04-02T21:34:43+03:00
 ---
 
 Creates a fill animation on hover.

snippets/button-hover-grow-animation.md

@@ -1,6 +1,8 @@
 ---
 title: Button grow animation
 tags: animation,beginner
+firstSeen: 2021-05-24T15:28:52+03:00
+lastUpdated: 2021-05-24T15:28:52+03:00
 ---
 
 Creates a grow animation on hover.

snippets/button-hover-shrink-animation.md

@@ -1,6 +1,8 @@
 ---
 title: Button shrink animation
 tags: animation,beginner
+firstSeen: 2021-05-24T15:28:52+03:00
+lastUpdated: 2021-05-24T15:28:52+03:00
 ---
 
 Creates a shrink animation on hover.

snippets/checkerboard-pattern.md

@@ -1,6 +1,8 @@
 ---
 title: Checkerboard background pattern
 tags: visual,intermediate
+firstSeen: 2021-01-11T09:51:43+02:00
+lastUpdated: 2021-01-11T09:51:43+02:00
 ---
 
 Creates a checkerboard background pattern.

snippets/circle.md

@@ -1,6 +1,8 @@
 ---
 title: Circle
 tags: visual,beginner
+firstSeen: 2018-03-04T08:19:52+02:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Creates a circular shape with pure CSS.

snippets/clearfix.md

@@ -1,6 +1,8 @@
 ---
 title: Clearfix
 tags: layout,beginner
+firstSeen: 2018-02-25T15:14:39+02:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Ensures that an element self-clears its children.

snippets/constant-width-to-height-ratio.md

@@ -1,6 +1,8 @@
 ---
 title: Constant width to height ratio
 tags: layout,beginner
+firstSeen: 2018-02-27T10:45:26+02:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Ensures that an element with variable `width` will retain a proportionate `height` value.

snippets/counter.md

@@ -1,6 +1,8 @@
 ---
 title: Counter
 tags: visual,advanced
+firstSeen: 2018-03-07T22:12:42+02:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Creates a custom list counter that accounts for nested list elements.

snippets/custom-checkbox.md

@@ -1,6 +1,8 @@
 ---
 title: Custom checkbox
 tags: visual,animation,advanced
+firstSeen: 2021-05-16T13:09:15+03:00
+lastUpdated: 2021-05-18T21:41:27+03:00
 ---
 
 Creates a styled checkbox with animation on state change.

snippets/custom-scrollbar.md

@@ -1,6 +1,8 @@
 ---
 title: Custom scrollbar
 tags: visual,advanced
+firstSeen: 2018-03-01T10:34:55+02:00
+lastUpdated: 2021-05-16T13:09:15+03:00
 ---
 
 Customizes the scrollbar style for elements with scrollable overflow.

snippets/custom-text-selection.md

@@ -1,6 +1,8 @@
 ---
 title: Custom text selection
 tags: visual,beginner
+firstSeen: 2018-02-25T15:14:39+02:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Changes the styling of text selection.

snippets/disable-selection.md

@@ -1,6 +1,8 @@
 ---
 title: Disable selection
 tags: interactivity,beginner
+firstSeen: 2018-02-26T19:09:58+02:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Makes the content unselectable.

snippets/display-table-centering.md

@@ -1,6 +1,8 @@
 ---
 title: Display table centering
 tags: layout,intermediate
+firstSeen: 2018-03-30T01:15:54+03:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Vertically and horizontally centers a child element within its parent element, using `display: table`.

snippets/donut-spinner.md

@@ -1,6 +1,8 @@
 ---
 title: Donut spinner
 tags: animation,intermediate
+firstSeen: 2018-02-27T17:32:35+02:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Creates a donut spinner that can be used to indicate the loading of content.

snippets/drop-cap.md

@@ -1,6 +1,8 @@
 ---
 title: Drop cap
 tags: visual,beginner
+firstSeen: 2018-10-13T07:47:30+03:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Makes the first letter of the first paragraph bigger than the rest of the text.

snippets/dynamic-shadow.md

@@ -1,6 +1,8 @@
 ---
 title: Dynamic shadow
 tags: visual,intermediate
+firstSeen: 2018-03-05T13:51:36+02:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Creates a shadow similar to `box-shadow` but based on the colors of the element itself.

snippets/etched-text.md

@@ -1,6 +1,8 @@
 ---
 title: Etched text
 tags: visual,intermediate
+firstSeen: 2018-02-25T15:14:39+02:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Creates an effect where text appears to be "etched" or engraved into the background.

snippets/evenly-distributed-children.md

@@ -1,6 +1,8 @@
 ---
 title: Evenly distributed children
 tags: layout,intermediate
+firstSeen: 2018-02-28T13:47:02+02:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Evenly distributes child elements within a parent element.

snippets/fit-image-in-container.md

@@ -1,6 +1,8 @@
 ---
 title: Fit image in container
 tags: layout,visual,intermediate
+firstSeen: 2018-10-31T08:34:49+02:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Fits an positions an image appropriately inside its container while preserving its aspect ratio.

snippets/flexbox-centering.md

@@ -1,6 +1,8 @@
 ---
 title: Flexbox centering
 tags: layout,beginner
+firstSeen: 2018-03-03T11:57:27+02:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Horizontally and vertically centers a child element within a parent element using flexbox.

snippets/floating-list-titles.md

@@ -1,6 +1,8 @@
 ---
 title: List with floating section headings
 tags: visual,advanced
+firstSeen: 2020-08-18T15:44:01+03:00
+lastUpdated: 2021-02-05T10:21:38+02:00
 ---
 
 Creates a list with floating headings for each section.

snippets/fluid-typography.md

@@ -1,6 +1,8 @@
 ---
 title: Fluid typography
 tags: visual,intermediate
+firstSeen: 2021-05-16T11:23:05+03:00
+lastUpdated: 2021-05-16T11:23:05+03:00
 ---
 
 Creates text that scales according to the viewport width.

snippets/focus-within.md

@@ -1,6 +1,8 @@
 ---
 title: Focus Within
 tags: visual,interactivity,intermediate
+firstSeen: 2018-10-23T03:58:13+03:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Changes the appearance of a form if any of its children are focused.

snippets/full-width.md

@@ -1,6 +1,8 @@
 ---
 title: Full-width image
 tags: layout,intermediate
+firstSeen: 2021-01-07T10:14:46+02:00
+lastUpdated: 2021-01-07T10:14:46+02:00
 ---
 
 Creates a full-width image.

snippets/fullscreen.md

@@ -1,6 +1,8 @@
 ---
 title: Fullscreen
 tags: visual,advanced
+firstSeen: 2019-01-12T13:08:40+02:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Applies styles to an element when in fullscreen mode.

snippets/gradient-text.md

@@ -1,6 +1,8 @@
 ---
 title: Gradient text
 tags: visual,intermediate
+firstSeen: 2018-02-25T15:14:39+02:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Gives text a gradient color.

snippets/grid-centering.md

@@ -1,6 +1,8 @@
 ---
 title: Grid centering
 tags: layout,beginner
+firstSeen: 2018-03-03T12:13:59+02:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Horizontally and vertically centers a child element within a parent element using `grid`.

snippets/hamburger-button.md

@@ -1,6 +1,8 @@
 ---
 title: Hamburger Button
 tags: interactivity,intermediate
+firstSeen: 2019-10-10T03:49:38+03:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Displays a hamburger menu which transitions to a cross button on hover.

snippets/height-transition.md

@@ -1,6 +1,8 @@
 ---
 title: Height transition
 tags: animation,intermediate
+firstSeen: 2018-03-17T10:53:02+02:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Transitions an element's height from `0` to `auto` when its height is unknown.

snippets/horizontal-scroll-snap.md

@@ -1,6 +1,8 @@
 ---
 title: Horizontal scroll snap
 tags: interactivity,intermediate
+firstSeen: 2020-08-18T14:25:46+03:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Creates a horizontally scrollable container that will snap on elements when scrolling.

snippets/hover-additional-content.md

@@ -1,6 +1,8 @@
 ---
 title: Show additional content on hover
 tags: visual,intermediate
+firstSeen: 2020-08-18T16:40:23+03:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Creates a card that displays additional content on hover.

snippets/hover-pespective.md

@@ -1,6 +1,8 @@
 ---
 title: Perspective transform on hover
 tags: animation,intermediate
+firstSeen: 2021-05-17T13:58:04+03:00
+lastUpdated: 2021-05-17T13:58:04+03:00
 ---
 
 Applies a perspective transform with a hover animation to an element.

snippets/hover-shadow-box-animation.md

@@ -2,6 +2,8 @@
 title: Hover shadow box animation
 tags: animation,intermediate
 unlisted: true
+firstSeen: 2018-03-06T23:41:55+02:00
+lastUpdated: 2021-01-04T12:30:40+02:00
 ---
 
 Creates a shadow box around the text when it is hovered.

snippets/hover-underline-animation.md

@@ -1,6 +1,8 @@
 ---
 title: Hover underline animation
 tags: animation,advanced
+firstSeen: 2018-02-28T13:19:22+02:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Creates an animated underline effect when the text is hovered over.

snippets/image-hover-menu.md

@@ -1,6 +1,8 @@
 ---
 title: Menu on image hover
 tags: layout,animation,intermediate
+firstSeen: 2020-04-20T19:15:11+03:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Displays a menu overlay when the image is hovered.

snippets/image-hover-rotate.md

@@ -1,6 +1,8 @@
 ---
 title: Image rotate on hover
 tags: animation,visual,intermediate
+firstSeen: 2020-04-20T18:36:11+03:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Creates a rotate effect for the image on hover.

snippets/image-mosaic.md

@@ -1,6 +1,8 @@
 ---
 title: Responsive image mosaic
 tags: layout,intermediate
+firstSeen: 2020-08-18T17:18:03+03:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Creates a responsive image mosaic.

snippets/image-overlay-hover.md

@@ -1,6 +1,8 @@
 ---
 title: Image overlay on hover
 tags: visual,animation,advanced
+firstSeen: 2020-04-20T14:12:33+03:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Displays an image overlay effect on hover.

snippets/input-with-prefix.md

@@ -1,6 +1,8 @@
 ---
 title: Input with prefix
 tags: interactivity,visual,intermediate
+firstSeen: 2020-10-14T14:16:57+03:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Creates an input with a visual, non-editable prefix.

snippets/isometric-card.md

@@ -1,6 +1,8 @@
 ---
 title: Isometric card
 tags: visual,intermediate
+firstSeen: 2021-05-17T14:04:52+03:00
+lastUpdated: 2021-05-17T14:04:52+03:00
 ---
 
 Creates an isometric card.

snippets/line-clamp.md

@@ -1,6 +1,8 @@
 ---
 title: Trim multiline text
 tags: layout,visual,intermediate
+firstSeen: 2021-05-16T20:19:13+03:00
+lastUpdated: 2021-05-16T20:19:13+03:00
 ---
 
 Limit multiline text to a given number of lines.

snippets/masonry-layout.md

@@ -1,6 +1,8 @@
 ---
 title: Masonry Layout
 tags: layout,advanced
+firstSeen: 2019-12-11T02:19:05+02:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Creates a masonry-style layout that is especially useful when working with images.

snippets/mouse-cursor-gradient-tracking.md

@@ -1,6 +1,8 @@
 ---
 title: Mouse cursor gradient tracking
 tags: visual,interactivity,advanced
+firstSeen: 2018-02-25T15:14:39+02:00
+lastUpdated: 2021-01-07T23:52:15+02:00
 ---
 
 A hover effect where the gradient follows the mouse cursor.

snippets/navigation-list-item-hover-and-focus-effect.md

@@ -1,6 +1,8 @@
 ---
 title: Navigation list item hover and focus effect
 tags: visual,beginner
+firstSeen: 2019-09-19T22:48:57+03:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Creates a custom hover and focus effect for navigation items, using CSS transformations.

snippets/offscreen.md

@@ -1,6 +1,8 @@
 ---
 title: Offscreen
 tags: layout,visual,intermediate
+firstSeen: 2018-03-30T18:50:31+03:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Completely hides an element visually and positionally in the DOM while still allowing it to be accessible.

snippets/overflow-scroll-gradient.md

@@ -1,6 +1,8 @@
 ---
 title: Overflow scroll gradient
 tags: visual,intermediate
+firstSeen: 2018-02-25T15:14:39+02:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled.

snippets/polka-dot-pattern.md

@@ -1,6 +1,8 @@
 ---
 title: Polka dot background pattern
 tags: visual,intermediate
+firstSeen: 2021-01-11T09:51:43+02:00
+lastUpdated: 2021-01-11T09:51:43+02:00
 ---
 
 Creates a polka dot background pattern.

snippets/popout-menu.md

@@ -1,6 +1,8 @@
 ---
 title: Popout menu
 tags: interactivity,intermediate
+firstSeen: 2018-02-25T15:14:39+02:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Reveals an interactive popout menu on hover/focus.

snippets/pretty-text-underline.md

@@ -1,6 +1,8 @@
 ---
 title: Pretty text underline
 tags: visual,intermediate
+firstSeen: 2018-02-25T15:14:39+02:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Provides a nicer alternative to `text-decoration: underline` where descenders do not clip the underline.

snippets/pulse-loader.md

@@ -1,6 +1,8 @@
 ---
 title: Pulse loader
 tags: animation,beginner
+firstSeen: 2019-10-05T14:29:36+03:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Creates a pulse effect loader animation using the `animation-delay` property.

snippets/reset-all-styles.md

@@ -1,6 +1,8 @@
 ---
 title: Reset all styles
 tags: visual,beginner
+firstSeen: 2018-02-28T21:51:36+02:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Resets all styles to default values using only one property.

snippets/responsive-layout-sidebar.md

@@ -1,6 +1,8 @@
 ---
 title: Responsive layout with sidebar
 tags: layout,intermediate
+firstSeen: 2020-09-16T18:54:56+03:00
+lastUpdated: 2020-09-16T18:54:56+03:00
 ---
 
 Creates a responsive layout with a content area and a sidebar.

snippets/rotating-card.md

@@ -1,6 +1,8 @@
 ---
 title: Rotating Card
 tags: animation,advanced
+firstSeen: 2020-10-04T14:10:24+03:00
+lastUpdated: 2021-03-30T15:24:01+03:00
 ---
 
 Creates a two sided card which rotates on hover.

snippets/scroll-progress-bar.md

@@ -1,6 +1,8 @@
 ---
 title: Scroll progress bar
 tags: animation,visual,intermediate
+firstSeen: 2021-05-24T09:42:03+03:00
+lastUpdated: 2021-05-24T09:42:03+03:00
 ---
 
 Creates a progress bar indicating the scroll percentage of the page.

snippets/shape-separator.md

@@ -2,6 +2,8 @@
 title: Shape separator
 tags: visual,intermediate
 unlisted: true
+firstSeen: 2018-02-25T15:14:39+02:00
+lastUpdated: 2021-01-04T12:30:40+02:00
 ---
 
 Uses an SVG shape to create a separator between two different blocks.

snippets/sibling-fade.md

@@ -1,6 +1,8 @@
 ---
 title: Sibling fade
 tags: interactivity,intermediate
+firstSeen: 2018-03-05T10:17:23+02:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Fades out the siblings of a hovered item.

snippets/staggered-animation.md

@@ -1,6 +1,8 @@
 ---
 title: Staggered animation
 tags: animation,advanced
+firstSeen: 2020-03-16T12:19:05+02:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Creates a staggered animation for the elements of a list.

snippets/sticky-list-titles.md

@@ -1,6 +1,8 @@
 ---
 title: List with sticky section headings
 tags: visual,intermediate
+firstSeen: 2020-08-18T15:44:01+03:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Creates a list with sticky headings for each section.

snippets/stripes-pattern.md

@@ -1,6 +1,8 @@
 ---
 title: Stripes background pattern
 tags: visual,beginner
+firstSeen: 2021-01-11T09:51:43+02:00
+lastUpdated: 2021-01-11T09:51:43+02:00
 ---
 
 Creates a stripes background pattern.

snippets/stylized-quotation-marks.md

@@ -1,6 +1,8 @@
 ---
 title: Stylized quotation marks
 tags: visual,beginner
+firstSeen: 2021-05-16T19:53:02+03:00
+lastUpdated: 2021-05-16T19:53:02+03:00
 ---
 
 Customizes the style of inline quotation marks.

snippets/system-font-stack.md

@@ -1,6 +1,8 @@
 ---
 title: System font stack
 tags: visual,beginner
+firstSeen: 2018-02-25T15:14:39+02:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Uses the native font of the operating system to get close to a native app feel.

snippets/text-backdrop-overlay.md

@@ -1,6 +1,8 @@
 ---
 title: Image text overlay
 tags: visual,beginner
+firstSeen: 2020-08-18T15:07:32+03:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Displays a text on top of an image using an overlay.

snippets/tile-layout-using-inline-block.md

@@ -1,6 +1,8 @@
 ---
 title: 3-tile layout
 tags: layout,beginner
+firstSeen: 2019-10-02T09:51:59+03:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Aligns items horizontally using `display: inline-block` to create a 3-tile layout.

snippets/toggle-switch.md

@@ -1,6 +1,8 @@
 ---
 title: Toggle switch
 tags: visual,interactivity,beginner
+firstSeen: 2018-10-03T08:55:20+03:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Creates a toggle switch with CSS only.

snippets/transform-centering.md

@@ -1,6 +1,8 @@
 ---
 title: Transform centering
 tags: layout,beginner
+firstSeen: 2018-03-30T17:59:28+03:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Vertically and horizontally centers a child element within its parent element using CSS transforms.

snippets/triangle.md

@@ -1,6 +1,8 @@
 ---
 title: Triangle
 tags: visual,beginner
+firstSeen: 2018-02-25T15:14:39+02:00
+lastUpdated: 2021-01-07T23:52:15+02:00
 ---
 
 Creates a triangular shape with pure CSS.

snippets/truncate-text-multiline.md

@@ -1,6 +1,8 @@
 ---
 title: Truncate multiline text
 tags: layout,intermediate
+firstSeen: 2019-01-17T07:42:44+02:00
+lastUpdated: 2021-01-07T23:52:15+02:00
 ---
 
 Truncates text that is longer than one line.

snippets/truncate-text.md

@@ -1,6 +1,8 @@
 ---
 title: Truncate text
 tags: layout,beginner
+firstSeen: 2018-02-25T15:14:39+02:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Truncates text that is longer than one line, adding an ellipsis at the end (`…`).

snippets/typewriter-effect.md

@@ -1,6 +1,8 @@
 ---
 title: Typewriter effect
 tags: animation,advanced
+firstSeen: 2021-05-24T16:03:40+03:00
+lastUpdated: 2021-05-24T16:03:40+03:00
 ---
 
 Creates a typewriter effect animation.

snippets/vertical-scroll-snap.md

@@ -1,6 +1,8 @@
 ---
 title: Vertical scroll snap
 tags: interactivity,intermediate
+firstSeen: 2020-08-18T14:25:46+03:00
+lastUpdated: 2020-08-18T14:25:46+03:00
 ---
 
 Creates a scrollable container that will snap on elements when scrolling.

snippets/zebra-striped-list.md

@@ -1,6 +1,8 @@
 ---
 title: Zebra striped list
 tags: visual,beginner
+firstSeen: 2018-10-31T08:19:06+02:00
+lastUpdated: 2020-12-30T15:37:37+02:00
 ---
 
 Creates a striped list with alternating background colors.

snippets/zig-zag-pattern.md

@@ -1,6 +1,8 @@
 ---
 title: Zig zag background pattern
 tags: visual,advanced
+firstSeen: 2021-01-11T09:51:43+02:00
+lastUpdated: 2021-01-11T09:53:16+02:00
 ---
 
 Creates a zig zag background pattern.

snippets/zoomin-zoomout-animation.md

@@ -1,6 +1,8 @@
 ---
 title: Zoom in zoom out animation
 tags: animation,beginner
+firstSeen: 2020-10-05T21:42:14+03:00
+lastUpdated: 2021-04-02T21:49:01+03:00
 ---
 
 Creates a zoom in zoom out animation.