the home site for me: also iteration 3 or 4 of my site
feat: break the time into a new line if too long
+27
-1
+15
sass/css/mods.css
+15
sass/css/mods.css
···
345
345
text-decoration: none;
346
346
}
347
347
348
+
.bubble > span {
349
+
display: flex;
350
+
flex-wrap: wrap;
351
+
justify-content: center;
352
+
gap: 0 0.3em;
353
+
}
354
+
355
+
#time-ago-wrap {
356
+
white-space: nowrap;
357
+
}
358
+
359
+
#time-ago-wrap.wrapped .time-dash {
360
+
display: none;
361
+
}
362
+
348
363
#time-ago {
349
364
font-weight: normal;
350
365
font-size: 0.8rem;
+12
-1
templates/shortcodes/is.md
+12
-1
templates/shortcodes/is.md
···
1
1
<div class="bubble" style="visibility: hidden; opacity: 0;">
2
-
<span><a href="https://bsky.app/@doing.dunkirk.sh" id="verb-link">Kieran is</a> <i id="status-text"></i> - <time id="time-ago" datetime="" data-max-age="43200"></time></span>
2
+
<span><a href="https://bsky.app/@doing.dunkirk.sh" id="verb-link">Kieran is</a> <i id="status-text"></i><span id="time-ago-wrap"><span class="time-dash"> - </span><time id="time-ago" datetime="" data-max-age="43200"></time></span></span>
3
3
</div>
4
4
5
5
<script>
···
49
49
bubble.style.transform = "none";
50
50
bubble.style.opacity = "1";
51
51
}
52
+
checkTimeWrap();
52
53
}
53
54
}
54
55
})
···
56
57
console.error("Error fetching status update:", error);
57
58
});
58
59
}
60
+
function checkTimeWrap() {
61
+
const wrap = document.getElementById("time-ago-wrap");
62
+
const statusText = document.getElementById("status-text");
63
+
if (wrap && statusText) {
64
+
const wrapTop = wrap.getBoundingClientRect().top;
65
+
const statusTop = statusText.getBoundingClientRect().top;
66
+
wrap.classList.toggle("wrapped", wrapTop > statusTop);
67
+
}
68
+
}
59
69
document.addEventListener("DOMContentLoaded", fetchStatus);
70
+
window.addEventListener("resize", checkTimeWrap);
60
71
setInterval(fetchStatus, 3600000);
61
72
</script>