Add mailpoet-automation-section-content to define a max-width for section content

[MAILPOET-4536]
This commit is contained in:
David Remer
2022-11-03 08:57:35 +02:00
committed by Jan Jakeš
parent 945ff65358
commit 6ad315b8de
4 changed files with 97 additions and 86 deletions

View File

@ -11,6 +11,19 @@
}
.mailpoet-automation-section {
@include full-width;
}
.mailpoet-automation-white-background {
background: #fff;
}
.mailpoet-automation-section-content {
display: block;
margin: auto;
max-width: 1072px;
padding: 65px 0;
h2 {
font-size: 23px;
font-weight: 400;
@ -29,14 +42,10 @@
}
.mailpoet-automation-section-hero {
background: #fff;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: -20px;
padding: 65px;
@include full-width;
h1 {
font-size: 32px;
@ -71,7 +80,7 @@
}
.mailpoet-section-templates {
padding: 48px 64px 48px 84px;
padding: 48px 0;
.components-button {
display: block;
@ -129,13 +138,9 @@
}
.mailpoet-section-build-your-own {
background: #fff;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 64px;
@include full-width;
ol {
list-style: decimal-leading-zero inside;

View File

@ -46,7 +46,8 @@ export function BuildYourOwnSection(): JSX.Element {
const selectedItem = list.filter((item) => item.slug === itemOpen)[0];
return (
<section className="mailpoet-automation-section mailpoet-section-build-your-own">
<section className="mailpoet-automation-section mailpoet-automation-white-background">
<div className="mailpoet-automation-section-content mailpoet-section-build-your-own">
<div>
<h2>{__('Build your own automation workflows', 'mailpoet')}</h2>
<p>
@ -79,6 +80,7 @@ export function BuildYourOwnSection(): JSX.Element {
</ol>
</div>
<img src={selectedItem.image} alt={selectedItem.title} />
</div>
</section>
);
}

View File

@ -9,7 +9,8 @@ export function HeroSection(): JSX.Element {
[],
);
return (
<section className="mailpoet-automation-section mailpoet-automation-section-hero">
<section className="mailpoet-automation-section mailpoet-automation-white-background">
<div className="mailpoet-automation-section-content mailpoet-automation-section-hero">
<div>
<span className="mailpoet-automation-preheading">
{__('Automations', 'mailpoet')}
@ -36,6 +37,7 @@ export function HeroSection(): JSX.Element {
src={`${MailPoet.cdnUrl}automation/sections/hero.png`}
alt={__('Welcome', 'mailpoet')}
/>
</div>
</section>
);
}

View File

@ -8,7 +8,8 @@ export function TemplatesSection(): JSX.Element {
const templates = workflowTemplates.slice(0, 3);
return (
<section className="mailpoet-automation-section mailpoet-section-templates">
<section className="mailpoet-automation-section">
<div className="mailpoet-automation-section-content mailpoet-section-templates">
<h2>{__('Explore essentials', 'mailpoet')}</h2>
<p>
{__(
@ -28,6 +29,7 @@ export function TemplatesSection(): JSX.Element {
<Button variant="link" href={MailPoet.urls.automationTemplates}>
{__('Browse all templates →', 'mailpoet')}
</Button>
</div>
</section>
);
}