From 2d1f6376923afe00c630271700411d8d84756014 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Mon, 20 Apr 2020 12:46:31 +0300
Subject: [PATCH] Update some snippets

---
 snippets/constant-width-to-height-ratio.md | 10 +++++-----
 snippets/counter.md                        |  4 +---
 snippets/custom-scrollbar.md               | 17 ++++++++---------
 3 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/snippets/constant-width-to-height-ratio.md b/snippets/constant-width-to-height-ratio.md
index 72188c890..152b7e043 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
+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
index eee6a55cd..c862db7d5 100644
--- 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
index dfbce08aa..3cffe8330 100644
--- 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/).