Update some snippets

cq123-cloud · Apr 20, 2020 · 2d1f637 · 2d1f637
1 parent 4e753e8
commit 2d1f637
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 17 deletions.
diff --git 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
+tags: layout,beginner
 ---
 
-Given an element of variable width, it will ensure its height remains proportionate in a responsive fashion (i.e. its width to height ratio remains constant).
+Given an element of variable width, it will ensure its `height` remains proportionate in a responsive fashion (i.e. its `width` to `height` ratio remains constant).
 
 ```html
 <div class="constant-width-to-height-ratio"></div>
@@ -15,13 +15,13 @@ Given an element of variable width, it will ensure its height remains proportion
   width: 50%;
 }
 
-.constant-width-to-height-ratio::before {
+.constant-width-to-height-ratio:before {
   content: '';
   padding-top: 100%;
   float: left;
 }
 
-.constant-width-to-height-ratio::after {
+.constant-width-to-height-ratio:after {
   content: '';
   display: block;
   clear: both;
@@ -30,7 +30,7 @@ Given an element of variable width, it will ensure its height remains proportion
 
 #### Explanation
 
-- `padding-top` on the `::before` pseudo-element causes the height of the element to equal a percentage of its width. `100%` therefore means the element's height will always be `100%` of the width, creating a responsive square.
+- `padding-top` on the `:before` pseudo-element causes the height of the element to equal a percentage of its width. `100%` therefore means the element's height will always be `100%` of the width, creating a responsive square.
 - This method also allows content to be placed inside the element normally.
 
 #### Browser support
diff --git a/snippets/counter.md b/snippets/counter.md
@@ -25,7 +25,7 @@ ul {
   counter-reset: counter;
 }
 
-li::before {
+li:before {
   counter-increment: counter;
   content: counters(counter, '.') ' ';
 }
@@ -42,5 +42,3 @@ You can create a ordered list using any type of HTML.
 5. A CSS counter can be especially useful for making outlined lists, because a new instance of the counter is automatically created in child elements. Using the `counters()` function, separating text can be inserted between different levels of nested counters.
 
 #### Browser support
-
-- https://caniuse.com/#feat=css-counters
diff --git a/snippets/custom-scrollbar.md b/snippets/custom-scrollbar.md
@@ -22,28 +22,27 @@ Customizes the scrollbar style for the document and elements with scrollable ove
   overflow-y: scroll;
 }
 
-/* To style the document scrollbar, remove `.custom-scrollbar` */
-
 .custom-scrollbar::-webkit-scrollbar {
   width: 8px;
 }
 
 .custom-scrollbar::-webkit-scrollbar-track {
-  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  border-radius: 10px;
+  background: #1E3F20;
+  border-radius: 12px;
 }
 
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
+  background: #4A7856;
+  border-radius: 12px;
 }
 ```
 
 #### Explanation
 
-1. `::-webkit-scrollbar` targets the whole scrollbar element.
-2. `::-webkit-scrollbar-track` targets only the scrollbar track.
-3. `::-webkit-scrollbar-thumb` targets the scrollbar thumb.
+- `::-webkit-scrollbar` targets the whole scrollbar element.
+- `::-webkit-scrollbar-track` targets only the scrollbar track.
+- `::-webkit-scrollbar-thumb` targets the scrollbar thumb.
+- Apply the same selectors and styles without `.custom-scrollbar` to style the document scrollbar.
 
 There are many other pseudo-elements that you can use to style scrollbars. For more info, visit the [WebKit Blog](https://webkit.org/blog/363/styling-scrollbars/).