tawasuyu/brahman
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

portada: reticula 3px #777, z-index 30, canvas z-index -1, hover via reticula-lit

Browse Source
This commit is contained in:
Sergio
2026-05-24 02:44:06 +00:00
parent be127def7a
commit de97c34965
2 changed files with 28 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crates/apps/gioser-web/index.html
+7 -7
View File
@@ -9,7 +9,7 @@
</head> </head>
<body> <body>
<!-- Canvas de fondo (opcional para portada, necesario para WASM) --> <!-- Canvas de fondo (opcional para portada, necesario para WASM) -->
<canvas id="gioser-canvas" style="position:fixed;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;z-index:0;" aria-hidden="true"></canvas> <canvas id="gioser-canvas" style="position:fixed;inset:0;width:1px;height:1px;pointer-events:none;z-index:-1;" aria-hidden="true"></canvas>
<!-- Portada: retícula 2×2 tipo chakana --> <!-- Portada: retícula 2×2 tipo chakana -->
<div id="portada" class="portada"> <div id="portada" class="portada">
@@ -159,14 +159,14 @@
// Hover en cuadrantes ilumina retícula // Hover en cuadrantes ilumina retícula
document.querySelectorAll('.cuadrante').forEach(q => { document.querySelectorAll('.cuadrante').forEach(q => {
q.addEventListener('mouseenter', () => { q.addEventListener('mouseenter', () => {
reticulaV.classList.add('brighter'); reticulaV.classList.add('reticula-lit');
reticulaH.classList.add('brighter'); reticulaH.classList.add('reticula-lit');
reticulaC.classList.add('brighter'); reticulaC.classList.add('reticula-lit');
}); });
q.addEventListener('mouseleave', () => { q.addEventListener('mouseleave', () => {
reticulaV.classList.remove('brighter'); reticulaV.classList.remove('reticula-lit');
reticulaH.classList.remove('brighter'); reticulaH.classList.remove('reticula-lit');
reticulaC.classList.remove('brighter'); reticulaC.classList.remove('reticula-lit');
}); });
q.addEventListener('click', function(e) { q.addEventListener('click', function(e) {
const hex = this.dataset.q; const hex = this.dataset.q;
crates/apps/gioser-web/styles.css
+21 -28
View File
@@ -57,18 +57,12 @@ html, body {
position: absolute; position: absolute;
top: 0; top: 0;
left: 50%; left: 50%;
width: 2px; width: 3px;
height: 100%; height: 100%;
background: #444; background: #777;
z-index: 30; z-index: 30;
pointer-events: none; pointer-events: none;
transition: background 0.4s ease, box-shadow 0.4s ease; transform: translateX(-1.5px);
transform: translateX(-0.5px);
}
.reticula-v.brighter {
background: rgba(192, 192, 192, 0.35);
box-shadow: -2px 0 8px rgba(192, 192, 192, 0.18), 2px 0 8px rgba(192, 192, 192, 0.18);
} }
.reticula-h { .reticula-h {
@@ -76,37 +70,36 @@ html, body {
top: 50%; top: 50%;
left: 0; left: 0;
width: 100%; width: 100%;
height: 2px; height: 3px;
background: #444; background: #777;
z-index: 30; z-index: 30;
pointer-events: none; pointer-events: none;
transition: background 0.4s ease, box-shadow 0.4s ease; transform: translateY(-1.5px);
transform: translateY(-0.5px);
}
.reticula-h.brighter {
background: rgba(192, 192, 192, 0.35);
box-shadow: 0 -2px 8px rgba(192, 192, 192, 0.18), 0 2px 8px rgba(192, 192, 192, 0.18);
} }
.reticula-center { .reticula-center {
position: absolute; position: absolute;
top: calc(50% - 14px); top: calc(50% - 16px);
left: calc(50% - 14px); left: calc(50% - 16px);
width: 28px; width: 32px;
height: 28px; height: 32px;
border: 2px solid #444; border: 3px solid #777;
border-radius: 50%; border-radius: 50%;
z-index: 30; z-index: 30;
pointer-events: none; pointer-events: none;
transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
background: transparent; background: transparent;
} }
.reticula-center.brighter { /* Iluminación en hover via JS */
border-color: rgba(192, 192, 192, 0.35); .reticula-lit {
box-shadow: 0 0 10px rgba(192, 192, 192, 0.2); background: rgba(200, 200, 200, 0.5) !important;
background: rgba(192, 192, 192, 0.04); box-shadow: 0 0 12px rgba(200, 200, 200, 0.3) !important;
}
.reticula-center.reticula-lit {
border-color: rgba(200, 200, 200, 0.6) !important;
box-shadow: 0 0 14px rgba(200, 200, 200, 0.35) !important;
background: rgba(200, 200, 200, 0.06) !important;
} }
/* =================================================== /* ===================================================