github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Website redesign - Fixing premium badges and buttons on mobile design (#16718)

Browse source 
* fixing premium badge display on every page

* Aligning header sections and fixing buttons

This aligns the header section to the left on mobile layouts
This also fixes the buttons width on mobile layouts

GitOrigin-RevId: 795af064989272969a5707c086b422b4be58ec25
This commit is contained in:
Davinder Singh 2024-01-26 11:00:00 +00:00 committed by Copybot
parent 3e36369433
commit f09d481eea
1 changed files with 22 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
services/web/frontend/stylesheets/app/website-redesign.less
View file

@ -710,6 +710,21 @@
} }
} }
.heading-section-md-align-left {
@media (max-width: @screen-md-min) {
display: flex;
flex-direction: column;
align-items: baseline;
h2 {
text-align: left;
}
p {
text-align: left;
}
}
}
.mono-text { .mono-text {
font-family: 'DM Mono', monospace; font-family: 'DM Mono', monospace;
color: var(--green-60); color: var(--green-60);
@ -857,14 +872,18 @@
justify-content: center; justify-content: center;
} }
@media (max-width: @screen-sm-max) { &.align-left-button-sm {
flex-direction: column-reverse; @media (max-width: @screen-sm-max) {
width: 100%; justify-content: start;
}
} }
} }
.label-premium { .label-premium {
height: 20px; // override default height height: 20px; // override default height
}
.label-premium-block-md {
@media (max-width: @screen-md-max) { @media (max-width: @screen-md-max) {
display: block; display: block;
width: fit-content; width: fit-content;