Pyx’s Modern Theme is the successor to my old theme, darkpixlz’s Modern Theme, which was a fork of the Air theme. It was roughly 2500 lines and had many issues, so I have rewritten it!
All contributions on the repository are more than welcome and will (probably) be reviewed same-day. Comments or ideas? Drop a reply here. Issues? Make a GitHub issue please, they are easier to keep track of.
Please note that I test all of my styles for Firefox and Firefox only; if Chromium is acting up, please don't hesitate to file a report. Mobile is checked every few updates and should be generally supported.
적응형 스케일(adaptive scale)을 추가할 수 있을지 궁금합니다. 오른쪽에 사이드바 구성 요소를 배치하고 싶습니다.
CSS
/* 사용자의 아바타 너비를 가져오고 광고 컨테이너의 최대 너비를 설정합니다 */
/* 광고 컨테이너 스타일 */
#list-area {
display: flex; /* 플렉스박스(Flexbox)를 사용하여 광고를 배치 */
flex-direction: column; /* 광고를 세로로 표시 */
gap: 0; /* 광고 이미지 사이의 간격 제거 */
padding: 0; /* 컨테이너 패딩 제거 */
margin: 0; /* 광고 컨테이너 주위에 추가 마진이 없도록 설정 */
max-width: 812px; /* 광고 컨테이너 너비를 최대 812px로 제한 (아바타 너비: 48px) */
}
/* 광고 링크 스타일 */
.banner-ad {
display: block; /* 광고 컨테이너를 블록 요소로 설정 */
width: 100%; /* 광고 컨테이너가 100% 너비를 차지하도록 설정 */
max-width: 100%; /* 최대 너비 초과 방지 */
margin: 0; /* 광고 컨테이너 사이의 간격 제거 */
}
/* 반응형 광고 이미지 스타일 */
.ad-image {
width: 100%; /* 이미지가 부모 요소의 전체 너비를 차지하도록 설정 */
height: auto; /* 이미지의 원래 종횡비 유지 */
max-width: 100%; /* 이미지가 컨테이너의 최대 너비를 초과하지 않도록 설정 */
display: block; /* 이미지 하단의 빈 공간 문제 해결 */
margin: 0; /* 이미지 주위의 추가 공간 제거 */
}
/* 반응형 디자인: 큰 화면과 작은 화면에 맞게 광고 표시 조정 */
/* 너비가 768px 미만인 기기에서 광고 표시 조정 */
@media (max-width: 768px) {
#list-area {
padding: 0; /* 모바일 기기에서 추가 패딩이 없도록 설정 */
}
.banner-ad {
width: 100%; /* 작은 화면에서 광고가 전체 너비를 차지하도록 설정 */
}
.ad-image {
width: 100%; /* 이미지가 컨테이너 너비에 맞게 조정되도록 설정 */
height: auto; /* 이미지의 종횡비 유지 */
}
}
/* 매우 작은 기기(예: 세로 모드 스마트폰)에서 광고 이미지를 추가로 조정 */
@media (max-width: 480px) {
.ad-image {
width: 100%; /* 이미지가 스마트폰 화면 너비에 맞게 조정되도록 설정 */
max-width: 100%; /* 과도한 크기를 방지하기 위해 최대 너비를 100%로 설정 */
height: auto; /* 이미지의 종횡비 유지 */
}
}
I’ll check on the side component thing tomorrow. No promises on advertising because I cannot test that but for general scaling I should be able to fix that.
Sorry, I was sick a lot of this week, have also had other things to be doing. Just polished the post stream up, fixed many bugs, and made the composer float!
Also, I noticed that the theme page got reverted to the old version which has summoned a lot of issues. I’m not going to make an effort to fix anything there because I feel like it will be re-added and it will look like intended.
Unfortunately that’s a little out of scope for this theme because it’s intentionally unibody so I would not adopt a layout where the sidebar is detached. If you’re looking for a design like that I’d recommend these two amazing themes:
However if the header banner is something you’d like to see supported feel free to give me a site URL and I’ll check out the possibility of supporting it.
tl;dr: The theme is now out of the “preview” stage! I’m confident enough it’ll work for most everybody’s sites and be styled ok. With this new stage, I am no longer looking for bug reports here, please file GitHub issues going forward.
Please keep the feedback coming - any and all is welcome. Thank you for your continued support even if I may be slow :3
More good news! I just ended up rewriting the theme again so it is no longer one massive common.scss file. It shouldn’t look any different besides some minor fixes I made. Enjoy :3
Really liked the theme, but there’s some “artifacts” that unfortunately prevents me from using it
The “Profile” page has little button behind the header that says “skip to content”
When I try to select a different color palette (as user, on my profile) the dropdown selection shows close to the “skip to content” button i mentioned above (that’s how I realized it was there)
I’m confident enough it’ll work for most everybody’s sites and be styled ok. With this new stage, I am no longer looking for bug reports here, please 
, it has been fixed now. Everything should be normal again.
