/* ========================================================================= MOIRE - /about ------------------------------------------------------------------------- Nodos 9:2936 (1920) y 249:1759 (375). LA PAGINA SON CUATRO VECES LA MISMA SECCION: una fotografia, una palabra enorme en rojo y un parrafo en crema sobre fondo burdeos. Lo unico que cambia entre ellas es el contenido y el lado por el que entra la foto, que alterna izquierda-derecha-izquierda-derecha. EL GESTO DEL DISENO ES QUE LA PALABRA SE MONTA SOBRE LA FOTO, y eso es lo que hay que conservar por encima de cualquier otra cosa. No es un adorno: sin el solape la pagina son cuatro bloques de texto al lado de cuatro fotos, que es exactamente lo que el diseno no es. En 1920 la palabra invade la fotografia por un lado; en 375, donde la foto va a sangre y el texto debajo, la invade por el borde inferior. Los dos artboards hacen lo mismo con medios distintos. TRES COMPOSICIONES Y NO UNA ESCALADA: movil (<768) artboard 249:1759, numeros fijos de 375 tablet (768-1279) la composicion de 1920 con sus margenes reajustados escritorio (>=1280) nodo 9:2936 El bloque de movil va en las declaraciones de BASE y no en un max-width, al reves que en las fichas de producto. Aqui si se puede: esta hoja es nueva, no arrastra veinte clamps escritos al reves, y la composicion de 375 es la simple de las dos -una columna- asi que es la que menos cuesta escribir primero y la que menos hay que deshacer despues. ========================================================================= */ /* EL FONDO VA EN EL BODY Y NO EN EL MAIN, y es deliberado. El burdeos tiene que llegar hasta el final de la ventana aunque el contenido no la llene -por ejemplo con la ventana muy alta o el zoom muy bajo- y tiene que pintar tambien la zona de rebote del scroll en los navegadores que la tienen. Puesto en el
quedaria una franja blanca debajo del ultimo parrafo, que es justo donde mas se ve. */ body.about { background: var(--c-burdeos); } /* --- UNA SECCION -------------------------------------------------------- MOVIL (375): la foto a sangre, la palabra montada sobre su borde de abajo y el parrafo debajo. Del artboard: foto 375 x 476, pegada a los dos lados palabra arriba a 526, o sea 22 POR ENCIMA del borde de la foto parrafo 10 por debajo de la caja de la palabra siguiente 20 por debajo del final del parrafo LOS 22 DEL SOLAPE SON LA PAGINA ENTERA EN PEQUENO. Es el mismo gesto que en 1920 -donde la palabra se mete dentro de la fotografia- resuelto con lo unico que cabe a 375: si la foto ocupa el ancho entero no queda sitio al lado, asi que la palabra sube y muerde el borde inferior. NUMEROS FIJOS Y NO vw, igual que en el bloque de movil de las fichas: el artboard esta dibujado a una sola anchura y entre 375 y 767 lo que tiene que crecer es el aire, no la letra. Con vw, a 767 la palabra saldria a 104px -mas grande que a 768, donde entra la composicion de tablet- y el salto en el corte se veria. */ .about__seccion { position: relative; } .about__seccion + .about__seccion { margin-top: 20px; } /* EL AIRE DEL FINAL, QUE NO ES LA SEPARACION ENTRE SECCIONES. El selector de aqui arriba solo actua ENTRE dos secciones, asi que la ultima se quedaba sin nada debajo y su parrafo salia pegado al borde del pie: texto crema sobre burdeos y, un pixel mas abajo, el pie en crema. Sin hueco no se lee donde acaba una cosa y empieza la otra. 48 SON LOS DEL ARTBOARD (47,53 entre el final del parrafo de MAGNETIC y el techo del pie). Se redondea porque el numero de Figma sale de donde cayo un parrafo ingles concreto y aqui el castellano ocupa otra cosa: lo que se copia es el hueco, no la coordenada. */ .about__seccion:last-child { margin-bottom: 48px; } /* height:auto NO SOBRA aunque la imagen lleve width y height en el HTML. Esos dos atributos sobreviven como pista de maquetacion, y con los dos puestos el alto declarado gana: la foto saldria a 1024px de alto reales. Es la misma trampa que costo una tarde en las fichas de producto. */ .about__foto { display: block; width: 100%; height: auto; } .about__texto { padding-inline: 25px; /* el margen del artboard de 375 */ } /* line-height MENOR QUE UNO Y ES DEL DISENO: la caja de la palabra mide 49,155 para un cuerpo de 50,79. La proporcion es 0,9678 y es LA MISMA en los dos artboards (252 sobre 260,38 en el de 1920), asi que se escribe una vez aqui y ninguno de los dos bloques de abajo la repite. */ .about__palabra { margin: -22px 0 0; /* el solape sobre el borde de la foto */ color: var(--c-rojo); font-size: 50.79px; font-weight: var(--peso-bold); line-height: 0.9678; letter-spacing: 0; /* La palabra NO PUEDE PARTIRSE NUNCA, ni aqui ni a 1920. Son las cuatro emes de la marca y media palabra en cada renglon no es un defecto de maquetacion sino otra cosa distinta escrita en la pagina. */ white-space: nowrap; } .about__claim { margin: 10px 0 0; color: var(--c-crema); font-size: 24px; line-height: 0.9167; /* 22/24, el interlineado cerrado del artboard */ } /* ========================================================================== DE 768 EN ADELANTE: LA COMPOSICION DE 1920 -------------------------------------------------------------------------- Aqui la foto deja de ir a sangre y pasa a ocupar un lado de la seccion, con el texto en el otro y la palabra cruzando de uno a otro. Las medidas del nodo 9:2936, sobre una seccion de 1920x1080: foto 807 x 1024, pegada al borde de su lado, arriba a 0 parrafo 925 de ancho, cuerpo 98, interlineado 88, acaba hacia 765 palabra cuerpo 260,38, caja 252, arriba a 828 -o sea que su caja acaba justo en el suelo de la seccion- seccion foto a la izquierda foto a la derecha ------------------------------------------------------ parrafo izquierda 851 izquierda 129 palabra izquierda 545 izquierda 129 LOS DOS NUMEROS DE LA IZQUIERDA NO COINCIDEN CUANDO LA FOTO ESTA A LA IZQUIERDA, y no es un descuido del diseno: 545 cae DENTRO de la foto -que llega hasta 807- y 851 cae fuera. O sea que el parrafo respeta la fotografia y la palabra se le mete encima. Es el gesto de la pagina escrito en dos numeros. POR QUE UN SOLO BLOQUE PARA TABLET Y ESCRITORIO. El encargo fue que en tablet se viera "igual que desktop, ajustando los margenes y rellenos". Como toda la composicion va en porcentajes y en vw topados, la misma regla sirve para las dos anchuras; lo unico que tablet necesita aparte son los reajustes del bloque de mas abajo. Escribirlo dos veces habria sido copiar veinte declaraciones para cambiar tres. ========================================================================== */ @media (min-width: 768px) { /* 1080 de 1920. Por debajo de 1920 encoge en proporcion y por encima topa, igual que el resto de las hojas del proyecto. */ .about__seccion { min-height: min(56.25vw, 1080px); } /* LAS SECCIONES DEJAN DE SEPARARSE Y SE TOCAN. En el artboard hay 40px entre una y la siguiente, pero ese hueco es burdeos sobre burdeos: no se ve. Lo que si se nota es que sin el las cuatro fotografias caen a la misma altura de su seccion y el ritmo de la pagina queda regular. */ .about__seccion + .about__seccion { margin-top: 0; } /* Y AQUI NO HACE FALTA AIRE AL FINAL. De 768 para arriba la caja de la palabra acaba justo en el suelo de su seccion -es lo que coloca el 828 de mas abajo- asi que el ultimo elemento que toca el pie es un rotulo de 260px, no un parrafo de cuerpo pequeno: el corte se lee solo. Es ademas lo que hace el nodo de 1920, donde el pie entra a continuacion sin separacion. */ .about__seccion:last-child { margin-bottom: 0; } /* LA FOTO, FUERA DEL FLUJO. Pegada al borde de su lado -en el artboard la de la derecha esta a -1, o sea a sangre- y arriba a cero. EL ANCHO VA EN % DE LA SECCION Y NO EN vw, y la diferencia importa mas de lo que parece: los huecos del parrafo de aqui abajo se cuelgan de ESTE mismo 42,0313% para caer justo detras de la foto. Con el ancho en vw y el hueco en %, entre los dos se cuela la barra de desplazamiento -unos 15px, que a 42% son 6- y el hueco declarado de 32px salia de 26. Medido. En la misma unidad, los dos numeros hablan de la misma caja. EL ALTO NO SE DECLARA: lo pone height:auto de la regla de base y sale exacto. El fichero es 807x1024, que es justo el hueco del diseno, asi que la proporcion del fichero YA es la del artboard y no hay nada que recortar ni que estirar. */ .about__foto { position: absolute; top: 0; width: min(42.0313%, 807px); /* 807 de 1920 */ } .about__seccion--izquierda .about__foto { left: 0; } .about__seccion--derecha .about__foto { right: 0; } /* EL TEXTO SE PINTA ENCIMA DE LA FOTO Y EL z-index HACE FALTA DE VERDAD. Un es un elemento reemplazado y se pinta en una capa posterior a los fondos de bloque; sin esto, el orden entre la fotografia y la palabra que la invade queda en manos del navegador. Es la misma trampa que la banda de las fichas de producto y el titular de /collections. */ .about__texto { position: absolute; inset: 0; z-index: 1; padding-inline: 0; } /* LOS DOS SE CUELGAN DE SITIOS DISTINTOS Y ES A PROPOSITO. La palabra va por ARRIBA (828 de 1080) porque su caja acaba justo en el suelo de la seccion y ahi tiene que quedarse pase lo que pase. El parrafo va por ABAJO (acaba hacia 765, o sea 315 desde el suelo) porque tiene entre tres y cinco renglones segun la seccion y segun el idioma -las cuatro traducciones castellanas son mas largas que el ingles del diseno- y colgado del techo cada uno acabaria a una altura distinta y unos cuantos se meterian en la palabra. Colgado del suelo crece hacia ARRIBA, que es hacia donde tiene sitio. */ .about__palabra { position: absolute; top: 76.6667%; /* 828 de 1080 */ margin: 0; font-size: min(13.5615vw, 260.38px); } /* EL CUERPO NO ES PROPORCIONAL, Y ES EL UNICO NUMERO DE LA HOJA QUE SE APARTA DEL DISENO. Los 98px de 1920 dan 39 a 768 por regla de tres, y en la columna que queda ahi -unos 340px- eso son cuatro palabras por renglon: el parrafo castellano de MEMORABLE se iba a siete lineas y la seccion pasaba a ser una mancha de texto. La recta va de 32 a 768 hasta los 98 de 1920, que es lo mismo que hace la formula de arriba pero bajando mas deprisa en la parte de abajo del recorrido. */ .about__claim { position: absolute; bottom: 29.1667%; /* 1080 - 765 */ margin: 0; font-size: min(5.7292vw - 12px, 98px); line-height: 0.898; /* 88/98 */ } /* --- LOS HUECOS LLEVAN SUELO EN PIXELES, y esto es el ajuste de tablet -- En el nodo de 1920 el parrafo deja 44px con la fotografia y 144 con el borde de la pagina. Escritos como porcentaje encogen con la ventana y a 768 se quedan en 17 y en 57: a 1920 esos 44px se leen como aire y a 768 los 17 se leen como un fallo de maquetacion -el texto rozando la foto-, que es exactamente lo que habia que evitar aqui. Por eso cada hueco es un clamp con tres numeros: el suelo en pixeles que hace falta para que respire en la parte estrecha del recorrido, el valor proporcional que manda en el medio, y el techo que es la medida del diseno y la que se cumple clavada a 1920. El ancho del parrafo ya no se declara: sale solo de restar los dos huecos, asi que no puede contradecirlos. LA PALABRA NO LLEVA SUELO y es a proposito: no deja hueco con la foto porque su gracia es meterse DENTRO de ella. Un hueco minimo ahi seria empezar a deshacer el gesto de la pagina justo donde menos sitio hay. */ .about__seccion--izquierda .about__claim { left: calc(42.0313% + clamp(32px, 2.2917%, 44px)); /* tras la foto */ right: clamp(32px, 7.5%, 144px); /* 144 a 1920 */ } .about__seccion--derecha .about__claim { left: 6.7188%; /* 129 a 1920 */ right: calc(42.0313% + clamp(32px, 3.0729%, 59px)); /* antes de la foto */ } /* La palabra y el parrafo comparten borde izquierdo cuando la foto esta a la derecha, asi que los dos van en % de la seccion: mezclar % y vw los desalineaba un pixel por culpa de la barra de desplazamiento. */ .about__seccion--izquierda .about__palabra { left: 28.3854%; } /* 545 */ .about__seccion--derecha .about__palabra { left: 6.7188%; } /* 129 */ }