From e31747599b74a7fa2e1eb5d4a17f81d0953030ea Mon Sep 17 00:00:00 2001
From: Chalarangelo <chalarangelo@gmail.com>
Date: Wed, 13 Oct 2021 21:18:48 +0300
Subject: [PATCH] Update snippet explanations

---
 snippets/checkerboard-pattern.md        | 4 ++--
 snippets/donut-spinner.md               | 4 ++--
 snippets/evenly-distributed-children.md | 4 ++--
 snippets/fullscreen.md                  | 5 +----
 snippets/input-with-prefix.md           | 4 ++--
 snippets/masonry-layout.md              | 6 +++---
 snippets/overflow-scroll-gradient.md    | 4 ++--
 snippets/polka-dot-pattern.md           | 4 ++--
 snippets/pretty-text-underline.md       | 6 +++---
 snippets/pulse-loader.md                | 4 ++--
 snippets/scroll-progress-bar.md         | 4 ++--
 snippets/text-backdrop-overlay.md       | 4 ++--
 snippets/triangle.md                    | 4 ++--
 snippets/zig-zag-pattern.md             | 4 ++--
 snippets/zoomin-zoomout-animation.md    | 7 ++++---
 15 files changed, 33 insertions(+), 35 deletions(-)

diff --git a/snippets/checkerboard-pattern.md b/snippets/checkerboard-pattern.md
index 1011d1012..1a8cc9d70 100644
--- a/snippets/checkerboard-pattern.md
+++ b/snippets/checkerboard-pattern.md
@@ -2,13 +2,13 @@
 title: Checkerboard background pattern
 tags: visual,intermediate
 firstSeen: 2021-01-11T09:51:43+02:00
-lastUpdated: 2021-01-11T09:51:43+02:00
+lastUpdated: 2021-10-13T19:29:39+02:00
 ---
 
 Creates a checkerboard background pattern.
 
 - Use `background-color` to set a white background.
-- Use `background-image` with two `linear-gradient()` values, each one with a different angle to create the checkerboard pattern.
+- Use `background-image` with two `linear-gradient()` values. Give each one a different angle to create the checkerboard pattern.
 - Use `background-size` to specify the pattern's size.
 - **Note:** The fixed `height` and `width` of the element is for demonstration purposes only.
 
diff --git a/snippets/donut-spinner.md b/snippets/donut-spinner.md
index 710047b3f..64b18400e 100644
--- a/snippets/donut-spinner.md
+++ b/snippets/donut-spinner.md
@@ -2,12 +2,12 @@
 title: Donut spinner
 tags: animation,intermediate
 firstSeen: 2018-02-27T17:32:35+02:00
-lastUpdated: 2020-12-30T15:37:37+02:00
+lastUpdated: 2021-10-13T19:29:39+02:00
 ---
 
 Creates a donut spinner that can be used to indicate the loading of content.
 
-- Use a semi-transparent `border` for the whole element, except one side that will serve as the loading indicator for the donut.
+- Use a semi-transparent `border` for the whole element. Exclude one side that will serve as the loading indicator for the donut.
 - Define and use an appropriate animation, using `transform: rotate()` to rotate the element.
 
 ```html
diff --git a/snippets/evenly-distributed-children.md b/snippets/evenly-distributed-children.md
index f282eb405..197c49174 100644
--- a/snippets/evenly-distributed-children.md
+++ b/snippets/evenly-distributed-children.md
@@ -2,14 +2,14 @@
 title: Evenly distributed children
 tags: layout,intermediate
 firstSeen: 2018-02-28T13:47:02+02:00
-lastUpdated: 2020-12-30T15:37:37+02:00
+lastUpdated: 2021-10-13T19:29:39+02:00
 ---
 
 Evenly distributes child elements within a parent element.
 
 - Use `display: flex` to use the flexbox layout.
 - Use `justify-content: space-between` to evenly distributes child elements horizontally. The first item is positioned at the left edge, while the last item is positioned at the right edge.
-- Alternatively, you can use `justify-content: space-around` to distribute the children with space around them, rather than between them.
+- Alternatively, use `justify-content: space-around` to distribute the children with space around them, instead of between them.
 
 ```html
 <div class="evenly-distributed-children">
diff --git a/snippets/fullscreen.md b/snippets/fullscreen.md
index 1e0e83a90..3edf4938f 100644
--- a/snippets/fullscreen.md
+++ b/snippets/fullscreen.md
@@ -2,14 +2,11 @@
 title: Fullscreen
 tags: visual,advanced
 firstSeen: 2019-01-12T13:08:40+02:00
