pierden su tamano de papel por completo: la unidad de pantalla ya no son ellas, son sus hijos .pantalla. */ .page{ display:contents; } .pantalla{ position:relative; min-height:100dvh; scroll-snap-align:start; scroll-snap-stop:always; display:flex; flex-direction:column; justify-content:center; padding:calc(var(--margen) + env(safe-area-inset-top)) var(--margen) calc(56px + env(safe-area-inset-bottom)); margin:0 auto; /* Nada de lo de adentro se decidio pensando en 320-390px: sin el min() con 100% una tabla o una fila con varias columnas se sale de la columna en vez de encogerse. */ max-width:min(var(--ancho-col), 100%); /* El gesto del recorrido normal es deslizar para avanzar, no pellizcar: sin esto el navegador trae pinch-zoom por defecto (touch-action es "auto" en toda la pagina, medido, no supuesto) y el pellizco amplia la revista entera en vez de abrir el visor. Se declara aqui y no en html/body a proposito: el dialog del visor (Task 10, revista.js) cuelga de body como hermano de las .pantalla, no como su hijo, y touch-action se resuelve por interseccion con TODOS los ancestros del punto de toque — si quedara en html o body, esa misma restriccion le llegaria tambien al visor y el pellizco de adentro dejaria de funcionar. Restringido aqui, el dialog nunca desciende de un elemento con pan-y y su propio touch-action (pinch-zoom pan-x pan-y, en .visor-lienzo) llega intacto. */ touch-action:pan-y; } /* Las pantallas mas altas que el telefono —carta editorial y reportaje— encajan arriba y se leen scrolleando. Que se puedan leer por dentro no es una esperanza, es una garantia de la especificacion: cuando el area de encaje es MAS ALTA que el viewport, toda posicion en la que el area lo cubre es una posicion de encaje valida, siempre que entre la posicion valida anterior y la siguiente quepa mas de un viewport. Aqui se cumple con holgura —la carta mide 1407px y el hueco entre su inicio y el inicio de la apertura siguiente es de 1407px, contra 844 de viewport; el reportaje mide 1747 sobre el mismo margen—, o sea que el lector recorre el texto entero sin que el encaje lo devuelva al principio. Lo comprueba tests/test_encaje.py. `scroll-snap-stop:normal` ademas evita que el impulso se corte a media lectura: pasar por encima de una pantalla alta no es saltarse contenido, porque la pantalla alta no se abandona hasta que se termina de recorrer. */ .pantalla.alta{ justify-content:flex-start; scroll-snap-stop:normal; } /* Las de foto a sangre se salen del ancho de columna y ocupan todo. */ .pantalla.sangre{ max-width:none; padding:0; justify-content:flex-end; } /* ---------- tipografia de pantalla ---------- */ .pantalla p{ font-size:18px; line-height:1.6; font-weight:400; text-align:left; /* nada de justify: en 340px abre rios blancos */ hyphens:none; /* Victoria, 8-ago: las palabras van completas */ } .pantalla p + p{ text-indent:0; /* en pantalla la sangria se cambia por aire */ margin-top:1.1em; } .pantalla h2{ font-size:30px;font-weight:300;line-height:1.15; margin-bottom:20px; } .pantalla h3{ font-size:22px;font-weight:400;line-height:1.25; margin-bottom:12px; } .pantalla .eyebrow{ font-family:'Tenor Sans',sans-serif;font-size:11px;letter-spacing:.34em; text-transform:uppercase;color:var(--selva); margin-bottom:16px; } .pantalla .cierre{ font-size:14px;line-height:1.55;color:var(--selva); margin-top:24px;padding-top:14px; border-top:1px solid var(--salvia); } .pantalla .capitular::first-letter{ font-size:64px;line-height:.8;float:left;font-weight:300; margin:4px 8px 0 0;color:var(--selva); } .pantalla .rombo{ display:inline-block;width:9px;height:9px;border:1px solid var(--selva); transform:rotate(45deg);margin-left:7px;vertical-align:middle; } .pantalla img{max-width:100%;height:auto;display:block;} /* Tope de ancho solo donde el contenido trae un tamano propio que no viene del texto: imagenes, figuras y tablas. NO se hereda a todo `.pantalla *`. Un `*{max-width:100%}` frena el desborde, si, pero de paso apaga a `test_sin_desborde_horizontal_a_320`, que es el unico vigilante que tiene este reflow. Esta comprobado, no es una sospecha: se metio a proposito un `.sumario .sub{width:520px}` en un viewport de 320px y - con la regla acotada, como esta ahora, el test truena: "pantallas que desbordan a 320px: [[2, 544]]" - con `.pantalla *{max-width:100%}` encima, el MISMO desperfecto pasa en verde. O sea que la red de seguridad amplia no protegia: tapaba. Lo que desborde a partir de aqui se arregla en el layout que lo causa. */ .pantalla table{width:100%;border-collapse:collapse;} .pantalla th,.pantalla td{overflow-wrap:break-word;} .pantalla img, .pantalla figure, .pantalla svg{max-width:100%;} /* Palabras sueltas mas anchas que la columna a 320px (URLs, "32,396.04 m²"). */ .pantalla{overflow-wrap:break-word;} /* Los folios del papel no van en pantalla: los sustituye el contador de revista.js, que ademas dice en cual de las 48 vas. */ .folio{display:none;} /* La firma vertical al filo de la pagina es un recurso de papel. */ .pie-vertical{ writing-mode:horizontal-tb; font-family:'Tenor Sans',sans-serif;font-size:9px;letter-spacing:.28em; text-transform:uppercase;color:var(--selva); /* En vertical no habia interlinea porque cada credito era un renglon; a lo ancho del telefono el mas largo —"Conjunto entre la selva · render de proyecto"— parte en dos y los renglones se tocaban. */ line-height:1.8; } /* Los ocho .pie-vertical traen su posicion Y su color en un atributo style —`right:7mm; top:16mm; color:rgba(255,255,255,.85)`—, medidos sobre la pagina de 280x210mm y sobre el punto exacto de la foto donde caian en papel. En el telefono la foto se recorta y se reencuadra, asi que esas coordenadas ya no apuntan a nada: el credito de las aperturas aterrizaba encima del titular, y el de la carta y el del reportaje quedaban en blanco sobre cielo claro o sobre arena. Un atributo style solo se desactiva con `!important`, de modo que aqui se neutralizan de golpe las cuatro coordenadas y el color, y el pie pasa a ser un elemento mas del flujo. Cada familia lo recoloca abajo: en las aperturas vuelve a blanco, porque ahi si hay degradado oscuro debajo; en las demas se queda en selva sobre el hueso, que es donde se lee siempre. OJO con el color: la primera version de este arreglo puso --salvia, que a 9px sobre --hueso da 1.7:1 de contraste — ilegible, y por el extremo contrario del problema que motivo el arreglo. --selva sobre --hueso da 3.8:1, que si se lee. Si se vuelve a tocar este color, medir el contraste antes de subirlo, no despues. */ .pantalla .pie-vertical{ inset:auto !important; color:var(--selva) !important; } /* Fuera de las aperturas el credito es una linea de cierre alineada al filo derecho de la columna, no un rotulo encima de la imagen. */ .editorial .pie-vertical, .reportaje .pie-vertical, .espacio .pie-vertical{text-align:right;} /* Marca de continuacion: la pantalla no abre, sigue. Tres paginas apaisadas se partieron en dos y la segunda mitad empieza en frio, sin titulo ni cintillo de seccion. El texto editorial no se puede repetir, asi que la senal es tipografica: una linea fina que entra desde fuera del margen y muere a media columna. Una regla que viene de la izquierda —de la pantalla anterior— y no un remate simetrico. */ .pantalla.continua::before{ content:"";position:absolute;left:0; top:calc(30px + env(safe-area-inset-top)); width:calc(var(--margen) + 38px);height:1px;background:var(--salvia); } /* Los 30px estan medidos para una pantalla centrada, donde arriba solo hay hueso. En una pantalla alta el contenido arranca pegado al borde superior —el padding es de 24px— y la marca le cae encima: en la del mapa de zona cruzaba la esquina del mapa, y en la de las etapas quedaba a 6px del filete de la primera etapa, o sea leyendose como una regla doble. Aqui sube a la banda de padding, que es el unico hueco que queda. */ .pantalla.alta.continua::before{top:calc(9px + env(safe-area-inset-top));} /* ===================================================================== FOTO A SANGRE · portada y las cuatro aperturas de seccion ===================================================================== */ .pantalla.sangre img.foto{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;z-index:0;max-width:none; } /*