O Pyx’s Modern Theme é o sucessor do meu antigo tema, Modern Theme do darkpixlz, que era um fork do tema Air. Ele tinha cerca de 2500 linhas e apresentava muitos problemas, por isso eu o reescrevi!
Todas as contribuições no repositório são muito bem-vindas e serão (provavelmente) revisadas no mesmo dia. Comentários ou ideias? Deixe uma resposta aqui. Problemas? Abra uma issue no GitHub, por favor, pois é mais fácil acompanhar assim.
Lembre-se de que testo todos os meus estilos apenas no Firefox; se o Chromium apresentar problemas, não hesite em enviar um relatório. O modo móvel é verificado a cada poucas atualizações e deve ter suporte geral.
Eu me pergunto se é possível adicionar uma escala adaptativa? Gostaria de ter um componente de barra lateral no lado direito.
CSS
/* Get the user's avatar width and set the maximum width of the ad container */
/* Ad container styles */
#list-area {
display: flex; /* Arrange ads using flexbox */
flex-direction: column; /* Display ads vertically */
gap: 0; /* Remove spacing between ad images */
padding: 0; /* Remove container padding */
margin: 0; /* Ensure no extra margin around the ad container */
max-width: 812px; /* Limit the ad container width to a maximum of 812px (avatar width: 48px) */
}
/* Ad link styles */
.banner-ad {
display: block; /* Make the ad container a block element */
width: 100%; /* Ensure the ad container occupies 100% width */
max-width: 100%; /* Prevent exceeding the maximum width */
margin: 0; /* Remove spacing between ad containers */
}
/* Responsive ad image styles */
.ad-image {
width: 100%; /* Ensure the image occupies the full width of its parent */
height: auto; /* Maintain the original aspect ratio of the image */
max-width: 100%; /* Prevent the image from exceeding its container's max width */
display: block; /* Fix the empty space issue at the bottom of images */
margin: 0; /* Remove any additional space around the image */
}
/* Responsive Design: Adjust ad display for large and small screens */
/* Adjust ad display on devices with a width less than 768px */
@media (max-width: 768px) {
#list-area {
padding: 0; /* Ensure no extra padding on mobile devices */
}
.banner-ad {
width: 100%; /* Ensure the ad occupies the full width on small screens */
}
.ad-image {
width: 100%; /* Ensure the image adapts to the container width */
height: auto; /* Maintain the image's aspect ratio */
}
}
/* Further adjust ad images on very small devices (e.g., phones in portrait mode) */
@media (max-width: 480px) {
.ad-image {
width: 100%; /* Ensure images adapt to the phone's screen width */
max-width: 100%; /* Set the maximum width to 100% to avoid oversizing */
height: auto; /* Maintain the image's aspect ratio */
}
}
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á)
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.
