4679cc70ef
- Implemented a floating action button (FAB) for newsletter subscription in the template. - Added JavaScript to handle the toggle state of the FAB and close it on outside clicks or Escape key press. - Created CSS styles for the FAB, including animations and responsive design. - Added a Django template tag to return a random default cover image for the FAB. - Integrated a form for email input and submission within the FAB.
173 lines
2.9 KiB
CSS
173 lines
2.9 KiB
CSS
.newsletter-page {
|
|
background: #0e1b42 url("../img/newsletter_bg.png") center center / cover no-repeat fixed;
|
|
}
|
|
|
|
.newsletter-page .site-main > .site-container {
|
|
padding-top: 64px;
|
|
padding-bottom: 64px;
|
|
min-height: 400px;
|
|
}
|
|
|
|
.newsletter-status {
|
|
max-width: 640px;
|
|
margin: 0 auto;
|
|
padding: 24px;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.newsletter-status h1 {
|
|
font-size: 32px;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.newsletter-status p {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.newsletter-status-message {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.newsletter-unsubscribe-form label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.newsletter-unsubscribe-form input[type="email"],
|
|
.newsletter-unsubscribe-form input[type="text"] {
|
|
width: 300px;
|
|
padding: 8px;
|
|
border: 0;
|
|
background: #ffffff4d;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.newsletter-unsubscribe-form button {
|
|
width: 131px;
|
|
height: 49px;
|
|
border: 0;
|
|
background: #ffffff;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #000000;
|
|
padding: 10px 16px;
|
|
cursor: pointer;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.newsletter-back-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
margin-top: 20px;
|
|
color: #ffffff;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.newsletter-back-link__icon {
|
|
position: relative;
|
|
width: 52px;
|
|
height: 52px;
|
|
background: #ffffff80;
|
|
}
|
|
|
|
.newsletter-back-link__icon::before,
|
|
.newsletter-back-link__icon::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 18px;
|
|
width: 15px;
|
|
height: 1.5px;
|
|
background: #0e1b42;
|
|
}
|
|
|
|
.newsletter-back-link__icon::before {
|
|
top: 21px;
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
.newsletter-back-link__icon::after {
|
|
top: 31px;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.newsletter-back-link__text {
|
|
font-size: 16px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
@media (min-width: 575px) and (max-width: 767px) {
|
|
.newsletter-page .site-main > .site-container {
|
|
min-height: 360px;
|
|
}
|
|
|
|
.newsletter-status {
|
|
padding: 16px;
|
|
}
|
|
|
|
.newsletter-status h1 {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.newsletter-status p {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.newsletter-unsubscribe-form input[type="email"],
|
|
.newsletter-unsubscribe-form input[type="text"] {
|
|
width: 240px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 574px) {
|
|
.newsletter-page .site-main > .site-container {
|
|
min-height: 320px;
|
|
}
|
|
|
|
.newsletter-status {
|
|
padding: 16px;
|
|
}
|
|
|
|
.newsletter-status h1 {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.newsletter-status p {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.newsletter-unsubscribe-form input[type="email"],
|
|
.newsletter-unsubscribe-form input[type="text"] {
|
|
width: 260px;
|
|
}
|
|
|
|
.newsletter-unsubscribe-form button {
|
|
width: 90px;
|
|
height: 31px;
|
|
padding: 4px 16px;
|
|
}
|
|
|
|
.newsletter-back-link__icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.newsletter-back-link__icon::before {
|
|
top: 15px;
|
|
}
|
|
|
|
.newsletter-back-link__icon::after {
|
|
top: 25px;
|
|
}
|
|
|
|
.newsletter-back-link__icon::before,
|
|
.newsletter-back-link__icon::after {
|
|
left: 12px;
|
|
}
|
|
|
|
.newsletter-back-link__text {
|
|
font-size: 14px;
|
|
}
|
|
} |