/* ───────────────────────────────────────────────────────────────────────────── Rhythmcrea La barra, una foto deshecha en capas, y los repos. La foto es la del angel. La parte scripts/preparar-angel.py la separa en cuatro: la hierba de delante, la niebla, la figura con las alas, y la escena de atras sin la figura. Cada capa se mueve con el raton a una velocidad distinta, y de ahi sale la profundidad. Los colores son los tuyos, de pywal: --suelo 0b0d0f, --hielo 99bac9, --oxido ba5f44. La fuente, JetBrains Mono, la de tu sistema. ───────────────────────────────────────────────────────────────────────────── */ @font-face { font-family: "JetBrains Mono"; src: url("fuentes/jetbrains-var.woff2") format("woff2-variations"), url("fuentes/jetbrains-var.woff2") format("woff2"); font-weight: 100 800; font-display: swap; } :root { /* Lo que le dice al navegador de que color pintar las barras de scroll, los controles nativos y el fondo del canvas. Sin esto se quedan en oscuro con el tema claro, que es justo cuando mas canta. Va con el cambio de tema. */ color-scheme: dark; --suelo: #07090b; --cristal: rgba(16, 21, 25, 0.80); /* El cristal de la barra va un punto mas opaco que el general, y los enlaces de su nav un punto mas claros. Las dos cosas van juntas por una razon: con el desenfoque puesto, el fondo de la barra deja pasar mas luz que antes (0.84 en vez de 0.92), y --gris se queda en 2.69:1, por debajo de lo que se puede leer. Medido sobre el pixel mas claro que hay detras de la barra, que es el cielo de las alas: 0.80 con --gris 2.69:1 no se lee 0.84 con --enlace-barra 4.58:1 lo que lleva ahora 0.92 con --gris 3.98:1 el color de antes tampoco llegaba El nombre y el reloj, con --hielo, se quedan en 5.3:1 y no ha hecho falta tocarlos. */ --cristal-barra: rgba(16, 21, 25, 0.84); --enlace-barra: #85a2af; --cristal-opaco: rgba(13, 17, 20, 0.92); --hielo: #99bac9; --oxido: #ba5f44; --azul-1: #304f79; --azul-3: #3b748e; --azul-4: #417d97; --gris: #6b828c; --linea: rgba(153, 186, 201, 0.14); --linea-alta: rgba(153, 186, 201, 0.30); /* Los dos polvos, solo los tres canales: la opacidad la pone cada particula. --ceniza es la que flota por la escena y --chispa la de la rafaga del clic. No pueden ser lo mismo: en claro la flotante tiene que ser un susurro o el papel blanco se llena de motas, y la chispa tiene que verse. */ --ceniza: 206, 222, 231; --chispa: 244, 250, 254; /* Los topes de las dos animaciones van aqui y no en los keyframes. Estaban fijos (0.42/0.72 y 0.5/1) y el keyframe gana sobre la regla del tema, asi que en claro el halo respiraba a 0.72 con mix-blend-mode: multiply, que no es iluminar: es oscurecer. Cada tema pone los suyos y la animacion los lee. Ojo: si uno de los dos falta, el keyframe entero se queda invalido y el opacity cae al valor inicial, que es 1 — el bloom entero a tope. */ --halo-min: 0.50; --halo-max: 0.82; /* El aro NO va en tema oscuro. A cero, aqui y en el pico: con los dos a cero el keyframe del pinchazo sale plano y pinchando tampoco enciende nada. Si el pico tuviera valor propio, la animacion (que gana a cualquier declaracion normal) lo volveria a encender un ratito. Ver la nota de .aro, que explica por que el aro va solo en el tema claro. */ --aro-min: 0; --aro-alto: 0; --f: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --r: 10px; --r-isla: 16px; /* El ancho del contenido. Antes 1120 px fijos, que en una pantalla de 4K ocupa el 27% y deja la pagina en una tira estrecha en mitad de la nada. Ahora crece con la pantalla y se para en 1640, que es donde mas grande se ve bien de leer. El min de 330 es para que en un movil de 360 no se salga. */ --ancho: clamp(330px, 74vw, 1640px); /* Niebla de los bordes de fondo.webp, medida en preparar-angel.py. Es lo que rellena las franjas cuando la figura no llena la pantalla. */ --niebla: #545c64; } *, *::before, *::after { box-sizing: border-box; } /* El tamano de la raiz. Todo lo demas esta en rem, asi que esto decide si la pagina se lee en un movil o en un 4K. Antes eran 16 px fijos y el cuerpo se quedaba en 13.8 px en cualquier parte: en 2560x1440 y en 3840x2160 era ilegible, no pequeno, ilegible. El minimo era 15 px, y aqui esta lo que pasaba: con el liquido en 0.5vw + 10, la raiz se queda en 15 px en TODO lo que va de 0 a 1000 px de ancho. O sea que en un movil de 360 el texto corriente caia a 11,1 px y el rotulo mas pequeno a 8,2. Todo el sitio estaba medido con una raiz de 17 a 21 px —la de un monitor— y en el movil no habia compensacion ninguna. Por eso el minimo sube a 19 px. En movil el texto corriente pasa de 11,1 a 14,1 px y el rotulo mas pequeno de 8,2 a 10,5. A 1440 la raiz era 17,2 y ahora es 19: un 10% mas, que tambien es una mejora. A partir de 1920 el liquido manda y no cambia nada: 19,6 y 21 px, igual que antes. */ html { font-size: clamp(19px, 0.5vw + 10px, 21px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--suelo); color: var(--hielo); font: 400 0.86rem/1.7 var(--f); /* 12.9 px en movil, 18 px en 4K */ -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } h1, h2, h3, p, dl, dd, dt { margin: 0; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; } a:focus-visible, button:focus-visible, .escena:focus-visible { outline: 1px solid var(--oxido); outline-offset: 3px; border-radius: var(--r); } ::selection { background: var(--oxido); color: var(--suelo); } .cola { max-width: var(--ancho); margin: 0 auto; padding: 0 clamp(1rem, 0.5rem + 2vw, 2rem); } /* En movil la caja se abre. --ancho tiene un minimo de 330 px que esta puesto para que en un monitor grande el contenido no se haga una tira. En un movil ese minimo gana siempre: a 320, 360, 390 y 430 de pantalla el contenido medía EXACTAMENTE lo mismo, 292 px, porque el 330 del clamp mas el padding de .cola se comian 68 px de los 360. El video de 1280x720 salia de 292 x 164, y con el margen del contenu atado a un ancho fijo la pagina no respiraba: se veia ajustada. Aqui el ancho maximo se quita y el margen lo pone el padding, que es lo que tiene que hacerlo. */ @media (max-width: 700px) { .cola { max-width: none; padding-left: 0.7rem; padding-right: 0.7rem; } } /* ══ LA BARRA ══════════════════════════════════════════════════════════════ */ .barra-z { position: fixed; top: 0; left: 0; right: 0; z-index: 40; padding: 0.8rem 1rem 0; pointer-events: none; } .isla { pointer-events: auto; /* Tres columnas: minmax(0, 1fr) · auto · minmax(0, 1fr). El reloj va en la del medio y las de los lados se reparten el resto, de modo que el reloj queda en el centro tanto si la izquierda es mas larga como la derecha. Con flex y un margen automatico se descuadra en cuanto uno de los lados crece. Y con minmax(0, 1fr) y no con 1fr a secas, que es lo que hace que la promesa se cumpla SIEMPRE. Un 1fr tiene como minimo automatico su min-content: si el contenido de la derecha no cabe en la mitad que le toca, la pista se hincha hasta que quepa, las dos dejan de medir igual y el reloj se desplaza. Medido a 360 px: pistas de 117.39 y 122.47, con el reloj 3 px fuera de sitio. Con minmax(0, ...) las dos pistas miden siempre lo mismo, y si algo no cabe se sale en vez de descuadrar el reloj. Para que eso no llegue a pasar, los breakpoints quitan enlaces antes de que la zona derecha se pase de su mitad. */ display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; max-width: var(--ancho); margin: 0 auto; /* La barra lleva cristal y desenfoque de fondo DESDE EL PRIMER PIXEL, y no solo al bajar. Se probo al reves —arriba sin fondo y con el cristal apareciendo al pasar de 24 px de scroll, que es lo que hace omarchy.org— y aqui no es lo que hacia falta: en la portada el nombre va contra el fondo del heroe, y con la barra sin cristal el texto compite con las alas justo en la imagen buena. Con el fondo puesto desde el principio el nombre se lee igual de bien se este donde se este, que es lo unico que importa. Con el cristal puesto de continuo, el fondo y el color de los enlaces van en sus propias variables, --cristal-barra y --enlace-barra, y estan medidos para esto. Sin fondo no harian falta; con fondo de siempre si. La nota de esas dos, en :root, tiene los numeros: con --gris a 0.80 los enlaces se quedan en 2.69:1, por debajo de lo que se lee. Lo que no se anima es el fondo, y a proposito: no cambia nunca, y una transicion para algo que no se mueve solo anade retardo al primer pintado de la pagina. La que si hay, la del transform, es la de cuando la barra se esconde sola. */ background: var(--cristal-barra); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); border: 0; border-radius: var(--r-isla); padding: 0.4rem 0.55rem; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } /* Sin soporte de backdrop-filter, --cristal se queda a 0.80 y el fondo deja el texto con el contraste corto contra la foto de las alas. Se vuelve al opaco, que es lo que lleva usando la barra desde siempre. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .isla { background: var(--cristal-opaco); } } /* El punto de la temperatura se fue de la barra: sobra a la izquierda del todo, con su aro, y la temperatura ya se enseña en el halo, que es donde el color significa algo. Queda en capa.js, que lo pinta en el halo. */ .isla .izq { justify-self: start; display: flex; align-items: center; gap: 0.5rem; min-width: 0; } .isla .rotulo { font: 600 0.76rem/1 var(--f); letter-spacing: 0.2em; text-transform: uppercase; color: var(--hielo); padding-left: 0.15rem; white-space: nowrap; } /* El nombre, cuando es un enlace. -- En la portada esto es un y no tiene que hacer nada. En el manual es un enlace a la portada, y hasta ahora no tenia NI UNA regla: la clase .rotulo-enlace estaba en el HTML sin existir en el CSS. Medido con el raton encima: mismo color, fondo transparente y una caja de 14 px de alto, o sea que se pulsaba sin que se notara nada. Lo de al lado, el enlace "home", si cambia: fondo rgba(153,186,201,0.09) y las esquinas redondeadas. Esto es lo mismo, con el mismo color y la misma opacidad, para que la barra se comporte igual de izquierda a derecha. -- La caja pasa de 14 a 28 px de alto porque un enlace de 14 px no se acierta con el dedo ni con el raton: el alto de la barra es 41 y el enlace ocupa un tercio. Con el relleno negativo el texto no se mueve de sitio. */ .isla .rotulo-enlace { display: flex; align-items: center; height: 28px; padding: 0 0.6rem; margin-left: -0.6rem; border-radius: var(--r); text-decoration: none; transition: color 0.2s, background 0.2s; } /* El aviso son las LETRAS, no el fondo. -- Pedido tal cual: al pasar por encima se iluminan las letras. Antes el aviso era el fondo, con la caja entera encendida como un boton mas, y las letras quietas. Ahora el color del texto es lo que cambia, y el fondo solo acompana con un gris muy claro para que el enlace se note como una zona pulsable sin echar mas luz de la cuenta. En oscuro el nombre es --hielo, un azul apagado (#99bac9). Iluminar es subirle el brillo hasta blanco puro, que son 8,6:1 de contraste, medido. En claro --hielo ya es casi negro (#1b1d1f) y no tiene arriba donde subir: poner blanco ahi era justo el fallo de antes, medido, el nombre se ponia rgb(255,255,255) sobre crema y desaparecia en el momento de pulsarlo. Asi que en claro "iluminar" es lo contrario, oscurecer: de #1b1d1f a negro puro, que pasa de 14,1:1 a 17,4:1. Las dos direcciones tienen contraste medido y en las dos se nota. */ .isla .rotulo-enlace:hover { background: rgba(153, 186, 201, 0.07); color: #fff; } html.claro .isla .rotulo-enlace:hover { background: rgba(0, 0, 0, 0.06); color: #000; } /* Y al pulsar, un paso mas. Sin esto el dedo no nota el momento exacto del clic: entra y sale el hover y no hay ningun cambio en el instante de apretar. */ .isla .rotulo-enlace:active { background: rgba(153, 186, 201, 0.14); color: #fff; transition-duration: 0.06s; } html.claro .isla .rotulo-enlace:active { background: rgba(0, 0, 0, 0.11); color: #000; } .isla .rotulo-enlace:focus-visible { outline: 2px solid var(--azul-4); outline-offset: 1px; border-radius: var(--r); } /* Con reduced-motion no hay transicion que recortar: el cambio de color es instantaneo y ya esta, pero la transicion se apaga para no mover el fondo. */ @media (prefers-reduced-motion: reduce) { .isla .rotulo-enlace, .isla .rotulo-enlace:active { transition: none; } } /* Con dedo, los 28 px no valen: el mismo objetivo de 44 que los demas controles. */ @media (hover: none) { .isla .rotulo-enlace { height: 44px; } } .isla nav { justify-self: end; display: flex; gap: 0.15rem; } /* El color es --enlace-barra y no --gris por el contraste con el fondo translucido: ver la nota de --enlace-barra en :root. En tema claro esa variable vale --gris, asi que aqui no hay excepcion. */ .isla nav a { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--enlace-barra); padding: 0.34rem 0.58rem; border-radius: var(--r); transition: color 0.2s, background 0.2s; white-space: nowrap; } .isla nav a:hover { color: var(--hielo); background: rgba(153, 186, 201, 0.09); } /* En claro, el fondo del hover pasa a gris. El azul de arriba esta medido para un suelo oscuro: sobre crema, #99bac9 al 9 % deja el color en #eaeae8 frente a un suelo en #eceae5, o sea dos niveles de diferencia y un hover que no se ve. El gris es lo que ya usaba el interruptor, asi que despues los tres controles de la barra —nombre, enlaces e interruptor— responden igual. */ html.claro .isla nav a:hover { background: rgba(0, 0, 0, 0.06); } /* El interruptor de tema. Va en la barra y no escondido en el pie: si esta abajo, nadie lo encuentra, y el cambio tiene que estar a un clic de donde ya se esta mirando la pagina. Se ve el icono del tema al que vas, no del que estas: con la luna pulsada estas en blanco y estas a punto de pasar a negro. */ .interruptor { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; color: var(--gris); cursor: pointer; border-radius: var(--r); border-left: 1px solid var(--linea); transition: color 0.2s, background 0.2s; } .interruptor:hover { color: var(--hielo); background: rgba(153, 186, 201, 0.09); } html.claro .interruptor:hover { background: rgba(0, 0, 0, 0.06); } .interruptor .ic { width: 1.05rem; height: 1.05rem; grid-area: 1 / 1; transition: opacity 0.25s, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } /* Los tres iconos del tema, uno solo a la vez. -- Antes eran dos y se elegian con la clase .claro del : en oscuro se escondia el sol, en claro la luna. Con tres modos eso no llega, porque "automatico en oscuro" y "negro elegido a mano" se ven igual pero se portan distinto: el primero cambia solo cuando el sistema cambia de tema. Por eso el modo va en data-tema y no se deduce de la clase. Se muestra el que corresponde y se ocultan los otros dos, en vez de tocar uno por estado: con cuatro reglas (un par por modo) basta, y no hay que acordarse de esconder el anterior. */ html[data-tema="auto"] .ic-auto, html[data-tema="claro"] .ic-sol, html[data-tema="negro"] .ic-luna { opacity: 1; transform: none; } html[data-tema="auto"] .ic-sol, html[data-tema="auto"] .ic-luna, html[data-tema="claro"] .ic-auto, html[data-tema="claro"] .ic-luna, html[data-tema="negro"] .ic-auto, html[data-tema="negro"] .ic-sol { opacity: 0; transform: rotate(-70deg) scale(0.6); } /* El giro va para el lado contrario segun cual entre, para que no parezca que los dos iconos cruzan la misma puerta. */ html[data-tema="claro"] .ic-auto, html[data-tema="claro"] .ic-luna, html[data-tema="negro"] .ic-auto, html[data-tema="negro"] .ic-sol { transform: rotate(70deg) scale(0.6); } /* Antes de que app.js ponga data-tema —si algo falla al arrancar— se ve la luna, que es el estado por defecto de la pagina. Sin esto el boton sale vacio. */ html:not([data-tema]) .ic-auto { opacity: 0; transform: rotate(70deg) scale(0.6); } html:not([data-tema]) .ic-sol { opacity: 0; } /* Solo para lectores de pantalla: el icono no dice nada por si mismo. */ .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .isla .reloj { justify-self: center; font-size: 0.76rem; letter-spacing: 0.06em; color: var(--hielo); white-space: nowrap; padding: 0 0.3rem; font-variant-numeric: tabular-nums; } @media (max-width: 620px) { .isla nav { display: none; } /* Sin enlaces a la derecha, la tercera columna se vacia y el reloj se va con ella. Con grid 1fr auto 1fr sigue quedando centrado porque las columnas siguen siendo iguales. */ } /* ══ EL CAMPO ═══════════════════════════════════════════════════════════════ */ .campo { position: relative; height: 100svh; overflow: hidden; } /* La niebla se disuelve hacia abajo en vez de cortarse en recto contra el negro de los proyectos. Va por debajo del cartel, asi que el nombre no se apaga. */ .campo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; z-index: 4; pointer-events: none; background: linear-gradient(180deg, transparent, var(--suelo) 88%); } .escena { position: absolute; inset: 0; overflow: hidden; cursor: crosshair; background: #0a0e12; } /* Cada capa es la foto entera, y ocupa su caja (#capas) entera. Esa caja la mide capa.js con numeros exactos: antes era inset fijo y background-size: cover, que en un monitor 16:10 recortaba las dos puntas de las alas. */ .capa { position: absolute; inset: 0; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; will-change: transform; } /* La caja de las cuatro capas. Su rectangulo lo mide capa.js, y coincide con el de la foto; la mascara se come doce pixeles de arriba y de abajo para que el paso a la zona sin foto no sea un corte recto. */ /* --fade lo pone capa.js y es lo que hay de hueco real entre el borde de la pantalla y el de la foto. Con hueco cero la mascara no hace nada. Antes eran 12 px fijos, y eso era un fallo mio: cuando la foto ya llena el alto —que es en casi cualquier pantalla— esos 12 px de arriba salian borrosos contra el resto nitido, y se veia una franja de nitidez en mitad de la imagen, sin que hubiera ni un hueco que tapar. */ .capas { position: absolute; --fade: 0px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%); } /* El respaldo: la misma foto, estirada a cubrir la pantalla y muy difuminada, detras de todo. Cubre las franjas que quedan cuando la figura no llena la pantalla, que antes iban en color plano y dejaban un escalon recto muy visible contra el cielo. Se estira a proposito, al reves que las capas: aqui no importa que no encaje, porque va 26 px desenfocada y nadie puede saber donde esta el borde de la foto. Lo que importa es que SIAMPRE haya contenido detras de las franjas. */ .respaldo { position: absolute; inset: -8%; background-image: url("fondo-oscuro.webp"); background-size: cover; background-position: center; filter: blur(26px); } /* ── Las cuatro capas. La caja (#capas) las mide capa.js ─────────────────── */ .fondo { background-image: url("fondo-oscuro.webp"); /* El fondo-oscuro.webp ya viene graduado por el script. Este filtro era una segunda graduacion encima, y se aplicaba tambien en claro, donde ya hacia falta menos todavia. En claro se anula. -- El blur(--borr) va aqui y no en un numero fijo porque depende de cuantos pixeles de pantalla se pintan: en un monitor normal no hace falta nada, y en un movil habia que estirar la foto 3,74x. Lo calcula capa.js al medir la caja. Sin ese script la variable no existe y el desenfoque es 0, que es como estaba antes. */ filter: brightness(0.82) contrast(1.02) blur(var(--borr, 0px)); } .angel { background-image: url("angel-oscuro.webp"); /* Sin luz alrededor: un drop-shadow hielo de 14 px salia como un filo claro pegado a las alas, y no era la foto, era mio. -- El desenfoque va DESPUES del drop-shadow a proposito. Al reves, la sombra de 22 px se difuminaria tambien y las alas perderian el relieve contra el cielo; asi el relieve se queda y lo que se suaviza es la foto, que es lo que se estaba viendo a cuadros. */ filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.5)) blur(var(--borr, 0px)); } /* En pantallas estrechas se baja el angel de 1100, no el de 2000. El mio Sin esto, un movil se baja 113 KB de una figura que ahi ocupa 430 px de ancho. */ @media (max-width: 900px) { /* El fichero pequeno, y con el desenfoque que le corresponde a ESE fichero. Con el del grande se quedaria corto: este se estira 3,74x en un movil y el otro 2,06x, y por eso tienen desenfoques distintos. */ .angel { background-image: url("angel-oscuro-p.webp"); filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.5)) blur(var(--borr-p, 0px)); } html.claro .angel { background-image: url("angel-claro-p.webp"); } html.claro .angel { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.18)) blur(var(--borr-p, 0px)); } } /* El velo lleva con screen. Sobre nada, screen no hace nada; y cualquier borde de su caja se veria como un rectangulo mas claro. Con los lados desvanecidos no hay forma que delate. */ .velo { background-image: url("velo.webp"); /* SIN mix-blend-mode. Con screen, cada fotograma que el velo se mueve hay que volver a mezclar una capa del tamaño de la pantalla entera, con las capas de debajo: es de lo mas caro que habia aqui, y la pagina iba a 66 ms por fotograma con los efectos puestos. Con alpha normal, la niebla blanca sobre fondo oscuro se ve casi igual y no cuesta nada. */ opacity: 0.34; -webkit-mask-image: radial-gradient(115% 100% at 50% 50%, #000 58%, transparent 100%); mask-image: radial-gradient(115% 100% at 50% 50%, #000 58%, transparent 100%); } /* La capa de delante: el suelo y las lapidas de abajo, que son lo unico que hay de verdad mas cerca. La franja ocupa el 42% de abajo de la caja. La mascara va de 58 a 76% porque la caida tiene que estar DENTRO de la franja; antes iba de 0 a 30% de la caja, o sea por encima de donde empieza la imagen, y se veia un borde recto a la altura del primer pixel. */ .frente { background-image: url("frente-oscuro.webp"); background-size: 100% auto; background-position: center bottom; -webkit-mask-image: linear-gradient(180deg, transparent 58%, #000 76%, #000 100%); mask-image: linear-gradient(180deg, transparent 58%, #000 76%, #000 100%); } /* ══ LOS DOS TEMAS ════════════════════════════════════════════════════════ Negro y blanco. Cada capa carga su version, y son ficheros aparte y no un filtro: los dos temas son monocromos de verdad, uno con las altas lavadas y otro con las bajas hundidas, y un grayscale() no los distingue. El tema CLARO es el que pediste con la imagen del angel en blanco y negro: la pagina entera se pone blanca, con las altas de la foto lavadas. El NEGRO es el de antes, con las bajas hundidas. */ html.claro .fondo { background-image: url("fondo-claro.webp"); } html.claro .angel { background-image: url("angel-claro.webp"); } html.claro .frente { background-image: url("frente-claro.webp"); } html.claro .respaldo { background-image: url("fondo-claro.webp"); } /* En claro el fondo se queda con el desenfoque y sin la graduacion: antes era filter: none entero, y con eso el movil se veía a cuadros en los dos temas. */ html.claro .fondo { filter: blur(var(--borr, 0px)); } html.claro .angel { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.18)) blur(var(--borr, 0px)); } html.claro .respaldo { filter: blur(26px) contrast(0.94); } /* Y la pagina entera se da la vuelta. Si solo las imagenes cambiaran, el texto claro se pondria sobre fondo claro y no se leeria. */ html.claro { color-scheme: light; --suelo: #eceae5; --cristal: rgba(255, 255, 255, 0.76); /* En claro los enlaces de la barra ya llegaban a 4.59:1 con el cristal general y no les hace falta el tono aclarado: detras de la barra el angel en blanco y negro esta en 252 y el blanco del cristal tapa casi todo. Se deja -- gris a proposito, para que este valor no sea una excepcion sin motivo. */ --cristal-barra: rgba(255, 255, 255, 0.76); --enlace-barra: var(--gris); --cristal-opaco: rgba(252, 251, 249, 0.94); --hielo: #1b1d1f; --oxido: #9a5638; --azul-1: #55606a; --azul-3: #6f7a83; --azul-4: #525d66; --gris: #71767a; --linea: rgba(20, 22, 24, 0.14); --linea-alta: rgba(20, 22, 24, 0.30); /* En claro, con el halo en multiply, subir el opacity lo OSCURECE, y el bloom va mas bajo y mas corto que en oscuro: la foto ya es clara y con un bloom fuerte se come la cabeza. Estos dos iban aqui y se perdieron al quitar las variables del panel del instalador; sin ellos el tema claro heredaba los topes del oscuro y el bloom le salia con la fuerza del otro. */ --halo-min: 0.34; --halo-max: 0.58; /* El aro va solo aqui, en el tema claro, y es DORADO. Medido sobre la foto en blanco y negro, en el sitio exacto donde cae el anillo: el fondo esta en 233 sobre 255, o sea casi papel. Con este dorado el anillo queda en 232,179,84 a 0.78, que es un contraste de 1.55:1 y se ve. Con el aro de 0.62 de antes eran 1.42:1, justo por encima del 1.3 a partir del cual se distingue, y con blanco no habia nada: 1.0:1, porque un blanco sobre un 233 no cambia. Por eso el aro va dorado y no blanco, y por eso en el oscuro no va: en la foto a color el anillo esta en 147 y ahi si se veria el blanco, pero el aro solo se pone en un sitio. */ --aro-min: 0.78; --aro-alto: 0.94; --ceniza: 138, 146, 152; --chispa: 30, 36, 42; } html.claro .isla { box-shadow: 0 8px 26px rgba(30, 28, 24, 0.16); } html.claro .nombre { color: #16181a; text-shadow: 0 2px 24px rgba(255, 255, 255, 0.92); } html.claro .piezas .cuerpo b { color: #16181a; } /* 0.5 daba 3.18:1 al boton de abajo, por debajo del 4.5:1 que pide WCAG AA para texto normal. A 0.66 se mide en 5.1:1 y todavia se ve apagado, que es lo que tiene que ser un boton secundario. El subtitulo estaba en 4.89:1. */ html.claro .bajo, html.claro .col-menu h3 { color: rgba(30, 32, 34, 0.56); } html.claro .bajar { color: rgba(30, 32, 34, 0.66); } html.claro .marca-menu p, html.claro .col-menu a, html.claro .pieza .cuerpo i, html.claro .intro, html.claro .abierta p, html.claro .banderas span, html.claro .chip-mini, html.claro .etiquetas span, html.claro .vivo span { color: var(--gris); } html.claro .pieza:hover { background: rgba(20, 22, 24, 0.04); } html.claro .b { color: #16181a; border-color: var(--linea-alta); } html.claro .b:hover { background: #16181a; color: #f6f5f2; } /* La escena de claro es casi toda blanca: con 0,55 la rafaga del clic se quedaba sin verse y parecia que no pasaba nada. */ html.claro .motas { opacity: 0.85; } /* Los creditos y la linea de abajo, en claro. Van con `!important` como el resto del bloque, porque su color lo fija una regla propia con !important para poder ganar al `html.claro .marca-menu p`. */ html.claro .creditos-menu { color: rgba(30, 32, 34, 0.62) !important; } html.claro .creditos-menu a, html.claro .pie-fin a { color: var(--gris); } html.claro .pie-fin { color: rgba(30, 32, 34, 0.6); } /* En claro el velo va con menos presencia: el fondo ya es claro y la niebla blanca se perderia. */ /* ── Lo que en blanco hay que cambiar de verdad ─────────────────────────── Los tres efectos que hacen vivo al campo —la luz que sigue al raton, la niebla y el barrido del clic— estaban hechos con mezclas que solo funcionan sobre fondo oscuro: · la luz, con soft-light: sobre blanco, soft-light casi no altera nada, y mover el cursor no se notaba de nada · la niebla, con alpha blanca: blanca sobre blanco, nada · el barrido del clic, un degradado blanco: blanco sobre blanco, nada · el halo, con screen: igual No estaban rotos: eran invisibles por construccion. En claro cada uno lleva su mezcla al reves. Con multiply sobre fondo claro, un color gris SI oscurece, y eso es lo que hace falta: no una luz mas brillante, sino una sombra suave que va con el cursor. */ html.claro .luz { mix-blend-mode: multiply; opacity: 0.55; background: radial-gradient(closest-side, rgba(104, 124, 140, 0.8), transparent 76%); } html.claro .velo { mix-blend-mode: multiply; opacity: 0.32; } html.claro .halo { mix-blend-mode: multiply; opacity: 0.45; } /* El halo de la cabeza. Su color es el termometro. */ .halo { position: absolute; z-index: 3; pointer-events: none; border-radius: 50%; /* Sin nucleo blanco: la foto YA trae su halo, y al poner encima una esfera clara sale un bulto oscuro en vez de una luz. Aqui solo se aporta el resplandor del termometro. */ /* Ni anillo ni esfera: la foto YA trae su halo, y lo que hacia falta era un resplandor, no un aro. Con box-shadow salia un donut naranja macizo; esto es un bloom difuso y se suma a lo que ya hay dibujado. */ background: radial-gradient(closest-side, var(--halo, transparent) 0%, transparent 72%); filter: blur(9px); opacity: 0.5; mix-blend-mode: screen; } @media (prefers-reduced-motion: no-preference) { .halo { animation: respirar 5.5s ease-in-out infinite; } } /* Los topes vienen de --halo-min / --halo-max: ver donde estan definidos. */ @keyframes respirar { 0%, 100% { opacity: var(--halo-min); } 50% { opacity: var(--halo-max); } } /* La luz que sigue al raton. Es un disco con blur y blend, no un degradado: por eso de verdad ilumina por un lado. */ /* La luz que sigue al raton. left/top en 0 y SIN margen: el centro lo pone capa.js restando la mitad de su propia caja a la posicion del cursor. Antes estaba en left:50%/top:42% con un margen negativo, y al mixes eso con coordenadas del viewport la luz se separaba del cursor segun bajabas. */ .luz { position: absolute; left: 0; top: 0; z-index: 2; /* 38vw y 16 px de desenfoque, no 62vw y 28. A 1440 de ancho eso son 893 px de lado desenfocados por 28, y ademas se mueve en cada movimiento del raton: era lo mas caro de la pagina. Con 547 y 16 se ve igual y el coste baja a menos de la mitad, que es al cuadrado. */ width: 38vw; height: 38vw; pointer-events: none; mix-blend-mode: soft-light; opacity: 0.8; background: radial-gradient(closest-side, rgba(214, 232, 240, 0.6), transparent 72%); filter: blur(16px); will-change: transform; } /* El aro de la cabeza, en su propia imagen. scripts/preparar-angel.py la saca del perfil radial medido de la foto: el brillo del halo tiene el pico a 0,032 del ancho, y eso es el radio del aro. En reposo esta apagado casi del todo; pincharlo lo enciende. El color va en la propia imagen porque en claro hay que MULTIPLICAR (multiplicar con blanco no hace nada, ahi el aro va en tinta oscura), y eso no se puede pedir con un mix-blend-mode y un opacity. */ /* El aro va SIN mix-blend-mode y va SOLO en el tema claro. Con screen en oscuro y multiply en claro no se podia: el aro de la foto ya es claro y screen no puede pintar de nada lo que ya es claro, y en claro el oro multiplicado sobre el papel salia apagado. Sin mezcla, el alfa lo pone la propia imagen y ya esta. Solo en el tema claro, y es lo que se pidio. El aro cae sobre la cabeza del angel, y ahi el fondo mide 233 sobre 255 en la foto en blanco y negro y 147 en la foto a color. Eso decide el color y el tema de golpe: - sobre el 233, un aro BLANCO no existe: se queda en 251, que es 1.0:1 de contraste, o sea nada. Un dorado si se ve, y a 0.78 el anillo queda en 232,179,84, que es 1.55:1. - sobre el 147, el blanco si se veria (llega a 213, 3.1:1). Por eso el aro podria haber ido blanco en oscuro, pero como solo se pone en un sitio, se pone en el que lo ha pedido quien lo mira. El dorado va en la propia imagen y no con un filtro, al reves que antes, que si lo ponia blanco: para aclarar hace falta el color, no solo el alfa. Por eso se dibuja una sola vez, con HALO["claro"], y no una por tema. Ver scripts/preparar-angel.py. El borde suave del aro es lo que evita que se vea la costura cuando el parallax lo separa un poco de la foto: en el centro es opaco y encima esta el aro de la foto, y hacia fuera el alfa se va a cero. */ .aro { background-image: url("aro-claro.webp"); opacity: var(--aro-min); } /* Pinchar: el aro se enciende. Solo el alpha: el color es el dorado de la imagen y no se toca. En tema oscuro no hay regla propia porque el aro no esta ahi: --aro-min y --aro-alto valen 0 y el keyframe los lee, asi que la animacion sale plana en 0 y no enciende nada. SOLO el opacity en la animacion. El transform lo escribe el parallax en cada fotograma con un estilo en linea, y un estilo en linea gana a una animacion: por eso la animacion de las alas no se notaba nunca. */ .capa.aro.pulsando { animation: aro-enciende 1.5s cubic-bezier(0.22, 1, 0.36, 1); } /* El pico es --aro-alto y no un 1 fijo: ver donde esta definido. En oscuro los dos estan a 0, asi que el keyframe entero sale plano. */ @keyframes aro-enciende { 0% { opacity: var(--aro-min); } 18% { opacity: var(--aro-alto); } 100% { opacity: var(--aro-min); } } .motas { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .motas { display: none; } } /* El cartel: el nombre. */ .cartel { position: absolute; left: 50%; bottom: clamp(1.6rem, 5vh, 3.4rem); transform: translateX(-50%); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; width: 100%; padding: 0 1rem; } .nombre { font: 700 clamp(1.55rem, 5.6vw, 4.6rem)/1 var(--f); /* El hueco entre letras se aplica TAMBIEN despues de la ultima, con lo que la caja queda 0.42em mas ancha que los glifos y el nombre se va a la izquierda al centrarlo. text-indent no lo arregla: medido, la caja se ajusta al texto y el indent solo la ensancha, dejando la tinta donde estaba. Lo que funciona es quitarle el espaciado a la ultima letra, y eso lo hace app.js metiendola en un . */ letter-spacing: 0.42em; text-transform: uppercase; color: var(--hielo); text-shadow: 0 2px 26px rgba(7, 9, 11, 0.95), 0 0 60px rgba(7, 9, 11, 0.8); } .nombre .ultima { letter-spacing: 0; } /* ver arriba */ .bajo { font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(153, 186, 201, 0.5); } .bajar { margin-top: 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-size: 0.56rem; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(107, 130, 140, 0.62); cursor: pointer; } .bajar:hover { color: var(--hielo); } .bajar i { display: block; width: 1px; height: 26px; background: linear-gradient(180deg, var(--linea-alta), transparent); } @media (prefers-reduced-motion: no-preference) { .bajar i { animation: goter 2.8s ease-in-out infinite; } } @keyframes goter { 0%, 100% { opacity: 0.25; transform: scaleY(0.6); } 50% { opacity: 1; transform: scaleY(1); } } @media (max-width: 560px) { .bajar { display: none; } } /* ══ LA ESCENA, VIVA O DORMIDA ═════════════════════════════════════════════ El parallax, la luz del raton y las motas viven dentro de .campo, que es justo lo que se deja de ver al bajar por la pagina. Con esto, al salir de pantalla la escena se duerme: no se escribe nada y no se repinta. Quien lo para es capa.js, quitando la clase "viva" DEL .escena, que es el elemento que el observer vigila; aqui solo se pinta lo que implica estar dormida. Sin esto pasaba lo que Mas te decia: bajar no era dejar de ver la escena, era tenerla corriendo por debajo, con el raton todavia moviendo capas que ya no se ven. */ .escena:not(.viva) .capa, .escena:not(.viva) .frente, .escena:not(.viva) .luz, .escena:not(.viva) .halo, .escena:not(.viva) .motas { pointer-events: none; } /* Las motas se apagan en vez de desaparecer de golpe. El canvas se queda ahi, con su ultimo fotograma, que es lo que evita el parpadeo al volver a mirar. */ .escena:not(.viva) .motas { opacity: 0; } .escena .motas { transition: opacity 0.35s ease; } /* Ni el aro ni el halo se encienden con la escena dormida: si pinchas abajo, donde no se ve nada, no tiene que pasar nada. */ .escena:not(.viva) .aro, .escena:not(.viva) .halo { animation: none; } /* ── Instalar ────────────────────────────────────────────────────────────── Debajo del clip y de los dos botones, con mas aire que el resto de la pagina: es la accion y va precedida de un rato de mirar el video, asi que no tiene que competir por la atencion. Lo unico que va en caja es el comando. El bloque entero NO: un panel de color alrededor era la cuarta vez que se intentaba y tapaba el comando en vez de standout. El corte lo hace el filete de arriba, como en el resto de la pagina. El rotulo lleva el punto azul de las cabeceras de seccion —el mismo punto, el mismo radio y el mismo azul que .punto-mini— para que el bloque se lea como la tercera seccion y no como algo pegado debajo del clip. El comando va en una caja DENTRO, con el "copy" tambien dentro y sin verse hasta que se busca. Se pincha el comando entero, no solo el boton: el subrayado sale al pasar el raton y eso ya lo dice. Todas las reglas llevan .instalar delante a proposito. Las de .comando y .copiar estan mas ABAJO en la hoja (vienen del instalador, dentro de la seccion de hyprland) y con la misma especificidad se las comian: el borde, el fondo, el text-indent negativo del "$" y el borde del boton. Con el prefijo ganan. */ .instalar { margin-top: 3.4rem; padding-top: 2.4rem; border-top: 1px solid var(--linea); } .instalar-titulo { display: flex; align-items: center; gap: 0.6rem; font: 600 0.8rem/1 var(--f); letter-spacing: 0.28em; text-transform: uppercase; color: var(--hielo); margin: 0 0 1rem; } .instalar-titulo::before { content: ""; flex: none; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--azul-4); } .instalar-texto { font-size: 0.78rem; color: var(--gris); max-width: 58ch; margin: 0 0 1.4rem; } .instalar .instalar-cmd { position: relative; /* SIN flex-wrap. El boton de copiar va en absolute, asi que no hay nada que repartir, y con wrap el comando se iba a una linea nueva con el "$" solo delante: al elegir linea el navegador usa el tamaño hipotetico del item, o sea el comando entero en una linea, y eso es mas ancho que la caja. */ display: flex; align-items: baseline; gap: 0.15rem; margin: 0; padding: 0.95rem 4.8rem 0.95rem 1.1rem; border: 1px solid var(--linea); border-radius: var(--r); background: var(--cristal-opaco); transition: border-color 0.18s; } .instalar .instalar-cmd:hover { border-color: var(--linea-alta); } /* El "$" va en un pseudo de la caja y no pegado al texto: si estuviera en el code, el subrayado pasaria por encima y al copiar el comando saldria con el "$" delante. Asi el code se queda con el texto limpio. */ .instalar .instalar-cmd::before { content: "$"; flex: none; color: var(--gris); opacity: 0.6; font: 0.78rem/1.8 var(--f); } .instalar .instalar-cmd code::before { content: none; } .instalar .instalar-cmd code { flex: 1 1 auto; min-width: 0; padding: 0; border: 0; background: none; font-size: 0.78rem; line-height: 1.8; color: var(--azul-4); text-indent: 0; cursor: pointer; /* Se pincha el comando, no solo el boton, asi que el subrayado tiene que salir al pasar el raton. Con text-decoration-color y no con un fondo porque el comando se parte en varias lineas en un movil, y con un fondo el subrayado solo saldria en una de ellas. */ text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; text-decoration-color: transparent; transition: text-decoration-color 0.2s, color 0.18s; } .instalar .instalar-cmd:hover code { text-decoration-color: currentColor; color: var(--hielo); } /* El boton, DENTRO de la caja y sin verse hasta que se busca. En el movil no hay raton, pero sigue estan ahi: por eso esta oculto y no quitado. */ .instalar .instalar-cmd .copiar { position: absolute; right: 0.55rem; top: 50%; transform: translateY(-50%); padding: 0.4rem 0.7rem; border: 1px solid transparent; border-radius: 7px; background: transparent; opacity: 0; transition: opacity 0.18s, color 0.18s, border-color 0.18s, background 0.18s; } .instalar .instalar-cmd:hover .copiar, .instalar .instalar-cmd:focus-within .copiar { opacity: 1; border-color: var(--linea-alta); } .instalar .instalar-cmd .copiar:hover { color: var(--hielo); border-color: var(--hielo); } /* Cuando ha copiado se ve siempre un momento: con opacity 0 no se sabria que ha pasado nada. El texto lo pone el copiador. */ .instalar .instalar-cmd .copiar.hecho { opacity: 1; color: #7fb08a; border-color: #7fb08a; background: rgba(127, 176, 138, 0.12); } html.claro .instalar .instalar-cmd .copiar.hecho { color: #2f7a45; border-color: #2f7a45; background: rgba(47, 122, 69, 0.10); } @media (max-width: 620px) { /* En un movil el comando se parte en varias lineas y el boton, en el centro vertical, caeria encima del texto. Se va arriba a la derecha y el texto deja de hueco solo arriba. */ .instalar .instalar-cmd { padding: 2.5rem 1.1rem 1rem; } .instalar .instalar-cmd .copiar { top: 0.55rem; transform: none; } } /* ══ LA SECCION DE HYPRLAND ═══════════════════════════════════════════════ El mismo lenguaje que el resto: fila que se abre en su sitio, sin recuadros. Lo que cambia aqui es la estructura. Antes era todo una columna con el texto medido a 74ch, con lo que la mitad derecha de la pagina se quedaba vacia y seemed un documento al que le sobra pagina. Ahora son dos columnas: la identidad a la izquierda, que se queda pegada al leer, y las piezas a la derecha, que son largas y narrow. */ .seccion { padding-top: clamp(3.5rem, 9vh, 7rem); padding-bottom: 1rem; scroll-margin-top: 4rem; } .seccion .rejilla-seccion { display: grid; gap: 0 clamp(2rem, 4vw, 4rem); grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); align-items: start; } @media (max-width: 940px) { .seccion .rejilla-seccion { grid-template-columns: 1fr; gap: 2.2rem; } } /* ── La identidad ─────────────────────────────────────────────────────────── */ .identidad { display: flex; flex-direction: column; } @media (min-width: 941px) { .identidad { position: sticky; top: 5rem; } } .cabecera-seccion { display: flex; align-items: baseline; gap: 0.6rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--linea); } /* El punto azul de los titulos. Clase suelta y no descendiente de .cabecera-seccion: la cabecera del manual esta fuera de esa clase, y con el selector descendiente el punto de ahi salia sin pintar — un vacio, que no se ve pero ocupa el hueco y separa la palabra de donde tocaba. */ .punto-mini { width: 8px; height: 8px; border-radius: 50%; background: var(--azul-4); flex: none; align-self: center; display: inline-block; } .cabecera-seccion h2 { font: 600 0.86rem/1 var(--f); letter-spacing: 0.3em; text-transform: uppercase; color: var(--hielo); } .cabecera-seccion .meta { margin-left: auto; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); white-space: nowrap; } /* El icono de Arch, a la izquierda de la version. El tamano va en em porque la linea de la cabecera es de 0.6rem: asi escala con la fuente y en un movil, donde la linea crece, crece con ella. A 1.35em sale a 13 px en escritorio y a unos 17 en movil, que es donde el cuadrado azul con la A blanca se lee todavia; el SVG que habia antes ocupaba 0.78em, o sea 7 px, y a esa medida el corte que lo hacia logo de Arch se perdia. El margen sube tambien porque un cuadrado tiene mas cuerpo que un trazo y con el de antes se pegaba al numero. */ .logo-arch { width: 1.35em; height: 1.35em; /* Mas aire a la derecha que antes. El 0.5em de la primera version era poco: la linea lleva letter-spacing 0.12em, que se suma al margen, pero entre el cuadrado y la V se aun asiaban las dos y el icono parecia pegado al numero. A 0.8em el hueco es de unos 7 px a tamano de escritorio y 9 en movil. */ margin-right: 0.8em; /* El cuadrado tiene fondo y la linea no, asi que se baja mas que en un texto: centrado se leeria como una linea mas alta que el resto. */ vertical-align: -0.3em; border-radius: 22%; } .lema { margin-top: 1.4rem; font-size: clamp(1.15rem, 2.1vw, 1.5rem); line-height: 1.35; color: var(--hielo); letter-spacing: -0.015em; text-wrap: balance; } .intro { margin-top: 0.9rem; font-size: 0.8rem; color: var(--gris); } /* Lo que hay vivo en la sesion. Sin caja: tres numeros y sus etiquetas, con un filete encima, porque un dato de ahora mismo tiene que distinguirse de una frase escrita. */ .vivos { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--linea); } .vivo { display: flex; align-items: baseline; gap: 0.6rem; } .vivo b { font-size: 1.35rem; font-weight: 500; color: var(--hielo); font-variant-numeric: tabular-nums; min-width: 3.2rem; } .vivo span { font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gris); } .etiquetas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.75rem; margin-top: 1.3rem; } .etiquetas span { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); } .etiquetas span + span::before { content: "·"; margin-right: 0.75rem; color: rgba(107, 130, 140, 0.45); } /* ── Los botones de la seccion ──────────────────────────────────────────── Antes no tenian regla base: solo estaba html.claro .b, que es un tema encima de algo. Salian como texto pelado, sin caja ni borde, y por eso el ennegrecido se notaba raro. Aqui la caja entera, con el mismo radio que el resto de superficies de la pagina (--r). */ .b { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.48rem 0.85rem; border: 1px solid var(--linea-alta); border-radius: var(--r); color: var(--hielo); font-size: 0.72rem; letter-spacing: 0.05em; text-decoration: none; white-space: nowrap; transition: background 0.18s, border-color 0.18s, color 0.18s; } .b:hover { background: rgba(153, 186, 201, 0.07); border-color: var(--gris); } .b:focus-visible { outline: 2px solid var(--azul-4); outline-offset: 2px; } /* El boton de Github, ENTERO en blanco. No el gris azulado de --hielo: el logo, el texto y el borde son blancos puros en el tema oscuro, y negros puros en el claro. Es el color del logo de verdad, no un tono de la pagina. El fondo de la caja del mark se queda transparente. Con la caja invertida el icono salia del color de la caja y no blanco, que es justo lo que no queria. */ .b-gh { color: #ffffff; border-color: rgba(255, 255, 255, 0.28); } .b-gh:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.5); } .b-gh .marca { width: 1.35rem; height: 1.35rem; flex: none; display: grid; place-items: center; border-radius: 7px; background: transparent; color: #ffffff; transition: background 0.18s; } .b-gh .marca svg { width: 0.95rem; height: 0.95rem; display: block; } html.claro .b-gh { color: #000000; border-color: rgba(0, 0, 0, 0.3); } html.claro .b-gh:hover { color: #000000; background: rgba(0, 0, 0, 0.06); border-color: rgba(0, 0, 0, 0.55); } html.claro .b-gh .marca { color: #000000; } .acciones-seccion { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem; /* El de github a la izquierda y el del manual a la derecha, con el hueco en medio. Antes eran dos enlaces juntos en una esquina y con space-between se quedan en los dos extremos, que es lo que se ha pedido. En un movil, que no cabe la separacion, se vuelven a juntar y se alinean a la izquierda. */ justify-content: space-between; align-items: center; } /* El boton del manual, con la flecha dibujada con bordes y no con un glifo: la de la derecha tiene que ser la misma en los dos temas y en cualquier fuente, y el glifo cambiaba de peso entre sistemas. */ .b-flecha { display: inline-flex; align-items: center; gap: 0.6rem; } .b-flecha i { width: 0.5rem; height: 0.5rem; flex: none; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); transition: transform 0.18s; } .b-flecha:hover i { transform: rotate(45deg) translate(2px, -2px); } @media (max-width: 560px) { .acciones-seccion { justify-content: flex-start; } } /* ── Las piezas ───────────────────────────────────────────────────────────── Una fila, con un filo a la izquierda que se enciende al abrirla. Sin caja: son muchas, y veinte recuadros serían veinte cajas. */ .piezas { display: flex; flex-direction: column; } .pieza { display: flex; align-items: center; gap: 0.8rem; width: 100%; text-align: left; cursor: pointer; padding: 0.85rem 0.2rem; border-bottom: 1px solid var(--linea); transition: background 0.18s, padding 0.18s; } .pieza:first-child { border-top: 1px solid var(--linea); } .pieza:hover { background: rgba(153, 186, 201, 0.04); padding-left: 0.7rem; padding-right: 0.7rem; } .pieza .filo { width: 2px; height: 1.6rem; flex: none; border-radius: 1px; background: var(--linea-alta); transition: background 0.22s, height 0.22s; } .pieza[aria-expanded="true"] .filo { background: var(--oxido); height: 2.6rem; } .pieza .cuerpo { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; } .pieza .cuerpo b { font-size: 0.9rem; font-weight: 500; color: var(--hielo); } .pieza .cuerpo i { font-style: normal; font-size: 0.73rem; color: var(--gris); } /* Los chips de cada pieza. Antes eran capsulas con borde, y veinte filas con dos o tres cajas cada una salian como un panel de botones. Ahora son texto pelado a la derecha de la fila, separado por un punto. */ .chips-fila { margin-left: auto; display: flex; align-items: center; gap: 0.45rem; white-space: nowrap; } .chips-fila::before { content: "·"; color: var(--gris); margin-right: 0.15rem; } .chip-mini { font-size: 0.6rem; letter-spacing: 0.1em; color: var(--gris); } .chip-mini + .chip-mini::before { content: "·"; margin: 0 0.4rem 0 -0.1rem; color: rgba(107, 130, 140, 0.5); } @media (max-width: 700px) { .chip-mini { display: none; } } .pieza .mas { width: 1.4rem; text-align: right; flex: none; font-size: 0.95rem; color: var(--gris); } /* La abierta: el detalle debajo de su propia fila, con una sangria que se nota. */ .abierta { padding: 0.4rem 0 1.2rem 1rem; display: flex; flex-direction: column; gap: 0.55rem; border-bottom: 1px solid var(--linea); animation: surgir 0.24s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes surgir { from { opacity: 0; transform: translateY(-5px); } } .abierta p { font-size: 0.78rem; color: var(--gris); max-width: 68ch; padding-left: 0.7rem; border-left: 1px solid var(--linea); } /* Las banderas del instalador, en monoespaciada, que es como se escriben. */ .banderas { display: flex; flex-direction: column; gap: 0.32rem; margin-top: 0.35rem; padding-left: 1.4rem; } .banderas > div { display: grid; grid-template-columns: minmax(9.5rem, auto) 1fr; gap: 0.7rem; align-items: baseline; } .banderas code { font: 0.72rem/1.5 var(--f); color: var(--azul-4); border: 1px solid var(--linea); border-radius: 6px; padding: 0.05rem 0.4rem; white-space: nowrap; } .banderas span { font-size: 0.74rem; color: var(--gris); } .abierta .etiquetas { margin-top: 0.5rem; padding-left: 1.4rem; } /* ══ EL PIE, QUE ES EL MENU ═══════════════════════════════════════════════ Cuatro columnas: la marca, la pagina, lo de alrededor y los datos. En un movil van en dos, y en uno estrecho en una. Es el sitio donde esta la navegacion de verdad. La barra lleva cuatro cosas y en un movil solo caben dos, con lo que sin este menu no habia manera de llegar a nada. */ .pie-menu { display: grid; gap: 1.8rem 2rem; /* Dos columnas: la marca con su lema y los enlaces. -- Aqui estaba `minmax(0, 1.3fr) minmax(0, 1fr)`, y eso dejaba un agujero enorme en medio. Medido a 1440: la columna de la marca media 538 px, pero su texto —el rotulo y el lema, que lleva un tope de 24ch— ocupa 202. Los 336 px que sobraban de esa columna, mas los 38 del hueco entre columnas, eran 374 px de vacio entre el lema y "THIS PAGE". En la captura se veia como que las dos columnas estaban separadas por un tramo que no era de nadie. -- La marca mide lo que mide su contenido, que son dos lineas cortas, y el hueco se lo queda la columna de los enlaces. Con eso la marca queda pegada a su texto y el aire queda donde tiene sentido: entre las dos cosas, no dentro de una. Los enlaces se quedan a la derecha porque su columna es la que crece. -- `auto` y no `1.3fr`: en una rejilla, una pista `auto` con lo que hay dentro es del ancho de su contenido mas la parte de la fraccion que le toca. Con dos pistas y la segunda al 100%, la primera se queda con lo suyo. */ grid-template-columns: auto minmax(0, 1fr); align-items: start; padding-top: clamp(2.4rem, 6vh, 4.5rem); padding-bottom: clamp(2.5rem, 6vh, 4.5rem); border-top: 1px solid var(--linea); } /* El pie se estrecha antes que el resto: con dos columnas, la marca y los enlaces uno al lado del otro se quedan sin aire mucho antes de que la pagina se agobie. A partir de aqui van en vertical. */ @media (max-width: 560px) { .pie-menu { grid-template-columns: 1fr; gap: 1.6rem; } } /* En una columna, la linea de abajo se apila: separadas por un hueco de 1,5 rem a izquierda y derecha ya no estan ni cerca, y quedan mas separadas de lo que deben. */ @media (max-width: 460px) { .pie-fin { flex-direction: column; gap: 0.35rem; } } .rotulo-menu { font: 600 0.78rem/1 var(--f); letter-spacing: 0.22em; text-transform: uppercase; color: var(--hielo); } .rotulo-menu:hover { color: #fff; } .marca-menu p { margin-top: 0.6rem; font-size: 0.74rem; color: var(--gris); max-width: 24ch; } /* Los creditos: donde sale la pagina y que usa para no pedir nada. Con su propio bloque y no pegado al lema, porque el lema es el del proyecto y esto es lo de la pagina. Los enlaces heredan el color de los de las columnas para que se lean como enlaces y no como texto suelto. */ /* El max-width va el mismo que el del lema de arriba (24ch) y no 26ch. Con 26 el filete que dibuja el border-top llegaba mas alla del texto que tiene encima y de debajo, y se leia como un ancho puesto a ojo en vez de como el separador de un bloque con su propio ancho. */ .creditos-menu { margin-top: 1.1rem !important; padding-top: 0.85rem; border-top: 1px solid var(--linea); font-size: 0.66rem !important; line-height: 1.75; color: rgba(107, 130, 140, 0.8) !important; max-width: 24ch; } .creditos-menu a { color: var(--gris); transition: color 0.18s; } .creditos-menu a:hover { color: var(--hielo); } /* La linea de abajo, de lado a lado como en el pie de omarchy.org. Va con grid-column para ocupar las cuatro columnas del grid de arriba, y con su propio filete: es el cierre del pie, no una columna mas. */ .pie-fin { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; margin-top: 0.6rem; padding-top: 1.1rem; border-top: 1px solid var(--linea); font-size: 0.64rem; color: rgba(107, 130, 140, 0.72); } .pie-fin a { color: var(--gris); transition: color 0.18s; } .pie-fin a:hover { color: var(--hielo); } .col-menu { display: flex; flex-direction: column; gap: 0.34rem; } /* El rotulo de cada columna, pequeno y apagado, para que se lea como seccion y no como un enlace mas. */ .col-menu h3 { font: 600 0.58rem/1 var(--f); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(107, 130, 140, 0.72); margin-bottom: 0.35rem; } /* El segundo rotulo de la columna, el de "Elsewhere", va separado del primero: los dos grupos viven en la misma columna y sin este margen el segundo se leeria como otro enlace mas de la lista de arriba. */ .col-menu h3.rotulo-segundo { margin-top: 1.1rem; } .col-menu a { font-size: 0.76rem; color: var(--gris); width: fit-content; transition: color 0.18s; } /* Los enlaces de "Around it" van dentro de un div para que app.js los pueda ir pintando. El div tiene que ser una columna con su propio hueco, igual que la columna que lo contiene, o los enlaces se quedarian todos en la misma linea. */ .col-menu > div { display: flex; flex-direction: column; gap: 0.34rem; } .col-menu a:hover { color: var(--hielo); } /* nowrap SOLO en los dos sellos, y no en todos los span de la columna: la ficha de la maquina es una linea larga a proposito ("kernel, uptime, load, disco, servicios") y tiene que poder partirse por donde toque. Acotarlo a los sellos es lo que evita dos cosas a la vez: que "4 min / ago" quede colgando, que parece un fallo, y que la ficha se salga de la pantalla. */ /* El clip. Ocupa todo el ancho del contenido y va sin sangria: es el elemento principal de la seccion, y con 1.4rem de margen se quedaba corto al lado de una cabecera que si va de borde a borde. */ .clip { margin: 1.4rem 0 0; } /* La caja del video y el boton grande. El boton va de HERMANO, no dentro: por una regla de HTML, dentro de un