From 922ca556d8370516a9e5d549bd3a6a7a7ace3028 Mon Sep 17 00:00:00 2001
From: Aliaksandr BUDZKO <abudzko@takima.fr>
Date: Tue, 6 Jul 2021 16:57:13 +0200
Subject: [PATCH] fix: visual fix
---
src/index.scss | 7 ++++---
src/js/components/TopBar/TopBar.js | 10 +---------
src/js/components/TopLinks/TopLInks.js | 1 -
src/js/components/TopLinks/TopLinks.module.scss | 4 ++--
src/js/pages/MainPage,module.scss | 2 ++
src/js/pages/MainPage.js | 5 ++---
.../sections/BottomSection/BottomSection.module.scss | 6 +++---
src/js/sections/CloudSection/CloudSection.module.scss | 3 +++
.../sections/LandingSection/LandingSection.module.scss | 3 ++-
src/js/sections/TowerSection/TowerSection.js | 1 -
src/js/sections/TowerSection/TowerSection.module.scss | 8 +++++---
src/js/sections/VscodeSection/VscodeSection.js | 1 -
src/js/utils/utils.js | 7 ++++---
src/style/fonts.scss | 2 +-
14 files changed, 29 insertions(+), 31 deletions(-)
diff --git a/src/index.scss b/src/index.scss
index ec2585e..e7d9e64 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,8 +1,9 @@
+@import "style/fonts.scss";
+
body {
margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
+ font-family: Hiragino Kaku Gothic StdN, sans-serif;
+ font-weight: 800;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
diff --git a/src/js/components/TopBar/TopBar.js b/src/js/components/TopBar/TopBar.js
index fdc32f4..3f066c4 100644
--- a/src/js/components/TopBar/TopBar.js
+++ b/src/js/components/TopBar/TopBar.js
@@ -4,9 +4,6 @@ import {Header} from "antd/lib/layout/layout";
import {useEffect, useState} from "react";
-const beige = "#FDE7D3";
-const blue = "#6FACC6";
-
const TopBar = (props) => {
const [section, setSection] = useState("landingSection");
@@ -21,13 +18,8 @@ const TopBar = (props) => {
}, [props.currentSection]);
- const topBarStyle = {
- background: section.vscodeSection || section.statsSection || section.featuresSection || section.towerSection || section.octopusSection || section.bottomSection ? blue : beige
- };
-
-
return (
- <Header className={"top-bar"} style={topBarStyle}>
+ <Header className={"top-bar"}>
<TopLinks section={section}/>
</Header>
);
diff --git a/src/js/components/TopLinks/TopLInks.js b/src/js/components/TopLinks/TopLInks.js
index b8d409b..0c6a1e5 100644
--- a/src/js/components/TopLinks/TopLInks.js
+++ b/src/js/components/TopLinks/TopLInks.js
@@ -1,5 +1,4 @@
import styles from "./TopLinks.module.scss";
-import {useEffect, useState} from "react";
const chosenSectionStyle = {
textDecoration: "none",
diff --git a/src/js/components/TopLinks/TopLinks.module.scss b/src/js/components/TopLinks/TopLinks.module.scss
index 76907fd..04de87b 100644
--- a/src/js/components/TopLinks/TopLinks.module.scss
+++ b/src/js/components/TopLinks/TopLinks.module.scss
@@ -19,7 +19,7 @@
.Links {
padding-left: 5%;
-
+ max-width: 30vw;
display: flex;
flex-direction: row;
@@ -31,7 +31,7 @@
min-width: fit-content;
a {
- font-size: 0.9vw;
+ font-size: 0.8vw;
color: $primary_black;
}
diff --git a/src/js/pages/MainPage,module.scss b/src/js/pages/MainPage,module.scss
index d2b8868..279dbf2 100644
--- a/src/js/pages/MainPage,module.scss
+++ b/src/js/pages/MainPage,module.scss
@@ -10,6 +10,8 @@ html {
position: fixed;
z-index: 1;
width: 100%;
+ font-family: $primary_font;
+
}
diff --git a/src/js/pages/MainPage.js b/src/js/pages/MainPage.js
index c7dc8fe..43d4f1d 100644
--- a/src/js/pages/MainPage.js
+++ b/src/js/pages/MainPage.js
@@ -5,7 +5,6 @@ import LandingSection from "../sections/LandingSection/LandingSection";
import VscodeSection from "../sections/VscodeSection/VscodeSection";
-import TopLinks from "../components/TopLinks/TopLInks";
import CloudSection from "../sections/CloudSection/CloudSection";
import StatsSection from "../sections/StatsSection/StatsSection";
import FeatureSection from "../sections/FeatureSection/FeatureSection";
@@ -17,7 +16,7 @@ import {useElementOnScreen} from "../utils/utils";
import TopBar from "../components/TopBar/TopBar";
import {Content} from "antd/lib/layout/layout";
-const {HContent, Footer} = Layout;
+const { Footer} = Layout;
@@ -44,7 +43,7 @@ const MainPage = () => {
currentSection["cloudSection"] = useElementOnScreen(cloudSectionRef, {
root: null,
rootMargin: "0px",
- threshold: 0.9
+ threshold: 0.7
});
const statsSectionRef = React.createRef();
diff --git a/src/js/sections/BottomSection/BottomSection.module.scss b/src/js/sections/BottomSection/BottomSection.module.scss
index 2a1927f..a508ac4 100644
--- a/src/js/sections/BottomSection/BottomSection.module.scss
+++ b/src/js/sections/BottomSection/BottomSection.module.scss
@@ -30,8 +30,8 @@
.Title {
- font-size: 3em;
- text-align: center;
+ font-size: 2.5em;
+ text-align: left;
}
.Caption {
@@ -110,7 +110,6 @@
.ContactLinks {
max-width: 20%;
- align-items: center;
display: flex;
@@ -132,6 +131,7 @@
}
.SmallCaption {
+ text-align: left;
color: white;
font-size: 1em;
}
diff --git a/src/js/sections/CloudSection/CloudSection.module.scss b/src/js/sections/CloudSection/CloudSection.module.scss
index 4215895..f82dcb8 100644
--- a/src/js/sections/CloudSection/CloudSection.module.scss
+++ b/src/js/sections/CloudSection/CloudSection.module.scss
@@ -18,6 +18,8 @@
.UpperBlock {
padding-top: 5%;
font-size: 2.5em;
+ max-width: 40%;
+ text-align: center;
}
@@ -31,6 +33,7 @@
padding-top: 5%;
font-size: 2rem;
max-width: 30%;
+ line-height: 2.5rem;
.Caption {
padding-top: 10px;
diff --git a/src/js/sections/LandingSection/LandingSection.module.scss b/src/js/sections/LandingSection/LandingSection.module.scss
index 30e962e..1ee0c3f 100644
--- a/src/js/sections/LandingSection/LandingSection.module.scss
+++ b/src/js/sections/LandingSection/LandingSection.module.scss
@@ -32,7 +32,8 @@
font-size: 7rem;
.Caption {
- font-size: 2rem;
+ font-size: 1.7rem;
+ text-align: center;
}
}
diff --git a/src/js/sections/TowerSection/TowerSection.js b/src/js/sections/TowerSection/TowerSection.js
index f6e3a8c..a44b27b 100644
--- a/src/js/sections/TowerSection/TowerSection.js
+++ b/src/js/sections/TowerSection/TowerSection.js
@@ -3,7 +3,6 @@ import {Col, Row} from "antd";
import MultiColoredText from "../../components/MultiColoredText/MultiColoredText";
import towerImage from "../../../assets/props/donjon.svg";
-import {useElementOnScreen} from "../../utils/utils";
const black = "#1D2C38";
const white = "white";
diff --git a/src/js/sections/TowerSection/TowerSection.module.scss b/src/js/sections/TowerSection/TowerSection.module.scss
index 4e5c138..baba939 100644
--- a/src/js/sections/TowerSection/TowerSection.module.scss
+++ b/src/js/sections/TowerSection/TowerSection.module.scss
@@ -6,15 +6,15 @@
background: $primary_lightblue;
background-size: 100% 100%;
position: relative;
- min-height: 70vh;
+ min-height: 80vh;
.LeftSide {
padding-top: 10%;
padding-left: 50%;
.TowerImage {
- max-width: 40vw;
- max-height: 45vh;
+ max-width: 50vw;
+ max-height: 50vh;
}
}
@@ -26,6 +26,7 @@
padding-right: 30%;
vertical-align: middle;
line-height: 4em;
+ max-width: 90%;
.Title {
@@ -37,6 +38,7 @@
line-height: 1em;
color: white;
padding-top: 5%;
+ max-width: 70%;
}
}
diff --git a/src/js/sections/VscodeSection/VscodeSection.js b/src/js/sections/VscodeSection/VscodeSection.js
index 0290260..eea7485 100644
--- a/src/js/sections/VscodeSection/VscodeSection.js
+++ b/src/js/sections/VscodeSection/VscodeSection.js
@@ -3,7 +3,6 @@ import {Col, Row} from "antd";
import MultiColoredText from "../../components/MultiColoredText/MultiColoredText";
import vscodeImage from "../../../assets/main/vscode_screen.png";
-import {useEffect, useRef, useState} from "react";
const black = "#1D2C38";
const white = "white";
diff --git a/src/js/utils/utils.js b/src/js/utils/utils.js
index ee19cb5..77a01cc 100644
--- a/src/js/utils/utils.js
+++ b/src/js/utils/utils.js
@@ -1,4 +1,4 @@
-import {useEffect, useRef, useState} from "react";
+import {useEffect, useState} from "react";
export const useElementOnScreen = (ref, options) => {
const [isVisible, setVisible] = useState(false);
@@ -10,9 +10,10 @@ export const useElementOnScreen = (ref, options) => {
useEffect(() => {
const observer = new IntersectionObserver(callbackFunction, options);
- if(ref.current) observer.observe(ref.current)
+ const current = ref.current;
+ if(current) observer.observe(current)
return () => {
- if(ref.current) observer.unobserve(ref.current)
+ if(current) observer.unobserve(current)
}
}, [ref, options]);
diff --git a/src/style/fonts.scss b/src/style/fonts.scss
index 520dd6b..2275db5 100644
--- a/src/style/fonts.scss
+++ b/src/style/fonts.scss
@@ -1,2 +1,2 @@
-$primary_font: Hiragino Kaku Gothic StdN 800;
+$primary_font: Hiragino Kaku Gothic StdN;
$primary_font_weight: 800;
\ No newline at end of file
--
GitLab