diff --git a/src/js/components/TopLinks/TopLinks.module.scss b/src/js/components/TopLinks/TopLinks.module.scss
index f4d374825724e46590f053f1851874e24ff4764d..b84cdc251aeffd826815a5f9f8e00133e1f81ab5 100644
--- a/src/js/components/TopLinks/TopLinks.module.scss
+++ b/src/js/components/TopLinks/TopLinks.module.scss
@@ -46,20 +46,16 @@
a:hover {
color: $primary_pink;
}
-
- a:visited {
- color: $primary_black;
- }
}
}
@media (max-width: 768px) {
.TopLinks {
- justify-content: center;
.Logo {
- font-size: 5vw;
+ font-size: 2vw;
+ float: left;
}
.Links {
diff --git a/src/js/pages/MainPage,module.scss b/src/js/pages/MainPage,module.scss
index b2727d01494d43cc2c3aea6e0003390baa3e0189..d8f110def80a1c331e0c9bb927731c7557bed3e3 100644
--- a/src/js/pages/MainPage,module.scss
+++ b/src/js/pages/MainPage,module.scss
@@ -16,7 +16,7 @@ html {
@media (max-width: 768px) {
.top-bar {
- position: relative;
+ position: fixed;
}
}
@@ -47,7 +47,7 @@ html {
@media (max-width: 768px) {
.footer{
a {
- font-size: 2vw;
+ font-size: 0.8rem;
}
}
}
diff --git a/src/js/sections/BottomSection/BottomSection.module.scss b/src/js/sections/BottomSection/BottomSection.module.scss
index 4b60507cce53459b9b15d4cc0fc6c66c233ed0ae..1a5a56ca0f509e68df9f915e3053e79f8098bbf6 100644
--- a/src/js/sections/BottomSection/BottomSection.module.scss
+++ b/src/js/sections/BottomSection/BottomSection.module.scss
@@ -229,11 +229,11 @@
background-position: bottom, 105% 48%, -5% 60%;
.MiddleBlock {
- max-width: 80vw;
+ max-width: 80%;
.Title {
- font-size: 3vw;
- line-height: 3.4vw;
+ font-size: 1.4rem;
+ line-height: 1.8rem;
}
.Caption {
@@ -242,14 +242,15 @@
.Comments {
+ font-size: 0.8rem;
+ line-height: 1.3rem;
+
.FirstComment {
- font-size: 2.4vw;
- line-height: 2.8vw;
+
}
.SecondComment {
- font-size: 1.6vw;
- line-height: 2vw;
+
}
}
@@ -258,12 +259,8 @@
max-width: 60%;
align-self: center;
- Button {
- font-family: $primary_font;
- font-size: 2vw;
- width: 100%;
- height: 50%;
-
+ a {
+ width: fit-content;
}
}
@@ -277,11 +274,11 @@
display: flex;
flex-direction: row;
justify-content: center;
- bottom: 5%;
+ bottom: 2%;
.Logos {
margin-right: 5%;
- max-width: 40%;
+ max-width: 30%;
flex-direction: column;
@@ -292,9 +289,9 @@
p {
max-width: 100%;
+ font-size: 0.8rem;
+ line-height: 1.3rem;
- font-size: 1.8vw;
- line-height: 2.2vw;
}
}
@@ -302,21 +299,18 @@
max-width: 40%;
.BigCaption {
- font-size: 2.2vw;
- line-height: 2.6vw;
+ font-size: $mobile_section_subtitle_size;
+ line-height: $mobile_section_subtitle_line_height;
margin-bottom: 10%;
}
- Button {
- font-size: 1.8vw;
- width: 100%;
- height: 30%;
-
+ a {
+ width: fit-content;
}
.SmallCaption {
- font-size: 2vw;
- line-height: 2.4vw;
+ font-size: 0.8rem;
+ line-height: 1.3rem;
}
}
}
diff --git a/src/js/sections/CloudSection/CloudSection.module.scss b/src/js/sections/CloudSection/CloudSection.module.scss
index 815216e4ac98b6f6f7cbbc729a45d01fc7f16ac9..2bd8611083fdb47bb1d358bd2ac7069645deb689 100644
--- a/src/js/sections/CloudSection/CloudSection.module.scss
+++ b/src/js/sections/CloudSection/CloudSection.module.scss
@@ -84,64 +84,32 @@
.CloudSection {
min-height: 70vh;
+ padding-top: 4%;
+ padding-bottom: 2%;
.UpperBlock {
- font-size: 4vw;
- max-width: 40%;
text-align: center;
}
.Cloud {
- margin-top: 10%;
- max-width: 60vw;
- max-height: 70vh;
+ margin-top: 2%;
+ max-width: 30%;
+ max-height: 25%;
}
.BottomBlock {
- font-size: 4vw;
- line-height: 4.4vw;
+ margin-top: 0;
max-width: 40%;
.Caption {
- font-size: 2.5vw;
- line-height: 2.9vw;
- max-width: 70%;
-
+ max-width: 80%;
+ margin: 15px auto;
}
+ ;
}
}
}
-@media (max-width: 992px) {
- .CloudSection {
-
- .UpperBlock {
- font-size: 4vw;
- line-height: 4.4vw;
- max-width: 50%;
- text-align: center;
-
- }
-
- .Cloud {
- margin-top: 10%;
- margin-bottom: 10%;
- max-width: 60vw;
- max-height: 70vh;
- }
-
- .BottomBlock {
- font-size: 4vw;
- line-height: 4.4vw;
-
- .Caption {
- font-size: 2.5vw;
- line-height: 2.9vw;
-
- }
- }
- }
-}
@media (max-width: 575.98px) {
.CloudSection {
diff --git a/src/js/sections/FeatureSection/FeatureSection.module.scss b/src/js/sections/FeatureSection/FeatureSection.module.scss
index 1267192f9573987361efab4d89e4d91bb66c3b19..54e1e6620f6732707ba9b399d8c96ea829f2caf1 100644
--- a/src/js/sections/FeatureSection/FeatureSection.module.scss
+++ b/src/js/sections/FeatureSection/FeatureSection.module.scss
@@ -102,29 +102,19 @@
-//ipad
@media (max-width: 768px) {
.FeatureSection {
-
-
- .LeftSide {
- .Feature {
- font-size: 3vw;
- line-height: 3.4vw;
- }
- }
+ min-height: 50vh;
.RightSide {
-
.Bubble {
width: 90%;
-
- font-size: 2vw;
}
.Author {
- font-size: 2vw;
- line-height: 2.5vw;
+ padding: 0 0 1% 15%;
+ margin-top: -15px;
+
}
}
}
diff --git a/src/js/sections/LandingSection/LandingSection.module.scss b/src/js/sections/LandingSection/LandingSection.module.scss
index 7f60b99643067ed4f6752bc6cb73a8d6259bc794..d761954f7835427645f03bd5341d4216ae8fcf06 100644
--- a/src/js/sections/LandingSection/LandingSection.module.scss
+++ b/src/js/sections/LandingSection/LandingSection.module.scss
@@ -12,7 +12,6 @@
flex-direction: row;
align-items: center;
justify-content: left;
- flex-wrap: wrap;
.LeftSide {
flex-basis: 50%;
@@ -84,6 +83,21 @@
}
}
+@media (max-width: 768px) {
+
+ .LandingSection {
+
+ flex-direction: column;
+
+ padding-top: 15%;
+
+ .RightSide {
+ margin-left: 0;
+ }
+ }
+}
+
+
@media (max-width: 575.98px) {
.LandingSection {
flex-direction: column;
diff --git a/src/js/sections/StatsSection/StatsSection.module.scss b/src/js/sections/StatsSection/StatsSection.module.scss
index 2b60ecceea68a5671149a614e1b40420248fe396..d92799cc1c14e857d176a2aaa1ccc8f3d3a9ff70 100644
--- a/src/js/sections/StatsSection/StatsSection.module.scss
+++ b/src/js/sections/StatsSection/StatsSection.module.scss
@@ -97,18 +97,22 @@
}
-@media (max-width: 992px) {
- .StatsSection {
- min-height: 90vh;
-
- }
-}
+//@media (max-width: 992px) {
+// .StatsSection {
+// min-height: 90vh;
+//
+// }
+//}
@media (max-width: 768px) {
.StatsSection {
- min-height: 80vh;
+ min-height: 70vh;
flex-direction: column-reverse;
+ padding-bottom: 20%;
+ padding-top: 0;
+ position: relative;
+
.LeftSide {
vertical-align: middle;
@@ -116,16 +120,17 @@
max-width: 80%;
margin-top: 5%;
- .Title {
- font-size: 4vw;
- line-height: 4.4vw;
- }
+
.Caption {
- font-size: 2vw;
- line-height: 2.4vw;
- color: white;
- max-width: 80%;
+ position: absolute;
+ left: 35%;
+ right: 5%;
+ bottom: 10%;
+ max-width: 55%;
+ font-size: $mobile_section_subtitle_size;
+ line-height: $mobile_section_subtitle_line_height;
+
}
}
diff --git a/src/js/sections/TowerSection/TowerSection.module.scss b/src/js/sections/TowerSection/TowerSection.module.scss
index 0e4b63fb6a8d09cb0b8850d77d5c7bff279bf7b5..90abb0912aed8f95705f67f4ece6457c99659a9b 100644
--- a/src/js/sections/TowerSection/TowerSection.module.scss
+++ b/src/js/sections/TowerSection/TowerSection.module.scss
@@ -11,7 +11,6 @@
flex-direction: row;
align-items: center;
justify-content: center;
- flex-wrap: wrap;
color: $primary_black;
font-family: $primary_font;
@@ -106,32 +105,32 @@
@media (max-width: 768px) {
.TowerSection {
- min-height: 50vh;
- flex-direction: row;
- justify-content: center;
+ flex-direction: column;
+ text-align: center;
+ min-height: 70vh;
+ background-position: 95% 0;
+ padding-top: 3%;
+ padding-bottom: 3%;
+
.LeftSide {
- flex-basis: 40%;
.TowerImage {
- max-width: 40vw;
- max-height: 30vh;
+ width: 70vw;
+ height: 40vh;
}
}
.RightSide {
- flex-basis: 40%;
- .Title {
- font-size: 5vw;
- line-height: 5.4vw;
- }
-
+ padding-top: 5%;
+ max-width: 60%;
.Caption {
- font-size: 2.7vw;
- line-height: 3.1vw;
-
+ padding-top: 4%;
+ max-width: 60%;
+ margin: 0 auto;
}
}
}
+
}
@media (max-width: 375px) {
diff --git a/src/js/sections/VscodeSection/VscodeSection.module.scss b/src/js/sections/VscodeSection/VscodeSection.module.scss
index 3b64f39be6f2fa611f7c53e190d14579a088db40..eab43541768b019ed65cb3a6cbaed48257dd9c48 100644
--- a/src/js/sections/VscodeSection/VscodeSection.module.scss
+++ b/src/js/sections/VscodeSection/VscodeSection.module.scss
@@ -86,29 +86,25 @@
.VscodeSection {
flex-direction: column;
text-align: center;
- min-height: 60vh;
+ min-height: 70vh;
background-position: 95% 0;
+ padding-top: 2%;
+ padding-bottom: 2%;
.LeftSide {
.VscodeImage {
- margin-top: 2%;
width: 70vw;
height: 40vh;
}
}
.RightSide {
- padding-top: 5%;
- .Title {
- font-size: 5vw;
- line-height: 5vw;
- }
+ padding: 5% 0 0 0;
.Caption {
- font-size: 2.7vw;
- line-height: 2.7vw;
-
+ max-width: 70%;
+ margin: 4% auto 0 auto;
}
}
}
diff --git a/src/style/fonts.module.scss b/src/style/fonts.module.scss
index 2d5097181ce0b0575838b8986de27fa2e5a4904c..e9123a49d7123d25553b958390dc8cac0c2b624a 100644
--- a/src/style/fonts.module.scss
+++ b/src/style/fonts.module.scss
@@ -28,5 +28,5 @@ $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
+$mobile_section_caption_size: 0.8rem;
+$mobile_section_caption_line_height: 1.2rem;
\ No newline at end of file