Add some dumb JS positioning logic

static/css/theme.css

@@ -40,7 +40,6 @@ body {
     font-family: 'Nunito', sans-serif;
     font-size: 16px;
     line-height: 1.3;
-    transition: all linear .2s;
     color: var(--text-color);
     background-color: var(--bg-color);
 }
@@ -53,7 +52,7 @@ body {
 
 a {
     color: var(--link-color);
-    transition: all linear .1s;
+    transition: color linear .1s;
 }
 
 a:hover {

static/js/main.js

@@ -52,7 +52,50 @@ function addWeirdLogicThatSomeGeeksWillUseOnceAndForget() {
     });
 }
 
+function useSmartTooltipPositioning() {
+    // This handler is trying to keep the tooltip card on the screen
+    // so that it doesn't go beyond its borders if it's enough space nearby
+    const preservedMargin = 10;
+    const defaultTop = -100;
+    const screenWidth = (window.innerWidth || screen.width);
+    const screenHeight = (window.innerHeight || screen.height || document.documentElement.clientHeight);
+    if (screenWidth <= 750) return; // disable on small screens
+
+    let articles = document.querySelectorAll(".article");
+    for (let i = 0; i < articles.length; i++) {
+        articles[i].addEventListener("mouseover", smartPosition);
+    }
+
+    function smartPosition(e) {
+        let tooltip = document.querySelector(".article:hover .article-tooltip");
+        let bounding = tooltip.getBoundingClientRect();
+        let topDelta = 0;
+
+        if (bounding.bottom > screenHeight) {
+            // card's bottom is below the screen border
+            if (bounding.height <= screenHeight) {
+                topDelta = screenHeight - bounding.bottom - preservedMargin;
+            } else {
+                // card is too long to fit the screen, just stick it to the top
+                topDelta = preservedMargin - bounding.top;
+            }
+        }
+
+        if (bounding.top < 0) {
+            // card's top is above the screen border
+            topDelta = preservedMargin - bounding.top;
+        }
+
+        if (topDelta !== 0) {
+            // compensate position by adding delta to the current 'top' value
+            let currentTop = parseInt(tooltip.style.top || defaultTop, 10);
+            tooltip.style.top = (currentTop + topDelta) + "px";
+        }
+    }
+}
+
 
 initializeThemeSwitcher();
 hideTooltipOnAnyClick();
+useSmartTooltipPositioning();
 addWeirdLogicThatSomeGeeksWillUseOnceAndForget();