Update snippets

snippets/display-table-centering.md

@@ -33,14 +33,11 @@ Vertically and horizontally centers a child element within its parent element us
 
 #### Explanation
 
-1. `display: table` on '.center' allows the element to behave like a `<table>` HTML element.
-2. 100% height and width on '.center' allows the element to fill the available space within its parent element.
-3. `display: table-cell` on '.center > span' allows the element to behave like an <td> HTML element.
-4. `text-align: center` on '.center > span' centers the child element horizontally.
-5. `vertical-align: middle` on '.center > span' centers the child element vertically.
-
+- `display: table` on '.center' allows the element to behave like a `<table>` HTML element.
+- 100% height and width on '.center' allows the element to fill the available space within its parent element.
+- `display: table-cell` on '.center > span' allows the element to behave like an <td> HTML element.
+- `text-align: center` on '.center > span' centers the child element horizontally.
+- `vertical-align: middle` on '.center > span' centers the child element vertically.
 - The outer parent ('.container' in this case) must have a fixed height and width.
 
 #### Browser support
-
-- https://caniuse.com/#search=display%3A%20table

snippets/donut-spinner.md

@@ -35,6 +35,3 @@ 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 `animation` to rotate the element.
 
 #### Browser support
-
-- https://caniuse.com/#feat=css-animation
-- https://caniuse.com/#feat=transforms2d

snippets/drop-cap.md

@@ -26,5 +26,3 @@ p:first-child::first-letter {
 - Use the `::first-letter` pseudo-element to style the first element of the paragraph, use the `:first-child` selector to select only the first paragraph.
 
 #### Browser support
-
-- https://caniuse.com/#feat=first-letter

snippets/dynamic-shadow.md

@@ -18,7 +18,7 @@ Creates a shadow similar to `box-shadow` but based on the colors of the element
   z-index: 1;
 }
 
-.dynamic-shadow::after {
+.dynamic-shadow:after {
   content: '';
   width: 100%;
   height: 100%;
@@ -33,17 +33,15 @@ Creates a shadow similar to `box-shadow` but based on the colors of the element
 
 #### Explanation
 
-1. `position: relative` on the element establishes a Cartesian positioning context for psuedo-elements.
-2. `z-index: 1` establishes a new stacking context.
-3. `::after` defines a pseudo-element.
-4. `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent.
-5. `width: 100%` and `height: 100%` sizes the pseudo-element to fill its parent's dimensions, making it equal in size.
-6. `background: inherit` causes the pseudo-element to inherit the linear gradient specified on the element.
-7. `top: 0.5rem` offsets the pseudo-element down slightly from its parent.
-8. `filter: blur(0.4rem)` will blur the pseudo-element to create the appearance of a shadow underneath.
-9. `opacity: 0.7` makes the pseudo-element partially transparent.
-10. `z-index: -1` positions the pseudo-element behind the parent but in front of the background.
+- `position: relative` on the element establishes a Cartesian positioning context for psuedo-elements.
+- `z-index: 1` establishes a new stacking context.
+- `:after` defines a pseudo-element.
+- `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent.
+- `width: 100%` and `height: 100%` sizes the pseudo-element to fill its parent's dimensions, making it equal in size.
+- `background: inherit` causes the pseudo-element to inherit the linear gradient specified on the element.
+- `top: 0.5rem` offsets the pseudo-element down slightly from its parent.
+- `filter: blur(0.4rem)` will blur the pseudo-element to create the appearance of a shadow underneath.
+- `opacity: 0.7` makes the pseudo-element partially transparent.
+- `z-index: -1` positions the pseudo-element behind the parent but in front of the background.
 
 #### Browser support
-
-- https://caniuse.com/#feat=css-filters

snippets/etched-text.md

@@ -25,5 +25,3 @@ Creates an effect where text appears to be "etched" or engraved into the backgro
 - The text color should be slightly faded to make it look like it's engraved/carved out of the background.
 
 #### Browser support
-
-- https://caniuse.com/#feat=css-textshadow

snippets/evenly-distributed-children.md

@@ -28,5 +28,3 @@ Evenly distributes child elements within a parent element.
 _Note: Alternatively, use `justify-content: space-around` to distribute the children with space around them, rather than between them._
 
 #### Browser support
-
-- https://caniuse.com/#feat=flexbox

snippets/fit-image-in-container.md

@@ -1,6 +1,6 @@
 ---
 title: Fit image in container
-tags: layout, visual
+tags: layout,visual,intermediate
 ---
 
 Changes the fit and position of an image within its container while preserving its aspect ratio. Previously only possible using a background image and the `background-size` property.
@@ -36,5 +36,3 @@ Changes the fit and position of an image within its container while preserving i
 - `object-position: [x] [y]` positions the image within the container.
 
 #### Browser support
-
-- https://caniuse.com/#feat=object-fit

snippets/flexbox-centering.md

@@ -6,7 +6,9 @@ tags: layout,beginner
 Horizontally and vertically centers a child element within a parent element using `flexbox`.
 
 ```html
-<div class="flexbox-centering"><div class="child">Centered content.</div></div>
+<div class="flexbox-centering">
+  <div>Centered content.</div>
+</div>
 ```
 
 ```css
@@ -20,10 +22,8 @@ Horizontally and vertically centers a child element within a parent element usin
 
 #### Explanation
 
-1. `display: flex` creates a flexbox layout.
-2. `justify-content: center` centers the child horizontally.
-3. `align-items: center` centers the child vertically.
+- `display: flex` creates a flexbox layout.
+- `justify-content: center` centers the child horizontally.
+- `align-items: center` centers the child vertically.
 
 #### Browser support
-
-- https://caniuse.com/#feat=flexbox

snippets/focus-within.md

@@ -6,24 +6,33 @@ tags: visual,interactivity,intermediate
 Changes the appearance of a form if any of its children are focused.
 
 ```html
-<div class="focus-within">
-  <form>
-    <label for="given_name">Given Name:</label> <input id="given_name" type="text" /> <br />
-    <label for="family_name">Family Name:</label> <input id="family_name" type="text" />
-  </form>
-</div>
+<form>
+  <label for="username">Username:</label>
+  <input id="username" type="text" />
+  <br />
+  <label for="password">Password:</label>
+  <input id="password" type="text" />
+</form>
 ```
 
 ```css
 form {
-  border: 3px solid #2d98da;
-  color: #000000;
-  padding: 4px;
+  border: 2px solid #52B882;
+  padding: 8px;
+  border-radius: 2px;
 }
 
 form:focus-within {
-  background: #f7b731;
-  color: #000000;
+  background: #7CF0BD;
+}
+
+label {
+  display: inline-block;
+  width: 72px;
+}
+
+input {
+  margin: 4px;
 }
 ```
 

snippets/ghost-trick.md

@@ -1,39 +0,0 @@
----
-title: Ghost trick
-tags: layout,intermediate
----
-
-Vertically centers an element in another.
-
-```html
-<div class="ghost-trick">
-  <div class="ghosting"><p>Vertically centered without changing the position property.</p></div>
-</div>
-```
-
-```css
-.ghosting {
-  height: 300px;
-  background: #0ff;
-}
-
-.ghosting:before {
-  content: '';
-  display: inline-block;
-  height: 100%;
-  vertical-align: middle;
-}
-
-p {
-  display: inline-block;
-  vertical-align: middle;
-}
-```
-
-#### Explanation
-
-- Use the style of a `:before` pseudo-element to vertically align inline elements without changing their `position` property.
-
-#### Browser support
-
-- https://caniuse.com/#feat=inline-block