/* ════════════════════════════════════════════════════════════════ JCRUEDA.COM — Hoja de estilos compartida Gruvbox Dark · estética terminal/nano Estructura: - Tokens y reset comunes a todo el sitio - Componentes comunes (barras top/status, items de menú, enlaces) - .is-index → layout de pantalla fija sin scroll (página índice) - .is-article → layout de lectura con scroll (páginas de artículo) Cada debe declarar UNA de esas dos clases de scope. ════════════════════════════════════════════════════════════════ */ /* ── Tokens de color (Gruvbox Dark) ── */ :root{ --bg:#1d2021; /* gris cálido muy oscuro */ --fg:#ebdbb2; /* crema/pergamino: texto principal */ --inv-bg:#ebdbb2; /* selección/hover: fondo claro */ --inv-fg:#1d2021; /* selección/hover: texto oscuro */ --dim:#a89984; /* gris-arena: secundario */ --hdr:#d5c4a1; /* barras superior/inferior */ --status:#d5c4a1; --link:#83a598; /* azul-verdoso */ --link-hover:#fbf1c7; /* crema casi blanco */ --accent:#b8bb26; /* verde-lima: encabezados, marcadores */ --accent2:#fabd2f; /* ámbar: título de artículo, énfasis cálido */ --rule:#3c3836; /* líneas/divisores */ --code-bg:#282828; /* fondo de bloques de código */ --quote:#fe8019; /* naranja: barra de cita */ --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace; } /* ── Reset común ── */ *, *::before, *::after{ box-sizing:border-box; } body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--mono); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } ::selection{ background:rgba(235,219,178,.30); } /* ════════════════════════════════════════════════════════════════ BARRAS SUPERIOR E INFERIOR (comunes; .status del índice incluida) ════════════════════════════════════════════════════════════════ */ .topbar, .statusbar, .status{ background:var(--hdr); color:var(--inv-fg); padding:6px 12px; font-size:10pt; line-height:1.1; display:flex; gap:10px; align-items:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:0 0 auto; } .topbar .left{ font-weight:700; } .topbar .mid{ opacity:.95; overflow:hidden; text-overflow:ellipsis; } .topbar .right{ margin-left:auto; opacity:.9; font-weight:600; } .topbar .right a{ color:inherit; text-decoration:none; } .topbar .right a:hover{ text-decoration:underline; } /* Botón "volver" de la topbar (artículos) */ .topbar .back{ color:var(--inv-fg); text-decoration:none; font-weight:600; opacity:.85; border:1px solid rgba(29,32,33,.35); border-radius:3px; padding:0 6px; } .topbar .back:hover{ opacity:1; background:rgba(29,32,33,.10); } /* Barra de estado: índice usa .status; artículo usa .statusbar */ .status .msg, .statusbar .msg{ font-weight:700; overflow:hidden; text-overflow:ellipsis; } .status .help, .statusbar .help{ margin-left:auto; font-weight:600; opacity:.95; } .statusbar a{ color:inherit; text-decoration:none; } .statusbar a:hover{ text-decoration:underline; } /* ════════════════════════════════════════════════════════════════ SCOPE: ÍNDICE (pantalla fija, sin scroll de página) ════════════════════════════════════════════════════════════════ */ .is-index{ height:100%; width:100%; } .is-index body{ height:100%; width:100%; overflow:hidden; font-size:10pt; line-height:1.25; } .is-index .frame{ width:100vw; height:100dvh; height:100vh; display:flex; flex-direction:column; overflow:hidden; } .is-index .editor{ flex:1 1 auto; padding:10px 12px 8px 12px; overflow:auto; outline:none; white-space:normal; } /* Las barras del índice se colocan por el flex del .frame (no sticky) */ .is-index .topbar{ position:static; } /* ── Cabecera ASCII (retrato + banner de guiones) ── */ .is-index .block{ margin:0 0 11px 0; padding:0; } .ascii{ white-space:pre; margin:0 0 6px 0; color:var(--fg); } .ascii.wordmark{ color:var(--fg); } .portrait-banner{ overflow:hidden; margin:0 0 8px 0; } .ascii.portrait{ color:var(--dim); opacity:.85; line-height:1.0; font-size:clamp(2.8px, 1.25vw, 6px); margin:0; white-space:pre; } .tagline{ color:var(--fg); } .tagline a{ color:var(--link); text-decoration:none; } .tagline a:hover{ color:var(--link-hover); text-decoration:underline; } /* ── Reglas/divisores de texto del índice ── */ .rule{ margin:10px 0; color:var(--dim); white-space:pre; } /* ── Secciones y menús ── */ .section{ margin:14px 0 10px 0; } .section-title{ color:var(--fg); font-weight:800; letter-spacing:.2px; } .menu{ margin:6px 0 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:2px; } .item__a{ display:flex; align-items:baseline; gap:10px; padding:2px 4px; border-radius:3px; cursor:pointer; user-select:none; text-decoration:none; color:inherit; } .item .code{ width:7.2ch; flex:0 0 auto; color:var(--dim); white-space:nowrap; } .item .label{ flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .item .where{ flex:0 0 auto; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:38vw; } /* selección (teclado) y hover (ratón) */ .item.selected > .item__a, a.item__a:hover{ background:var(--inv-bg); color:var(--inv-fg); } .item.selected > .item__a .code, .item.selected > .item__a .where, a.item__a:hover .code, a.item__a:hover .where{ color:var(--inv-fg); opacity:.85; } /* nolink (próximamente) */ .item.nolink .item__a{ cursor:default; } .item.nolink .label{ opacity:.7; } .soon{ color:var(--dim); } /* Pie del índice */ .footer{ margin-top:14px; color:var(--dim); line-height:1.25; } .footer a{ color:var(--link); text-decoration:none; } .footer a:hover{ color:var(--link-hover); text-decoration:underline; } /* ════════════════════════════════════════════════════════════════ SCOPE: ARTÍCULO (lectura con scroll, columna de medida cómoda) ════════════════════════════════════════════════════════════════ */ .is-article{ font-size:10.5pt; line-height:1.75; } html{ scroll-behavior:smooth; } .is-article .topbar{ position:sticky; top:0; z-index:10; } .is-article .statusbar{ position:sticky; bottom:0; z-index:10; } .reader{ max-width:74ch; margin:0 auto; padding:26px 20px 60px; } .art-head{ margin:0 0 22px; } .crumb{ color:var(--dim); font-size:10pt; margin-bottom:14px; } .crumb a{ color:var(--link); text-decoration:none; } .crumb a:hover{ color:var(--link-hover); text-decoration:underline; } h1.art-title{ font-size:1em; /* mismo cuerpo que el texto */ font-weight:700; line-height:1.4; color:var(--accent2); margin:0 0 10px; letter-spacing:.2px; } .meta{ display:flex; flex-wrap:wrap; gap:6px 16px; color:var(--dim); font-size:9.5pt; padding-bottom:14px; border-bottom:1px solid var(--rule); } .meta .k{ color:var(--fg); opacity:.8; } .meta .code{ color:var(--accent); } /* ── Abstract + keywords ── */ .abstract{ margin:22px 0 6px; padding:14px 16px; border:1px solid var(--rule); border-left:3px solid var(--accent); border-radius:4px; background:rgba(184,187,38,.04); } .abstract .lbl{ color:var(--accent); font-weight:700; letter-spacing:.3px; margin-bottom:.4em; } .abstract p{ color:var(--fg); margin:0; } .keywords{ margin:10px 0 0; color:var(--dim); font-size:.92em; } .keywords .lbl{ color:var(--fg); opacity:.8; font-weight:700; } /* ── Cuerpo del artículo ── */ .body{ margin-top:26px; } .body > *{ margin:0 0 1.15em; } /* Encabezados: mismo tamaño, diferenciados por peso + color */ .body h2{ font-size:1em; font-weight:700; color:var(--accent); margin:1.8em 0 .7em; letter-spacing:.2px; } .body h3{ font-size:1em; font-weight:700; color:var(--fg); margin:1.4em 0 .5em; } .body p{ color:var(--fg); } .body a{ color:var(--link); text-decoration:none; border-bottom:1px solid var(--rule); } .body a:hover{ color:var(--link-hover); border-bottom-color:var(--link-hover); } .body strong{ color:var(--accent2); font-weight:700; } .body em{ color:var(--fg); font-style:italic; } /* Citas */ .body blockquote{ border-left:3px solid var(--quote); padding:.2em 0 .2em 1em; margin:1.4em 0; color:var(--dim); } .body blockquote p{ color:var(--dim); } .body blockquote cite{ display:block; margin-top:.4em; color:var(--fg); opacity:.7; font-style:normal; font-size:.9em; } .body blockquote cite::before{ content:"— "; } /* Código */ .body code{ background:var(--code-bg); color:var(--accent2); padding:.1em .4em; border-radius:3px; font-size:.95em; } .body pre{ background:var(--code-bg); border:1px solid var(--rule); border-radius:6px; padding:14px 16px; overflow-x:auto; line-height:1.5; } .body pre code{ background:none; color:var(--fg); padding:0; font-size:.95em; } /* Listas */ .body ul, .body ol{ padding-left:1.6em; } .body li{ margin:.4em 0; } .body ul li::marker{ content:"– "; color:var(--accent); } .body ol li::marker{ color:var(--accent); } /* Tablas */ .body table{ border-collapse:collapse; width:100%; font-size:.95em; } .body th, .body td{ border:1px solid var(--rule); padding:6px 10px; text-align:left; } .body th{ color:var(--accent); font-weight:700; } /* Imágenes */ .body figure{ margin:1.6em 0; } .body img{ max-width:100%; height:auto; display:block; border:1px solid var(--rule); border-radius:4px; } .body figcaption{ color:var(--dim); font-size:.88em; margin-top:.5em; text-align:center; } /* Divisor estilo terminal */ .body hr, .sep{ border:none; color:var(--rule); overflow:hidden; white-space:nowrap; margin:2em 0; } .sep::before{ content:"--------------------------------------------------------------------------------"; color:var(--rule); } /* Referencias / notas al pie */ .footnotes{ margin-top:2.5em; padding-top:1.2em; border-top:1px solid var(--rule); font-size:.9em; color:var(--dim); } .footnotes .lbl{ color:var(--accent); font-weight:700; letter-spacing:.3px; margin-bottom:.6em; } .footnotes ol{ padding-left:1.6em; margin:0; } .footnotes li{ margin:.35em 0; } .footnotes a{ color:var(--link); text-decoration:none; } .footnotes a:hover{ color:var(--link-hover); text-decoration:underline; } /* Referencia inline (superíndice) */ .ref{ color:var(--accent); font-size:.8em; vertical-align:super; line-height:0; } .ref a{ color:var(--accent); text-decoration:none; border:none; } /* Pie de navegación del artículo */ .art-foot{ margin-top:2.5em; padding-top:1.4em; border-top:1px solid var(--rule); color:var(--dim); font-size:9.5pt; line-height:1.7; } .art-foot a{ color:var(--link); text-decoration:none; } .art-foot a:hover{ color:var(--link-hover); text-decoration:underline; } .art-foot .back::before{ content:"‹ "; } /* ════════════════════════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════════════════════════ */ @media (max-width:560px){ .reader{ padding:20px 14px 48px; } .meta{ font-size:9pt; } .is-article .topbar .mid{ display:none; } } @media (max-width:520px){ .item .where{ display:none; } .item .code{ width:6.6ch; } }