20분 전에 최신 버전으로 업데이트한 후, 각 섹션의 배너들이 이상한 박스 안에 밀려들어 불가능할 정도로 작은 크기로 축소되었습니다. 텍스트가 함께 있는 경우, 텍스트는 가독 가능한 크기로 옆에 표시되지만(이 부분도 재설계되었습니다), 저는 업그레이드 외에 다른 설정을 변경하지 않았습니다.
지금 설정을 보니 1:1 비율을 원한다고 나와 있네요. 이것이 항상 “권장”되었던 것인가요, 아니면 변경된 것인가요? 기억이 정확하지는 않지만, 그렇게 말한 것 같지는 않습니다. 분명히 필수 사항은 아니었습니다. 제 배너들은 모두 메인 사이트의 배너와 일치하는데, 그것은 명확하게 직사각형으로 디자인되어 있습니다. 제가 40개나 되는 각기 고유한 배너를 만들었는데, 이를 강제하는 것은 상당히 엉망진창인 변경 사항입니다.
“개별 섹션 배너”라는 것은 무슨 뜻인가요?
각 게시판에는 ‘카테고리 로고’가 하나씩 있습니다. 이 사이트에는 ‘지원’이라고 적힌 거대한 분홍색 상자가 있습니다. 전체가 완전히 임의로 재설계되었습니다
카테고리 배너 컴포넌트(여기 메타의 support처럼 카테고리 색상을 사용하는 것)에 문제가 있는 건가요, 아니면 카테고리 이미지를 업로드할 때 Discourse 코어에서 표시되는 카테고리 설명과 이미지에 문제가 있는 건가요?
안전 모드를 시도해 보셨나요?
카테고리 헤더가 최근 재스타일링되었습니다. UX: Category header restyle - Pull Request #34081 - discourse/discourse - GitHub
CSS를 사용하여 이미지 크기를 변경할 수 있습니다. 예를 들어 다음과 같은 코드가 도움이 될 수 있습니다:
.category-heading__logo.category-logo.aspect-image {
width: auto;
height: 100px;
}
제가 한 일과는 아무런 관련이 없습니다. 최신 업데이트 중 하나에서 코어 부분이 변경되었는데, 저는 플러그인을 전혀 사용하지 않습니다. 디자인 전체가 바뀌었습니다. 더 잘 설명할 방법을 모르겠고, 이전 스타일의 스크린샷도 없지만 두 가지를 모두 본 사람은 제가 무엇을 말하는지 알 것입니다. 로고의 비율이 완전히 바뀌었고, 텍스트가 표시되는 방식도 달라졌으며, 이제는 박스로 둘러싸여 있습니다. 기본 옵션을 사용하여 우리가 사용하던 방식을 완전히 망가뜨렸습니다.
수정: 위에서 공유한 링크 UX: Category header restyle - Pull Request #34081 - discourse/discourse - GitHub 에 게시된 스크린샷에서 볼 수 있듯이, 왼쪽에 있는 것이 이전 스타일이었습니다. 로고에 1:1 비율이 필수(또는 요청) 사항이 아니었고, 전체 형식이 달랐습니다. 이제는 모든 로고가 축소된 정사각형으로 강제되고 전체가 다시 포맷팅되어 텍스트가 지배적인 요소가 되었으며, 이는 우리에게 모든 것을 망가뜨렸습니다.
원래부터 1:1 비율을 사용하라고 명시되어 있었다면 문제가 되지 않았을 것입니다. 그렇게 명시되지 않았기 때문에, 우리는 각 섹션별로 동일한 형태와 디자인을 유지하면서 메인 배너 이미지(정사각형 로고가 아닌)의 개별 버전을 만들었습니다.
이것은 작동할 것 같습니다. 크기를 조금만 더듬어 봐야 할 것 같네요. 감사합니다!
수정: 모바일에서는 작동하지 않습니다. 텍스트가 박스 밖으로 밀려나고 페이지가 가로로 늘어납니다. 저는 이것을 다음과 같이 수정했습니다.
@media (max-width: 768px) {
.category-heading {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.3em; /* 로고와 텍스트 사이에 최소한의 간격 추가 */
}
.category-heading__logo.category-logo.aspect-image {
height: 140px;
width: auto;
margin-bottom: 0; /* 추가 간격 제거 */
}
.category-heading__title {
font-size: 1.4em;
margin-top: 0; /* 텍스트 위 추가 간격 방지 */
}
}
이것은 텍스트를 로고 아래로 이동시킵니다. 다른 누군가가 필요하게 된다면..