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

portada: reticula mas visible (#2a2a2a), alineacion flip (izq=left, der=right), mas grande y espaciado

Browse Source
This commit is contained in:
Sergio
2026-05-24 02:35:46 +00:00
parent 05f916a7d1
commit 69a01460a3
1 changed files with 54 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crates/apps/gioser-web/styles.css
+54 -22
View File
@@ -18,10 +18,10 @@
--fg-bright: #e0e0e0; --fg-bright: #e0e0e0;
--accent: #a0a0a0; --accent: #a0a0a0;
--accent-glow: #c0c0c0; --accent-glow: #c0c0c0;
--reticula: #1a1a1a; --reticula: #2a2a2a;
--reticula-hover: rgba(192, 192, 192, 0.15); --reticula-hover: rgba(192, 192, 192, 0.12);
--border: #222; --border: #2a2a2a;
--border-hover: #444; --border-hover: #555;
--font: 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; --font: 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
--font-ui: -apple-system, 'Inter', 'Segoe UI', sans-serif; --font-ui: -apple-system, 'Inter', 'Segoe UI', sans-serif;
} }
@@ -67,7 +67,7 @@ html, body {
.reticula-v.brighter { .reticula-v.brighter {
background: rgba(192, 192, 192, 0.35); background: rgba(192, 192, 192, 0.35);
box-shadow: 0 0 6px rgba(192, 192, 192, 0.2); box-shadow: -2px 0 8px rgba(192, 192, 192, 0.18), 2px 0 8px rgba(192, 192, 192, 0.18);
} }
.reticula-h { .reticula-h {
@@ -84,7 +84,7 @@ html, body {
.reticula-h.brighter { .reticula-h.brighter {
background: rgba(192, 192, 192, 0.35); background: rgba(192, 192, 192, 0.35);
box-shadow: 0 0 6px rgba(192, 192, 192, 0.2); box-shadow: 0 -2px 8px rgba(192, 192, 192, 0.18), 0 2px 8px rgba(192, 192, 192, 0.18);
} }
.reticula-center { .reticula-center {
@@ -97,12 +97,14 @@ html, body {
border-radius: 50%; border-radius: 50%;
z-index: 2; z-index: 2;
pointer-events: none; pointer-events: none;
transition: border-color 0.4s ease, box-shadow 0.4s ease; transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
background: transparent;
} }
.reticula-center.brighter { .reticula-center.brighter {
border-color: rgba(192, 192, 192, 0.3); border-color: rgba(192, 192, 192, 0.35);
box-shadow: 0 0 8px rgba(192, 192, 192, 0.15); box-shadow: 0 0 10px rgba(192, 192, 192, 0.2);
background: rgba(192, 192, 192, 0.04);
} }
/* =================================================== /* ===================================================
@@ -147,13 +149,24 @@ html, body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; padding: 40px 32px;
text-align: center;
padding: 32px 20px;
opacity: 0.7; opacity: 0.7;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
} }
/* Alineación: cuadrantes izquierda miran a la izquierda, derecha a la derecha */
.cuadrante-01 .cuadrante-content,
.cuadrante-02 .cuadrante-content {
align-items: flex-start;
text-align: left;
}
.cuadrante-00 .cuadrante-content,
.cuadrante-03 .cuadrante-content {
align-items: flex-end;
text-align: right;
}
.cuadrante:hover .cuadrante-content { .cuadrante:hover .cuadrante-content {
opacity: 1; opacity: 1;
} }
@@ -168,29 +181,48 @@ html, body {
} }
.cuadrante-title { .cuadrante-title {
font-size: 15px; font-size: 17px;
font-weight: 600; font-weight: 600;
color: var(--fg-bright); color: var(--fg-bright);
letter-spacing: 0.05em; letter-spacing: 0.06em;
margin-bottom: 8px; margin-bottom: 12px;
font-family: var(--font-ui); font-family: var(--font-ui);
} }
.cuadrante-context { .cuadrante-context {
font-size: 12px; font-size: 13px;
color: var(--fg-dim); color: var(--fg-dim);
line-height: 1.5; line-height: 1.6;
margin-bottom: 12px; margin-bottom: 16px;
max-width: 75%; max-width: 70%;
font-family: var(--font-ui); font-family: var(--font-ui);
text-align: center; }
.cuadrante-01 .cuadrante-context,
.cuadrante-02 .cuadrante-context {
text-align: left;
}
.cuadrante-00 .cuadrante-context,
.cuadrante-03 .cuadrante-context {
text-align: right;
} }
.cuadrante-meta { .cuadrante-meta {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 14px;
margin-bottom: 8px; margin-bottom: 12px;
}
.cuadrante-01 .cuadrante-meta,
.cuadrante-02 .cuadrante-meta {
flex-direction: row;
}
.cuadrante-00 .cuadrante-meta,
.cuadrante-03 .cuadrante-meta {
flex-direction: row-reverse;
} }
.meta-cta { .meta-cta {