-lastUpdated: 2020-12-30T15:37:37+02:00
+lastUpdated: 2021-10-13T19:29:39+02:00
 ---
 
 Applies styles to an element when in fullscreen mode.
 
-
-The `:fullscreen` CSS pseudo-element represents an element that's displayed when the browser is in fullscreen mode.
-
 - Use the `:fullscreen` CSS pseudo-element selector to select and style an element that is displayed in fullscreen mode.
 - Use a `<button>` and `Element.requestFullscreen()` to create a button that makes the element fullscreen for the purposes of previewing the style.
 
diff --git a/snippets/input-with-prefix.md b/snippets/input-with-prefix.md
index 8a1b82d90..2820fb8c8 100644
--- a/snippets/input-with-prefix.md
+++ b/snippets/input-with-prefix.md
@@ -2,13 +2,13 @@
 title: Input with prefix
 tags: interactivity,visual,intermediate
 firstSeen: 2020-10-14T14:16:57+03:00
-lastUpdated: 2020-12-30T15:37:37+02:00
+lastUpdated: 2021-10-13T19:29:39+02:00
 ---
 
 Creates an input with a visual, non-editable prefix.
 
 - Use `display: flex` to create a container element.
-- Remove the border and outline from the `<input>` field and apply them to the parent element instead to make it look like an input box.
+- Remove the border and outline from the `<input>` field. Apply them to the parent element instead to make it look like an input box.
 - Use the `:focus-within` pseudo-class selector to style the parent element accordingly, when the user interacts with the `<input>` field.
 
 ```html
diff --git a/snippets/masonry-layout.md b/snippets/masonry-layout.md
index d7fe47c0d..57872ac32 100644
--- a/snippets/masonry-layout.md
+++ b/snippets/masonry-layout.md
@@ -2,16 +2,16 @@
 title: Masonry Layout
 tags: layout,advanced
 firstSeen: 2019-12-11T02:19:05+02:00
-lastUpdated: 2020-12-30T15:37:37+02:00
+lastUpdated: 2021-10-13T19:29:39+02:00
 ---
 
 Creates a masonry-style layout that is especially useful when working with images.
 
 - Create a masonry-style layout that consists of "bricks" that fall into each other with either a fixed `width` (vertical layout) or a fixed `height` (horizontal layout), forming a perfect fit. Especially useful when working with images.
-- Define `.masonry-container`, the container for the masonry layout and `.masonry-columns` an inner container in which `.masonry-brick` elements will be placed.
+- Define `.masonry-container` This is the container for the masonry layout and `.masonry-columns`, an inner container in which `.masonry-brick` elements will be placed.
 - Apply `display: block` to `.masonry-brick` elements to allow the layout to flow properly.
 - Use the `:first-child` pseudo-element selector to apply a different `margin` for the first element to account for its positioning.
-- Use CSS variables to allow for greater flexibility within the layout in combination with media queries to ensure that the layout is responsive in different viewport sizes.
+- Use CSS variables and media queries for greater flexibility and responsiveness.
 
 ```html
 <div class="masonry-container">
diff --git a/snippets/overflow-scroll-gradient.md b/snippets/overflow-scroll-gradient.md
index 4568230f6..c81bbada0 100644
--- a/snippets/overflow-scroll-gradient.md
+++ b/snippets/overflow-scroll-gradient.md
@@ -2,13 +2,13 @@
 title: Overflow scroll gradient
 tags: visual,intermediate
 firstSeen: 2018-02-25T15:14:39+02:00
-lastUpdated: 2020-12-30T15:37:37+02:00
+lastUpdated: 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.
 
 - Use the `:after` pseudo-element to create a `linear-gradient` that fades from `transparent` to `white` (top to bottom).
-- Use `position: absolute`, `width` and `height` to appropriately place and size the pseudo-element in its parent.
+- Use `position: absolute`, `width` and `height` to place and size the pseudo-element in its parent.
 - Use `pointer-events: none` to exclude the pseudo-element from mouse events, allowing text behind it to still be selectable/interactive.
 
 ```html
diff --git a/snippets/polka-dot-pattern.md b/snippets/polka-dot-pattern.md
index b2f37acb0..73bb540df 100644
--- a/snippets/polka-dot-pattern.md
+++ b/snippets/polka-dot-pattern.md
@@ -2,14 +2,14 @@
 title: Polka dot background pattern
 tags: visual,intermediate
 firstSeen: 2021-01-11T09:51:43+02:00
-lastUpdated: 2021-01-11T09:51:43+02:00
+lastUpdated: 2021-10-13T19:29:39+02:00
 ---
 
 Creates a polka dot background pattern.
 
 - Use `background-color` to set a black background.
 - Use `background-image` with two `radial-gradient()` values to create two dots.
-- Use `background-size` to specify the pattern's size and `background-position` to appropriately place the two gradients.
+- Use `background-size` to specify the pattern's size. Use `background-position` to appropriately place the two gradients.
 - **Note:** The fixed `height` and `width` of the element is for demonstration purposes only.
 
 ```html
