(feat): added hoverable project info tooltip card

htdocs/assets/_integrate.php

@@ -4,6 +4,7 @@
 <link rel="stylesheet" href="assets/style.css">
 <link rel="stylesheet" href="assets/extra-style.css">
 <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/shift-away.css">
+<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/scale-subtle.css"/>
 <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
 <link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js" integrity="sha512-uKQ39gEGiyUJl4AI6L+ekBdGKpGw4xJ55+xyJG7YFlJokPNYegn9KwQ3P8A7aFQAUtUsAQHep+d/lrGqrbPIDQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

htdocs/assets/js/tippy-config.js

@@ -34,3 +34,16 @@ tippy('#shareclosebutton', {
   touch: false
 });
 
+tippy('.projectitem', {
+  content(reference) {
+    const projectId = reference.getAttribute('data-template');
+    const projectTippyTemplate = document.getElementById(projectId);
+    return projectTippyTemplate.innerHTML;
+  },
+  allowHTML: true,
+  placement: 'right',
+  theme: 'neosubhamoy',
+  animation: 'scale-subtle',
+  touch: false
+});
+

htdocs/assets/style.css

@@ -610,6 +610,10 @@ video {
   bottom: 0px;
 }
 
+.bottom-2 {
+  bottom: 0.5rem;
+}
+
 .bottom-\[-10rem\] {
   bottom: -10rem;
 }
@@ -674,6 +678,10 @@ video {
   top: 0px;
 }
 
+.top-2 {
+  top: 0.5rem;
+}
+
 .top-3 {
   top: 0.75rem;
 }
@@ -1034,6 +1042,10 @@ video {
   height: 2.5rem;
 }
 
+.h-2 {
+  height: 0.5rem;
+}
+
 .h-20 {
   height: 5rem;
 }
@@ -1099,6 +1111,14 @@ video {
   height: 100vh;
 }
 
+.h-3 {
+  height: 0.75rem;
+}
+
+.h-4 {
+  height: 1rem;
+}
+
 .max-h-\[45vh\] {
   max-height: 45vh;
 }
@@ -1204,6 +1224,14 @@ video {
   width: 100vw;
 }
 
+.w-3 {
+  width: 0.75rem;
+}
+
+.w-4 {
+  width: 1rem;
+}
+
 .max-w-\[45vw\] {
   max-width: 45vw;
 }
@@ -1538,6 +1566,10 @@ video {
   background-color: rgba(249, 115, 22, 0.2);
 }
 
+.bg-\[rgba\(255\2c 255\2c 255\2c 0\.15\)\] {
+  background-color: rgba(255,255,255,0.15);
+}
+
 .bg-\[rgba\(255\2c _255\2c _255\2c _0\.25\)\] {
   background-color: rgba(255, 255, 255, 0.25);
 }
@@ -1574,6 +1606,35 @@ video {
   background-color: rgb(30 41 59 / var(--tw-bg-opacity));
 }
 
+.bg-bg_third {
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 51 74 / var(--tw-bg-opacity));
+}
+
+.bg-\[rgba\(0\2c 0\2c 0\2c 0\.15\)\] {
+  background-color: rgba(0,0,0,0.15);
+}
+
+.bg-\[rgba\(0\2c 0\2c 0\2c 0\.20\)\] {
+  background-color: rgba(0,0,0,0.20);
+}
+
+.bg-\[rgba\(255\2c 255\2c 255\2c 0\.2\)\] {
+  background-color: rgba(255,255,255,0.2);
+}
+
+.bg-\[rgba\(0\2c 0\2c 0\2c 0\.2\)\] {
+  background-color: rgba(0,0,0,0.2);
+}
+
+.bg-\[rgba\(56\2c 189\2c 248\2c 0\.5\)\] {
+  background-color: rgba(56,189,248,0.5);
+}
+
+.bg-\[rgba\(56\2c 189\2c 248\2c 0\.7\)\] {
+  background-color: rgba(56,189,248,0.7);
+}
+
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
@@ -1832,14 +1893,6 @@ video {
   text-transform: lowercase;
 }
 
-.leading-relaxed {
-  line-height: 1.625;
-}
-
-.leading-loose {
-  line-height: 2;
-}
-
 .text-\[rgb\(22\2c _163\2c _74\)\] {
   --tw-text-opacity: 1;
   color: rgb(22 163 74 / var(--tw-text-opacity));
@@ -1905,6 +1958,10 @@ video {
   opacity: 0.5;
 }
 
+.opacity-\[0\.70\] {
+  opacity: 0.70;
+}
+
 .opacity-\[0\.75\] {
   opacity: 0.75;
 }