From 11b94f5f4e6f92ae9c0360823e16bb4fe8a63f4f Mon Sep 17 00:00:00 2001
From: Aliaksandr BUDZKO <abudzko@takima.fr>
Date: Mon, 19 Jul 2021 16:05:27 +0200
Subject: [PATCH] fix: refacto font size
---
.../BottomSection/BottomSection.module.scss | 25 +++++++++----------
.../CloudSection/CloudSection.module.scss | 18 ++++++-------
.../FeatureSection/FeatureSection.module.scss | 12 +++++----
.../LandingSection/LandingSection.module.scss | 15 +++++++++--
.../StatsSection/StatsSection.module.scss | 9 +++----
.../TowerSection/TowerSection.module.scss | 8 +++---
.../VscodeSection/VscodeSection.module.scss | 8 +++---
src/style/fonts.module.scss | 12 ++++++++-
8 files changed, 64 insertions(+), 43 deletions(-)
diff --git a/src/js/sections/BottomSection/BottomSection.module.scss b/src/js/sections/BottomSection/BottomSection.module.scss
index 6eb10de..c306951 100644
--- a/src/js/sections/BottomSection/BottomSection.module.scss
+++ b/src/js/sections/BottomSection/BottomSection.module.scss
@@ -31,8 +31,8 @@
.Title {
- font-size: 1.8vw;
- line-height: 2.2vw;
+ font-size: $section_subtitle_size;
+ line-height: $section_subtitle_line_height;
}
.Caption {
@@ -43,8 +43,8 @@
flex-basis: 80%;
padding-right: 5%;
- font-size: 0.8vw;
- line-height: 1.2vw;
+ font-size: 1rem;
+ line-height: 1.6rem;
}
@@ -56,7 +56,7 @@
Button {
font-family: $primary_font;
- font-size: 0.9vw;
+ font-size: 1.1rem;
width: 100%;
height: 30%;
@@ -94,8 +94,8 @@
max-width: 50%;
text-align: left;
color: white;
- font-size: 0.9vw;
- line-height: 1.3vw;
+ font-size: 1rem;
+ line-height: 1.6rem;
}
}
@@ -108,8 +108,8 @@
.BigCaption {
color: white;
- font-size: 1.1vw;
- line-height: 1.5vw;
+ font-size: 1.3rem;
+ line-height: 1.8rem;
margin-bottom: 10%;
}
@@ -117,8 +117,7 @@
align-items: center;
margin-bottom: 5%;
font-family: $primary_font;
- font-size: 0.9vw;
- line-height: 1.3vw;
+ font-size: 1.1rem;
width: 100%;
height: 30%;
@@ -126,8 +125,8 @@
.SmallCaption {
color: white;
- font-size: 1vw;
- line-height: 1.4vw;
+ font-size: 1rem;
+ line-height: 1.6rem;
margin-top: 5%;
}
}
diff --git a/src/js/sections/CloudSection/CloudSection.module.scss b/src/js/sections/CloudSection/CloudSection.module.scss
index 171ee8e..1818cfa 100644
--- a/src/js/sections/CloudSection/CloudSection.module.scss
+++ b/src/js/sections/CloudSection/CloudSection.module.scss
@@ -16,8 +16,8 @@
.UpperBlock {
margin-top: 2%;
- font-size: 2.3vw;
- line-height: 2.7vw;
+ font-size: $section_title_size;
+ line-height: $section_title_line_height;
max-width: 40%;
text-align: center;
@@ -26,20 +26,20 @@
.Cloud {
margin-top: 2%;
max-width: 50vw;
- max-height: 60vh;
+ max-height: 50vh;
}
.BottomBlock {
margin-top: 2%;
- font-size: 2vw;
- max-width: 40%;
- line-height: 2.4vw;
+ max-width: 35%;
+ font-size: $section_subtitle_size;
+ line-height: $section_subtitle_line_height;
.Caption {
margin-top: 20px;
- font-size: 1.3vw;
- line-height: 1.7vw;
- max-width: 60%;
+ font-size: $section_caption_size;
+ line-height: $section_caption_line_height;
+ max-width: 70%;
color: white;
diff --git a/src/js/sections/FeatureSection/FeatureSection.module.scss b/src/js/sections/FeatureSection/FeatureSection.module.scss
index 96a479e..d994bca 100644
--- a/src/js/sections/FeatureSection/FeatureSection.module.scss
+++ b/src/js/sections/FeatureSection/FeatureSection.module.scss
@@ -26,11 +26,12 @@
display : flex;
flex-direction: row;
padding: 5% 5% 5% 5%;
- font-size: 1.7vw;
- line-height: 2.1vw;
+ font-size: 2rem;
+ line-height: 2.4rem;
.Checkmark {
padding-right: 5%;
+ padding-top: 5%;
font-size: 3vw;
}
@@ -47,7 +48,8 @@
padding: 4% 3%;
position:relative;
border: solid $primary_black;
- font-size: 1vw;
+ font-size: 1.3rem;
+ line-height: 1.7rem;
&:before {
content: "";
@@ -66,8 +68,8 @@
.Author {
position: relative;
- font-size: 1.2vw;
- line-height: 1.6vw;
+ font-size: 1.5rem;
+ line-height: 2rem;
padding: 0 0 2% 25%;
}
}
diff --git a/src/js/sections/LandingSection/LandingSection.module.scss b/src/js/sections/LandingSection/LandingSection.module.scss
index f841914..b01743e 100644
--- a/src/js/sections/LandingSection/LandingSection.module.scss
+++ b/src/js/sections/LandingSection/LandingSection.module.scss
@@ -31,11 +31,11 @@
margin-left: -15vw;
.Title {
- font-size: 5vw;
+ font-size: 6.5rem;
text-align: center;
.Caption {
- font-size: 1.5vw;
+ font-size: 1.6rem;
}
}
@@ -43,11 +43,22 @@
}
+@media (max-width: 1024px) {
+
+ .LandingSection {
+
+ .RightSide {
+ margin-left: 0;
+ }
+ }
+}
+
@media (max-width: 575.98px) {
.LandingSection {
flex-direction: column;
text-align: center;
+
padding-top: 0;
min-height: 55vh;
diff --git a/src/js/sections/StatsSection/StatsSection.module.scss b/src/js/sections/StatsSection/StatsSection.module.scss
index 2f695ee..7f55c49 100644
--- a/src/js/sections/StatsSection/StatsSection.module.scss
+++ b/src/js/sections/StatsSection/StatsSection.module.scss
@@ -28,14 +28,13 @@
flex-basis: 30%;
.Title {
- font-size: 2.5rem;
- line-height: 3.7rem;
- max-width: 70%;
+ font-size: $section_title_size;
+ line-height: $section_title_line_height;
}
.Caption {
- font-size: 1.5rem;
- line-height: 1.7rem;
+ font-size: $section_caption_size;
+ line-height: $section_caption_line_height;
color: white;
margin-top: 5%;
max-width: 60%;
diff --git a/src/js/sections/TowerSection/TowerSection.module.scss b/src/js/sections/TowerSection/TowerSection.module.scss
index 56c7342..72a72c6 100644
--- a/src/js/sections/TowerSection/TowerSection.module.scss
+++ b/src/js/sections/TowerSection/TowerSection.module.scss
@@ -32,14 +32,14 @@
.Title {
- font-size: 2.5rem;
- line-height: 3.7rem;
+ font-size: $section_title_size;
+ line-height: $section_title_line_height;
}
.Caption {
- font-size: 1.5rem;
- line-height: 1.7rem;
+ font-size: $section_caption_size;
+ line-height: $section_caption_line_height;
margin-top: 5%;
color: white;
}
diff --git a/src/js/sections/VscodeSection/VscodeSection.module.scss b/src/js/sections/VscodeSection/VscodeSection.module.scss
index a19f5f3..bd29c19 100644
--- a/src/js/sections/VscodeSection/VscodeSection.module.scss
+++ b/src/js/sections/VscodeSection/VscodeSection.module.scss
@@ -35,14 +35,14 @@
.Title {
- font-size: 2.5rem;
- line-height: 3.7rem;
+ font-size: $section_title_size;
+ line-height: $section_title_line_height;
}
.Caption {
- font-size: 1.5rem;
- line-height: 1.7rem;
+ font-size: $section_caption_size;
+ line-height: $section_caption_line_height;
margin-top: 5%;
color: white;
}
diff --git a/src/style/fonts.module.scss b/src/style/fonts.module.scss
index 206260b..b1741ae 100644
--- a/src/style/fonts.module.scss
+++ b/src/style/fonts.module.scss
@@ -9,4 +9,14 @@ $primary_font_weight: 800;
}
-$primary_font: primaryFont;
\ No newline at end of file
+$primary_font: primaryFont;
+
+$section_title_size: 2.5rem;
+$section_title_line_height: 3.7rem;
+
+$section_subtitle_size: 2rem;
+$section_subtitle_line_height: 2.4rem;
+
+
+$section_caption_size: 1.5rem;
+$section_caption_line_height: 1.7rem;
\ No newline at end of file
--
GitLab