O Tema Moderno de Pyx é o sucessor do meu antigo tema, Tema Moderno de darkpixlz, que era um fork do tema Air. Ele tinha aproximadamente 2500 linhas e muitos problemas, então eu o reescrevi!
Suporta a interface completa de administração e o painel de revisão
Suporta quase todos os recursos principais modernos (novo mapa de tópicos, nova página de atualização, chat, …) e alguns plugins
Imagem de fundo personalizável
Adiciona uma propriedade --user-bg-url para que seus plugins leiam a imagem de fundo de um usuário nos perfis
Comparado ao meu tema antigo, muito menos LOC no geral e mais fácil para os dispositivos renderizarem
Problemas conhecidos
O mapa de tópicos parece estranho e desalinhado
Todas as contribuições no repositório são muito bem-vindas e (provavelmente) serão revisadas no mesmo dia. Comentários ou ideias? Deixe uma resposta aqui. Problemas? Por favor, crie um problema no GitHub.
Por favor, note que eu testo todos os meus estilos apenas para Firefox; se o Chromium estiver com problemas, não hesite em registrar um relatório.
Bem, parece haver um problema com a ausência de componentes instalados, e então parece que isso muda o CSS das imagens, fazendo com que muitas delas se tornem retângulos.
Será que é possível adicionar uma escala adaptativa? Eu gostaria de ter um componente de barra lateral no lado direito.
CSS
/* Obtém a largura do avatar do usuário e define a largura máxima do contêiner do anúncio */
/* Estilos do contêiner do anúncio */
#list-area {
display: flex; /* Organiza os anúncios usando flexbox */
flex-direction: column; /* Exibe os anúncios verticalmente */
gap: 0; /* Remove o espaçamento entre as imagens dos anúncios */
padding: 0; /* Remove o preenchimento do contêiner */
margin: 0; /* Garante que não haja margem extra ao redor do contêiner do anúncio */
max-width: 812px; /* Limita a largura do contêiner do anúncio a um máximo de 812px (largura do avatar: 48px) */
}
/* Estilos do link do anúncio */
.banner-ad {
display: block; /* Torna o contêiner do anúncio um elemento de bloco */
width: 100%; /* Garante que o contêiner do anúncio ocupe 100% da largura */
max-width: 100%; /* Evita exceder a largura máxima */
margin: 0; /* Remove o espaçamento entre os contêineres de anúncios */
}
/* Estilos da imagem do anúncio responsiva */
.ad-image {
width: 100%; /* Garante que a imagem ocupe a largura total de seu pai */
height: auto; /* Mantém a proporção original da imagem */
max-width: 100%; /* Evita que a imagem exceda a largura máxima de seu contêiner */
display: block; /* Corrige o problema de espaço em branco na parte inferior das imagens */
margin: 0; /* Remove qualquer espaço adicional ao redor da imagem */
}
/* Design Responsivo: Ajusta a exibição do anúncio para telas grandes e pequenas */
/* Ajusta a exibição do anúncio em dispositivos com largura inferior a 768px */
@media (max-width: 768px) {
#list-area {
padding: 0; /* Garante que não haja preenchimento extra em dispositivos móveis */
}
.banner-ad {
width: 100%; /* Garante que o anúncio ocupe a largura total em telas pequenas */
}
.ad-image {
width: 100%; /* Garante que a imagem se adapte à largura do contêiner */
height: auto; /* Mantém a proporção da imagem */
}
}
/* Ajusta ainda mais as imagens de anúncios em dispositivos muito pequenos (por exemplo, telefones em modo retrato) */
@media (max-width: 480px) {
.ad-image {
width: 100%; /* Garante que as imagens se adaptem à largura da tela do telefone */
max-width: 100%; /* Define a largura máxima como 100% para evitar superdimensionamento */
height: auto; /* Mantém a proporção da imagem */
}
}
Vou verificar o componente lateral amanhã. Sem promessas sobre publicidade porque não consigo testá-la, mas para escalonamento geral, devo conseguir consertar isso.
Desculpe, estive doente muito esta semana, também tive outras coisas para fazer. Acabei de polir o fluxo de postagem, corrigi muitos bugs e fiz o compositor flutuar!
Além disso, notei que a página de temas foi revertida para a versão antiga, o que causou muitos problemas. Não vou me esforçar para consertar nada lá porque sinto que será adicionado novamente e ficará como pretendido.
Infelizmente, isso está um pouco fora do escopo deste tema porque ele é intencionalmente unibody, então eu não adotaria um layout onde a barra lateral estivesse desanexada. Se você estiver procurando por um design como esse, eu recomendo estes dois temas incríveis:
No entanto, se o banner do cabeçalho for algo que você gostaria de ver suportado, sinta-se à vontade para me dar um URL do site e eu verificarei a possibilidade de suportá-lo.
Desculpem pela atualização lenta, solicitei a alteração do título na semana passada e nunca realmente acompanhei. Fui sincronizar o tema no meu site local, mas descobri alguns conflitos de porta, 8 horas depois migrei todo o meu homelab para o Proxmox. Misture isso com a semana que tive com projetos pessoais (documentar 4000 LOC de frontend + backend não é fácil) e você não tem muito tempo livre
Resumindo: O tema saiu do estágio de “preview”! Estou confiante de que ele funcionará para a maioria dos sites e terá um estilo adequado. Com este novo estágio, não estou mais procurando por relatórios de bugs aqui, por favor, abra issues no GitHub daqui para frente.
Por favor, continuem enviando feedback - qualquer coisa é bem-vinda. Obrigado pelo seu apoio contínuo, mesmo que eu seja lento :3
Mais boas notícias! Acabei de reescrever o tema novamente, então ele não é mais um único arquivo common.scss gigante. Não deve parecer diferente, exceto por algumas pequenas correções que fiz. Aproveite :3
Gostei muito do tema, mas há alguns “artefatos” que infelizmente me impedem de usá-lo
A página “Perfil” tem um pequeno botão atrás do cabeçalho que diz “pular para o conteúdo”
Quando tento selecionar uma paleta de cores diferente (como usuário, no meu perfil) a seleção suspensa aparece perto do botão “pular para o conteúdo” que mencionei acima (foi assim que percebi que ele estava lá)
| Resumo | O Tema Moderno de Pyx é o sucessor do Tema Moderno de darkpixlz.
|Prévia| Theme Creator |
|Repositório| GitHub - pyxfluff/moderntheme: Modern theme for Discourse. |
|Guia de Instalação|Como instalar um tema ou componente de tema|
|Novo em Temas do Discourse?| Guia para iniciantes no uso de Temas do Discourse
Estou confiante de que ele funcionará para a maioria dos sites e terá um estilo adequado. Com este novo estágio, não estou mais procurando por relatórios de bugs aqui, por favor, abra issues no GitHub daqui para frente.
, ele foi corrigido agora. Tudo deve voltar ao normal.
