0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-15 03:01:37 -05:00

Responsive style improvements

This commit is contained in:
Peter Zimon 2021-10-15 14:09:13 +02:00
parent a109538898
commit 7f0e55e7cf
4 changed files with 28 additions and 7 deletions

View file

@ -783,10 +783,25 @@ const MobileStyles = `
}
}
@media (min-width: 768px) and (max-height: 768px) {
.gh-portal-signup-header,
.gh-portal-signin-header {
padding-bottom: 16px;
@media (min-width: 480px) and (max-height: 880px) {
.gh-portal-popup-wrapper {
padding-top: 4vmin;
}
.gh-portal-content.signup {
max-height: calc(100vh - 8vmin - 126px);
}
}
@media (min-width: 480px) and (max-height: 650px) {
.gh-portal-popup-container {
overflow: scroll;
max-height: calc(100vh - 8vmin);
}
.gh-portal-content.signup {
max-height: unset !important;
overflow: unset !important;
}
}

View file

@ -418,7 +418,6 @@ export const ProductsSectionStyles = ({site}) => {
.gh-portal-singleproduct-benefits .gh-portal-product-description {
text-align: center;
padding-bottom: 12px;
}
.gh-portal-product-price .currency-sign {

View file

@ -77,7 +77,7 @@ export const SignupPageStyles = `
background: linear-gradient(#fff 30%,hsla(0,0%,100%,0)),
linear-gradient(hsla(0,0%,100%,0),#fff 70%) 0 100%,
linear-gradient(#fff,transparent),
linear-gradient(transparent,rgba(0,0,0,.03)) 0 100%;
linear-gradient(transparent,rgba(0,0,0,.06)) 0 100%;
background-repeat: no-repeat;
background-color: #fff;
background-size: 100% 40px,100% 40px,100% 14px,100% 14px;
@ -104,6 +104,7 @@ export const SignupPageStyles = `
right: 0;
height: 3px;
background: #fff;
z-index: 9999;
}
.gh-portal-content.signup,
@ -229,6 +230,12 @@ export const SignupPageStyles = `
padding: 0 24px !important;
}
}
@media (max-height: 880px) {
footer.gh-portal-signup-footer {
height: 126px;
}
}
`;
class SignupPage extends React.Component {

View file

@ -7,7 +7,7 @@ export const sites = {
};
export function getSiteData({
products = getProductsData({numOfProducts: 3}),
products = getProductsData({numOfProducts: 1}),
portalProducts = products.map(p => p.id),
portalPlans: portal_plans = ['free', 'monthly', 'yearly']
} = {}) {