Merge pull request #23 from HamletTanyavong/dev

Try to re-add interactive logo
HamletTanyavong · Oct 29, 2023 · 15edccb · 15edccb
2 parents 461a49e + 0ebb120
commit 15edccb
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 1 deletion.
diff --git a/docs/index.md b/docs/index.md
@@ -1,4 +1,47 @@
-<div style="text-align: center">
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+    const interactiveCard = document.getElementById("interactive-card");
+
+    const overlay = document.getElementById("overlay");
+
+    const circleOne = document.getElementById("circle-one");
+    const circleOneRadius = circleOne.offsetWidth / 2;
+
+    const circleTwo = document.getElementById("circle-two");
+    const circleTwoRadius = circleTwo.offsetWidth / 2;
+
+    const circleThree = document.getElementById("circle-three");
+    const circleThreeRadius = circleThree.offsetWidth / 2;
+
+    interactiveCard.addEventListener("mousemove", function (event) {
+        var boundingRectangle = interactiveCard.getBoundingClientRect();
+        var centerX = interactiveCard.clientWidth / 2;
+        var centerY = interactiveCard.clientHeight / 2;
+        var x = event.clientX - boundingRectangle.left - centerX;
+        var y = event.clientY - boundingRectangle.top - centerY;
+
+        var magnitude = Math.hypot(x, y);
+        var maxMagnitude = Math.hypot(centerX, centerY);
+
+        overlay.style.backgroundColor = `rgba(255, 255, 255, ${0.1 * Math.cos(magnitude / maxMagnitude * Math.PI / 2)})`;
+
+        circleOne.style.left = `${x / 2 - circleOneRadius + centerX}px`;
+        circleOne.style.top = `${y / 2 - circleOneRadius + centerY}px`;
+
+        circleTwo.style.left = `${-x - circleTwoRadius + centerX}px`;
+        circleTwo.style.top = `${-y - circleTwoRadius + centerY}px`;
+
+        circleThree.style.left = `${-4 * x - circleThreeRadius + centerX}px`;
+        circleThree.style.top = `${-4 * y - circleThreeRadius + centerY}px`;
+    });
+});
+</script>
+
+<div id="interactive-card">
+    <div id="overlay"></div>
+    <div class="flare" id="circle-one"></div>
+    <div class="flare" id="circle-two"></div>
+    <div class="flare" id="circle-three"></div>
     <img src="https://raw.githubusercontent.com/HamletTanyavong/Mathematics.NET/gh-pages/images/logo/mathematics.net.png" alt="Mathematics.NET Logo">
     <h1>Mathematics.NET</h1>
     <p>Mathematics.NET is a C# class library that provides tools for solving mathematical problems.</p>

diff --git a/docs/template/public/main.css b/docs/template/public/main.css
@@ -13,6 +13,55 @@
   height: 50px;
 }
 
+/* Interactive card */
+
+#interactive-card {
+    position: relative;
+    text-align: center;
+  }
+
+  #interactive-card > .flare,
+  #overlay {
+    position: absolute;
+    transition: ease-out;
+    transition-duration: 250ms;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  #interactive-card:hover > #overlay,
+  #interactive-card:hover > .flare {
+    opacity: 1;
+  }
+
+#overlay {
+  width: 100%;
+  height: 100%;
+}
+
+#circle-one {
+  background-color: #ffffff80;
+  width: 32px;
+  height: 32px;
+  border-radius: 16px;
+}
+
+#circle-two {
+  background-color: #ffd70040;
+  width: 64px;
+  height: 64px;
+  border-radius: 32px;
+}
+
+#circle-three {
+  background-color: #86cefa20;
+  width: 128px;
+  height: 128px;
+  border-radius: 64px;
+}
+
+/* Common */
+
 body {
   background-color: var(--bg-color-primary);
 }