IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: Improve mobile view for the new /about page (#28406)

Browse Source 
This commit makes the new /about page look better on mobile.
This commit is contained in:
Osama Sayegh 2024-08-17 03:44:18 +03:00 committed by GitHub
parent 5e91233ca9
commit 2f8dc64caf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 27 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/assets/stylesheets/common/base/about.scss
View File

@ -1,8 +1,16 @@
.about { .about {
&__main-content { &__main-content {
display: grid; display: flex;
grid-template-columns: 2.5fr 1fr; flex-wrap: wrap;
column-gap: 2em; gap: 2em;
max-width: 1100px;
}
&__left-side {
flex: 1 1 650px;
}
&__right-side {
flex: 1 2 200px;
} }
&__stats { &__stats {
@ -11,11 +19,25 @@
border-bottom: 1px solid var(--primary-low); border-bottom: 1px solid var(--primary-low);
padding: 1em 1em; padding: 1em 1em;
margin-bottom: 1em; margin-bottom: 1em;
@include breakpoint(tablet) {
flex-direction: column;
}
.d-icon {
margin-right: 3px;
}
} }
&__stats-item { &__stats-item {
flex-grow: 1; flex: 1 0 fit-content;
flex-basis: 0;
@include breakpoint(tablet) {
margin-bottom: 1em;
&:last-child {
margin-bottom: 0;
}
}
} }
&__banner { &__banner {