diff --git a/apps/web/src/components/FooterSection/FooterSection.module.scss b/apps/web/src/components/FooterSection/FooterSection.module.scss index 5b53501aa..6c7ac4626 100644 --- a/apps/web/src/components/FooterSection/FooterSection.module.scss +++ b/apps/web/src/components/FooterSection/FooterSection.module.scss @@ -64,9 +64,9 @@ z-index: 1; @media screen and (max-width: 684px) { - font-size: 64px; - line-height: 62px; - letter-spacing: -3px; + font-size: 17.02vw; + line-height: 16.49vw; + letter-spacing: -0.8723vw; } } @@ -92,6 +92,11 @@ transition: 300ms; padding: 14px 16px; margin-top: 32px; + + @media screen and (max-width: 400px) { + font-size: 4.5vw; + letter-spacing: 0.27vw; + } } .grainyButton { @@ -197,6 +202,10 @@ .bottomWrapper { padding: 0px 32px; + + @media screen and (max-width: 450px) { + padding: 0px; + } } .questionsWrapper { @@ -213,7 +222,6 @@ .socialsWrapper { display: flex; - height: fit-content; position: absolute; bottom: -38px; @@ -230,15 +238,8 @@ } @media screen and (max-width: 650px) { - width: 106px; - height: 106px; - margin-left: -12px; - margin-right: -12px; - } - - @media screen and (max-width: 361px) { - width: 94px; - height: 94px; + width: 28vw; + height: 28vw; } } } @@ -251,7 +252,8 @@ margin-top: 52px; @media screen and (max-width: 650px) { - margin-top: 68px; + margin-top: 18.09vw; + margin-left: -5.374vw; } } @@ -259,7 +261,8 @@ margin-top: 28px; @media screen and (max-width: 650px) { - margin-top: 16px; + margin-top: 4.255vw; + margin-left:2.39vw; } } @@ -267,7 +270,8 @@ margin-top: 60px; @media screen and (max-width: 650px) { - margin-top: 83px; + margin-top: 22.07vw; + margin-left: -4.02vw; } } @@ -275,11 +279,8 @@ height: 162px; @media screen and (max-width: 650px) { - height: 106px; - } - - @media screen and (max-width: 361px) { - height: 94px; + margin-left: -7.69vw; + height: 28vw; } } @@ -309,5 +310,6 @@ @media screen and (max-width: 1032px) { flex-direction: column; text-align: center; + padding: 0px; } } diff --git a/apps/web/src/components/FrequentlyAskedQuestionsSection/FrequentlyAskedQuestionsSection.module.scss b/apps/web/src/components/FrequentlyAskedQuestionsSection/FrequentlyAskedQuestionsSection.module.scss index 01a700959..19925b8ec 100644 --- a/apps/web/src/components/FrequentlyAskedQuestionsSection/FrequentlyAskedQuestionsSection.module.scss +++ b/apps/web/src/components/FrequentlyAskedQuestionsSection/FrequentlyAskedQuestionsSection.module.scss @@ -11,6 +11,10 @@ padding: 119px 16px 176px 16px; } + @media (max-width: 380px) { + padding: 119px 4.255vw 176px 4.255vw; + } + &:before { content: ''; background-image: url(../../assets/images/noise.webp); @@ -39,6 +43,10 @@ font-weight: 500; line-height: 144px; letter-spacing: -5.025px; + + @media (max-width: 380px) { + font-size: 31.9149vw; + } } } @@ -60,6 +68,15 @@ &Index { @include mixins.themeBadge(); margin-top: 4px; + + @media (max-width: 380px) { + font-size: 8px; + line-height: 8vw; + padding: 1.064vw 4.255vw; + margin-top: 1.064vw; + height: 10px; + width: 20px; + } } &Info { @@ -68,6 +85,10 @@ @media (max-width: 1200px) { margin-left: 24px; } + + @media (max-width: 380px) { + margin-left: 6.383vw; + } } &Question { @@ -86,6 +107,11 @@ letter-spacing: -0.16px; font-size: 16px; } + + @media (max-width: 380px) { + font-size: 12px; + line-height: 15px; + } } &Answer { @@ -100,6 +126,11 @@ font-style: normal; font-weight: 500; line-height: 22px; + + @media (max-width: 380px) { + font-size: 12px; + line-height: 15px; + } } &Button { diff --git a/apps/web/src/components/LocationSection/LocationSection.module.scss b/apps/web/src/components/LocationSection/LocationSection.module.scss index 97a87cc94..b903bca9b 100644 --- a/apps/web/src/components/LocationSection/LocationSection.module.scss +++ b/apps/web/src/components/LocationSection/LocationSection.module.scss @@ -44,11 +44,11 @@ div { letter-spacing: -11.916px; @media (max-width: 1390px) { - padding-top: 90px; - - font-size: 69.968px; - line-height: 87.46px; - letter-spacing: -3.28px; + padding-top: 5.312vw; + + font-size: 18.601vw; + line-height: 23.26vw; + letter-spacing: -0.872vw; } &Container { @@ -174,8 +174,10 @@ div { letter-spacing: -1px; @media (max-width: 1390px) { - font-size: 26px; - line-height: 26px; + padding-top: 23.94vw; + + font-size: 6.915vw; + line-height: 6.915vw; letter-spacing: -0.544px; } } @@ -296,21 +298,19 @@ div { .date { margin-top: vw-calc(76); - padding-left: vw-calc(27); + margin-left: vw-calc(37); position: relative; - width: 100%; - &Text { - display: inline; + @mixin sharedTextStyles { + display: inline-flex; color: #fff; text-align: center; font-feature-settings: 'ss12' on; font-family: 'PP Neue Machina'; - font-size: vw-calc(250.265); + font-size: vw-calc(268.265); font-style: normal; font-weight: 500; - line-height: vw-calc(262.265); - letter-spacing: vw-calc(5.245); + line-height: vw-calc(266); text-transform: uppercase; opacity: 0.2; mix-blend-mode: overlay; @@ -318,37 +318,41 @@ div { @media (max-width: 992px) { font-size: vw-mid-calc(65.491); line-height: vw-mid-calc(64.026); + } + } + + &Text { + @include sharedTextStyles; + letter-spacing: vw-calc(5.245); + + @media (max-width: 992px) { letter-spacing: vw-mid-calc(1.281); } } + &SecondPart { + @include sharedTextStyles; + letter-spacing: vw-calc(13.987); + text-wrap: nowrap; + + @media (max-width: 992px) { + letter-spacing: vw-mid-calc(3.415); + } + } + &Span { - display: none; - position: relative; - display: inline; - color: transparent; - text-align: center; - font-feature-settings: 'ss12' on; - font-family: 'PP Neue Machina', sans-serif; - font-size: vw-calc(268.265); - font-style: normal; - font-weight: 500; - line-height: vw-calc(262.265); - letter-spacing: vw-calc(5.245); - text-transform: uppercase; + position: absolute; + left: vw-calc(556); + top: vw-calc(6); &Image { position: absolute; z-index: 1; - top: vw-calc(12); - right: 0; - left: 0; margin: 0 auto; width: vw-calc(254); height: vw-calc(182); @media (max-width: 992px) { - top: vw-mid-calc(2); width: vw-mid-calc(69.273); height: vw-mid-calc(49.637); } @@ -357,13 +361,9 @@ div { &::after { content: ''; position: absolute; - top: vw-calc(-40); - right: 0; - left: 0; + top: - vw-calc(52); + left: vw-calc(22); margin: 0 auto; - display: flex; - justify-content: center; - align-items: center; width: vw-calc(210.721); height: vw-calc(286); background-image: url('../../assets/stamp.svg'); @@ -373,18 +373,22 @@ div { transform: rotate(-90deg); @media (max-width: 992px) { - top: vw-mid-calc(-12); + left: vw-mid-calc(5.9015); + top: vw-mid-calc(-14.182); width: vw-mid-calc(57.47); height: vw-mid-calc(78.001); } } @media (max-width: 992px) { - font-size: vw-mid-calc(65.491); - line-height: vw-mid-calc(64.026); - letter-spacing: vw-mid-calc(1.281); + left: vw-mid-calc(136.14); + top: vw-mid-calc(4.52); } } + @media (max-width: 992px) { + margin-left: vw-mid-calc(17.22); + margin-top: 0px; + } } .imageBreaker { diff --git a/apps/web/src/components/LocationSection/LocationSection.tsx b/apps/web/src/components/LocationSection/LocationSection.tsx index cc3761aa6..0293f08cc 100644 --- a/apps/web/src/components/LocationSection/LocationSection.tsx +++ b/apps/web/src/components/LocationSection/LocationSection.tsx @@ -48,17 +48,15 @@ const LocationSection = () => {
23.
+23. — 24.
- {' '} - —{' '}24. 05. 2024.
+05. 2024