From e7dee2a58912f3bea950efd0e633d2f070e3e410 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Fri, 21 Oct 2022 21:34:41 +0800
Subject: [PATCH] refactor: update vendor prefix in SCSS

{
  "browsers": [
    "last 2 versions",
    "> 0.2%",
    "not dead"
  ]
}
---
 _sass/addon/commons.scss          | 61 ++++++++++++++++---------------
 _sass/addon/module.scss           |  5 ++-
 _sass/addon/syntax.scss           |  6 +--
 _sass/colors/dark-typography.scss |  1 +
 _sass/layout/categories.scss      |  9 +++--
 _sass/layout/category-tag.scss    |  6 +--
 _sass/layout/home.scss            |  1 +
 _sass/layout/post.scss            | 20 ++++++++--
 8 files changed, 65 insertions(+), 44 deletions(-)

diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index 24478b0..f4dab2d 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -180,6 +180,11 @@ i { /* fontawesome icons */
   }
 }
 
+@-webkit-keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
 @keyframes fade-in {
   from { opacity: 0; }
   to { opacity: 1; }
@@ -189,6 +194,7 @@ img[data-src] {
   margin: 0.5rem 0;
 
   &[data-loaded="true"] {
+    -webkit-animation: fade-in linear 0.5s;
     animation: fade-in linear 0.5s;
   }
 
@@ -203,6 +209,7 @@ img[data-src] {
   }
 
   &.shadow {
+    -webkit-filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
     filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
     box-shadow: none !important; /* cover the Bootstrap 4.6.1 styles */
   }
@@ -219,7 +226,7 @@ img[data-src] {
   margin-bottom: 4rem;
 
   &:only-child {
-    position: -webkit-sticky; /* Safari */
+    position: -webkit-sticky;
     position: sticky;
   }
 
@@ -307,8 +314,9 @@ img[data-src] {
     &:target:not([scroll-focus]),
     &[scroll-focus="true"] > p {
       background-color: var(--footnote-target-bg);
+      width: -moz-fit-content;
+      width: -webkit-fit-content;
       width: fit-content;
-      -webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */
       transition: background-color 1.5s ease-in-out;
     }
   }
@@ -320,7 +328,6 @@ img[data-src] {
     @include pl-pr(2px);
 
     border-bottom-style: none !important;
-    -webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */
     transition: background-color 1.5s ease-in-out;
   }
 
@@ -456,6 +463,7 @@ img[data-src] {
 
   > ol,
   > ul {
+    -webkit-padding-start: 1.75rem;
     padding-inline-start: 1.75rem;
 
     li {
@@ -465,6 +473,7 @@ img[data-src] {
 
     ol,
     ul {
+      -webkit-padding-start: 1.25rem;
       padding-inline-start: 1.25rem;
       margin: 0.5rem 0;
     }
@@ -559,7 +568,6 @@ img[data-src] {
 }
 
 .flex-grow-1 {
-  -ms-flex-positive: 1 !important;
   flex-grow: 1 !important;
 }
 
@@ -651,9 +659,8 @@ $sidebar-display: "sidebar-display";
       border-radius: 50%;
       border: 2px solid rgba(222, 222, 222, 0.7);
       overflow: hidden;
+      -webkit-transform: translateZ(0);
       transform: translateZ(0); /* fixed the zoom in Safari */
-      -webkit-transition: border-color 0.35s ease-in-out;
-      -moz-transition: border-color 0.35s ease-in-out;
       transition: border-color 0.35s ease-in-out;
 
       &:hover {
@@ -664,13 +671,11 @@ $sidebar-display: "sidebar-display";
     img {
       width: 100%;
       height: 100%;
-      -webkit-transition: transform 0.5s;
-      -moz-transition: transform 0.5s;
+      transition: -webkit-transform 0.5s;
       transition: transform 0.5s;
+      transition: transform 0.5s, -webkit-transform 0.5s;
 
       &:hover {
-        -ms-transform: scale(1.2);
-        -moz-transform: scale(1.2);
         -webkit-transform: scale(1.2);
         transform: scale(1.2);
       }
@@ -697,6 +702,8 @@ $sidebar-display: "sidebar-display";
     word-spacing: 1px;
     margin: 0.2rem 1.5rem 0.5rem 1.5rem;
     min-height: 3rem; /* avoid vertical shifting in multi-line words */
+    -webkit-user-select: none;
+    -moz-user-select: none;
     user-select: none;
   }
 
@@ -833,9 +840,6 @@ $sidebar-display: "sidebar-display";
 
 @media (hover: hover) {
   #sidebar ul > li:last-child::after {
-    -webkit-transition: top 0.5s ease;
-    -moz-transition: top 0.5s ease;
-    -o-transition: top 0.5s ease;
     transition: top 0.5s ease;
   }
 }
@@ -940,9 +944,8 @@ $sidebar-display: "sidebar-display";
     background: center;
 
     &.form-control {
-      &::-webkit-input-placeholder { @include input-placeholder; }
       &::-moz-placeholder { @include input-placeholder; }
-      &:-ms-input-placeholder { @include input-placeholder; }
+      &::-webkit-input-placeholder { @include input-placeholder; }
       &::placeholder { @include input-placeholder; }
     }
   }
@@ -1094,7 +1097,9 @@ $sidebar-display: "sidebar-display";
   height: $size;
   border-radius: 50%;
   border: 1px solid var(--btn-backtotop-border-color);
+  transition: -webkit-transform 0.2s ease-out;
   transition: transform 0.2s ease-out;
+  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
   -webkit-transition: transform 0.2s ease-out;
 
   i {
@@ -1110,6 +1115,13 @@ $sidebar-display: "sidebar-display";
 }
 
 #notification {
+  @-webkit-keyframes popup {
+    from {
+      opacity: 0;
+      bottom: 0;
+    }
+  }
+
   @keyframes popup {
     from {
       opacity: 0;
@@ -1147,7 +1159,9 @@ $sidebar-display: "sidebar-display";
       position: fixed;
       left: 50%;
       bottom: 20%;
+      -webkit-transform: translateX(-50%);
       transform: translateX(-50%);
+      -webkit-animation: popup 0.8s;
       animation: popup 0.8s;
     }
   }
@@ -1169,7 +1183,6 @@ $sidebar-display: "sidebar-display";
     div.d-flex {
       padding: 1.5rem 0;
       flex-wrap: wrap;
-      -ms-flex-pack: distribute !important;
       justify-content: space-around !important;
     }
 
@@ -1233,10 +1246,8 @@ $sidebar-display: "sidebar-display";
     $basic: transform 0.4s ease;
 
     @if $append {
-      -webkit-transition: $basic, $append;
       transition: $basic, $append;
     } @else {
-      -webkit-transition: $basic;
       transition: $basic;
     }
   }
@@ -1252,12 +1263,14 @@ $sidebar-display: "sidebar-display";
 
   [#{$sidebar-display}] {
     #sidebar {
+      -webkit-transform: translateX(0);
       transform: translateX(0);
     }
 
     #topbar-wrapper,
     #main-wrapper,
     footer {
+      -webkit-transform: translateX(#{$sidebar-width});
       transform: translateX(#{$sidebar-width});
     }
   }
@@ -1269,8 +1282,6 @@ $sidebar-display: "sidebar-display";
     -webkit-transform: translateX(-#{$sidebar-width});
 
     .cursor {
-      -webkit-transition: none;
-      -moz-transition: none;
       transition: none;
     }
   }
@@ -1318,8 +1329,6 @@ $sidebar-display: "sidebar-display";
   }
 
   #tags {
-    -webkit-box-pack: center !important;
-    -ms-flex-pack: center !important;
     justify-content: center !important;
   }
 
@@ -1392,8 +1401,6 @@ $sidebar-display: "sidebar-display";
 /* Pad horizontal */
 @media all and (min-width: 992px) and (max-width: 1199px) {
   #main .col-lg-11 {
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 96%;
     flex: 0 0 96%;
     max-width: 96%;
   }
@@ -1461,8 +1468,6 @@ $sidebar-display: "sidebar-display";
   }
 
   #main > div.row {
-    -webkit-box-pack: center !important;
-    -ms-flex-pack: center !important;
     justify-content: center !important;
   }
 }
@@ -1479,7 +1484,6 @@ $sidebar-display: "sidebar-display";
   }
 
   #search-input {