diff --git a/snippets/pretty-text-underline.md b/snippets/pretty-text-underline.md
index 92dc2f358..8c7c88779 100644
--- a/snippets/pretty-text-underline.md
+++ b/snippets/pretty-text-underline.md
@@ -2,13 +2,13 @@
 title: Pretty text underline
 tags: visual,intermediate
 firstSeen: 2018-02-25T15:14:39+02:00
-lastUpdated: 2020-12-30T15:37:37+02:00
+lastUpdated: 2021-10-13T19:29:39+02:00
 ---
 
 Provides a nicer alternative to `text-decoration: underline` where descenders do not clip the underline.
 
-- Use `text-shadow` to apply 4 values with offsets covering a 4x4 px area, ensuring the underline has a thick shadow that covers the line where descenders clip it. For the best results, use a color that matches the `background` and adjust the `px` values for larger fonts.
-- Use `background-image` with `linear-gradient()` and `currentColor` to create an appropriate gradient that will act as the actual underline.
+- Use `text-shadow` to apply 4 values with offsets covering a 4x4 `px` area. This ensures the underline has a thick shadow that covers the line where descenders clip it. For best results, use a color that matches the `background` and adjust the `px` values for larger fonts.
+- Use `background-image` with `linear-gradient()` and `currentColor` to create a gradient that will act as the actual underline.
 - Set `background-position`, `background-repeat` and `background-size` to place the gradient in the correct position.
 - Use the `::selection` pseudo-class selector to ensure the text shadow does not interfere with text selection.
 - **Note:** This is natively implemented as `text-decoration-skip-ink: auto` but it has less control over the underline.
diff --git a/snippets/pulse-loader.md b/snippets/pulse-loader.md
index e9beac921..753acb80e 100644
--- a/snippets/pulse-loader.md
+++ b/snippets/pulse-loader.md
@@ -2,12 +2,12 @@
 title: Pulse loader
 tags: animation,beginner
 firstSeen: 2019-10-05T14:29:36+03:00
-lastUpdated: 2020-12-30T15:37:37+02:00
+lastUpdated: 2021-10-13T19:29:39+02:00
 ---
 
 Creates a pulse effect loader animation using the `animation-delay` property.
 
-- Use `@keyframes` to define an animation at two points in the cycle: at the start (`0%`), the two `<div>` elements have no `width` or `height` and are positioned at the center and at the end (`100%`), both `<div>` elements have increased `width` and `height`, but their `position` is reset to `0`.
+- Use `@keyframes` to define an animation at two points in the cycle. At the start (`0%`), the two `<div>` elements have no `width` or `height` and are positioned at the center. At the end (`100%`), both `<div>` elements have increased `width` and `height`, but their `position` is reset to `0`.
 - Use `opacity` to transition from `1` to `0` when animating to give the `<div>` elements a disappearing effect as they expand.
 - Set a predefined `width` and `height` for the parent container, `.ripple-loader` and use `position: relative` to position its children.
 - Use `animation-delay` on the second `<div>` element, so that each element starts its animation at a different time.
diff --git a/snippets/scroll-progress-bar.md b/snippets/scroll-progress-bar.md
index 78139030f..355764338 100644
--- a/snippets/scroll-progress-bar.md
+++ b/snippets/scroll-progress-bar.md
@@ -2,13 +2,13 @@
 title: Scroll progress bar
 tags: animation,visual,intermediate
 firstSeen: 2021-05-24T09:42:03+03:00
-lastUpdated: 2021-05-24T09:42:03+03:00
+lastUpdated: 2021-10-13T19:29:39+02:00
 ---
 
 Creates a progress bar indicating the scroll percentage of the page.
 
 - Use `position: fixed` and a large `z-index` value to place the element at the top of the page and above any content.
