diff --git a/css/styles.scss b/css/styles.scss
index 25a690e..78c487d 100644
--- a/css/styles.scss
+++ b/css/styles.scss
@@ -34,6 +34,28 @@ span.muted, s {
color: #a8a8a8;
}
+a {
+ color: #d78453;
+ text-decoration: none;
+
+ &.icon {
+ display: flex;
+ align-items: center;
+ gap: 7px;
+
+ img, svg {
+ --hw: 23px;
+ height: var(--hw);
+ width: var(--hw);
+ min-width: var(--hw);
+ }
+ }
+
+ &:hover {
+ text-decoration: underline;
+ }
+}
+
#map-container {
display: flex;
position: relative;
@@ -110,7 +132,7 @@ span.muted, s {
font-size: 26px;
}
- a {
+ a.titlelink {
color: #fff;
text-decoration: none;
diff --git a/img/icons/book.svg b/img/icons/book.svg
new file mode 100644
index 0000000..0fa101a
--- /dev/null
+++ b/img/icons/book.svg
@@ -0,0 +1,8 @@
+
+
+
+
\ No newline at end of file
diff --git a/js/tooltip.js b/js/tooltip.js
index 117e9f6..05cc60b 100644
--- a/js/tooltip.js
+++ b/js/tooltip.js
@@ -29,16 +29,24 @@ document.addEventListener("DOMContentLoaded", () => {
if (currentTooltipContent) tooltip.style.display = 'flex';
const tooltipWidth = tooltip.offsetWidth;
+ const tooltipHeight = tooltip.offsetHeight;
const screenWidth = window.innerWidth;
+ const screenHeight = window.innerHeight;
+ // Default positioning (to the right and below the cursor)
let tooltipX = e.pageX + 10;
- const tooltipY = e.pageY + 10;
+ let tooltipY = e.pageY + 10;
+ // Horizontal Overflow (Check if tooltip overflows on the right side)
if (tooltipX + tooltipWidth > screenWidth) {
tooltipX = e.pageX - tooltipWidth - 10;
}
- // Position the tooltip
+ // Vertical Overflow (Check if tooltip overflows at the bottom)
+ if (tooltipY + tooltipHeight > screenHeight) {
+ tooltipY = e.pageY - tooltipHeight - 10;
+ }
+
tooltip.style.left = `${tooltipX}px`;
tooltip.style.top = `${tooltipY}px`;
@@ -106,7 +114,8 @@ function getRegionTooltip(element) {
const regionRuler = element.getAttribute('data-ruler');
const url = element.getAttribute('data-url');
- let data = url ? `${regionName} ${regionName} `;
+ // let data = url ? `${regionName} ${regionName} `;
+ let data = `${regionName} `;
data += `
`;
@@ -135,6 +144,8 @@ function getRegionTooltip(element) {
`;
+ if (url) data += `${locationName} ${locationName} `;
+ // let locationString = url ? `${locationName} ${locationName} `;
+ let locationString = `${locationName} `;
if (locationDescription) locationString += `
`;
if (locationDescription) locationString += `${locationDescription} `;
+ if (url) locationString += `
Wiki