El tema Modern de Pyx es el sucesor de mi antiguo tema, el tema Modern de darkpixlz, que era una bifurcación del tema Air. Tenía aproximadamente 2500 líneas y muchos problemas, ¡así que lo he reescrito!
Compatible con el núcleo completo de Discourse y muchos plugins
Compatible con todas las funciones modernas del núcleo
Imagen de fondo personalizable
Añade una propiedad --user-bg-url para que tus plugins lean la imagen de fondo de los usuarios en los perfiles
Muchas opciones y configuraciones
Plugins
Mi objetivo es compatibilizar la mayoría de los plugins principales. A continuación se muestran algunas capturas de pantalla de plugins (no exhaustivas).
Todas las contribuciones al repositorio son más que bienvenidas y serán (probablemente) revisadas el mismo día. ¿Comentarios o ideas? Deja una respuesta aquí. ¿Problemas? Crea un problema en GitHub, por favor, es más fácil de seguir.
Ten en cuenta que pruebo todos mis estilos para Firefox y solo para Firefox; si Chromium tiene problemas, no dudes en presentar un informe. Se verifica la versión móvil cada pocas actualizaciones y debería tener soporte general.
Me pregunto si es posible añadir una escala adaptativa. Me gustaría tener un componente de barra lateral en el lado derecho.
CSS
/* Obtiene el ancho del avatar del usuario y establece el ancho máximo del contenedor de anuncios */
/* Estilos del contenedor de anuncios */
#list-area {
display: flex; /* Organiza los anuncios usando flexbox */
flex-direction: column; /* Muestra los anuncios verticalmente */
gap: 0; /* Elimina el espacio entre las imágenes de los anuncios */
padding: 0; /* Elimina el relleno del contenedor */
margin: 0; /* Asegura que no haya margen adicional alrededor del contenedor de anuncios */
max-width: 812px; /* Limita el ancho del contenedor de anuncios a un máximo de 812px (ancho del avatar: 48px) */
}
/* Estilos del enlace de anuncio */
.banner-ad {
display: block; /* Convierte el contenedor de anuncios en un elemento de bloque */
width: 100%; /* Asegura que el contenedor de anuncios ocupe el 100% del ancho */
max-width: 100%; /* Evita superar el ancho máximo */
margin: 0; /* Elimina el espacio entre los contenedores de anuncios */
}
/* Estilos de la imagen de anuncio responsiva */
.ad-image {
width: 100%; /* Asegura que la imagen ocupe todo el ancho de su elemento padre */
height: auto; /* Mantiene la relación de aspecto original de la imagen */
max-width: 100%; /* Impide que la imagen supere el ancho máximo de su contenedor */
display: block; /* Corrige el problema del espacio vacío en la parte inferior de las imágenes */
margin: 0; /* Elimina cualquier espacio adicional alrededor de la imagen */
}
/* Diseño Responsivo: Ajusta la visualización de anuncios para pantallas grandes y pequeñas */
/* Ajusta la visualización de anuncios en dispositivos con un ancho inferior a 768px */
@media (max-width: 768px) {
#list-area {
padding: 0; /* Asegura que no haya relleno adicional en dispositivos móviles */
}
.banner-ad {
width: 100%; /* Asegura que el anuncio ocupe todo el ancho en pantallas pequeñas */
}
.ad-image {
width: 100%; /* Asegura que la imagen se adapte al ancho del contenedor */
height: auto; /* Mantiene la relación de aspecto de la imagen */
}
}
/* Ajusta aún más las imágenes de anuncios en dispositivos muy pequeños (p. ej., teléfonos en modo vertical) */
@media (max-width: 480px) {
.ad-image {
width: 100%; /* Asegura que las imágenes se adapten al ancho de la pantalla del teléfono */
max-width: 100%; /* Establece el ancho máximo al 100% para evitar un tamaño excesivo */
height: auto; /* Mantiene la relación de aspecto de la imagen */
}
}
Revisaré lo del componente lateral mañana. No prometo nada sobre la publicidad porque no puedo probarla, pero para el escalado general debería poder solucionarlo.
Lo siento, estuve enfermo gran parte de esta semana, también he tenido otras cosas que hacer. Acabo de pulir el flujo de publicaciones, corregir muchos errores y hacer que el compositor flote.
Además, noté que la página del tema se revirtió a la versión anterior, lo que ha generado muchos problemas. No haré ningún esfuerzo por arreglar nada allí porque siento que se volverá a agregar y se verá como se pretendía.
Lamentablemente, eso está un poco fuera del alcance de este tema porque está diseñado intencionalmente como una sola pieza, por lo que no adoptaría un diseño donde la barra lateral esté separada. Si buscas un diseño así, te recomiendo estos dos increíbles temas:
Sin embargo, si el banner de encabezado es algo que te gustaría ver soportado, no dudes en darme la URL de un sitio y veré la posibilidad de soportarlo.
Resumen: ¡El tema ya ha salido de la etapa de “vista previa”! Confío en que funcionará para la mayoría de los sitios y estará bien estilizado. Con esta nueva etapa, ya no busco informes de errores aquí, por favor presenta incidencias en GitHub en el futuro.
Seguid enviando vuestros comentarios, cualquier cosa es bienvenida. Gracias por vuestro continuo apoyo, incluso si soy lento :3
Lamento la advertencia de deprecación en la parte superior de sus sitios durante unos días , ya se ha solucionado. Todo debería volver a la normalidad.
¡Más buenas noticias! Acabo de reescribir el tema de nuevo para que ya no sea un único archivo common.scss masivo. No debería verse diferente, aparte de algunas correcciones menores que hice. Disfruta :3
Me gustó mucho el tema, pero hay algunos “artefactos” que desafortunadamente me impiden usarlo
La página “Perfil” tiene un pequeño botón detrás de la cabecera que dice “saltar al contenido”.
Cuando intento seleccionar una paleta de colores diferente (como usuario, en mi perfil) la selección desplegable aparece cerca del botón “saltar al contenido” que mencioné anteriormente (así me di cuenta de que estaba allí).
Confío en que funcionará para la mayoría de los sitios y estará bien estilizado. Con esta nueva etapa, ya no busco informes de errores aquí, por favor 
, ya se ha solucionado. Todo debería volver a la normalidad.