-    -webkit-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
   }
 
@@ -1626,8 +1630,6 @@ $sidebar-display: "sidebar-display";
       $icon-block-size: 2rem;
 
       &.justify-content-center {
-        -webkit-box-pack: start !important;
-        -ms-flex-pack: start !important;
         justify-content: flex-start !important;
       }
 
@@ -1652,6 +1654,7 @@ $sidebar-display: "sidebar-display";
           position: absolute;
           top: 50%;
           left: 50%;
+          -webkit-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
         }
       }
diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss
index d9353ab..9f1c986 100644
--- a/_sass/addon/module.scss
+++ b/_sass/addon/module.scss
@@ -73,6 +73,8 @@
 }
 
 %no-cursor {
+  -webkit-user-select: none;
+  -moz-user-select: none;
   user-select: none;
 }
 
@@ -101,6 +103,8 @@
 
 %sidebar-links {
   color: rgba(117, 117, 117, 0.9);
+  -webkit-user-select: none;
+  -moz-user-select: none;
   user-select: none;
 }
 
@@ -134,7 +138,6 @@
   position: relative;
   left: 50%;
   -webkit-transform: translateX(-50%);
-  -ms-transform: translateX(-50%);
   transform: translateX(-50%);
 }
 
diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss
index fcccbea..361fe08 100644
--- a/_sass/addon/syntax.scss
+++ b/_sass/addon/syntax.scss
@@ -87,23 +87,21 @@ $code-radius: 6px;
     text-align: right;
     color: var(--highlight-lineno-color);
     -webkit-user-select: none;
-    -khtml-user-select: none;
     -moz-user-select: none;
