commit 6ae81da75a5ce258ce5feccdd329bcec646c1a33
parent d531403067d28a845f75bb2791262d73286771fa
Author: Pablo Murad <pablo@pablomurad.com>
Date: Sat, 21 Mar 2026 18:49:20 -0300
small patch on mail and landingpage
Diffstat:
3 files changed, 33 insertions(+), 18 deletions(-)
diff --git a/site/public/assets/app.js b/site/public/assets/app.js
@@ -1,7 +1,8 @@
/**
* Landing runv.club — carrega members.json (só dados públicos) e coloca
* pontos clicáveis (links) fora da coluna de texto; brilho ligado à data since.
- * Posições fixas no viewport (não recalculam ao scroll); zona central alinhada à .wrap.
+ * Pontos com position:fixed no viewport (filhos de body); zona central sintética como .wrap.
+ * Não recalculam ao scroll — só em resize.
* Array vazio: sem estrelas até build_directory.py gerar o JSON a partir de users.json.
*/
@@ -130,10 +131,8 @@ function isStarfieldMobileViewport() {
return window.matchMedia("(max-width: 768px)").matches;
}
-function renderStarLinks(container, members) {
- if (!container) return;
-
- container.replaceChildren();
+function renderStarLinks(members) {
+ document.querySelectorAll("a.star-member").forEach((el) => el.remove());
if (isStarfieldMobileViewport()) {
return;
@@ -162,13 +161,11 @@ function renderStarLinks(container, members) {
const scale = 0.78 + bright * 0.42;
a.style.setProperty("--star-scale", String(scale));
- container.appendChild(a);
+ document.body.appendChild(a);
}
}
async function main() {
- const starRoot = document.getElementById("starfield");
-
let members = [];
try {
@@ -182,10 +179,9 @@ async function main() {
let starRaf = 0;
const scheduleStars = () => {
- if (!starRoot) return;
cancelAnimationFrame(starRaf);
starRaf = requestAnimationFrame(() => {
- renderStarLinks(starRoot, members);
+ renderStarLinks(members);
});
};
diff --git a/site/public/assets/style.css b/site/public/assets/style.css
@@ -17,7 +17,6 @@
html {
scroll-behavior: smooth;
- overflow-x: hidden;
max-width: 100%;
}
@@ -25,7 +24,6 @@ body {
margin: 0;
min-height: 100vh;
max-width: 100%;
- overflow-x: hidden;
font-family: "Atkinson Hyperlegible", Georgia, serif;
font-size: 1.05rem;
line-height: 1.6;
@@ -37,6 +35,20 @@ body {
background-size: 24px 24px;
}
+/* Overflow horizontal só no fluxo da página — evita interferir com camadas fixed no body. */
+.page-root {
+ position: relative;
+ z-index: 1;
+ overflow-x: clip;
+ max-width: 100%;
+}
+
+@supports not (overflow: clip) {
+ .page-root {
+ overflow-x: hidden;
+ }
+}
+
.visually-hidden {
position: absolute;
width: 1px;
@@ -52,9 +64,12 @@ body {
.starfield-root {
position: fixed;
inset: 0;
+ width: 100vw;
+ height: 100vh;
+ height: 100dvh;
z-index: 0;
pointer-events: none;
- overflow: hidden;
+ overflow: visible;
}
/* Membros como pontos: só em ecrãs largos (em mobile o texto ocupa o viewport). */
@@ -66,16 +81,18 @@ body {
.star-member {
--star-scale: 1;
- position: absolute;
+ position: fixed;
+ z-index: 0;
width: 10px;
height: 10px;
- margin: 0;
+ margin: -5px 0 0 -5px;
padding: 0;
border: none;
border-radius: 50%;
pointer-events: auto;
cursor: pointer;
- transform: translate(-50%, -50%) scale(var(--star-scale));
+ transform: scale(var(--star-scale));
+ transform-origin: center;
text-indent: -9999px;
overflow: hidden;
white-space: nowrap;
@@ -88,7 +105,7 @@ body {
.star-member:focus-visible {
opacity: 1;
outline: none;
- transform: translate(-50%, -50%) scale(calc(var(--star-scale) * 1.1));
+ transform: scale(calc(var(--star-scale) * 1.1));
}
.star-member:focus-visible {
diff --git a/site/public/index.html b/site/public/index.html
@@ -26,8 +26,9 @@
<link rel="stylesheet" href="assets/style.css">
</head>
<body>
- <div id="starfield" class="starfield-root"></div>
+ <div id="starfield" class="starfield-root" aria-hidden="true"></div>
+ <div class="page-root">
<div class="wrap">
<header class="hero">
<div class="ascii-block">
@@ -173,6 +174,7 @@
<p>Administração: <a href="mailto:admin@runv.club">admin@runv.club</a><span class="footer-sep" aria-hidden="true"> · </span><a href="/faq/" class="footer-link-discrete">FAQ</a></p>
</footer>
</div>
+ </div>
<script src="assets/app.js" defer></script>
</body>
