From fd5bc62639ed0c32f8767ac09a904b79479d4601 Mon Sep 17 00:00:00 2001
From: Aliaksandr BUDZKO <abudzko@takima.fr>
Date: Tue, 20 Jul 2021 14:43:12 +0200
Subject: [PATCH] feat: responsiveness mobile M S 375px
---
src/js/pages/MainPage,module.scss | 7 ++
.../BottomSection/BottomSection.module.scss | 65 +++++++++++++------
.../CloudSection/CloudSection.module.scss | 26 +++++++-
.../FeatureSection/FeatureSection.module.scss | 30 +++++----
.../LandingSection/LandingSection.module.scss | 26 ++++++++
.../StatsSection/StatsSection.module.scss | 48 +++++---------
.../TowerSection/TowerSection.module.scss | 20 ++++++
.../VscodeSection/VscodeSection.module.scss | 14 ++++
8 files changed, 168 insertions(+), 68 deletions(-)
diff --git a/src/js/pages/MainPage,module.scss b/src/js/pages/MainPage,module.scss
index b810509..beaa08c 100644
--- a/src/js/pages/MainPage,module.scss
+++ b/src/js/pages/MainPage,module.scss
@@ -60,3 +60,10 @@ html {
}
}
+@media (max-width: 375px) {
+ .footer{
+ a {
+ font-size: 0.4rem;
+ }
+ }
+}
diff --git a/src/js/sections/BottomSection/BottomSection.module.scss b/src/js/sections/BottomSection/BottomSection.module.scss
index 1f274ae..ac6547d 100644
--- a/src/js/sections/BottomSection/BottomSection.module.scss
+++ b/src/js/sections/BottomSection/BottomSection.module.scss
@@ -404,31 +404,32 @@
@media (max-width: 375px) {
.BottomSection {
- min-height: 65vh;
-
- .BottomBlock {
- .ContactLinks {
- max-width: 50%;
- }
- }
-
- }
-}
-
-@media (max-width: 320px) {
- .BottomSection {
-
min-height: 55vh;
+ background-position: bottom, 106% 49%, -5% 63%;
+
.MiddleBlock {
+ .Title {
+ font-size: 0.6rem;
+ line-height: 1rem;
+ }
+
.Caption {
+ flex-direction: column;
+
+ .Comments {
+ font-size: 0.4rem;
+ line-height: 1rem;
+ }
.ButtonContainer {
- margin-top: 5%;
+ max-width: 60%;
+ align-self: center;
padding-right: 0;
a {
- font-size: 3vw;
+ width: fit-content;
+ font-size: 0.4rem;
}
}
@@ -439,19 +440,43 @@
.BottomBlock {
+
+ .Logos {
+ margin-right: 5%;
+ max-width: 35%;
+ flex-direction: column;
+
+
+
+ p {
+ max-width: 100%;
+ font-size: 0.5rem;
+ line-height: 0.9rem;
+
+ }
+ }
+
.ContactLinks {
+ max-width: 45%;
.BigCaption {
- font-size: 2.2vw;
- line-height: 2.6vw;
+ font-size: 0.6rem;
+ line-height: 1rem;
margin-bottom: 10%;
}
a {
- font-size: 3vw;
+ width: fit-content;
+ font-size: 0.5rem;
}
+ .SmallCaption {
+ font-size: 0.5rem;
+ line-height: 1rem;
+ }
}
}
+
}
-}
\ No newline at end of file
+}
+
diff --git a/src/js/sections/CloudSection/CloudSection.module.scss b/src/js/sections/CloudSection/CloudSection.module.scss
index 9477da2..aa02fdd 100644
--- a/src/js/sections/CloudSection/CloudSection.module.scss
+++ b/src/js/sections/CloudSection/CloudSection.module.scss
@@ -135,8 +135,30 @@
}
}
-@media (max-width: 320px) {
+@media (max-width: 375px) {
.CloudSection {
- min-height: 40vh;
+
+ .UpperBlock {
+ margin-top: 15%;
+ max-width: 67%;
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+ }
+ .Cloud {
+ max-width: 80%;
+ max-height: 100%;
+ }
+
+ .BottomBlock {
+ max-width: 40%;
+ font-size: 0.8rem;
+ .Caption {
+ max-width: 100%;
+ margin: 15px auto;
+ font-size: 0.6rem;
+ }
+ }
}
}
+
+
diff --git a/src/js/sections/FeatureSection/FeatureSection.module.scss b/src/js/sections/FeatureSection/FeatureSection.module.scss
index 04a62d2..0cd5555 100644
--- a/src/js/sections/FeatureSection/FeatureSection.module.scss
+++ b/src/js/sections/FeatureSection/FeatureSection.module.scss
@@ -139,31 +139,33 @@
}
}
+
@media (max-width: 375px) {
.FeatureSection {
- min-height: 50vh;
- flex-direction: column;
- justify-content: left;
-
.LeftSide {
- margin-top: 5%;
-
.Feature {
+ font-size: 1rem;
+ line-height: 1.3rem;
+
.Checkmark {
- font-size: 5vw;
+ font-size: 1.7rem;
+
}
}
}
.RightSide {
- }
- }
-}
+ .Bubble {
+ width: 90%;
+ font-size: 0.7rem;
+ line-height: 1rem;
+ }
-@media (max-width: 320px) {
- .FeatureSection {
- min-height: 40vh;
+ .Author {
+ font-size: 0.8rem;
+ line-height: 1.2rem;
+ }
+ }
}
}
-
diff --git a/src/js/sections/LandingSection/LandingSection.module.scss b/src/js/sections/LandingSection/LandingSection.module.scss
index 3fcf436..08e5693 100644
--- a/src/js/sections/LandingSection/LandingSection.module.scss
+++ b/src/js/sections/LandingSection/LandingSection.module.scss
@@ -122,3 +122,29 @@
}
}
+@media (max-width: 320px) {
+
+ .LandingSection {
+ padding-top: 3%;
+ min-height: 65vh;
+
+ .LeftSide {
+
+ .Octopus {
+ width: 55vw;
+ height: 43vh;
+ }
+ }
+ .RightSide {
+ margin-top: -20px;
+ .Title {
+ font-size: 2.3rem;
+ .Caption {
+ font-size: 0.5rem;
+ }
+ }
+
+ }
+ }
+}
+
diff --git a/src/js/sections/StatsSection/StatsSection.module.scss b/src/js/sections/StatsSection/StatsSection.module.scss
index b052205..79d3c0a 100644
--- a/src/js/sections/StatsSection/StatsSection.module.scss
+++ b/src/js/sections/StatsSection/StatsSection.module.scss
@@ -170,45 +170,29 @@
}
}
-//iphone 6
-@media (max-width: 375px) and (max-height: 700px){
+@media (max-width: 320px) {
.StatsSection {
- min-height: 70vh;
-
- .LeftSide {
-
-
- .Title {
- font-size: 4vw;
- line-height: 4.2vw;
- }
-
- .Caption {
- font-size: 2vw;
- line-height: 2.2vw;
- color: white;
- max-width: 80%;
- }
-
- }
+ min-height: 50vh;
.RightSide {
.NotesImage {
- width: 80vw;
- height: 25vh;
+ width: 70vw;
+ height: 15vh;
}
}
- }
-}
-
-@media (max-width: 320px) {
- .StatsSection {
- background-position: 15% 101%;
+ .LeftSide {
+ .Title {
+ font-size: 1.5rem;
+ line-height: 1.7rem;
+ }
- .RightSide {
- .NotesImage {
- width: 90vw;
- height: 20vh;
+ .Caption {
+ left: 37%;
+ right: 5%;
+ bottom: 10%;
+ max-width: 55%;
+ font-size: 0.6rem;
+ line-height: 1rem;
}
}
}
diff --git a/src/js/sections/TowerSection/TowerSection.module.scss b/src/js/sections/TowerSection/TowerSection.module.scss
index ff1f49f..c2ea586 100644
--- a/src/js/sections/TowerSection/TowerSection.module.scss
+++ b/src/js/sections/TowerSection/TowerSection.module.scss
@@ -149,4 +149,24 @@
}
}
+}
+
+@media (max-width: 375px) {
+ .TowerSection {
+ padding: 2% 0 5% 0;
+ .RightSide {
+ padding-top: 0;
+ max-width: 80%;
+
+ .Title {
+ font-size: 1rem;
+ line-height: 1.5rem;
+ }
+ .Caption {
+ max-width: 90%;
+ font-size: 0.7rem;
+ }
+ }
+ }
+
}
\ 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 6d345ca..74ab130 100644
--- a/src/js/sections/VscodeSection/VscodeSection.module.scss
+++ b/src/js/sections/VscodeSection/VscodeSection.module.scss
@@ -132,6 +132,8 @@
@media (max-width: 320px) {
.VscodeSection {
min-height: 50vh;
+ background-position: 96% 0;
+ padding: 7% 0 10% 0;
.LeftSide {
.VscodeImage {
@@ -140,6 +142,18 @@
height: 20vh;
}
}
+
+ .RightSide {
+
+ .Title {
+ font-size: 1.5rem;
+ line-height: 1.7rem;
+ }
+ .Caption {
+ font-size: 0.7rem;
+ max-width: 100%;
+ }
+ }
}
}
--
GitLab