El diseño de la interfaz de usuario revela elementos clave. La barra de navegación, con un alto de 5rem y ancho del 100%, se posiciona de manera absoluta. En temas oscuros, el fondo de esta barra cambia a #18181b. Cuando se inicia sesión, se revela un enlace adicional para “seguir”.
Componentes de la Interfaz
El logotipo, ubicado en la parte superior izquierda, utiliza el color #9147ff. La barra de navegación incluye enlaces con indicadores visuales: una línea de 0.4rem debajo de cada opción, con un color de fondo rgba(0,0,0,.2) en modo claro y rgba(255,255,255,.2) en modo oscuro. Las opciones “Descubrir”, “Navegar” y “Seguir” tienen indicadores de diferentes anchos: 6.9rem, 5.9rem y 7.6rem respectivamente.
Un contenedor de búsqueda, flexible en tamaño, se expande hasta un máximo de 40rem. En pantallas con un ancho máximo de 1023px, este campo de búsqueda se oculta. La sección del usuario incluye un avatar circular de 3rem de diámetro con un fondo rgba(0,0,0,.05) en modo claro y rgba(255,255,255,.05) en modo oscuro. Se ofrecen botones para “Iniciar Sesión” (5.2rem de ancho) y “Registrarse” (6.1rem de ancho), ambos con un indicador visual inferior.
Un indicador de carga (loader) ocupa el 100% del ancho y alto, centrado vertical y horizontalmente. Este indicador presenta un spinner con un borde superior de 2px sólido rgba(128,128,128,.3), borde derecho, inferior y izquierdo de 2px sólido rgba(128,128,128,.3) y borde izquierdo de 2px sólido #19171c. En modo oscuro, el borde izquierdo del spinner cambia a #d9d8dd. El spinner gira continuamente gracias a una animación.
La disposición de los elementos se adapta a diferentes tamaños de pantalla. En pantallas con un ancho máximo de 767px, la lista de enlaces de la barra de navegación se oculta.