-    -ms-user-select: none;
     -o-user-select: none;
     user-select: none;
   }
 
   /* set the dollar sign to non-selectable */
   .gp {
+    -webkit-user-select: none;
+    -moz-user-select: none;
     user-select: none;
   }
 } /* .highlight */
 
 code {
   -webkit-hyphens: none;
-  -ms-hyphens: none;
-  -moz-hyphens: none;
   hyphens: none;
 
   &.highlighter-rouge {
diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss
index cc645aa..7b7a39f 100644
--- a/_sass/colors/dark-typography.scss
+++ b/_sass/colors/dark-typography.scss
@@ -96,6 +96,7 @@
   --timeline-year-dot-color: var(--timeline-color);
 
   .post img[data-src] {
+    -webkit-filter: brightness(95%);
     filter: brightness(95%);
   }
 
diff --git a/_sass/layout/categories.scss b/_sass/layout/categories.scss
index 551c557..c818e33 100644
--- a/_sass/layout/categories.scss
+++ b/_sass/layout/categories.scss
@@ -16,7 +16,7 @@
   i {
     @extend %category-icon-color;
 
-    font-size: 86%; // fontawesome icons
+    font-size: 86%; /* fontawesome icons */
   }
 
   .list-group-item {
@@ -42,7 +42,9 @@
     position: relative;
     height: 0.7rem;
     width: 1rem;
+    transition: -webkit-transform 300ms ease;
     transition: transform 300ms ease;
+    transition: transform 300ms ease, -webkit-transform 300ms ease;
   }
 
   &:hover {
@@ -52,14 +54,13 @@
   }
 }
 
-@media (hover: hover) { // only works on desktop
+@media (hover: hover) { /* only works on desktop */
   .category-trigger:hover {
     background-color: var(--categories-hover-bg);
   }
 }
 
 .rotate {
-  -ms-transform: rotate(-90deg); /* IE 9 */
-  -webkit-transform: rotate(-90deg); /* Safari 3-8 */
+  -webkit-transform: rotate(-90deg);
   transform: rotate(-90deg);
 }
diff --git a/_sass/layout/category-tag.scss b/_sass/layout/category-tag.scss
index 2ce151a..4488671 100644
--- a/_sass/layout/category-tag.scss
+++ b/_sass/layout/category-tag.scss
@@ -13,7 +13,7 @@
     line-height: 1.5rem;
     padding: 0.6rem 0;
 
-    &::before { // dot
+    &::before { /* dot */
       background: #999999;
       width: 5px;
       height: 5px;
@@ -37,7 +37,7 @@
   }
 }
 
-#page-tag h1 > i { // tag icon
+#page-tag h1 > i { /* tag icon */
   font-size: 1.2rem;
 }
 
@@ -51,7 +51,7 @@
   a:hover {
     @extend %link-hover;
 
-    margin-bottom: -1px; // Avoid jumping
+    margin-bottom: -1px; /* Avoid jumping */
   }
 }
 
diff --git a/_sass/layout/home.scss b/_sass/layout/home.scss
index 632fbe0..fd0f146 100644
--- a/_sass/layout/home.scss
+++ b/_sass/layout/home.scss
@@ -85,6 +85,7 @@
 
       .pin {
         i {
+          -webkit-transform: rotate(45deg);
           transform: rotate(45deg);
           padding-left: 3px;
           color: var(--pin-color);
diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss
index 613b9f6..5d9c0f9 100644
--- a/_sass/layout/post.scss
+++ b/_sass/layout/post.scss
@@ -80,6 +80,8 @@ h1 + .post-meta {
 
   .share-wrapper {
     vertical-align: middle;
+    -webkit-user-select: none;
+    -moz-user-select: none;
     user-select: none;
 
     .share-icons {
@@ -203,6 +205,20 @@ h1 + .post-meta {
   }
 } /* .post-navigation */
 
+@-webkit-keyframes fade-up {
+  from {
+    opacity: 0;
+    position: relative;
+    top: 2rem;
+  }
+
+  to {
+    opacity: 1;
+    position: relative;
+    top: 0;
+  }
+}
+
 @keyframes fade-up {
   from {
     opacity: 0;
@@ -223,6 +239,7 @@ h1 + .post-meta {
   position: sticky;
   top: 4rem;
   transition: top 0.2s ease-in-out;
+  -webkit-animation: fade-up 0.8s;
   animation: fade-up 0.8s;
 }
 
@@ -277,8 +294,6 @@ nav[data-toggle="toc"] {
     border-color: var(--card-border-color);
     background-color: var(--card-bg);
     box-shadow: 0 0 5px 0 var(--card-box-shadow);
-    -webkit-transition: all 0.3s ease-in-out;
-    -moz-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 
     h3 {
@@ -323,7 +338,6 @@ nav[data-toggle="toc"] {
   }
 
   .post-tail-bottom {
-    -ms-flex-wrap: wrap-reverse !important;
     flex-wrap: wrap-reverse !important;
 
     > div:first-child {