mirror of
https://github.com/empayre/fleet.git
synced 2024-11-06 17:05:18 +00:00
30a36b0b3a
Changes: - Merged two layers of the parallax cloud city image & updated filenames. - Added a transition property to the parallax cloud city image to make the animation smoother when scrolling with a mouse wheel. - Updated the z-index of the website's footer to prevent the content from being hidden by the parallax image when it is at its starting position --------- Co-authored-by: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com>
102 lines
2.9 KiB
Plaintext
Vendored
102 lines
2.9 KiB
Plaintext
Vendored
|
|
/**
|
|
* <parallax-city>
|
|
*
|
|
* App-wide styles for our ajax buttons.
|
|
*/
|
|
|
|
[parasails-component='parallax-city'] {
|
|
background: linear-gradient(180deg, #E9F4F4 0%, #FFFFFF 650px);
|
|
background-size: auto 100%;
|
|
background-position: center bottom;
|
|
background-repeat: no-repeat;
|
|
max-height: 600px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
[purpose='parallax-city-container'] {
|
|
height: 456px;
|
|
position: relative;
|
|
.parallax-layer {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: -1px;
|
|
width: 100%;
|
|
height: 100%;
|
|
will-change: transform;
|
|
background-size: auto 100%;
|
|
transition: 0.1s smooth;
|
|
transition-property: all;
|
|
}
|
|
[purpose='foreground-cloud-1'] {
|
|
background-image: url('/images/parallax-cloud-city/1-cloud-3840x456@2x.png');
|
|
background-position: center bottom;
|
|
background-repeat: repeat-x;
|
|
z-index: 100;
|
|
}
|
|
[purpose='foreground-cloud-2'] {
|
|
background-image: url('/images/parallax-cloud-city/2-cloud-3840x456@2x.png');
|
|
background-position: center bottom;
|
|
background-repeat: repeat-x;
|
|
z-index: 99;
|
|
}
|
|
[purpose='large-island'] {
|
|
background-image: url('/images/parallax-cloud-city/3-island-3840x456@2x.png');
|
|
background-position: center bottom;
|
|
background-repeat: no-repeat;
|
|
z-index: 97;
|
|
}
|
|
[purpose='small-island-1'] {
|
|
background-image: url('/images/parallax-cloud-city/4-island-3840x456@2x.png');
|
|
background-position: center bottom;
|
|
background-repeat: no-repeat;
|
|
z-index: 95;
|
|
}
|
|
[purpose='small-island-2'] {
|
|
background-image: url('/images/parallax-cloud-city/5-island-3840x456@2x.png');
|
|
background-position: center bottom;
|
|
background-repeat: no-repeat;
|
|
z-index: 95;
|
|
}
|
|
[purpose='background-cloud-1'] {
|
|
background-image: url('/images/parallax-cloud-city/6-cloud-3840x456@2x.png');
|
|
background-position: center bottom;
|
|
background-repeat: no-repeat;
|
|
z-index: 1;
|
|
}
|
|
[purpose='background-cloud-2'] {
|
|
background-image: url('/images/parallax-cloud-city/7-cloud-3840x456@2x.png');
|
|
background-position: center bottom;
|
|
background-repeat: repeat-x;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
@media (max-width: 991px) {
|
|
[purpose='parallax-city-container'] {
|
|
height: 400px;
|
|
}
|
|
}
|
|
@media (max-width: 768px) {
|
|
[purpose='parallax-city-container'] {
|
|
height: 300px;
|
|
}
|
|
}
|
|
@media (max-width: 575px) {
|
|
[purpose='parallax-city-container'] {
|
|
height: 300px;
|
|
background-image: url('/images/parallax-cloud-city/cloud-city-static-576x300@2x.png');
|
|
background-size: contain;
|
|
background-position: center bottom;
|
|
background-repeat: no-repeat;
|
|
.parallax-layer {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
@media (max-width: 375px) {
|
|
[purpose='parallax-city-container'] {
|
|
height: 200px;
|
|
}
|
|
}
|
|
}
|