Diseño y estilo
Esta sección está dedicada principalmente a comentar y exponer el estilo de este proyecto. Para empezar, este proyecto no tiene un entorno gráfico en cuestión más que la propia Web que publica los contenidos de la misma, la cual es ésta, y se basa plenamente en el proyecto AnP y WMarkdown y su diseño por defecto.
Empezando por los colores, tenemos los siguientes:
| Tipo | Hexadecimal | RGBA | Muestra |
|---|---|---|---|
| Fondo | #EFEFEF | rgba(239, 239, 239, 1) | #EFEFEF |
| Frontal | #222 | rgba(34, 34, 34, 1) | #222 |
| Primario | #2272D4 | rgba(34, 114, 212, 1) | #2272D4 |
| Secundario | #D47222 | rgba(212, 114, 34, 1) | #D47222 |
| Gris | #888 | rgba(136, 136, 136, 1) | #888 |
| Tabla título | #19888888 | rgba(136, 136, 136, 0.1) | rgba(136, 136, 136, 0.1) |
| Tabla Select | #19888888 | rgba(136, 136, 136, 0.1) | rgba(136, 136, 136, 0.1) |
| Tabla impar | #38888888 | rgba(136, 136, 136, 0.2) | rgba(136, 136, 136, 0.2) |
| Tabla par | #00FFFFFF | rgba(255, 255, 255, 0) | rgba(255, 255, 255, 0) |
| Borde interno | #19888888 | rgba(136, 136, 136, 0.5) | rgba(136, 136, 136, 0.5) |
| Diccionario | #224A7B | rgba(34, 74, 123, 1) | #224A7B |
| Diccionario en | #7B4A22 | rgba(123, 74, 34, 1) | #7B4A22 |
| Code impar | #38C8C8C8 | rgba(200, 200, 200, 0.2) | rgba(200, 200, 200, 0.2) |
| Tipo | Hexadecimal | RGBA | Muestra |
Por otro lado, tenemos las fuentes de texto usados en la Web de este proyecto, las cuales son:
- Roboto. Para el texto en general.
- Roboto Mono. Para los bloques de código.
- Font Awesome. Para la iconificación general de la Web.
El tamaño de la fuente, así como de los elementos de la Web se basan en un sistema que simulan los DPI en la Web, usando la magnitud "EM" para determinar un tamaño dinámico sobre el bloque anfitrión del mismo. Por defecto, éste se basa en dividir en 40 celdas desde el lado de la pantalla o del marco de visualización más estrecho, quedando como tamaño de fuente por defecto una celda.
La cabecera hace uso de 4 celdas y el pie de página consta de 2. Ambos ordenan sus elementos en un bloque Flex a modo tupla.
Finalmente tenemos el logo del proyecto, que representa una centralización de recursos sobre otros proyectos exponiendo un punto central del que parten todos los demás proyectos más grandes.
Es cierto que en el Favicon, el logo sale en blanco y negro, pero es para que destaque fuera del entorno de la Web.