Pyx’s Modern Theme è il successore del mio vecchio tema, darkpixlz’s Modern Theme, che era un fork del tema Air. Aveva circa 2500 righe e molti problemi, quindi l’ho riscritto!
Tutti i contributi al repository sono più che benvenuti e saranno (probabilmente) revisionati lo stesso giorno. Commenti o idee? Lascia una risposta qui. Problemi? Apri una issue su GitHub, per favore, è più facile tenerne traccia.
Tieni presente che testo tutti i miei stili per Firefox e solo per Firefox; se Chromium presenta problemi, non esitare a segnalare un rapporto. La versione mobile viene controllata ogni pochi aggiornamenti e dovrebbe essere generalmente supportata.
Mi chiedo se sia possibile aggiungere una scala adattiva. Mi piacerebbe avere un componente nella barra laterale destra.
CSS
/* Ottieni la larghezza dell'avatar dell'utente e imposta la larghezza massima del contenitore degli annunci */
/* Stili del contenitore degli annunci */
#list-area {
display: flex; /* Disponi gli annunci utilizzando flexbox */
flex-direction: column; /* Visualizza gli annunci verticalmente */
gap: 0; /* Rimuovi lo spazio tra le immagini degli annunci */
padding: 0; /* Rimuovi il padding del contenitore */
margin: 0; /* Assicurati che non ci siano margini extra attorno al contenitore degli annunci */
max-width: 812px; /* Limita la larghezza del contenitore degli annunci a un massimo di 812px (larghezza avatar: 48px) */
}
/* Stili del link dell'annuncio */
.banner-ad {
display: block; /* Trasforma il contenitore dell'annuncio in un elemento block */
width: 100%; /* Assicurati che il contenitore dell'annuncio occupi il 100% della larghezza */
max-width: 100%; /* Impedisci di superare la larghezza massima */
margin: 0; /* Rimuovi lo spazio tra i contenitori degli annunci */
}
/* Stili dell'immagine dell'annuncio reattiva */
.ad-image {
width: 100%; /* Assicurati che l'immagine occupi tutta la larghezza del genitore */
height: auto; /* Mantieni il rapporto di aspetto originale dell'immagine */
max-width: 100%; /* Impedisci all'immagine di superare la larghezza massima del contenitore */
display: block; /* Correggi il problema dello spazio vuoto sotto le immagini */
margin: 0; /* Rimuovi qualsiasi spazio aggiuntivo attorno all'immagine */
}
/* Design reattivo: regola la visualizzazione degli annunci per schermi grandi e piccoli */
/* Regola la visualizzazione degli annunci su dispositivi con larghezza inferiore a 768px */
@media (max-width: 768px) {
#list-area {
padding: 0; /* Assicurati che non ci sia padding extra su dispositivi mobili */
}
.banner-ad {
width: 100%; /* Assicurati che l'annuncio occupi tutta la larghezza su schermi piccoli */
}
.ad-image {
width: 100%; /* Assicurati che l'immagine si adatti alla larghezza del contenitore */
height: auto; /* Mantieni il rapporto di aspetto dell'immagine */
}
}
/* Regola ulteriormente le immagini degli annunci su dispositivi molto piccoli (es. telefoni in modalità verticale) */
@media (max-width: 480px) {
.ad-image {
width: 100%; /* Assicurati che le immagini si adattino alla larghezza dello schermo del telefono */
max-width: 100%; /* Imposta la larghezza massima al 100% per evitare dimensioni eccessive */
height: auto; /* Mantieni il rapporto di aspetto dell'immagine */
}
}
Controllerò la cosa del componente laterale domani. Non prometto nulla sulla pubblicità perché non posso testarla, ma per il ridimensionamento generale dovrei essere in grado di risolverlo.
Mi dispiace, sono stato molto malato questa settimana, ho anche avuto altre cose da fare. Ho appena rifinito lo stream post, corretto molti bug e reso il composer mobile!
Inoltre, ho notato che la pagina del tema è stata ripristinata alla vecchia versione, il che ha causato molti problemi. Non mi impegnerò a risolvere nulla lì perché sento che verrà riaggiunto e sembrerà come previsto.
Purtroppo questo esula un po’ dall’ambito di questo tema perché è intenzionalmente unibody, quindi non adotterei un layout in cui la barra laterale è staccata. Se stai cercando un design simile, ti consiglio questi due fantastici temi:
Tuttavia, se il banner dell’intestazione è qualcosa che vorresti vedere supportato, sentiti libero di fornirmi un URL del sito e verificherò la possibilità di supportarlo.
tl;dr: Il tema è ora uscito dalla fase di “anteprima”! Sono abbastanza sicuro che funzionerà per la maggior parte dei siti e sarà stilizzato correttamente. Con questa nuova fase, non sto più cercando segnalazioni di bug qui, per favore aprite issue su GitHub d’ora in poi.
Continuate a inviare feedback, qualsiasi cosa è benvenuta. Grazie per il vostro continuo supporto anche se potrei essere lento :3
Altre buone notizie! Ho appena riscritto di nuovo il tema in modo che non sia più un unico file common.scss massiccio. Non dovrebbe apparire diverso, a parte alcune piccole correzioni che ho apportato. Divertiti :3
Mi è piaciuto molto il tema, ma ci sono alcuni “artefatti” che purtroppo mi impediscono di usarlo
La pagina “Profilo” ha un piccolo pulsante dietro l’intestazione che dice “salta al contenuto”
Quando provo a selezionare una palette di colori diversa (come utente, sul mio profilo) la selezione a discesa appare vicino al pulsante “salta al contenuto” che ho menzionato sopra (è così che mi sono reso conto che c’era)
Sono abbastanza sicuro che funzionerà per la maggior parte dei siti e sarà stilizzato correttamente. Con questa nuova fase, non sto più cercando segnalazioni di bug qui, per favore 
, è stato risolto ora. Tutto dovrebbe tornare alla normalità.
