EricandMike Thomas
6822eece46
Changes: - Updated the `<parallax-city>` component to show a static image and renamed it `<cloud-city>`. - Removed the gradient that appears on pages where the `<parallax-city>` component is used - Updated pages to use the component's new name. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Introduced a new static cloud-city banner component across the site, replacing the previous parallax-animated city banners. * **Style** * Added new responsive styling for the cloud-city banner (including breakpoint-specific background/height behavior). * Removed the old parallax-city banner styling. * Removed bottom “gradient” background sections on multiple pages to clean up the visual transitions between sections. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com>
48 lines
1.2 KiB
Plaintext
Vendored
48 lines
1.2 KiB
Plaintext
Vendored
|
|
/**
|
|
* <cloud-city>
|
|
*
|
|
* App-wide styles for our cloud city banner.
|
|
*/
|
|
|
|
[parasails-component='cloud-city'] {
|
|
background: linear-gradient(0deg, #E8F1F6 64.17%, #FFF 100%);
|
|
[purpose='static-cloud-city'] {
|
|
background-image: url('/images/cloud-city/cloud-city-banner-4925x480@2x.png');
|
|
background-size: auto 100%;
|
|
background-position: center bottom;
|
|
background-repeat: repeat-x;
|
|
height: 480px;
|
|
}
|
|
@media (max-width: 1200px) {
|
|
[purpose='static-cloud-city'] {
|
|
background-image: url('/images/cloud-city/cloud-city-xl-1200x456@2x.png');
|
|
height: 456px;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
@media (max-width: 991px) {
|
|
[purpose='static-cloud-city'] {
|
|
background-image: url('/images/cloud-city/cloud-city-lg-992x350@2x.png');
|
|
height: 350px;
|
|
}
|
|
}
|
|
@media (max-width: 768px) {
|
|
[purpose='static-cloud-city'] {
|
|
background-image: url('/images/cloud-city/cloud-city-md-768x259@2x.png');
|
|
height: 259px;
|
|
}
|
|
}
|
|
@media (max-width: 575px) {
|
|
[purpose='static-cloud-city'] {
|
|
background-image: url('/images/cloud-city/cloud-city-sm-576x215@2x.png');
|
|
height: 215px;
|
|
}
|
|
}
|
|
@media (max-width: 375px) {
|
|
[purpose='static-cloud-city'] {
|
|
height: 153px;
|
|
}
|
|
}
|
|
}
|