/* Calcado de WhitePage.astro (regardless.cl), la plantilla que usan sus
posts de "memoria técnica". Cuatro cambios respecto al original:
1. Sin la columna de menú (.side) — .frame pasa de grid a una sola columna.
2. Fondo blanco (#fff) en vez del gris #F5F5F5 del sitio original.
3. El breadcrumb ya no vuelve a regardless.cl/blog/: vuelve al home de
este sitio, y el label cambió de "Memoria técnica" a "Home".
4. Una sola tipografía en todo el sitio: --read (antes Lora, la serif de
lectura) y --serif ahora son Inter, igual que el home — ya no hay dos
identidades tipográficas. --mono se queda en la pila del sistema
(ui-monospace) en vez de cargar IBM Plex Mono como webfont: es la
única excepción a "todo Inter", porque un bloque de código (árbol de
carpetas en ASCII, alineado por columnas) se rompe visualmente en una
fuente proporcional. Nadie pidió eso — es una llamada de legibilidad,
avisar si se prefiere Inter ahí también. */
:root{
--serif:'Neue Haas Unica','Inter','Helvetica Neue',Arial,sans-serif;
--read:'Neue Haas Unica','Inter','Helvetica Neue',Arial,sans-serif;
--sans:'Neue Haas Unica','Inter','Helvetica Neue',Arial,sans-serif;
--mono:ui-monospace,'SF Mono',Menlo,monospace;
--ink:#14120d; --bloom:#E0399C; --moon:#E8C87A;
--mute:rgba(20,18,13,.45);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ min-height:100%; }
body{ font-family:var(--sans); color:var(--ink); background:#fff; -webkit-font-smoothing:antialiased; }
.frame{
min-height:100vh; min-height:100dvh;
max-width:1106px;
margin:0 auto;
padding:clamp(2rem,6vh,4.5rem) clamp(22px,2.8vw,44px);
}
/* volver: mismo lenguaje que en el original, apunta al home de este sitio */
.volver{
display:inline-block;
font-family:var(--sans); font-weight:500; font-size:1rem;
color:var(--mute); text-decoration:none; transition:color .2s;
margin-bottom:clamp(2rem,4.5vh,3rem);
background:none; border:0; cursor:pointer;
}
.volver:hover{ color:var(--bloom); }
.volver .chev{ margin-right:.4em; }
/* ---- artículo ----
Escala calcada de Medium: ~20px de cuerpo sobre ~43rem de ancho, que deja
~67 caracteres por línea. A ese tamaño la interlínea baja a 1.6. */
.post{ max-width:43rem; }
/* 15px: mismo tamaño que el id/fecha de la lista del blog en el home
(.blog-id/.blog-date), el mayor de los dos valores que tenía antes */
.post-meta{
font-family:var(--mono); font-weight:400; font-size:15px;
letter-spacing:.06em; text-transform:uppercase; color:var(--mute);
margin-bottom:.9em;
}
.post-title{
font-family:var(--sans); font-weight:700;
font-size:clamp(1.9rem,4.4vw,2.75rem); line-height:1.15; letter-spacing:-.028em;
margin-bottom:clamp(1.6rem,3.5vh,2.2rem);
text-wrap:balance;
}
/* id del post en la línea de meta: mismo lenguaje que el A#N/E#N de
regardless.cl, pero numeración propia de este sitio (001, 002…) */
.post-id{ color:var(--mute); }
/* el título quedó en inglés; el cuerpo se queda en español — este tag evita
que alguien empiece a leer esperando que siga en inglés */
.post-lang-tag{
display:inline-block;
vertical-align:middle;
font-family:var(--sans); font-weight:600;
font-size:.32em; line-height:1;
letter-spacing:.06em; text-transform:uppercase;
color:var(--bloom);
border:1px solid var(--bloom);
border-radius:100px;
padding:.5em .9em;
margin-left:.3em;
}
.post-body{
font-family:var(--read); font-weight:400;
font-size:clamp(1.125rem,1.6vw,1.25rem); line-height:1.62; letter-spacing:-.003em;
color:#242018;
}
.post-body p{ text-wrap:pretty; }
.post-body > * + *{ margin-top:1.5em; }
.post-body h2{
font-family:var(--sans); font-weight:700;
font-size:clamp(1.35rem,2.4vw,1.6rem); line-height:1.25; letter-spacing:-.02em;
color:var(--ink); margin-top:2.2em; margin-bottom:-.65em;
text-wrap:balance;
}
.post-body h3{
font-family:var(--sans); font-weight:600;
font-size:1.15rem; line-height:1.3; letter-spacing:-.015em;
color:var(--ink); margin-top:2em; margin-bottom:-.7em;
}
.post-body ul,.post-body ol{ padding-left:1.3em; }
.post-body ul{ list-style:disc; }
.post-body ol{ list-style:decimal; }
.post-body li + li{ margin-top:.5em; }
.post-body strong{ font-weight:600; }
.post-body em{ font-style:italic; }
.post-body a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--bloom); text-underline-offset:3px; }
.post-body a:hover{ color:var(--bloom); }
.post-body blockquote{
border-left:2px solid var(--bloom); padding-left:1.1em;
color:rgba(36,32,24,.78); font-style:italic;
}
.post-body code{
font-family:var(--mono); font-size:.88em;
background:rgba(20,18,13,.06); padding:.15em .4em; border-radius:3px;
}
.post-body pre{
background:#14120d; color:#F2ECDE; border-radius:6px;
padding:1.1em 1.3em; overflow-x:auto;
font-family:var(--mono); font-size:.85rem; line-height:1.6;
}
.post-body pre code{ background:none; padding:0; font-size:inherit; color:inherit; }
.post-body img{ max-width:100%; height:auto; border-radius:6px; }
/* tablas: no estaban en el post-body original porque ningún otro post de
regardless.cl usa tabla — se agrega aquí, en el mismo lenguaje visual */
.post-body .table-wrap{ overflow-x:auto; }
.post-body table{ border-collapse:collapse; width:100%; font-size:.92em; }
.post-body th,.post-body td{
text-align:left; vertical-align:top;
padding:.6em .9em; border:1px solid rgba(20,18,13,.14);
}
.post-body th{ font-family:var(--sans); font-weight:600; background:rgba(20,18,13,.03); }
/* ---- Signals around (/signals/) ----
Página hermana de /notebook/: comparte este archivo de estilos. Las clases
siguen llamándose "extract(s)" por el nombre anterior de la página; es
detalle interno, no afecta lo que se ve. La lede usa la misma prosa que
.post-body pero vive fuera de esa clase porque no es parte de un artículo
con secciones — es la bajada de la página. */
.extracts-lede{
font-family:var(--read); font-weight:400;
font-size:clamp(1.125rem,1.6vw,1.25rem); line-height:1.62; letter-spacing:-.003em;
color:#242018;
margin-top:1.5em;
}
.extracts{ margin-top:clamp(3rem,6vh,4rem); }
.extracts-empty{
font-family:var(--read); font-style:italic; color:var(--mute);
}
.extract{
padding-top:2.4em; margin-top:2.4em;
border-top:1px solid rgba(20,18,13,.14);
}
.extract:first-child{ padding-top:0; margin-top:0; border-top:none; }
.extract-date{
font-family:var(--mono); font-size:13px;
letter-spacing:.08em; text-transform:uppercase; color:var(--mute);
margin-bottom:.9em;
}
.extract-quote{
font-family:var(--read); font-style:italic;
font-size:clamp(1.125rem,1.6vw,1.25rem); line-height:1.62; letter-spacing:-.003em;
color:#242018;
}
.extract-quote p + p{ margin-top:1em; }
.extract-source{
margin-top:.9em;
font-family:var(--sans); font-size:.95rem; color:var(--mute);
}
.extract-source a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--bloom); text-underline-offset:3px; }
.extract-source a:hover{ color:var(--bloom); }
/* la nota propia es opcional por extract: solo aparece cuando el existe */
.extract-note{
margin-top:.9em;
font-family:var(--sans); font-size:1rem; color:var(--ink);
}
/* ---- índice de Notebook (/notebook/) ----
Un
por post, más nuevo primero. Mismo espíritu que .extracts: el id
y la fecha son dato (mono, mudo), el título es lo único clickeable. */
.postlist{
list-style:none;
margin-top:clamp(3rem,6vh,4rem);
}
.postlist li{
padding:1.4em 0;
border-top:1px solid rgba(20,18,13,.14);
}
.postlist li:last-child{ border-bottom:1px solid rgba(20,18,13,.14); }
.postlist-meta{
font-family:var(--mono); font-size:13px;
letter-spacing:.06em; text-transform:uppercase; color:var(--mute);
margin-bottom:.5em;
}
.postlist-title{
display:block;
font-family:var(--sans); font-weight:700;
font-size:clamp(1.3rem,2.4vw,1.6rem); line-height:1.25; letter-spacing:-.02em;
color:var(--ink); text-decoration:none;
}
.postlist-title:hover{ color:var(--bloom); }
.postlist-title:focus-visible{ outline:1px solid var(--ink); outline-offset:4px; }
@media (max-width:760px){
.frame{ padding:clamp(1.6rem,6vh,3rem) 24px; }
}