-- Use `EventTarget.addEventListener()` along with `Element.scrollTop` to determine the scroll percentage of the document and apply it to the `width` of the element.
+- Use `EventTarget.addEventListener()` and `Element.scrollTop` to determine the scroll percentage of the document and apply it to the `width` of the element.
 
 ```html
 <div id="scroll-progress"></div>
diff --git a/snippets/text-backdrop-overlay.md b/snippets/text-backdrop-overlay.md
index 4909cc6eb..b46571a06 100644
--- a/snippets/text-backdrop-overlay.md
+++ b/snippets/text-backdrop-overlay.md
@@ -2,12 +2,12 @@
 title: Image text overlay
 tags: visual,beginner
 firstSeen: 2020-08-18T15:07:32+03:00
-lastUpdated: 2020-12-30T15:37:37+02:00
+lastUpdated: 2021-10-13T19:29:39+02:00
 ---
 
 Displays a text on top of an image using an overlay.
 
-- Use `backdrop-filter` to apply a `blur(14px)` and `brightness(80%)` effect to make text readable regardless of background image and color.
+- Use `backdrop-filter` to apply a `blur(14px)` and `brightness(80%)` effect. This makes text readable regardless of background image and color.
 
 ```html
 <div>
diff --git a/snippets/triangle.md b/snippets/triangle.md
index 80e779b4a..8d7521a6e 100644
--- a/snippets/triangle.md
+++ b/snippets/triangle.md
@@ -2,14 +2,14 @@
 title: Triangle
 tags: visual,beginner
 firstSeen: 2018-02-25T15:14:39+02:00
-lastUpdated: 2021-01-07T23:52:15+02:00
+lastUpdated: 2021-10-13T19:29:39+02:00
 ---
 
 Creates a triangular shape with pure CSS.
 
 - Use three borders to create a triangle shape.
 - All borders should have the same `border-width` (`20px`).
-- The opposite side of where the triangle points towards (i.e. top if the triangle points downwards) should have the desired `border-color`, whereas the adjacent borders (i.e. left and right) should have a `border-color` of `transparent`.
+- The opposite side of where the triangle points towards (i.e. top if the triangle points downwards) should have the desired `border-color`. The adjacent borders (i.e. left and right) should have a `border-color` of `transparent`.
 - Altering the `border-width` values will change the proportions of the triangle.
 
 ```html
diff --git a/snippets/zig-zag-pattern.md b/snippets/zig-zag-pattern.md
index 9c7cc867a..318780a94 100644
--- a/snippets/zig-zag-pattern.md
+++ b/snippets/zig-zag-pattern.md
@@ -2,14 +2,14 @@
 title: Zig zag background pattern
 tags: visual,advanced
 firstSeen: 2021-01-11T09:51:43+02:00
-lastUpdated: 2021-01-11T09:53:16+02:00
+lastUpdated: 2021-10-13T19:29:39+02:00
 ---
 
 Creates a zig zag background pattern.
 
 - Use `background-color` to set a white background.
 - Use `background-image` with four `linear-gradient()` values to create the parts of a zig zag pattern.
-- Use `background-size` to specify the pattern's size and `background-position` to place the parts of the pattern in the correct locations.
+- Use `background-size` to specify the pattern's size. Use `background-position` to place the parts of the pattern in the correct locations.
 - **Note:** The fixed `height` and `width` of the element is for demonstration purposes only.
 
 ```html
diff --git a/snippets/zoomin-zoomout-animation.md b/snippets/zoomin-zoomout-animation.md
index 549808690..a0f70649f 100644
--- a/snippets/zoomin-zoomout-animation.md
+++ b/snippets/zoomin-zoomout-animation.md
@@ -2,13 +2,14 @@
 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
+lastUpdated: 2021-10-13T19:29:39+02:00
 ---
 
 Creates a zoom in zoom out animation.
 
-- Use `@keyframes` to define a three-step animation: at the start (`0%`) and end (`100%`), the element is its original size (`scale(1 ,1)`) and halfway through (`50%`) it's scaled up to 1.5 times its original size (`scale(1.5, 1.5)`).
-- Use `width` and `height` to give the element a specific size and use `animation` to set the appropriate values for the element to make it animated.
+- Use `@keyframes` to define a three-step animation. At the start (`0%`) and end (`100%`), the element is its original size (`scale(1 ,1)`). Halfway through (`50%`) it's scaled up to 1.5 times its original size (`scale(1.5, 1.5)`).
+- Use `width` and `height` to give the element a specific size.
+- Use `animation` to set the appropriate values for the element to make it animated.
 
 ```html
 <div class="zoom-in-out-box"></div>