Legal
Créditos
Con qué está hecho este sitio, y de dónde sale cada cosa que no es mía.
Tipografías
Las dos se sirven desde este mismo dominio, en fuentes/. Cero
peticiones a terceros.
| Familia | Uso | Licencia |
|---|---|---|
| Bitter, de Sol Matas / Huerta Tipográfica | Titulares | SIL Open Font License 1.1 |
| Source Sans 3, de Paul D. Hunt / Adobe | Texto | SIL Open Font License 1.1 |
Ambas son fuentes variables: un fichero por familia y subconjunto —latino y latino extendido— cubre todos los pesos que usa el sitio. Cuatro ficheros en total.
La sans se eligió además fuera de las opciones por defecto: Inter, que era la candidata evidente, es la tipografía que llevan la mitad de las plantillas del mercado, y en un sitio cuyo argumento es «sin plantillas» eso habría sido una contradicción pequeña pero real.
Las dos se eligieron deliberadamente fuera del repertorio de las seis demostraciones —que usan Archivo, Chivo Mono, Bricolage Grotesque, Work Sans, Fraunces, Karla, Newsreader, Public Sans, Instrument Serif, IBM Plex Sans, IBM Plex Mono y Roboto Mono— para que el portafolio tenga voz propia y no se confunda con ninguno de los trabajos que enseña.
Marca
El logo de Ternok es de Adán Lorenzo. Los archivos de marca/ se
reescribieron a partir del original
ternok_ascending_warm_recolor.svg, que traía tres problemas:
-
Un bloque de
styleen línea repetido en cada nodo, con tipografía y color duplicados cinco veces: 2,8 KB para cuatro formas. -
Dos elementos
<text>pintados confill="var(--text-primary)"yfill="var(--text-secondary)", variables inexistentes fuera de su entorno original. El nombre salía negro o directamente invisible. -
Un
viewBoxde 680×300 con el dibujo ocupando un tercio, y el punto de la cima cortado por el borde superior.
Los archivos actuales:
marca/ternok-completo.svg— isotipo y nombre.marca/ternok-isotipo.svg— solo los dos trazos y el punto.marca/favicon.svg— el isotipo, para la pestaña.marca/favicon-180.png— 180×180 para dispositivos Apple.
El PNG se generó rasterizando el isotipo con un script propio de Node que codifica
el fichero con zlib, sin ninguna librería de imagen de por medio.
Paleta
Tomada del propio logo. Son cuatro colores y no hay un quinto.
| Ficha | Valor | Uso |
|---|---|---|
--oxido | #3A2317 | Fondos profundos y el trazo bajo del logo |
--terracota | #A8522E | Acento dominante: botones, enlaces, subrayados |
--arena | #E8C9A8 | Acento secundario: filetes, el punto, la sección activa |
--papel | #FAF7F2 | Fondo claro |
--tinta | #1A1512 | Texto principal |
--tinta-suave | #5B534C | Texto secundario |
El punto en arena es el detalle de marca y aparece pequeño en varios sitios: la etiqueta de cada sección, las viñetas de los estándares y el ancla de la sección activa en el menú.
Las seis webs de ejemplo viven dentro de este sitio
No hay capturas de pantalla, y es deliberado: las seis webs están
dentro de esta misma carpeta, en demos/, y se abren
sin salir del dominio. Una captura envejece, miente por recorte y obliga a
mantener un archivo de imagen por cada cambio; la web entera, navegable, es una
prueba mejor y no hay nada que mantener sincronizado.
Las seis demostraciones
Ánfora Motor, Casa Lucrecia, Clínica Dental Taoro, Fincas del Valle, La Fragua y Bloom Beauty Studio son negocios ficticios. Sus fotografías proceden de bancos de imagen con licencia libre —principalmente Pexels y Openverse—; la atribución concreta de cada fotografía está en el archivo de créditos de cada carpeta.
Herramientas
Sin frameworks, sin npm, sin proceso de compilación y sin service worker. HTML, CSS y JavaScript escritos a mano. Todo el sitio son archivos estáticos y funciona tal cual, sin nada que instalar en el servidor.