overleaf/services/web/frontend/stylesheets/app/homepage.less
M Fahru fe1417ffe9 Merge pull request #17914 from overleaf/mf-remove-old-homepage-css-rules
[web] Remove unused old homepage css code

GitOrigin-RevId: 7b49a01ea01156405d825146d739ec51cd40c336
2024-05-15 08:05:15 +00:00

290 lines
5.3 KiB
Text

.universities {
text-align: center;
.uni-logo {
display: inline-block;
padding: 0 @padding-md;
width: 20%;
}
}
@media only screen and (max-width: @screen-sm-max) {
.universities {
.uni-logo {
padding: @padding-md;
width: 50%;
}
}
}
.website-redesign {
.home-animation-text-container {
padding-top: @header-height;
display: flex;
flex-direction: column;
align-items: center;
.home-begin-text {
font-weight: 400;
display: flex;
color: #5f5ff0;
font-size: 4rem;
line-height: 1.25;
font-family: 'DM Mono', monospace;
align-self: flex-start;
width: 100%;
margin-top: 0;
font-weight: 400;
@media (max-width: @screen-sm-max) {
text-align: center;
flex-direction: column;
align-items: center;
font-size: 2.25rem;
}
}
.home-parenthesis-text {
color: #bbdbb8;
font-size: 4rem;
line-height: 1.25;
display: inherit;
span {
/* specifity workaround, otherwise .website-redesign span would take precedence */
font-family: 'DM Mono', monospace;
}
#home-animation-text {
color: @neutral-70;
}
@media (max-width: @screen-sm-max) {
font-size: 2.25rem;
}
}
}
.home-top-text {
text-align: center;
font-size: 1.25rem;
line-height: 1.4;
margin-bottom: 0;
font-weight: 400;
@media (max-width: @screen-sm-max) {
font-size: 1.125rem;
line-height: 1.33;
padding: 0 100px;
}
@media (max-width: @screen-xs-max) {
padding: 0 20px;
}
// force different line for desktop on both text
> span:first-of-type {
display: block;
@media (max-width: @screen-sm-max) {
display: inline;
}
}
// need to have an extra space only for mobile
// since on mobile all the text are inline
.dash-text {
@media (max-width: @screen-sm-max) {
&::after {
content: ' ';
}
}
}
}
.home-registration {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
.home-registration-sso {
display: flex;
gap: 16px;
@media (max-width: @screen-sm-max) {
flex-direction: column;
width: 100%;
}
.form-group {
.hp-login-btn {
.login-btn;
width: 100%;
min-width: 220px;
.login-btn-icon {
position: absolute;
left: 6px;
top: 7px;
width: 20px;
height: 20px;
}
}
}
}
.home-registration-separator {
margin: 8px 0;
color: @neutral-90;
> span {
vertical-align: middle;
&::before,
&::after {
content: '';
display: inline-block;
vertical-align: middle;
width: 196px;
height: 1px;
background-color: @neutral-20;
@media (max-width: @screen-sm-max) {
flex-direction: column;
width: 100%;
width: 156px;
}
}
&::before {
margin-right: 20px;
@media (max-width: @screen-sm-max) {
margin-right: 5px;
}
}
&::after {
margin-left: 20px;
@media (max-width: @screen-sm-max) {
margin-left: 5px;
}
}
}
}
.home-registration-password {
display: flex;
flex-direction: column;
.home-registration-password-input {
display: flex;
flex-direction: row;
gap: 16px;
margin-bottom: 0;
}
input {
flex: 1;
}
}
.home-registration-sign-up {
display: block;
margin-top: 16px;
width: 100%;
margin-bottom: 0;
> button {
width: 100%;
}
}
.tos-agreement-notice {
font-size: 0.75rem;
a {
color: @green-60;
text-decoration: underline;
font-weight: 400;
}
}
}
.home-millions-user-text {
text-align: center;
font-size: 1.25rem;
margin-bottom: 5px;
@media (max-width: @screen-sm-max) {
font-size: 1rem;
}
}
.home-university-logos {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
> img {
max-width: 145px;
}
// 991px
@media (max-width: @screen-sm-max) {
justify-content: center;
gap: 50px;
}
}
.home-templates-button-desktop {
@media (max-width: @screen-sm-max) {
display: none;
}
}
.home-templates-button-mobile {
display: none;
@media (max-width: @screen-sm-max) {
display: block;
}
}
.home-plans-footer {
text-align: center;
font-size: 1.125rem;
line-height: 1.333;
}
#home-features-arrow-green {
position: absolute;
left: 154px;
top: -98px;
@media (max-width: @screen-sm-max) {
height: 100px;
left: 120px;
top: -60px;
}
}
#home-rocket-yellow {
position: absolute;
right: 30px;
@media (max-width: @screen-md-max) {
height: 100px;
right: 30px;
bottom: -84px;
}
@media (max-width: @screen-sm-max) {
height: 70px;
right: 0;
bottom: unset;
top: -79px;
margin-right: 10px;
}
}
}