diff --git a/src/app/app.component.scss b/src/app/app.component.scss index e22093df9..b353e1c3d 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,10 +1,13 @@ + .fl-libraries { - position: relative; + position: sticky; top: 0; height: auto; min-height: 100vh; + width: auto; background-color: #fafcff; + z-index: 2; .fl-title { display: flex; flex-direction: column; @@ -14,6 +17,12 @@ margin-right: 1.1875rem; margin-left: 5vw; } + @media (50px <= width <=430px){ + + .fl-title{ + padding-top: 1.5rem; + } + } @media (500px <= width <= 899px) { position: sticky; top: 0; @@ -44,7 +53,7 @@ padding: 5vw 5vw; } -@media (width >= 1115px){ +@media (width >= 900px){ .fl-cards{ flex-direction: row; column-gap: 2rem; diff --git a/src/app/fl-card/fl-card.component.scss b/src/app/fl-card/fl-card.component.scss index ab9ea28da..14399b2e1 100644 --- a/src/app/fl-card/fl-card.component.scss +++ b/src/app/fl-card/fl-card.component.scss @@ -11,9 +11,7 @@ 2.3px 2.3px 4.5px rgba(0, 0, 0, 0.045), 6.4px 6.4px 12.5px rgba(0, 0, 0, 0.065), 15.4px 15.4px 30.1px rgba(0, 0, 0, 0.085), - 51px 51px 100px rgba(0, 0, 0, 0.13) - ; - + 51px 51px 100px rgba(0, 0, 0, 0.13); img { height: 3.75rem; @@ -61,10 +59,28 @@ } -} -@media (min-width: 900px) { - .fl-card { + @media (max-width: 430px) { + gap: 1rem; + padding: 1.5rem 1rem; + + h2{ + font-size: 1.1rem; + line-height: 1rem; + } + + p { + font-size: 0.875rem; + line-height: 1.375rem; + color: #004E5E; + text-align: center; + display: none; + } + + } + + @media (min-width: 900px) { + gap: 2.75rem; padding: 2.25rem; align-items: flex-start; @@ -83,7 +99,9 @@ line-height: 1.875rem; text-align: left; } - } + } + + diff --git a/src/app/fl-conference/fl-conference.component.scss b/src/app/fl-conference/fl-conference.component.scss index ad11e6f56..bb7b44272 100644 --- a/src/app/fl-conference/fl-conference.component.scss +++ b/src/app/fl-conference/fl-conference.component.scss @@ -9,6 +9,7 @@ position: sticky; top:0; justify-content: center; + z-index: 4; .fl-title span { diff --git a/src/app/fl-design/fl-design.component.scss b/src/app/fl-design/fl-design.component.scss index c1c57413c..72c960c33 100644 --- a/src/app/fl-design/fl-design.component.scss +++ b/src/app/fl-design/fl-design.component.scss @@ -10,6 +10,7 @@ position: relative; top: 0; justify-content: center; + z-index: 5; .fl-designimg1{ width:20rem; diff --git a/src/app/fl-footer/fl-footer.component.scss b/src/app/fl-footer/fl-footer.component.scss index 681a180e8..8ac9d51f3 100644 --- a/src/app/fl-footer/fl-footer.component.scss +++ b/src/app/fl-footer/fl-footer.component.scss @@ -20,7 +20,7 @@ position: absolute; font-size: 1rem; font-weight: 700; - color: #001e31; + color: #001E31; } .fl-footer-img1 { @@ -112,7 +112,7 @@ margin-right: 1rem; } .fl-policies a{ - color: black; + color: #001E31; } .fl-footer-imgSAP { float: left; @@ -129,7 +129,7 @@ margin-top: 3rem; } .fl-links a { - color: black; + color: #001E31; } @media (605px <= width <= 849px) { @@ -138,7 +138,7 @@ margin-left: 1rem; } .fl-links a { - color: black; + color: #001E31; } } @@ -232,7 +232,7 @@ margin-right: 0; } .fl-links a { - color: black; + color: #001E31; } .fl-footer-imgSAP { margin: 0 0 0 0; diff --git a/src/app/fl-intro/fl-intro.component.scss b/src/app/fl-intro/fl-intro.component.scss index 9cd4e8933..f365b38fd 100644 --- a/src/app/fl-intro/fl-intro.component.scss +++ b/src/app/fl-intro/fl-intro.component.scss @@ -10,6 +10,7 @@ padding: 0 1rem; position: sticky; top: 0; + z-index: 0; &__container { gap: 1rem; @@ -27,7 +28,7 @@ &__btn-container { margin-top: 5rem; align-items: center; - gap: 0.5rem; + gap: 1rem; display: flex; flex-direction: column; } diff --git a/src/app/fl-purpose/fl-purpose.component.scss b/src/app/fl-purpose/fl-purpose.component.scss index a7c2b92b1..f89cb73b4 100644 --- a/src/app/fl-purpose/fl-purpose.component.scss +++ b/src/app/fl-purpose/fl-purpose.component.scss @@ -6,9 +6,10 @@ border-radius: 1rem; padding: 1.75rem 1rem; flex-direction: column; - background-color:#00677F; + background-color: #00677f; position: sticky; top: 0; + z-index: 1; p { flex: 1; diff --git a/src/app/fl-used/fl-used.component.scss b/src/app/fl-used/fl-used.component.scss index a0b5ad0b3..cbdbf304d 100644 --- a/src/app/fl-used/fl-used.component.scss +++ b/src/app/fl-used/fl-used.component.scss @@ -9,6 +9,7 @@ flex-direction: column; position: sticky; top: 0; + z-index: 3; .fl-title span { display: block;