Félix Péault
a9869b72be
Switch from SendInBlue to EmailOctopus for newsletter. Now uses their API through the form to handle subscription.
84 lines
1.8 KiB
SCSS
84 lines
1.8 KiB
SCSS
.newsletter {
|
|
padding: clamp(40px, 4.5vw, 64px);
|
|
padding-bottom: clamp(48px, 4.5vw, 72px);
|
|
border-radius: 8px;
|
|
|
|
@include bp (sd) {
|
|
border-radius: 12px;
|
|
}
|
|
|
|
&__wrapper {
|
|
--columns: 20;
|
|
grid-column: 3 / span var(--columns);
|
|
|
|
@include bp (sd) {
|
|
--columns: 18;
|
|
grid-column: 4 / span var(--columns);
|
|
}
|
|
|
|
h3 {
|
|
color: $color-secondary;
|
|
margin-bottom: 8px;
|
|
|
|
@include bp (sm) {
|
|
margin-bottom: 16px;
|
|
}
|
|
}
|
|
& > p {
|
|
margin-bottom: 32px;
|
|
color: $color-text;
|
|
font-weight: 200;
|
|
|
|
@include bp (sm) {
|
|
max-width: 480px;
|
|
margin-bottom: 40px;
|
|
}
|
|
}
|
|
|
|
// Form
|
|
:global(.past-issues:hover) {
|
|
color: $color-secondary;
|
|
|
|
:global(span) {
|
|
color: $color-secondary;
|
|
border-color: $color-secondary;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Form input
|
|
:global(.newsletter-form__email) {
|
|
:global(input) {
|
|
color: $color-text;
|
|
}
|
|
:global(input::placeholder) {
|
|
color: $color-gray;
|
|
}
|
|
}
|
|
// Form message
|
|
:global(.newsletter-form__message.is-success) {
|
|
color: #fff;
|
|
background: $color-primary-tertiary20;
|
|
}
|
|
|
|
|
|
/*
|
|
** Variants
|
|
*/
|
|
// Default color
|
|
&--default {
|
|
background: $color-tertiary 50% 0 / cover url(#{$dir-img}/newsletter-beige.jpg) no-repeat;
|
|
|
|
:global(.newsletter-form__email) {
|
|
background: $color-tertiary;
|
|
}
|
|
}
|
|
// Light
|
|
&--light {
|
|
background: $color-cream 50% 0 / cover url(#{$dir-img}/newsletter-cream.jpg) no-repeat;
|
|
|
|
:global(.newsletter-form__email) {
|
|
background: $color-cream;
|
|
}
|
|
}
|
|
} |