From 2bc93c21f9a279bc7bc02f39a2e992f8645f4d27 Mon Sep 17 00:00:00 2001
From: Aliaksandr BUDZKO <abudzko@takima.fr>
Date: Tue, 20 Jul 2021 12:12:35 +0200
Subject: [PATCH] feat: responsiveness mobile L 425px
---
src/js/pages/MainPage,module.scss | 8 ++
.../BottomSection/BottomSection.module.scss | 99 +++++++++++++++++--
.../CloudSection/CloudSection.module.scss | 22 ++++-
.../FeatureSection/FeatureSection.module.scss | 26 +++--
.../LandingSection/LandingSection.module.scss | 34 ++-----
.../StatsSection/StatsSection.module.scss | 13 ++-
.../TowerSection/TowerSection.module.scss | 15 ++-
.../VscodeSection/VscodeSection.module.scss | 6 ++
8 files changed, 174 insertions(+), 49 deletions(-)
diff --git a/src/js/pages/MainPage,module.scss b/src/js/pages/MainPage,module.scss
index d8f110d..b810509 100644
--- a/src/js/pages/MainPage,module.scss
+++ b/src/js/pages/MainPage,module.scss
@@ -52,3 +52,11 @@ html {
}
}
+@media (max-width: 425px) {
+ .footer{
+ a {
+ font-size: 0.5rem;
+ }
+ }
+}
+
diff --git a/src/js/sections/BottomSection/BottomSection.module.scss b/src/js/sections/BottomSection/BottomSection.module.scss
index 1a5a56c..1f274ae 100644
--- a/src/js/sections/BottomSection/BottomSection.module.scss
+++ b/src/js/sections/BottomSection/BottomSection.module.scss
@@ -135,15 +135,6 @@
}
-//@media (max-width: 1200px) {
-// .BottomSection {
-// min-height: 100vh;
-// background-position: bottom, 107% 40%, -5% 55%;
-//
-//
-// }
-//}
-
@media (max-width: 1024px) {
.BottomSection {
@@ -258,6 +249,7 @@
.ButtonContainer {
max-width: 60%;
align-self: center;
+ padding-right: 0;
a {
width: fit-content;
@@ -319,7 +311,94 @@
@media (max-width: 425px) {
.BottomSection {
- min-height: 70vh;
+ min-height: 75vh;
+ background-position: bottom, 106% 49%, -5% 63%;
+
+ .MiddleBlock {
+
+ .Title {
+ font-size: 1.2rem;
+ line-height: 1.4rem;
+ }
+
+ .Caption {
+
+ flex-direction: column;
+
+ .Comments {
+
+ font-size: 0.6rem;
+ line-height: 1rem;
+
+ .FirstComment {
+
+ }
+
+ .SecondComment {
+
+ }
+
+ }
+
+ .ButtonContainer {
+ max-width: 60%;
+ align-self: center;
+ padding-right: 0;
+
+ a {
+ width: fit-content;
+ }
+
+ }
+
+
+ }
+ }
+
+ .BottomBlock {
+
+ bottom: 1%;
+
+ .Logos {
+ margin-right: 5%;
+ max-width: 30%;
+ flex-direction: column;
+
+
+ img {
+ width: 100%;
+ height: 40%;
+ }
+
+ p {
+ max-width: 100%;
+ font-size: 0.6rem;
+ line-height: 1rem;
+
+ }
+ }
+
+ .ContactLinks {
+ max-width: 40%;
+
+ .BigCaption {
+ font-size: 0.8rem;
+ line-height: 1.2rem;
+ margin-bottom: 10%;
+ }
+
+ a {
+ width: fit-content;
+ font-size: 0.6rem;
+ }
+
+ .SmallCaption {
+ font-size: 0.6rem;
+ line-height: 1rem;
+ }
+ }
+ }
+
}
}
diff --git a/src/js/sections/CloudSection/CloudSection.module.scss b/src/js/sections/CloudSection/CloudSection.module.scss
index 2bd8611..9477da2 100644
--- a/src/js/sections/CloudSection/CloudSection.module.scss
+++ b/src/js/sections/CloudSection/CloudSection.module.scss
@@ -105,16 +105,32 @@
max-width: 80%;
margin: 15px auto;
}
- ;
}
}
}
-@media (max-width: 575.98px) {
+@media (max-width: 425px) {
.CloudSection {
.UpperBlock {
- margin-top: 10%;
+ margin-top: 3%;
+ max-width: 55%;
+ font-size: 1.3rem;
+ }
+ .Cloud {
+ margin-top: 2%;
+ max-width: 60%;
+ max-height: 60%;
+ }
+
+ .BottomBlock {
+ margin-top: 0;
+ max-width: 40%;
+
+ .Caption {
+ max-width: 100%;
+ margin: 15px auto;
+ }
}
}
}
diff --git a/src/js/sections/FeatureSection/FeatureSection.module.scss b/src/js/sections/FeatureSection/FeatureSection.module.scss
index 54e1e66..04a62d2 100644
--- a/src/js/sections/FeatureSection/FeatureSection.module.scss
+++ b/src/js/sections/FeatureSection/FeatureSection.module.scss
@@ -23,7 +23,7 @@
flex-basis: 40%;
.Feature {
- display : flex;
+ display: flex;
flex-direction: row;
padding: 5% 5% 5% 5%;
font-size: 2rem;
@@ -46,7 +46,7 @@
width: 70%;
margin: 50px auto;
padding: 4% 3%;
- position:relative;
+ position: relative;
border: solid $primary_black;
font-size: 1.3rem;
line-height: 1.7rem;
@@ -101,15 +101,14 @@
}
-
@media (max-width: 768px) {
.FeatureSection {
min-height: 50vh;
.RightSide {
- .Bubble {
- width: 90%;
- }
+ .Bubble {
+ width: 90%;
+ }
.Author {
padding: 0 0 1% 15%;
@@ -123,6 +122,20 @@
@media (max-width: 425px) {
.FeatureSection {
min-height: 40vh;
+ flex-direction: column;
+ padding: 5% 0 5% 0;
+
+ .RightSide {
+ .Bubble {
+ margin: 20px auto;
+ }
+
+ .Author {
+ padding: 2% 0 0 15%;
+ margin-top: 0;
+ }
+ }
+
}
}
@@ -134,6 +147,7 @@
.LeftSide {
margin-top: 5%;
+
.Feature {
.Checkmark {
font-size: 5vw;
diff --git a/src/js/sections/LandingSection/LandingSection.module.scss b/src/js/sections/LandingSection/LandingSection.module.scss
index d761954..3fcf436 100644
--- a/src/js/sections/LandingSection/LandingSection.module.scss
+++ b/src/js/sections/LandingSection/LandingSection.module.scss
@@ -97,46 +97,28 @@
}
}
+@media (max-width: 425px) {
-@media (max-width: 575.98px) {
.LandingSection {
- flex-direction: column;
- text-align: center;
-
-
- padding-top: 0;
- min-height: 55vh;
+ padding-top: 5%;
+ min-height: 85vh;
.LeftSide {
.Octopus {
- width: 50vw;
- height: 30vh;
+ width: 55vw;
+ height: 45vh;
}
}
-
-
.RightSide {
-
- text-align: center;
-
.Title {
- font-size: 10vw;
-
+ font-size: 3rem;
.Caption {
- font-size: 3vw;
- text-align: center;
+ font-size: 0.7rem;
}
-
}
- }
- }
-}
-
-@media (max-width: 320px) {
- .LandingSection {
- min-height: 50vh;
+ }
}
}
diff --git a/src/js/sections/StatsSection/StatsSection.module.scss b/src/js/sections/StatsSection/StatsSection.module.scss
index d92799c..b052205 100644
--- a/src/js/sections/StatsSection/StatsSection.module.scss
+++ b/src/js/sections/StatsSection/StatsSection.module.scss
@@ -147,17 +147,26 @@
-@media (max-width: 576px) {
+@media (max-width: 425px) {
.StatsSection {
min-height: 50vh;
.RightSide {
-
.NotesImage {
width: 80vw;
height: 20vh;
}
}
+ .LeftSide {
+ .Caption {
+ left: 37%;
+ right: 5%;
+ bottom: 10%;
+ max-width: 55%;
+ font-size: 0.7rem;
+ line-height: 1rem;
+ }
+ }
}
}
diff --git a/src/js/sections/TowerSection/TowerSection.module.scss b/src/js/sections/TowerSection/TowerSection.module.scss
index 90abb09..ff1f49f 100644
--- a/src/js/sections/TowerSection/TowerSection.module.scss
+++ b/src/js/sections/TowerSection/TowerSection.module.scss
@@ -133,9 +133,20 @@
}
-@media (max-width: 375px) {
+@media (max-width: 425px) {
.TowerSection {
- min-height: 40vh;
+ padding: 5% 0 5% 0;
+ .RightSide {
+ max-width: 80%;
+ text-align: center;
+
+ .Title {
+ font-size: 1.1rem;
+ }
+ .Caption {
+ max-width: 100%;
+ }
+ }
}
}
\ No newline at end of file
diff --git a/src/js/sections/VscodeSection/VscodeSection.module.scss b/src/js/sections/VscodeSection/VscodeSection.module.scss
index eab4354..6d345ca 100644
--- a/src/js/sections/VscodeSection/VscodeSection.module.scss
+++ b/src/js/sections/VscodeSection/VscodeSection.module.scss
@@ -120,6 +120,12 @@
height: 30vh;
}
}
+
+ .RightSide {
+ .Caption {
+ max-width: 100%;
+ }
+ }
}
}
--
GitLab