Diseño de enlaces para minimalRC

Algunas ideas en el libro de Will Grant son definitivamente controversiales, desde mi punto de vista.

En su consejo #9, menciona que se dan puntos extra si el cursor se transforma en “la manita” al pasar sobre un botón.

¿En qué año estamos?

¿En mi año de nacimiento?

¿Qué sigue?

¿Eventualmente me dirá que agregue marquesinas en colores fosforescentes?

Pero… ¿y si tiene razón?

Por una parte, minimalRC es un tema de mí, para mí… pero, ¿y la usabilidad?

Si mi madre tuviera que visitar mi sitio, ¿realmente podría utilizarlo?

Claro que me gusta mi tema como está (o estaba, para cuando leas esto), pero tal vez tiene razón y mis botones discretos estilo “outline” no son suficientemente claros, o invitan a la acción.

O tal vez el hecho de que los enlaces no sean color azul modifica la usabilidad.

Así pues, tomaré sus principio #9 y haré que el cursor sea una manita sobre un enlace. Incluyo aquí el principio #24, que dicta que se deben subrayar los enlaces.

Esto se logrará agregando lo siguiente después de importar Bulma en el archivo de minimalRC.scss:

a {
	text-decoration: underline double $pinkie-pie-cuerpo-relleno;
	cursor: pointer;
}

No obstante, hay cuatro problemas problemas:

  1. los enlaces en la página principal,
  2. los enlaces de la navegación de escritorio,
  3. los enlaces de la navegación móvil, y
  4. los botones.

Por ello, agregamos estas siguientes líneas para evitar ese comportamiento:

.main-page a,
.navbar a,
.header nav.level a,
a.button {
	text-decoration: none;
}

Actualizado, el archivo minimalRC.scss es:

@import "node_modules/bulma/bulma";

a {
	text-decoration: underline double $pinkie-pie-cuerpo-relleno;
	cursor: pointer;
}
.main-page a,
.navbar a,
.header nav.level a,
a.button {
	text-decoration: none;
}

De esta forma, los enlaces ya tienen manita y subrayado, pero no afecta a la página principal o a los botones.



Publicado: 2020-11-05





¿Tienes algún comentario?

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *