diff --git a/README.md b/README.md index a709582..54416c9 100644 --- a/README.md +++ b/README.md @@ -139,7 +139,7 @@ amplitud, toca también el `--centrar` de las hojas, que vale `AM/100`. Las reglas por hoja son de la forma: ```css -.enredadera > li:nth-child(6n+4) .hoja{ --giro:154deg; --tam:0.92; } +.enredadera > li:nth-child(12n+4) .hoja{ --giro:154deg; --tam:0.92; } ``` Ese `.hoja` es un **descendiente**, así que alcanza también a las hojas que @@ -155,8 +155,8 @@ necesitas un tamaño propio, escríbelo en la medida, sin `var(--tam)`. ## La raíz (los dibujos de la enredadera) -Los tres dibujos —la bajada desde el título, el tramo de ordenador y el tallo -de móvil— **no están escritos a mano**: los genera un script, porque el +Los dibujos —la bajada desde el título, la franja de ordenador, su remate y el +tallo de móvil— **no están escritos a mano**: los genera un script, porque el trenzado hay que calcularlo (la perpendicular a lo largo del recorrido). ```sh @@ -166,12 +166,40 @@ cd ../prueba && python3 raiz2.py # regenera raiz2.json Después hay que **reinyectar los SVG en el CSS**. Y lo más importante: > Los puntos por donde pasa la raíz y las alturas de las que cuelgan las hojas -> (`--y` en las reglas `nth-child(6n+N)`) **tienen que coincidir**. Si mueves +> (`--y` en las reglas `nth-child(12n+N)`) **tienen que coincidir**. Si mueves > uno sin mover el otro, las hojas quedan flotando sin tocar la raíz. Para eso está `../coherencia.py`: compara el CSS contra el JSON y avisa. **Pásalo siempre después de tocar la raíz.** +### La franja de ordenador: dos filas, no una + +La franja es la única parte que se **repite**, porque una página puede tener +más hojas de las que caben en una fila: colectivos tiene doce, o sea dos. + +El dibujo lleva **dos filas**: la pasada de izquierda a derecha y, debajo, esa +misma pasada en **espejo** —un `` del mismo grupo, así que no pesa el +doble—. Entra y sale **vertical** por las dos esquinas, de modo que empalma +con su espejo por la derecha y con la copia siguiente por la izquierda. Puesto +con `repeat-y` y `background-size:100% calc(var(--fila) * 2)`, la enredadera +serpentea por las filas que haga falta **sin una sola junta**. Antes el dibujo +era de una fila y remataba en espiral: en colectivos se veían dos ramas +sueltas, la segunda empezando otra vez desde el margen izquierdo. + +De ahí salen tres cosas encadenadas: + +- La tanda de las reglas por hoja es de **doce** (`nth-child(12n+N)`), no de + seis: las seis de la pasada y las seis del espejo, que son **las mismas + leídas del revés y con el giro cambiado de signo**. `../coherencia.py` lo + comprueba. +- El tallo va en **dos capas**, no en el fondo del `