discourse/app/assets/stylesheets/common/base/about.scss
Osama Sayegh 1bcb5c4e21
UX: Tweak styling for the new /about page (#28367)
Various tweaks the new /about page. Main change is to make it display 3 columns of users instead of 2 when there's enough space.
2024-08-14 14:57:35 +03:00

96 lines
1.5 KiB
SCSS

.about {
&__main-content {
display: grid;
grid-template-columns: 2.5fr 1fr;
column-gap: 2em;
}
&__stats {
display: flex;
border-top: 1px solid var(--primary-low);
border-bottom: 1px solid var(--primary-low);
padding: 1em 1em;
margin-bottom: 1em;
}
&__stats-item {
flex-grow: 1;
flex-basis: 0;
}
&__banner {
margin-bottom: 1em;
min-height: 300px;
max-height: 300px;
}
&__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;
h3 {
margin-bottom: 1em;
}
}
}
.about-page-users-list {
display: grid;
gap: 1em;
grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
&__expand-button {
width: 100%;
}
}
section.about {
margin-bottom: 3em;
.users {
display: grid;
gap: 1em;
grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
}
h3 {
margin-bottom: 1em;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 0.35em;
.d-icon {
color: var(--primary-high);
}
.badge-category__wrapper {
font-size: var(--font-0);
align-self: baseline;
}
}
&.stats {
table {
td {
padding: 0.67em;
&:not(:first-child) {
text-align: center;
}
}
}
}
}