/* =========================================================== Responsive — transferido de Maqueta_Malba/style/responsive.css (entrega del 2026-09-11, la primera que trae el trabajo de mobile). POR QUÉ VA EN UN ARCHIVO APARTE ------------------------------- Porque así lo separa la maqueta, y conviene mantener la correspondencia: al llegar una entrega nueva se compara archivo contra archivo en vez de buscar las media queries mezcladas entre 1800 líneas de custom.css. Se carga DESPUÉS de custom.css (ver conf/assets.conf), que es lo que hace que estas reglas ganen a igual especificidad. OJO CON LO QUE YA ESTÁ EN custom.css ------------------------------------ custom.css tiene cuatro media queries propias, escritas por nosotros para cosas que la maqueta no contempla por ser estática: - (max-width: 1023px) y (max-width: 480px), líneas ~545 y ~554: el alto del body y el menú overlay. Header y footer YA funcionan en mobile, así que acá no se tocan. - (max-width: 1023px) y (max-width: 520px), líneas ~1224 y ~1236: el encabezado del browse cuando hay control de orden. Hoy ese control está oculto por pedido del cliente, así que esas reglas no hacen nada, pero quedan por si vuelve. LO QUE HUBO QUE ADAPTAR, Y ES LA TRAMPA DE SIEMPRE ------------------------------------------------- La maqueta corre `.grid` y `.list` cuando se abren los filtros; nuestro theme corre `> .browse-results-col`, un contenedor que agregamos nosotros y que la maqueta no tiene. Copiar el selector de la maqueta tal cual haría que el listado se desplace DOS veces —ya pasó en el theme de EFC, ver bitacora-malba.md—. Por eso abajo va nuestro selector. =========================================================== */ /***TABLETS Y NOTEBOOKS CHICAS *****************************************************/ @media (min-width: 481px) and (max-width: 1023px) { :root { --fontSizeXSmall: 0.9rem; --fontSizeSmall: 0.9rem; --fontSizeMedium: 1.2rem; --fontSizeLarge: 2.5rem; --fontSizeXLarge: 2.5rem; --fontSizeLogo: 1rem; --spaceX: calc(var(--fontSizeSmall) * var(--lineHeightHigh)); --spaceY: calc(var(--fontSizeSmall) * var(--lineHeightHigh)); --colGutter: calc(var(--spaceX) * 0.5); --headerHeight: calc(var(--spaceY)*1 + var(--rowGutterMedium)); } /* Encabezado de sección: el bloque de acciones deja de ocupar media pantalla. */ section .section_header .header_actions { width: calc(var(--colWidth) * 7 + var(--colGutter) * 6); } /* Barra de búsqueda: menos aire vertical. */ .search { padding-block: calc(var(--spaceY)*0.5); } /* Carruseles de miniaturas (obras relacionadas, imperdibles, últimas adquisiciones): cada obra pasa de 3 a 5 columnas de ancho. */ .flexible .flex_item .item_media { width: calc(var(--colWidth) * 5 + var(--colGutter) * 4); } /* Vista de lista: los encabezados de columna no envuelven, se cortan con puntos suspensivos. */ .list .list_header > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .list_row .row_link .row_media { grid-column: 1 / 3; } .artwork_video { grid-gap: calc(var(--rowGutterMedium) * 1) var(--colGutter) !important; } .artwork_video .video_container, .artwork_video .video_footer { grid-column: 1 / 13 !important; } } /***CELULARES *****************************************************/ @media (max-width: 480px) { :root { --fontSizeXSmall: 0.75rem; --fontSizeSmall: 1rem; --fontSizeMedium: 1.3rem; --fontSizeLarge: 1.9rem; --fontSizeXLarge: 2.5rem; --fontSizeLogo: 1.3rem; --spaceX: calc(var(--fontSizeSmall) * var(--lineHeightHigh)); --spaceY: calc(var(--fontSizeSmall) * var(--lineHeightHigh)); --colGutter: calc(var(--spaceX) * 0.5); --headerHeight: calc(var(--spaceY)*2 + var(--rowGutterMedium)); } /* El encabezado de sección pasa a dos renglones: título arriba, acciones abajo. */ section .section_header { /*flex-direction: column;*/ align-items: start; } section .section_header .header_title { margin-bottom: calc(var(--rowGutterSmall)*0.5); } section .section_header .header_actions { /*justify-content: start; width: 100%;*/ } /* HEADER: "Colección Malba" en un solo renglón. * * Esto NO está en la maqueta, y la razón es que su header mobile es otro: * el diseñador esconde el nav entero (`header .header_menu {display:none}`) * y lo reemplaza por un botón hamburguesa suelto más un panel * `nav.menu_mobile`. Sin nada al lado, el título le entra holgado. * * Nosotros conservamos "English + Menú" en el header también en celular, * porque el menú es el clon en iframe de malba.org.ar y se abre desde ahí. * Ese nav reserva media grilla —`width: calc(colWidth*6 + colGutter*5)` en * default.css— aunque su contenido mida ~130px, y ese hueco de más es lo * que dejaba al título sin lugar y lo partía en dos renglones. * * Van tres cosas juntas, y las tres hacen falta: * 1. `nowrap`, para que no se parta. * 2. el nav encogido a su contenido, que es de donde sale el espacio. * 3. un tope fluido al cuerpo del logo, porque ni así entra en los * teléfonos angostos: el ancho que necesita el título crece ~9.3vw * menos un fijo, así que por debajo de ~400px el logo se achica solo. * Arriba de eso manda --fontSizeLogo y se ve el cuerpo de diseño. * Medido de 320 a 480px: siempre un renglón y el botón "Menú" siempre * dentro de la pantalla. Con solo el `nowrap`, de 390px para abajo el * "Menú" quedaba fuera de la pantalla (y sin scroll horizontal que lo * rescatara, así que era inalcanzable). */ header .site_name a { white-space: nowrap; } header nav.header_menu ul { width: auto; gap: var(--spaceX); } header .site_name { font-size: min(var(--fontSizeLogo), calc(9.3vw - 16px)); } /* Barra de búsqueda: "Obras / Artistas" arriba y el buscador DEBAJO, en vez de los dos en la misma línea. Sin esto quedan uno encima del otro: a 420 px cada mitad mide 182 px y el texto se superpone. */ .search { flex-direction: column; row-gap: calc(var(--spaceY)*0.5); } .search .search_nav, .search .search_actions { width: 100%; } /* Grilla de obras: de cuatro columnas a dos (span 6 de 12). */ .grid .grid_item { grid-column: span 6; } /* Panel de filtros: en celular ocupa casi toda la pantalla y empuja al listado fuera de la vista, en vez de convivir con él. ACÁ ESTÁ LA ADAPTACIÓN: la maqueta escribe .filterable.filters_on .grid, .filterable.filters_on .list, … y nuestro theme envuelve los resultados en `.browse-results-col`. Con el selector de la maqueta el desplazamiento se aplicaría al contenedor Y a la grilla de adentro, o sea dos veces. */ .filterable.filters_on > .browse-results-col, .filterable.filters_on .filters { right: calc(var(--colWidth) * 12 + var(--colGutter) * 13); } .filterable.filters_on .filters { width: calc(100vw - var(--spaceX)*2); } /* Vista de lista: solo imagen y título; el resto de las columnas no entra y se oculta. */ .list_row .row_link .row_media { grid-column: 1 / 7; } .list_row .row_link .row_title { grid-column: 7 / 13; } .list .list_header, .list_row .row_link .row_location, .list_row .row_link .row_date, .list_row .row_link .row_count { display: none; } /* =========================================================== FICHA DE OBRA Y DE ARTISTA EN CELULAR La imagen se mete ENTRE el título y los tags, sin duplicar markup. QUÉ HACE LA MAQUETA, Y POR QUÉ NO LA COPIAMOS TAL CUAL ----------------------------------------------------- El diseñador agrega un segundo bloque `.sheet_media_mobile` adentro de `.data_main` (comentado `` en pagina_obra.php y pagina_artista.php), esconde la columna real con `body#artwork .sheet .sheet_media { display: none }` y listo. Para una maqueta estática es lo más barato. Para nosotros no: ese bloque no es HTML suelto, es el `viewer.php` entero —elegir la mejor versión del medio, comprobar que el archivo exista, calcular la proporción, el aviso legal por valor global, el spinner—. Duplicarlo significa mantener dos veces la misma lógica PHP y que un arreglo hecho en una sola quede a medias. Además el navegador se descargaría la imagen dos veces, o habría que acordarse de no hacerlo. POR QUÉ `order` SOLO NO ALCANZA (que era la duda) ------------------------------------------------ Porque `order` reordena HERMANOS dentro de un mismo contenedor flex o grid, y acá el destino está más abajo en el árbol: la imagen es `.sheet > .sheet_media`, y tiene que quedar entre `.main_header` y `.main_footer`, que son nietos (`.sheet > .sheet_data > .data_main`). Ningún `order` mueve un elemento a otro contenedor. Es muy posible que por eso el diseñador haya ido al bloque duplicado. Lo que sí lo resuelve es aplanar el árbol antes de ordenar: `display: contents` hace desaparecer la CAJA de `.sheet_data` y de `.data_main` dejando a sus hijos en su lugar, así que `.main_header`, `.main_footer`, `.data_info` y `.sheet_media` pasan a ser todos hijos directos de `.sheet` — recién ahí son hermanos y `order` los ordena. LO QUE HAY QUE TENER EN CUENTA ------------------------------ - Al desaparecer la caja de `.data_main` se pierde su `row-gap`, por eso el gap se repone en `.sheet`. - Todo hijo sin `order` vale 0 y se iría al principio: por eso están numerados los cuatro. - `display: contents` no borra el elemento del DOM, así que los selectores de escritorio le siguen pegando. De ahí las tres reglas de abajo que apagan los anclajes de escritorio (los `sticky` y los altos de 100vh), que en una columna no tienen sentido. =========================================================== */ .artwork_sheet .sheet { display: flex; flex-direction: column; row-gap: var(--rowGutterMedium); /* En escritorio `.sheet` es una grilla con `align-items: start`, que ahí alinea las dos columnas arriba. En una columna esa misma declaración pasa a significar "cada caja mide lo que su contenido", y dejaba al título en 259px y a los tags en 0. */ align-items: stretch; } .artwork_sheet .sheet > .sheet_data, .artwork_sheet .sheet .data_main { display: contents; } .artwork_sheet .main_header { order: 1; } .artwork_sheet .sheet_media { order: 2; } .artwork_sheet .sheet_media_mobile { order: 2; } .artwork_sheet .main_footer { order: 3; } .artwork_sheet .data_info { order: 4; } .artwork_sheet .data_action { order: 5; } /* Anclajes de escritorio apagados. Llevan el `body#artwork` porque así están escritos en custom.css y hay que igualarles la especificidad. */ body#artwork .sheet .sheet_data .data_main .main_header { position: static; margin-bottom: 0; } body#artwork .sheet .sheet_media { position: static; height: auto; } .sheet .sheet_data .data_info { margin-top: 0; } /* La imagen ocupa el ancho de la pantalla, como en la maqueta. En escritorio el marco se encoge al ancho que va a tener la imagen cuando su altura toque el tope de la ventana; en una columna eso sobra, y el tope de altura además deformaría la imagen al combinarse con el ancho completo. */ .sheet .sheet_media .media_marco { width: 100%; align-self: stretch; } .sheet .sheet_media .media_marco > img, .sheet .sheet_media > a > img { max-height: none; } /* El "+" que abre el lightbox se esconde, como en la maqueta (`.media_footer .footer_actions svg.plus_cross { display: none }`). Tiene sentido: en celular la imagen ya se ve a todo el ancho de la pantalla, así que el lightbox no agrega casi nada, y el "+" quedaba colgando al costado del aviso legal. El lightbox sigue existiendo y funcionando; si se lo quiere de vuelta, se borra esta regla. */ .sheet_media .media_footer .footer_actions svg.plus_cross { display: none; } /* Carruseles de miniaturas: 10 de 12 columnas, o sea casi el ancho de la pantalla, y se pasa de una obra a la otra arrastrando. Sin esto las miniaturas quedaban de 85px, ilegibles. flex_item: obras relacionadas (works_slider). grid_item: multirelated de entidades (browse teasers dentro de .flexible). */ .flexible .flex_item .item_media, .flexible .grid_item .item_media { width: calc(var(--colWidth) * 10 + var(--colGutter) * 9); } .flexible .grid_item { width: calc(var(--colWidth) * 10 + var(--colGutter) * 9); } /* Los textos largos de la ficha (comentarios sobre la obra) pierden la sangría, que a este ancho se come media línea. */ .data_info .info_row .row_content.row_text { padding: 0; } .artwork_text .text { grid-column: 1 / 13; } /* Abecedario de artistas: envuelve en varias líneas. */ .artists > .alphabet { gap: calc(var(--spaceY) * 0) calc(var(--spaceX) * 0.5); flex-wrap: wrap; } .artwork_video { grid-gap: calc(var(--rowGutterMedium) * 1) var(--colGutter) !important; } .artwork_video .video_container, .artwork_video .video_footer { grid-column: 1 / 13 !important; } }