From b874b95613e1aede8ea70cdb29af18b5501363fc Mon Sep 17 00:00:00 2001
From: Aliaksandr BUDZKO <abudzko@takima.fr>
Date: Mon, 19 Jul 2021 17:07:08 +0200
Subject: [PATCH] feat responsive laptop 1024px
---
.../components/TopLinks/TopLinks.module.scss | 14 ++--
src/js/pages/MainPage,module.scss | 2 +-
.../BottomSection/BottomSection.module.scss | 84 ++++++++++++++++++-
.../CloudSection/CloudSection.module.scss | 33 ++++++++
.../FeatureSection/FeatureSection.module.scss | 26 ++++++
.../LandingSection/LandingSection.module.scss | 25 +++++-
.../StatsSection/StatsSection.module.scss | 37 +++++++-
.../TowerSection/TowerSection.module.scss | 28 +++++++
.../VscodeSection/VscodeSection.module.scss | 16 ++++
src/style/fonts.module.scss | 12 ++-
10 files changed, 265 insertions(+), 12 deletions(-)
diff --git a/src/js/components/TopLinks/TopLinks.module.scss b/src/js/components/TopLinks/TopLinks.module.scss
index 36faa89..f4d3748 100644
--- a/src/js/components/TopLinks/TopLinks.module.scss
+++ b/src/js/components/TopLinks/TopLinks.module.scss
@@ -16,10 +16,10 @@
color: $primary_black;
text-decoration: none;
- &:hover {
- -webkit-text-stroke-width: 1px;
- -webkit-text-stroke-color: $primary_black;
- }
+ //&:hover {
+ // -webkit-text-stroke-width: 1px;
+ // -webkit-text-stroke-color: $primary_black;
+ //}
}
@@ -46,11 +46,15 @@
a:hover {
color: $primary_pink;
}
+
+ a:visited {
+ color: $primary_black;
+ }
}
}
-@media (max-width: 1200px) {
+@media (max-width: 768px) {
.TopLinks {
justify-content: center;
diff --git a/src/js/pages/MainPage,module.scss b/src/js/pages/MainPage,module.scss
index 2aa9429..b2727d0 100644
--- a/src/js/pages/MainPage,module.scss
+++ b/src/js/pages/MainPage,module.scss
@@ -14,7 +14,7 @@ html {
height: 6vh;
}
-@media (max-width: 1200px) {
+@media (max-width: 768px) {
.top-bar {
position: relative;
}
diff --git a/src/js/sections/BottomSection/BottomSection.module.scss b/src/js/sections/BottomSection/BottomSection.module.scss
index c306951..4b60507 100644
--- a/src/js/sections/BottomSection/BottomSection.module.scss
+++ b/src/js/sections/BottomSection/BottomSection.module.scss
@@ -135,14 +135,94 @@
}
-@media (max-width: 1200px) {
+//@media (max-width: 1200px) {
+// .BottomSection {
+// min-height: 100vh;
+// background-position: bottom, 107% 40%, -5% 55%;
+//
+//
+// }
+//}
+
+@media (max-width: 1024px) {
+
.BottomSection {
min-height: 100vh;
- background-position: bottom, 107% 40%, -5% 55%;
+
+ .MiddleBlock {
+ max-width: 60vw;
+
+ .Title {
+ font-size: $mobile_section_subtitle_size;
+ line-height: $mobile_section_subtitle_line_height;
+ text-align: center;
+ }
+
+ .Caption {
+
+
+ .Comments {
+
+ font-size: 0.7rem;
+ line-height: 1.2rem;
+
+ }
+
+ .ButtonContainer {
+ align-self: center;
+ margin-top: 0;
+
+ a {
+ font-size: 0.7rem;
+
+ }
+
+ }
+ }
+ }
+
+ .BottomBlock {
+ bottom: 2%;
+
+ .Logos {
+ margin-right: 5%;
+ max-width: 30%;
+ flex-direction: column;
+
+
+ img {
+ width: 100%;
+ height: 40%;
+ }
+
+ p {
+ max-width: 100%;
+
+ }
+ }
+
+ .ContactLinks {
+ max-width: 40%;
+
+ .BigCaption {
+ margin-bottom: 10%;
+ }
+
+ Button {
+ width: 100%;
+ height: 30%;
+
+ }
+
+ .SmallCaption {
+ }
+ }
+ }
}
}
+
@media (max-width: 768px) {
.BottomSection {
min-height: 100vh;
diff --git a/src/js/sections/CloudSection/CloudSection.module.scss b/src/js/sections/CloudSection/CloudSection.module.scss
index 1818cfa..815216e 100644
--- a/src/js/sections/CloudSection/CloudSection.module.scss
+++ b/src/js/sections/CloudSection/CloudSection.module.scss
@@ -47,6 +47,39 @@
}
}
+@media (max-width: 1024px) {
+
+ .CloudSection {
+ min-height: 70vh;
+ .UpperBlock {
+ font-size: $mobile_section_title_size;
+ line-height: $mobile_section_title_line_height;
+ max-width: 40%;
+ text-align: center;
+
+ }
+
+ .Cloud {
+ max-width: 30%;
+ max-height: 30%;
+ }
+
+ .BottomBlock {
+ font-size: $mobile_section_subtitle_size;
+ line-height: $mobile_section_subtitle_line_height;
+ max-width: 40%;
+ text-align: center;
+
+ .Caption {
+ font-size: $mobile_section_caption_size;
+ line-height: $mobile_section_caption_line_height;
+ max-width: 100%;
+
+ }
+ }
+ }
+}
+
@media (max-width: 768px) {
.CloudSection {
diff --git a/src/js/sections/FeatureSection/FeatureSection.module.scss b/src/js/sections/FeatureSection/FeatureSection.module.scss
index d994bca..1267192 100644
--- a/src/js/sections/FeatureSection/FeatureSection.module.scss
+++ b/src/js/sections/FeatureSection/FeatureSection.module.scss
@@ -75,6 +75,32 @@
}
}
+@media (max-width: 1024px) {
+ .FeatureSection {
+ .LeftSide {
+ .Feature {
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+ }
+ }
+
+ .RightSide {
+
+ .Bubble {
+ width: 90%;
+ font-size: 0.8rem;
+ line-height: 1.2rem;
+ }
+
+ .Author {
+ font-size: 1rem;
+ line-height: 1.2rem;
+ }
+ }
+ }
+}
+
+
//ipad
@media (max-width: 768px) {
diff --git a/src/js/sections/LandingSection/LandingSection.module.scss b/src/js/sections/LandingSection/LandingSection.module.scss
index b01743e..8db5d1b 100644
--- a/src/js/sections/LandingSection/LandingSection.module.scss
+++ b/src/js/sections/LandingSection/LandingSection.module.scss
@@ -47,8 +47,31 @@
.LandingSection {
+ .LeftSide {
+ flex-basis: 50%;
+
+ .Octopus {
+ width: 40vw;
+ height: 45vh;
+ }
+ }
+
.RightSide {
- margin-left: 0;
+ color: $primary_black;
+ font-family: $primary_font;
+ vertical-align: middle;
+ flex-basis: 40%;
+ margin-left: -10vw;
+
+ .Title {
+ font-size: 5rem;
+ text-align: center;
+
+ .Caption {
+ font-size: 1rem;
+ }
+
+ }
}
}
}
diff --git a/src/js/sections/StatsSection/StatsSection.module.scss b/src/js/sections/StatsSection/StatsSection.module.scss
index 7f55c49..2b60ecc 100644
--- a/src/js/sections/StatsSection/StatsSection.module.scss
+++ b/src/js/sections/StatsSection/StatsSection.module.scss
@@ -24,7 +24,7 @@
.LeftSide {
vertical-align: middle;
text-align: left;
- max-width: 60%;
+ max-width: 40%;
flex-basis: 30%;
.Title {
@@ -37,7 +37,7 @@
line-height: $section_caption_line_height;
color: white;
margin-top: 5%;
- max-width: 60%;
+ max-width: 80%;
}
}
@@ -64,6 +64,39 @@
}
}
+@media (max-width: 1024px) {
+
+ .StatsSection {
+ min-height: 70vh;
+
+ .LeftSide {
+ .Title {
+ font-size: $mobile_section_title_size;
+ line-height: $mobile_section_title_line_height;
+ }
+
+ .Caption {
+ font-size: $mobile_section_caption_size;
+ line-height: $mobile_section_caption_line_height;
+ color: white;
+ margin-top: 5%;
+ max-width: 80%;
+ }
+
+ }
+
+ .RightSide {
+ flex-basis: 30%;
+
+ .NotesImage {
+ max-width: 60vw;
+ max-height: 60vh;
+ }
+ }
+ }
+
+}
+
@media (max-width: 992px) {
.StatsSection {
min-height: 90vh;
diff --git a/src/js/sections/TowerSection/TowerSection.module.scss b/src/js/sections/TowerSection/TowerSection.module.scss
index 72a72c6..0e4b63f 100644
--- a/src/js/sections/TowerSection/TowerSection.module.scss
+++ b/src/js/sections/TowerSection/TowerSection.module.scss
@@ -75,6 +75,34 @@
}
}
+@media (max-width: 1024px) {
+ .TowerSection {
+ min-height: 60vh;
+ .LeftSide {
+ flex-basis: 30%;
+ .TowerImage {
+ max-width: 90%;
+ max-height: 90%;
+ }
+ }
+
+ .RightSide {
+ flex-basis: 30%;
+ .Title {
+ font-size: $mobile_section_title_size;
+ line-height: $mobile_section_title_line_height;
+ }
+
+ .Caption {
+ max-width: 80%;
+ font-size: $mobile_section_caption_size;
+ line-height: $mobile_section_caption_line_height;
+
+ }
+ }
+ }
+}
+
@media (max-width: 768px) {
.TowerSection {
diff --git a/src/js/sections/VscodeSection/VscodeSection.module.scss b/src/js/sections/VscodeSection/VscodeSection.module.scss
index bd29c19..3b64f39 100644
--- a/src/js/sections/VscodeSection/VscodeSection.module.scss
+++ b/src/js/sections/VscodeSection/VscodeSection.module.scss
@@ -61,6 +61,22 @@
height: 35vh;
}
}
+
+ .RightSide {
+
+ .Title {
+ font-size: $mobile_section_title_size;
+ line-height: $mobile_section_title_line_height;
+
+
+ }
+ .Caption {
+ font-size: $mobile_section_caption_size;
+ line-height: $mobile_section_caption_line_height;
+ margin-top: 5%;
+ color: white;
+ }
+ }
}
}
diff --git a/src/style/fonts.module.scss b/src/style/fonts.module.scss
index b1741ae..2d50971 100644
--- a/src/style/fonts.module.scss
+++ b/src/style/fonts.module.scss
@@ -19,4 +19,14 @@ $section_subtitle_line_height: 2.4rem;
$section_caption_size: 1.5rem;
-$section_caption_line_height: 1.7rem;
\ No newline at end of file
+$section_caption_line_height: 1.7rem;
+
+$mobile_section_title_size: 1.6rem;
+$mobile_section_title_line_height: 2rem;
+
+$mobile_section_subtitle_size: 1rem;
+$mobile_section_subtitle_line_height: 1.4rem;
+
+
+$mobile_section_caption_size: 0.6rem;
+$mobile_section_caption_line_height: 1.1rem;
\ No newline at end of file
--
GitLab