add vendor specific css prefixes (#77)

Co-authored-by: hossainemruz <hossainemruz@users.noreply.github.com>

static/assets/css/layouts/list.css

@@ -67,6 +67,8 @@
 }
 
 .content-cards .paginator {
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
   width: fit-content;
   margin: auto;
 }
@@ -89,6 +91,8 @@
   margin-right: auto;
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
   width: fit-content;
 }
 

static/assets/css/layouts/main.css

@@ -136,7 +136,8 @@ img.right {
 
 .card .card-head {
   height: 172px;
-  object-fit: cover;
+  -o-object-fit: cover;
+     object-fit: cover;
   overflow: hidden;
 }
 

static/assets/css/layouts/single.css

@@ -37,6 +37,7 @@ body {
 }
 
 .toc-holder {
+  position: -webkit-sticky;
   position: sticky;
   top: 4.5rem;
   overflow-x: hidden;
@@ -187,7 +188,11 @@ tbody tr:hover {
 
 figure {
   border: 1px solid #c0ccda;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
   height: fit-content;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
   width: fit-content;
   align-self: center;
   margin: auto;
@@ -240,7 +245,8 @@ a.header-anchor code {
 .content ol > ol,
 .content li > ol,
 .content li > ul {
-  padding-inline-start: 1rem;
+  -webkit-padding-start: 1rem;
+          padding-inline-start: 1rem;
 }
 
 kbd {
@@ -493,6 +499,8 @@ mark {
     position: relative;
     /* height: fit-content; */
     flex: 100%;
+    height: -webkit-fit-content;
+    height: -moz-fit-content;
     height: fit-content;
     max-height: 200vh;
     max-width: 100%;

static/assets/css/navigators/sidebar.css

@@ -8,6 +8,7 @@
 
 .sidebar-holder {
   top: 2.5rem;
+  position: -webkit-sticky;
   position: sticky;
   background-color: #f9fafc;
   height: 100vh;
@@ -25,6 +26,8 @@
 .sidebar-tree {
   padding-left: 1rem;
   position: relative;
+  width: -webkit-max-content;
+  width: -moz-max-content;
   width: max-content;
 }
 
@@ -189,6 +192,7 @@ a.focused {
     transition: all ease-out 0.3s;
   }
   .sidebar-holder {
+    position: -webkit-sticky;
     position: sticky;
     top: 2.5rem;
     width: 100%;
@@ -217,6 +221,7 @@ a.focused {
     transition: all ease-out 0.3s;
   }
   .sidebar-holder {
+    position: -webkit-sticky;
     position: sticky;
     top: 2.5rem;
     width: 100%;
@@ -244,6 +249,8 @@ a.focused {
   .sidebar-section.hide {
     margin-top: 2rem;
     position: relative;
+    height: -webkit-fit-content;
+    height: -moz-fit-content;
     height: fit-content;
     flex: none;
     max-height: 300vh;
@@ -253,6 +260,8 @@ a.focused {
 
   .sidebar-holder {
     max-height: 0;
+    height: -webkit-fit-content;
+    height: -moz-fit-content;
     height: fit-content;
     overflow: hidden;
     max-width: 100%;
@@ -266,7 +275,11 @@ a.focused {
 
   .sidebar {
     position: relative;
+    height: -webkit-fit-content;
+    height: -moz-fit-content;
     height: fit-content;
+    max-height: -webkit-fit-content;
+    max-height: -moz-fit-content;
     max-height: fit-content;
     width: 100vw;
     min-height: 0;

static/assets/css/sections/about.css

@@ -76,7 +76,8 @@
   border-bottom-left-radius: 80px;
   border-right: 0;
   transform-origin: center right;
-  animation: circular-loading-1 1.8s linear forwards;
+  -webkit-animation: circular-loading-1 1.8s linear forwards;
+          animation: circular-loading-1 1.8s linear forwards;
 }
 
 .circular-progress .circular-progress-value {
@@ -118,47 +119,67 @@
 }
 
 .circular-progress-percentage-50 {
-  animation: circular-loading-50 0s linear forwards 1.8s;
+  -webkit-animation: circular-loading-50 0s linear forwards 1.8s;
+          animation: circular-loading-50 0s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-55 {
-  animation: circular-loading-55 0.18s linear forwards 1.8s;
+  -webkit-animation: circular-loading-55 0.18s linear forwards 1.8s;
+          animation: circular-loading-55 0.18s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-60 {
-  animation: circular-loading-60 0.36s linear forwards 1.8s;
+  -webkit-animation: circular-loading-60 0.36s linear forwards 1.8s;
+          animation: circular-loading-60 0.36s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-65 {
-  animation: circular-loading-65 0.54s linear forwards 1.8s;
+  -webkit-animation: circular-loading-65 0.54s linear forwards 1.8s;
+          animation: circular-loading-65 0.54s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-70 {
-  animation: circular-loading-70 0.72s linear forwards 1.8s;
+  -webkit-animation: circular-loading-70 0.72s linear forwards 1.8s;
+          animation: circular-loading-70 0.72s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-75 {
-  animation: circular-loading-75 0.9s linear forwards 1.8s;
+  -webkit-animation: circular-loading-75 0.9s linear forwards 1.8s;
+          animation: circular-loading-75 0.9s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-80 {
-  animation: circular-loading-80 1.08s linear forwards 1.8s;
+  -webkit-animation: circular-loading-80 1.08s linear forwards 1.8s;
+          animation: circular-loading-80 1.08s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-85 {
-  animation: circular-loading-85 1.26s linear forwards 1.8s;
+  -webkit-animation: circular-loading-85 1.26s linear forwards 1.8s;
+          animation: circular-loading-85 1.26s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-90 {
-  animation: circular-loading-90 1.44s linear forwards 1.8s;
+  -webkit-animation: circular-loading-90 1.44s linear forwards 1.8s;
+          animation: circular-loading-90 1.44s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-95 {
-  animation: circular-loading-95 1.62s linear forwards 1.8s;
+  -webkit-animation: circular-loading-95 1.62s linear forwards 1.8s;
+          animation: circular-loading-95 1.62s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-100 {
-  animation: circular-loading-100 1.8s linear forwards 1.8s;
+  -webkit-animation: circular-loading-100 1.8s linear forwards 1.8s;
+          animation: circular-loading-100 1.8s linear forwards 1.8s;
+}
+
+@-webkit-keyframes circular-loading-50 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
 }
 
 @keyframes circular-loading-50 {
@@ -170,6 +191,15 @@
   }
 }
 
+@-webkit-keyframes circular-loading-55 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(18deg);
+  }
+}
+
 @keyframes circular-loading-55 {
   0% {
     transform: rotate(0deg);
@@ -179,6 +209,15 @@
   }
 }
 
+@-webkit-keyframes circular-loading-60 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(36deg);
+  }
+}
+
 @keyframes circular-loading-60 {
   0% {
     transform: rotate(0deg);
@@ -188,6 +227,15 @@
   }
 }
 
+@-webkit-keyframes circular-loading-65 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(54deg);
+  }
+}
+
 @keyframes circular-loading-65 {
   0% {
     transform: rotate(0deg);
@@ -197,6 +245,15 @@
   }
 }
 
+@-webkit-keyframes circular-loading-70 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(72deg);
+  }
+}
+
 @keyframes circular-loading-70 {
   0% {
     transform: rotate(0deg);
@@ -206,6 +263,15 @@
   }
 }
 
+@-webkit-keyframes circular-loading-75 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(90deg);
+  }
+}
+
 @keyframes circular-loading-75 {
   0% {
     transform: rotate(0deg);
@@ -215,6 +281,15 @@
   }
 }
 
+@-webkit-keyframes circular-loading-80 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(108deg);
+  }
+}
+
 @keyframes circular-loading-80 {
   0% {
     transform: rotate(0deg);
@@ -224,6 +299,15 @@
   }
 }
 
+@-webkit-keyframes circular-loading-85 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(126deg);
+  }
+}
+
 @keyframes circular-loading-85 {
   0% {
     transform: rotate(0deg);
@@ -233,6 +317,15 @@
   }
 }
 
+@-webkit-keyframes circular-loading-90 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(144deg);
+  }
+}
+
 @keyframes circular-loading-90 {
   0% {
     transform: rotate(0deg);
@@ -242,6 +335,15 @@
   }
 }
 
+@-webkit-keyframes circular-loading-95 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(162deg);
+  }
+}
+
 @keyframes circular-loading-95 {
   0% {
     transform: rotate(0deg);
@@ -251,6 +353,15 @@
   }
 }
 
+@-webkit-keyframes circular-loading-100 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(180deg);
+  }
+}
+
 @keyframes circular-loading-100 {
   0% {
     transform: rotate(0deg);
@@ -260,6 +371,15 @@
   }
 }
 
+@-webkit-keyframes circular-loading-1 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(180deg);
+  }
+}
+
 @keyframes circular-loading-1 {
   0% {
     transform: rotate(0deg);
@@ -269,6 +389,15 @@
   }
 }
 
+@-webkit-keyframes circular-loading-2 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(144deg);
+  }
+}
+
 @keyframes circular-loading-2 {
   0% {
     transform: rotate(0deg);
@@ -278,6 +407,15 @@
   }
 }
 
