.
Emulate figure/figcaption behavior by displaying the title attribute as caption.
Uses ::after pseudo-element to display caption without modifying markup. */
a[title]:has(img)::after {
content: attr(title);
display: block;
text-align: center;
font-size: 75%;
}
/* === TOOLTIP HOVER === */
/* Spans with title attributes are styled as interactive help text.
Dotted underline indicates hoverability; cursor changes to help icon. */
span[title] {
border-bottom: 1px dotted #666;
cursor: help;
position: relative; /* Positions tooltip pseudo-elements */
background-color: color-mix(in srgb, yellow 20%, transparent);
padding: 0.1em 0.2em;
border-radius: 3px;
}
/* Nested tooltips compound background colors to indicate depth.
Each level becomes progressively darker to show hierarchy. */
span[title] span[title] {
background-color: color-mix(in srgb, orange 25%, transparent);
}
span[title] span[title] span[title] {
background-color: color-mix(in srgb, darkorange 30%, transparent);
}
/* Custom tooltip appears above element on hover.
Uses pseudo-elements to avoid JavaScript and maintain accessibility. */
span[title]:hover::after {
content: attr(title); /* Display title attribute content */
position: absolute;
bottom: 100%; /* Position above element */
left: 50%;
transform: translateX(-50%); /* Center horizontally */
padding: 0.5em 0.75em;
background: #333;
color: white;
font-size: 0.7em;
white-space: nowrap; /* Prevent line breaks in tooltip */
border-radius: 4px;
margin-bottom: 0.5em; /* Space between element and tooltip */
z-index: 1000; /* Appear above other content */
box-shadow: 0 2px 8px color-mix(in srgb, black 30%, transparent);
}
/* Downward-pointing triangle arrow connects tooltip to element.
Creates visual relationship between tooltip and trigger. */
span[title]:hover::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #333; /* Only top border visible, forming triangle */
z-index: 1000;
}
/* === CALLOUT/TOOLTIP BOXES === */
/* Expandable "thinking" callout in top-right corner.
Collapsed state shows only emoji; expands on hover to reveal full content. */
div.call {
position: absolute;
z-index: 2; /* Above most content but below modals */
top: 50px;
right: 10px;
height: 1.5em;
width: 4em;
overflow: hidden; /* Clips content in collapsed state */
transition: transform 1.2s; /* Smooth expansion animation */
}
/* Thinking emoji (🤔) indicates expandable content.
Grayscale reduces visual prominence until hover. */
div.call::before {
content: "🤔";
opacity: 1.0;
filter: grayscale(80%);
}
/* Compact text formatting for callout content */
div.call p,
div.call ul {
list-style: inside;
font-size: 90%;
}
/* Expanded state on hover: reveals full content with scroll if needed.
Transform scale creates subtle zoom effect for attention. */
div.call:hover {
overflow: auto; /* Enable scrolling for long content */
transform: scale(1.1);
width: auto;
height: auto;
max-width: 600px;
max-height: 300px;
background-color: var(--callout-bg);
padding: 10px;
padding-right: 25px; /* Extra padding for scrollbar */
border: solid 1px #555;
box-shadow: 10px 10px 5px var(--shadow-dark);
border-radius: 25px;
}
/* === Photo Album === */
/* 1. The Container */
.photo-album {
display: grid;
/* Auto-fill tiles: roughly 150px wide, fitting as many as possible */
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 1rem;
align-items: end; /* Aligns images to the bottom if aspect ratios differ */
}
/* Handle if Markdown parser wraps the HTML in a tag inside the div */
.photo-album p {
display: contents; /* Removes the
from the layout calculation */
}
/* 2. The Items (The Links) */
.photo-album a {
display: flex;
flex-direction: column; /* Stack image on top, text on bottom */
align-items: center;
text-decoration: none;
border: none !important; /* Remove reveal.js link borders */
}
.photo-album img {
margin: 0 !important;
max-width: 100%;
max-height: 120px; /* Keep images from getting too tall */
object-fit: contain;
}
/* 3. The Caption Extraction */
.photo-album a::after {
content: attr(title); /* <--- The magic part */
display: block;
font-size: 0.4em;
line-height: 1.2;
margin-top: 5px;
text-align: center;
color: #666; /* Muted color for credits */
/* Truncate long credits (like the CC BY-SA one) */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* === ACCESSIBILITY === */
/* Respect user preference for reduced motion.
Disables animations for users with vestibular disorders or motion sensitivity. */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important; /* Near-instant */
animation-iteration-count: 1 !important; /* Single iteration only */
transition-duration: 0.01ms !important; /* Near-instant */
}
}