mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-06-19 05:59:26 +08:00
8b45fa3316
We were only using H3s on this page, likely because that's the font-size we wanted... but ideally we should use the proper sequential heading order and change the font size with CSS. So after this change we have a main H1 (community name) and child H2s (which are all equal to each other hierarchically, so the repeat is expected) No visual changes... Before: <img width="1000" alt="image" src="https://github.com/user-attachments/assets/247b4397-6b29-4965-b7ab-c6c7a7d60b05" /> After: <img width="1000" alt="image" src="https://github.com/user-attachments/assets/ee6f315d-0bc0-4043-9aae-6420d1d48b92" />
138 lines
2.3 KiB
SCSS
Vendored
138 lines
2.3 KiB
SCSS
Vendored
@use "lib/viewport";
|
|
|
|
.about {
|
|
&__main-content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 2em;
|
|
max-width: 1100px;
|
|
|
|
h2 {
|
|
font-size: var(--font-up-1);
|
|
}
|
|
|
|
.--custom-group {
|
|
max-width: unset;
|
|
margin-top: 3em;
|
|
|
|
h2 {
|
|
a {
|
|
color: var(--primary);
|
|
|
|
&:hover {
|
|
color: var(--tertiary);
|
|
}
|
|
}
|
|
|
|
&::first-letter {
|
|
text-transform: capitalize;
|
|
}
|
|
}
|
|
|
|
p {
|
|
margin-top: 0;
|
|
color: var(--primary-high);
|
|
}
|
|
|
|
&.--has-description {
|
|
h3 {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__header {
|
|
max-width: 1100px;
|
|
|
|
h1 {
|
|
font-size: var(--font-up-1);
|
|
}
|
|
}
|
|
|
|
&__left-side {
|
|
flex: 1 1 650px;
|
|
}
|
|
|
|
&__right-side {
|
|
flex: 1 2 200px;
|
|
}
|
|
|
|
&__stats {
|
|
display: flex;
|
|
border-top: 1px solid var(--content-border-color);
|
|
border-bottom: 1px solid var(--content-border-color);
|
|
padding: 1em 1em;
|
|
margin-bottom: 1em;
|
|
|
|
@include viewport.until(md) {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.d-icon {
|
|
margin-right: 3px;
|
|
}
|
|
}
|
|
|
|
&__stats-item {
|
|
flex: 1 0 fit-content;
|
|
|
|
@include viewport.until(md) {
|
|
margin-bottom: 1em;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__banner {
|
|
margin-bottom: 1em;
|
|
width: 100%;
|
|
height: auto; // Let the height scale with the width
|
|
position: relative; // Ensure the container can handle absolute positioning for the image
|
|
padding-top: 27.27%; // Maintain the aspect ratio (300px/1100px * 100)
|
|
|
|
&-img {
|
|
position: absolute; // Allow to fill the full space
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover; // Ensures the image fills the container while preserving aspect ratio
|
|
}
|
|
}
|
|
|
|
&__activities-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 1.5em;
|
|
}
|
|
|
|
&__activities-item-icon {
|
|
margin-right: 1em;
|
|
}
|
|
|
|
&__activities-item-period {
|
|
font-size: var(--font-down-2);
|
|
}
|
|
|
|
&__admins,
|
|
&__moderators {
|
|
margin-top: 3em;
|
|
|
|
h2 {
|
|
margin-bottom: 1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.about-page-users-list {
|
|
display: grid;
|
|
gap: 1em;
|
|
grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
|
|
|
|
&__expand-button {
|
|
width: 100%;
|
|
}
|
|
}
|