+@-webkit-keyframes circular-loading-3 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(90deg);
+  }
+}
+
 @keyframes circular-loading-3 {
   0% {
     transform: rotate(0deg);
@@ -287,6 +425,15 @@
   }
 }
 
+@-webkit-keyframes circular-loading-4 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(36deg);
+  }
+}
+
 @keyframes circular-loading-4 {
   0% {
     transform: rotate(0deg);
@@ -296,6 +443,15 @@
   }
 }
 
+@-webkit-keyframes circular-loading-5 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(126deg);
+  }
+}
+
 @keyframes circular-loading-5 {
   0% {
     transform: rotate(0deg);

static/assets/css/sections/home.css

@@ -14,7 +14,8 @@
   background-attachment: fixed;
   background-position: center;
   transform: scale(1.1);
-  filter: blur(3px);
+  -webkit-filter: blur(3px);
+          filter: blur(3px);
   background-size: cover;
 }
 
@@ -53,7 +54,24 @@
 }
 
 .bounce {
-  animation: bounce 2s infinite;
+  -webkit-animation: bounce 2s infinite;
+          animation: bounce 2s infinite;
+}
+
+@-webkit-keyframes bounce {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-30px);
+  }
+  60% {
+    transform: translateY(-15px);
+  }
 }
 
 @keyframes bounce {

static/assets/css/sections/skills.css

@@ -1,5 +1,7 @@
 .skills-section .card .card-head {
   background-color: #f9fafc;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
   height: fit-content;
   padding: 0.7rem;
   padding-bottom: 0rem;