From c1b7cf10af55204d790613f8a1843742fd26f122 Mon Sep 17 00:00:00 2001
From: Aliaksandr BUDZKO <abudzko@takima.fr>
Date: Wed, 7 Jul 2021 17:08:58 +0200
Subject: [PATCH] feat: make page responsive
---
src/js/components/Link/Link.js | 17 --
src/js/components/Link/Link.module.scss | 21 ---
.../components/TopLinks/TopLinks.module.scss | 14 ++
src/js/pages/MainPage,module.scss | 31 +++-
src/js/pages/MainPage.js | 9 +-
.../BottomSection/BottomSection.module.scss | 150 ++++++++++++++---
.../CloudSection/CloudSection.module.scss | 112 ++++++++++++-
.../sections/FeatureSection/FeatureSection.js | 7 -
.../FeatureSection/FeatureSection.module.scss | 89 ++++++++--
.../sections/LandingSection/LandingSection.js | 23 +--
.../LandingSection/LandingSection.module.scss | 45 +++--
.../sections/OctopusSection/OctopusSection.js | 8 +-
.../OctopusSection/OctopusSection.module.scss | 1 -
src/js/sections/StatsSection/StatsSection.js | 29 ++--
.../StatsSection/StatsSection.module.scss | 157 +++++++++++++++---
src/js/sections/TowerSection/TowerSection.js | 29 ++--
.../TowerSection/TowerSection.module.scss | 105 ++++++++++--
.../sections/VscodeSection/VscodeSection.js | 29 ++--
.../VscodeSection/VscodeSection.module.scss | 102 ++++++++++--
19 files changed, 739 insertions(+), 239 deletions(-)
delete mode 100644 src/js/components/Link/Link.js
delete mode 100644 src/js/components/Link/Link.module.scss
diff --git a/src/js/components/Link/Link.js b/src/js/components/Link/Link.js
deleted file mode 100644
index 21d918b..0000000
--- a/src/js/components/Link/Link.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import {Button as AntButton} from "antd";
-import styles from './Link.module.scss';
-
-const Link = (props) => {
- const {active} = props;
- return (
- <AntButton
- className={styles.TakiLink}
- type={"link"}
- active={active}
- >
- {props.children}
- </AntButton>
- );
-}
-
-export default Link;
\ No newline at end of file
diff --git a/src/js/components/Link/Link.module.scss b/src/js/components/Link/Link.module.scss
deleted file mode 100644
index 8cb47ca..0000000
--- a/src/js/components/Link/Link.module.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@import '../../../style/colors';
-@import '../../../style/fonts';
-
-.TakiLink {
- font-family: $primary_font;
- color: $primary_black;
- font-weight: $primary_font_weight;
-
- &:hover {
- color: $primary_pink;
- text-underline-position: under;
- }
-
- &:focus {
- color: $primary_pink;
- }
-
- &:active {
- color: $primary_pink;
- }
-}
diff --git a/src/js/components/TopLinks/TopLinks.module.scss b/src/js/components/TopLinks/TopLinks.module.scss
index 04de87b..f233c2f 100644
--- a/src/js/components/TopLinks/TopLinks.module.scss
+++ b/src/js/components/TopLinks/TopLinks.module.scss
@@ -44,6 +44,20 @@
}
}
+}
+
+@media (max-width: 1200px) {
+ .TopLinks {
+ justify-content: center;
+
+ .Logo {
+ font-size: 5vw;
+ }
+ .Links {
+ display: none;
+ }
+
+ }
}
diff --git a/src/js/pages/MainPage,module.scss b/src/js/pages/MainPage,module.scss
index 279dbf2..8b1713b 100644
--- a/src/js/pages/MainPage,module.scss
+++ b/src/js/pages/MainPage,module.scss
@@ -11,17 +11,46 @@ html {
z-index: 1;
width: 100%;
font-family: $primary_font;
+ height: 5%;
+}
+@media (max-width: 1200px) {
+ .top-bar {
+ position: relative;
+ }
}
.site-layout {
background: $primary_lightblue;
+
}
.footer {
text-align: center;
font-family: $primary_font;
- font-weight: $primary_font_weight
+ font-weight: $primary_font_weight;
+
+ min-width: fit-content;
+
+ a {
+ padding-right: 5%;
+ font-size: 1vw;
+ color: $primary_black;
+ text-decoration: none;
+
+ &:hover {
+ color: $primary_pink;
+ }
+ }
+
+}
+
+@media (max-width: 768px) {
+ .footer{
+ a {
+ font-size: 2vw;
+ }
+ }
}
diff --git a/src/js/pages/MainPage.js b/src/js/pages/MainPage.js
index 43d4f1d..cf5af84 100644
--- a/src/js/pages/MainPage.js
+++ b/src/js/pages/MainPage.js
@@ -1,6 +1,5 @@
import {Layout} from "antd";
import "./MainPage,module.scss";
-import Link from "../components/Link/Link";
import LandingSection from "../sections/LandingSection/LandingSection";
import VscodeSection from "../sections/VscodeSection/VscodeSection";
@@ -36,7 +35,7 @@ const MainPage = () => {
currentSection["vscodeSection"] = useElementOnScreen(vscodeSectionRef, {
root: null,
rootMargin: "0px",
- threshold: 1.0
+ threshold: 0.8
});
const cloudSectionRef = React.createRef();
@@ -106,9 +105,9 @@ const MainPage = () => {
<BottomSection innerRef={bottomSectionRef} contactRef={contactSectionRef}/>
</Content>
<Footer className="footer">
- <Link>Contact</Link>
- <Link>Démo</Link>
- <Link>Fait avec amour par Takima {"<3"}</Link>
+ <a href={""}>Contact</a>
+ <a href={""}>Démo</a>
+ <a href={""}>Fait avec amour par Takima {"<3"}</a>
</Footer>
</Layout>
);
diff --git a/src/js/sections/BottomSection/BottomSection.module.scss b/src/js/sections/BottomSection/BottomSection.module.scss
index a508ac4..4380dc3 100644
--- a/src/js/sections/BottomSection/BottomSection.module.scss
+++ b/src/js/sections/BottomSection/BottomSection.module.scss
@@ -8,20 +8,22 @@
background-position: bottom, 105% 40%, -5% 55%;
background-size: 100% 50%, 35% 35%, 40% 40%;
min-height: 180vh;
+
display: flex;
flex-direction: column;
align-items: center;
+ flex-wrap: wrap;
font-family: $primary_font;
font-weight: $primary_font_weight;
padding-top: 10%;
position: relative;
+
.MiddleBlock {
padding: 2% 2%;
background: $primary_beige;
color: $primary_black;
border-radius: 10px;
- min-height: 30%;
max-width: 50vw;
display: flex;
@@ -30,46 +32,39 @@
.Title {
- font-size: 2.5em;
- text-align: left;
+ font-size: 1.8vw;
}
.Caption {
- padding: 0 2% 0 0;
display: flex;
flex-direction: row;
-
.Comments {
- display: inline-block;
-
+ flex-basis: 80%;
+ padding-right: 5%;
.FirstComment {
- font-size: 1.5em;
- max-width: 70%;
+ font-size: 1.2vw;
}
.SecondComment {
- font-size: 1em;
- max-width: 70%;
+ font-size: 0.8vw;
}
}
.ButtonContainer {
- flex-basis: 35%;
- min-width: 30%;
+ flex-basis: 20%;
position: center;
- padding-top: 5%;
padding-right: 10%;
-
Button {
+ margin-top: 20%;
font-family: $primary_font;
font-weight: $primary_font_weight;
-
+ font-size: 0.9vw;
width: 100%;
- height: 50%;
+ height: 30%;
}
@@ -102,23 +97,24 @@
}
p {
- text-align: center;
+ max-width: 50%;
+ text-align: left;
color: white;
- font-size: 1em;
+ font-size: 0.9vw;
}
}
.ContactLinks {
max-width: 20%;
-
-
display: flex;
flex-direction: column;
+ text-align: left;
+
.BigCaption {
- text-align: left;
color: white;
- font-size: 1.5em;
+ font-size: 1.1vw;
+ margin-bottom: 10%;
}
Button {
@@ -126,16 +122,118 @@
margin-bottom: 5%;
font-family: $primary_font;
font-weight: $primary_font_weight;
- width: 90%;
+ font-size: 0.9vw;
+ width: 100%;
+ height: 30%;
}
.SmallCaption {
- text-align: left;
color: white;
- font-size: 1em;
+ font-size: 1vw;
+ }
+ }
+ }
+
+}
+
+@media (max-width: 768px) {
+ .BottomSection {
+ min-height: 100vh;
+ background-position: bottom, 105% 48%, -5% 60%;
+
+ .MiddleBlock {
+ max-width: 80vw;
+
+ .Title {
+ font-size: 3vw;
+ }
+
+ .Caption {
+
+ flex-direction: column;
+
+ .Comments {
+
+ .FirstComment {
+ font-size: 2.4vw;
+ }
+
+ .SecondComment {
+ font-size: 1.6vw;
+ }
+
+ }
+
+ .ButtonContainer {
+ max-width: 60%;
+ align-self: center;
+
+ Button {
+ font-family: $primary_font;
+ font-weight: $primary_font_weight;
+ font-size: 2vw;
+ width: 100%;
+ height: 50%;
+
+ }
+
+ }
+
+
+ }
+ }
+
+ .BottomBlock {
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ bottom: 5%;
+
+ .Logos {
+ margin-right: 5%;
+ max-width: 40%;
+ flex-direction: column;
+
+
+ img {
+ width: 100%;
+ height: 40%;
+ }
+
+ p {
+ max-width: 100%;
+
+ font-size: 1.8vw;
+ }
+ }
+
+ .ContactLinks {
+ max-width: 40%;
+
+ .BigCaption {
+ font-size: 2.2vw;
+ margin-bottom: 10%;
+ }
+
+ Button {
+ font-size: 1.8vw;
+ width: 100%;
+ height: 30%;
+
+ }
+
+ .SmallCaption {
+ font-size: 2vw;
+ }
}
}
}
+}
+@media (max-width: 375px) {
+ .BottomSection {
+ min-height: 70vh;
+ }
}
diff --git a/src/js/sections/CloudSection/CloudSection.module.scss b/src/js/sections/CloudSection/CloudSection.module.scss
index f82dcb8..84b6f66 100644
--- a/src/js/sections/CloudSection/CloudSection.module.scss
+++ b/src/js/sections/CloudSection/CloudSection.module.scss
@@ -16,30 +16,126 @@
font-weight: $primary_font_weight;
.UpperBlock {
- padding-top: 5%;
- font-size: 2.5em;
+ margin-top: 5%;
+ font-size: 2.3vw;
max-width: 40%;
text-align: center;
}
.Cloud {
- padding-top: 5%;
+ margin-top: 3%;
max-width: 50vw;
max-height: 60vh;
}
.BottomBlock {
- padding-top: 5%;
- font-size: 2rem;
+ margin-top: 2%;
+ font-size: 2vw;
max-width: 30%;
- line-height: 2.5rem;
+ line-height: 2vw;
.Caption {
- padding-top: 10px;
- font-size: 1.5rem;
+ margin-top: 20px;
+ font-size: 1.3vw;
+ line-height: 1.3vw;
max-width: 60%;
+ color: white;
+
+ }
+ }
+}
+
+//@media (max-width: 575.98px) {
+// .CloudSection {
+// min-height: 80vh;
+//
+// .UpperBlock {
+// font-size: 3vw;
+// max-width: 50vw;
+//
+// }
+//
+// .Cloud {
+// margin-top: 10%;
+// max-width: 60vw;
+// max-height: 60vh;
+// }
+//
+// .BottomBlock {
+// font-size: 4vw;
+// line-height: 4vw;
+// max-width: 40%;
+//
+// .Caption {
+// font-size: 3vw;
+// line-height: 3vw;
+// max-width: 70%;
+//
+// }
+// }
+// }
+//}
+
+@media (max-width: 768px) {
+ .CloudSection {
+
+ min-height: 70vh;
+ .UpperBlock {
+ font-size: 4vw;
+ max-width: 40%;
+ text-align: center;
+
+ }
+
+ .Cloud {
+ margin-top: 10%;
+ max-width: 60vw;
+ max-height: 70vh;
+ }
+
+ .BottomBlock {
+ font-size: 4vw;
+ line-height: 4vw;
+ max-width: 40%;
+
+ .Caption {
+ font-size: 2.5vw;
+ line-height: 2.5vw;
+ max-width: 70%;
+
+ }
+ }
+ }
+}
+
+@media (max-width: 992px) {
+ .CloudSection {
+
+ .UpperBlock {
+ font-size: 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: 4vw;
+
+ .Caption {
+ font-size: 2.5vw;
+ line-height: 2.5vw;
+
+ }
}
}
}
\ No newline at end of file
diff --git a/src/js/sections/FeatureSection/FeatureSection.js b/src/js/sections/FeatureSection/FeatureSection.js
index d783397..dd2c08f 100644
--- a/src/js/sections/FeatureSection/FeatureSection.js
+++ b/src/js/sections/FeatureSection/FeatureSection.js
@@ -1,5 +1,4 @@
import styles from "./FeatureSection.module.scss";
-import {Col, Row} from "antd";
import MultiColoredText from "../../components/MultiColoredText/MultiColoredText";
import {CheckOutlined} from "@ant-design/icons";
@@ -19,8 +18,6 @@ const feature2 = [
const FeatureSection = ({innerRef}) => {
return(
<div ref={innerRef} id="FeatureSection" className={styles.FeatureSection}>
- <Row>
- <Col span={12}>
<div className={styles.LeftSide}>
<div className={styles.Feature}>
<CheckOutlined className={styles.Checkmark}/>
@@ -31,8 +28,6 @@ const FeatureSection = ({innerRef}) => {
<MultiColoredText content={feature2}/>
</div>
</div>
- </Col>
- <Col span={12}>
<div className={styles.RightSide}>
<div className={styles.Bubble}>
<p>
@@ -48,8 +43,6 @@ const FeatureSection = ({innerRef}) => {
</div>
</div>
- </Col>
- </Row>
</div>
);
};
diff --git a/src/js/sections/FeatureSection/FeatureSection.module.scss b/src/js/sections/FeatureSection/FeatureSection.module.scss
index 7986b18..9091f8a 100644
--- a/src/js/sections/FeatureSection/FeatureSection.module.scss
+++ b/src/js/sections/FeatureSection/FeatureSection.module.scss
@@ -5,47 +5,50 @@
.FeatureSection {
background: white;
background-size: 100% 100%;
- position: relative;
min-height: 60vh;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ flex-wrap: wrap;
+
+ font-weight: $primary_font_weight;
+ font-family: $primary_font;
+ color: $primary_black;
+
.LeftSide {
- padding-top: 5%;
- padding-left: 30%;
font-weight: $primary_font_weight;
font-family: $primary_font;
display: flex;
flex-direction: column;
+ flex-basis: 40%;
.Feature {
display : flex;
flex-direction: row;
- padding: 10% 5% 5% 5%;
- font-size: 2em;
- line-height: 2.5rem;
+ padding: 5% 5% 5% 5%;
+ font-size: 1.7vw;
+ line-height: 1.7vw;
.Checkmark {
padding-right: 5%;
- font-size: 4rem;
+ font-size: 3vw;
}
}
}
.RightSide {
- font-weight: $primary_font_weight;
- font-family: $primary_font;
- color: $primary_black;
- padding-top: 10%;
-
- // taken from
- // https://codingislove.com/css-speech-bubbles/
-
+ flex-basis: 50%;
+ // bubble css inspired by https://codingislove.com/css-speech-bubbles/
.Bubble {
width: 70%;
margin: 50px auto;
+ padding: 4% 3%;
position:relative;
border: solid $primary_black;
- padding: 5px 5px;
+ font-size: 1vw;
&:before {
content: "";
@@ -64,8 +67,58 @@
.Author {
position: relative;
- padding-left: 25%;
+ font-size: 1.2vw;
+ padding: 0 0 2% 25%;
+ }
+ }
+}
+
+
+//ipad
+@media (max-width: 768px) {
+ .FeatureSection {
+
+
+ .LeftSide {
+ .Feature {
+ font-size: 3vw;
+ line-height: 3vw;
+ }
+ }
+
+ .RightSide {
+
+ .Bubble {
+ width: 90%;
+
+ font-size: 2vw;
+ }
+
+ .Author {
+ font-size: 2vw;
+ }
+ }
+ }
+}
+
+@media (max-width: 375px) {
+ .FeatureSection {
+
+ flex-direction: column;
+ justify-content: left;
+
+ .LeftSide {
+ margin-top: 5%;
+ .Feature {
+ .Checkmark {
+ font-size: 5vw;
+ }
+ }
+ }
+
+ .RightSide {
+
}
}
+}
-}
\ No newline at end of file
diff --git a/src/js/sections/LandingSection/LandingSection.js b/src/js/sections/LandingSection/LandingSection.js
index c14fec8..95f21a8 100644
--- a/src/js/sections/LandingSection/LandingSection.js
+++ b/src/js/sections/LandingSection/LandingSection.js
@@ -1,7 +1,6 @@
import React from 'react';
import styles from "./LandingSection.module.scss";
-import {Col, Row} from "antd";
import octopus from '../../../assets/props/pieuvre.svg'
import MultiColoredText from "../../components/MultiColoredText/MultiColoredText";
@@ -15,22 +14,16 @@ const landingPageMessage = [
const LandingSection = ({innerRef}) => {
return (
<div ref={innerRef} id={"LandingSection"} className={styles.LandingSection}>
- <Row>
- <Col span={12}>
- <div className={styles.LeftSide}>
- <img src={octopus} alt={"octopus"} className={styles.Octopus}/>
- </div>
- </Col>
- <Col span={12}>
- <div className={styles.RightSide}>
- <div className={styles.Title}>DEADLOCK <br/>
- <span className={styles.Caption}>
+ <div className={styles.LeftSide}>
+ <img src={octopus} alt={"octopus"} className={styles.Octopus}/>
+ </div>
+ <div className={styles.RightSide}>
+ <div className={styles.Title}>DEADLOCK <br/>
+ <span className={styles.Caption}>
<MultiColoredText content={landingPageMessage}/>
</span>
- </div>
- </div>
- </Col>
- </Row>
+ </div>
+ </div>
</div>
);
}
diff --git a/src/js/sections/LandingSection/LandingSection.module.scss b/src/js/sections/LandingSection/LandingSection.module.scss
index 1ee0c3f..f504233 100644
--- a/src/js/sections/LandingSection/LandingSection.module.scss
+++ b/src/js/sections/LandingSection/LandingSection.module.scss
@@ -8,14 +8,18 @@
background-position: center;
background-size: 100% 100%;
min-height: 100vh;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: left;
+ flex-wrap: wrap;
.LeftSide {
- padding-top: 20%;
- padding-left: 40%;
+ flex-basis: 50%;
.Octopus {
- max-width: 45vw;
- max-height: 45vh;
+ width: 50vw;
+ height: 50vh;
}
}
@@ -23,20 +27,41 @@
color: $primary_black;
font-weight: $primary_font_weight;
font-family: $primary_font;
- padding-top: 30%;
- padding-right: 30%;
- text-align: center;
vertical-align: middle;
+ flex-basis: 40%;
.Title {
- font-size: 7rem;
+ font-size: 5vw;
.Caption {
- font-size: 1.7rem;
- text-align: center;
+ font-size: 1.5vw;
}
}
}
+}
+
+@media (max-width: 575.98px) {
+ .LandingSection {
+ flex-direction: column;
+ text-align: center;
+
+ padding-top: 10%;
+ min-height: 90vh;
+
+
+ .RightSide {
+
+ .Title {
+ font-size: 10vw;
+
+ .Caption {
+ font-size: 4vw;
+ text-align: center;
+ }
+
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/src/js/sections/OctopusSection/OctopusSection.js b/src/js/sections/OctopusSection/OctopusSection.js
index d735675..58a3222 100644
--- a/src/js/sections/OctopusSection/OctopusSection.js
+++ b/src/js/sections/OctopusSection/OctopusSection.js
@@ -1,12 +1,16 @@
import styles from "./OctopusSection.module.scss";
-import octopusImage from "../../../assets/main/poulpe_ludique_big.png";
+import octopusImageBig from "../../../assets/main/poulpe_ludique_big.png";
+import octopusImageMobile from "../../../assets/main/poulpe_ludique_version_mobile.png";
const OctopusSection = ({innerRef}) => {
return (
<div ref={innerRef} id={"OctopusSection"} className={styles.OctopusSection}>
- <img src={octopusImage} alt="octopus" className={styles.OctopusImage}/>
+ <picture>
+ <source media={"(max-width : 768px)"} srcSet={octopusImageMobile}/>
+ <img src={octopusImageBig} alt="octopus" className={styles.OctopusImage}/>
+ </picture>
</div>
);
}
diff --git a/src/js/sections/OctopusSection/OctopusSection.module.scss b/src/js/sections/OctopusSection/OctopusSection.module.scss
index b3375a9..09c5197 100644
--- a/src/js/sections/OctopusSection/OctopusSection.module.scss
+++ b/src/js/sections/OctopusSection/OctopusSection.module.scss
@@ -7,7 +7,6 @@
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
- min-height: 100vh;
.OctopusImage {
max-width: 100%;
diff --git a/src/js/sections/StatsSection/StatsSection.js b/src/js/sections/StatsSection/StatsSection.js
index c2a0dee..5b8bec8 100644
--- a/src/js/sections/StatsSection/StatsSection.js
+++ b/src/js/sections/StatsSection/StatsSection.js
@@ -1,5 +1,4 @@
import styles from "./StatsSection.module.scss";
-import {Col, Row} from "antd";
import MultiColoredText from "../../components/MultiColoredText/MultiColoredText";
import statsImage from "../../../assets/main/notes.png";
@@ -15,23 +14,17 @@ const title = [
const StatsSection = ({innerRef}) => {
return (
<div ref={innerRef} id={"StatsSection"} className={styles.StatsSection}>
- <Row>
- <Col span={12}>
- <div className={styles.LeftSide}>
- <div className={styles.Title}>
- <MultiColoredText content={title}/>
- </div>
- <p className={styles.Caption}>
- Vous pouvez relire le code de vos étudiants, les évaluer, leur faire des retours
- </p>
- </div>
- </Col>
- <Col span={12}>
- <div className={styles.RightSide}>
- <img src={statsImage} alt={"notes screen"} className={styles.NotesImage}/>
- </div>
- </Col>
- </Row>
+ <div className={styles.LeftSide}>
+ <div className={styles.Title}>
+ <MultiColoredText content={title}/>
+ </div>
+ <p className={styles.Caption}>
+ Vous pouvez relire le code de vos étudiants, les évaluer, leur faire des retours
+ </p>
+ </div>
+ <div className={styles.RightSide}>
+ <img src={statsImage} alt={"notes screen"} className={styles.NotesImage}/>
+ </div>
</div>
);
}
diff --git a/src/js/sections/StatsSection/StatsSection.module.scss b/src/js/sections/StatsSection/StatsSection.module.scss
index 17fa01b..c858a29 100644
--- a/src/js/sections/StatsSection/StatsSection.module.scss
+++ b/src/js/sections/StatsSection/StatsSection.module.scss
@@ -8,44 +8,161 @@
background-position: 15% 100%;
background-size: 25% 25%;
background-repeat: no-repeat;
- position: relative;
- min-height: 80vh;
- .LeftSide {
+ font-weight: $primary_font_weight;
+ font-family: $primary_font;
+
+ min-height: 90vh;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ flex-wrap: wrap;
+ padding-bottom: 25%;
+ padding-top: 10%;
+
- color: $primary_black;
- font-weight: $primary_font_weight;
- font-family: $primary_font;
- padding-top: 25%;
- padding-left: 20%;
+ .LeftSide {
vertical-align: middle;
- line-height: 4em;
text-align: left;
- max-width: 80%;
+ max-width: 60%;
+ flex-basis: 40%;
.Title {
-
- font-size: 3rem;
-
+ font-size: 2.7vw;
+ line-height: 3.2vw;
}
.Caption {
- font-size: 1.5em;
- line-height: 1em;
+ font-size: 1.3vw;
+ line-height: 1.5vw;
color: white;
- padding-top: 5%;
+ margin-top: 5%;
+ max-width: 80%;
}
}
.RightSide {
-
+ flex-basis: 40%;
.NotesImage {
- padding-top: 20%;
- max-width: 50vw;
- max-height: 50vh;
+ max-width: 60vw;
+ max-height: 60vh;
+ }
+ }
+
+}
+
+// TODO see for big screen / zoom out situation
+//@media (min-width: 1200px) {
+// .StatsSection {
+// .RightSide {
+// .NotesImage {
+// width: 60vw;
+// height: 60vh;
+// }
+// }
+// }
+//}
+
+@media (max-width: 1200px) {
+ .StatsSection {
+ .RightSide {
+ .NotesImage {
+ width: 45vw;
+ height: 35vh;
+ }
+ }
+ }
+}
+
+@media (max-width: 992px) {
+ .StatsSection {
+ min-height: 90vh;
+
+ }
+}
+
+@media (max-width: 768px) {
+ .StatsSection {
+
+ min-height: 90vh;
+ flex-direction: column-reverse;
+
+ .LeftSide {
+ vertical-align: middle;
+ text-align: left;
+ max-width: 80%;
+ margin-top: 5%;
+
+ .Title {
+ font-size: 4vw;
+ line-height: 4.2vw;
+ }
+
+ .Caption {
+ font-size: 2vw;
+ line-height: 2.2vw;
+ color: white;
+ max-width: 80%;
+ }
+
+ }
+
+ .RightSide {
+ .NotesImage {
+ width: 100%;
+ max-height: 30vh;
+ }
}
+
}
+}
+
+
+@media (max-width: 576px) {
+ .StatsSection {
+ min-height: 60vh;
+
+ .RightSide {
+
+ .NotesImage {
+ width: 80vw;
+ height: 20vh;
+ }
+ }
+ }
+}
+
+//iphone 6
+@media (max-width: 375px) and (max-height: 700px){
+ .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%;
+ }
+
+ }
+
+ .RightSide {
+ .NotesImage {
+ width: 80vw;
+ height: 25vh;
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/src/js/sections/TowerSection/TowerSection.js b/src/js/sections/TowerSection/TowerSection.js
index a44b27b..0a3710f 100644
--- a/src/js/sections/TowerSection/TowerSection.js
+++ b/src/js/sections/TowerSection/TowerSection.js
@@ -1,5 +1,4 @@
import styles from "./TowerSection.module.scss";
-import {Col, Row} from "antd";
import MultiColoredText from "../../components/MultiColoredText/MultiColoredText";
import towerImage from "../../../assets/props/donjon.svg";
@@ -19,23 +18,17 @@ const TowerSection = ({innerRef}) => {
return (
<div ref={innerRef} id={"TowerSection"} className={styles.TowerSection}>
- <Row>
- <Col span={12}>
- <div className={styles.LeftSide}>
- <img src={towerImage} alt={"tower"} className={styles.TowerImage}/>
- </div>
- </Col>
- <Col span={12}>
- <div className={styles.RightSide}>
- <div className={styles.Title}>
- <MultiColoredText content={title}/>
- </div>
- <div className={styles.Caption}>
- C'est pourquoi nous avons ajouté plusieurs éléments de jeux au sein de notre palteforme.
- </div>
- </div>
- </Col>
- </Row>
+ <div className={styles.LeftSide}>
+ <img src={towerImage} alt={"tower"} className={styles.TowerImage}/>
+ </div>
+ <div className={styles.RightSide}>
+ <div className={styles.Title}>
+ <MultiColoredText content={title}/>
+ </div>
+ <div className={styles.Caption}>
+ C'est pourquoi nous avons ajouté plusieurs éléments de jeux au sein de notre palteforme.
+ </div>
+ </div>
</div>
);
}
diff --git a/src/js/sections/TowerSection/TowerSection.module.scss b/src/js/sections/TowerSection/TowerSection.module.scss
index baba939..9a9fcdd 100644
--- a/src/js/sections/TowerSection/TowerSection.module.scss
+++ b/src/js/sections/TowerSection/TowerSection.module.scss
@@ -5,41 +5,110 @@
.TowerSection {
background: $primary_lightblue;
background-size: 100% 100%;
- position: relative;
min-height: 80vh;
- .LeftSide {
- padding-top: 10%;
- padding-left: 50%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ flex-wrap: wrap;
+ color: $primary_black;
+ font-weight: $primary_font_weight;
+ font-family: $primary_font;
+
+ .LeftSide {
+ flex-basis: 20%;
.TowerImage {
- max-width: 50vw;
- max-height: 50vh;
+ max-width: 60vw;
+ max-height: 65vh;
}
}
.RightSide {
- color: $primary_black;
- font-weight: $primary_font_weight;
- font-family: $primary_font;
- padding-top: 20%;
- padding-right: 30%;
+
vertical-align: middle;
- line-height: 4em;
- max-width: 90%;
+ flex-basis: 20%;
+ text-align: left;
+ padding: 1% 3%;
+ max-width: 60%;
+
.Title {
+ font-size: 2.7vw;
+ line-height: 3vw;
- font-size: 3rem;
}
.Caption {
- font-size: 1.5em;
- line-height: 1em;
+ font-size: 1.3vw;
+ line-height: 1.3vw;
+ margin-top: 5%;
color: white;
+ }
+ }
+
+}
+
+
+
+@media (max-width: 768px) {
+ .TowerSection {
+ flex-direction: column;
+ text-align: center;
+ padding-top: 10%;
+ padding-bottom: 10%;
+
+ .LeftSide {
+ .TowerImage {
+ width: 80vw;
+ height: 30vh;
+ }
+ }
+
+ .RightSide {
padding-top: 5%;
- max-width: 70%;
+ .Title {
+ font-size: 5vw;
+ line-height: 5vw;
+ }
+
+ .Caption {
+ font-size: 2.7vw;
+ line-height: 2.7vw;
+
+ }
+ }
+ }
+}
+
+@media (max-width: 1200px) {
+ .TowerSection {
+ flex-direction: column;
+ text-align: center;
+ padding-top: 10%;
+ padding-bottom: 10%;
+
+ .LeftSide {
+ .TowerImage {
+ width: 90vw;
+ height: 50vh;
+ }
+ }
+
+ .RightSide {
+ .Title {
+ font-size: 5vw;
+ line-height: 5vw;
+ }
+
+ .Caption {
+ font-size: 2.7vw;
+ line-height: 2.7vw;
+
+ }
}
}
+}
+
-}
\ No newline at end of file
diff --git a/src/js/sections/VscodeSection/VscodeSection.js b/src/js/sections/VscodeSection/VscodeSection.js
index eea7485..fd5ad71 100644
--- a/src/js/sections/VscodeSection/VscodeSection.js
+++ b/src/js/sections/VscodeSection/VscodeSection.js
@@ -1,5 +1,4 @@
import styles from "./VscodeSection.module.scss";
-import {Col, Row} from "antd";
import MultiColoredText from "../../components/MultiColoredText/MultiColoredText";
import vscodeImage from "../../../assets/main/vscode_screen.png";
@@ -17,23 +16,17 @@ const VscodeSection = ({innerRef}) => {
return (
<div ref={innerRef} id="VscodeSection" className={styles.VscodeSection}>
- <Row>
- <Col span={16}>
- <div className={styles.LeftSide}>
- <img src={vscodeImage} alt={"vscodeScreen"} className={styles.VscodeImage}/>
- </div>
- </Col>
- <Col span={8}>
- <div className={styles.RightSide}>
- <div className={styles.Title}>
- <MultiColoredText content={vscodeTitle}/>
- </div>
- <div className={styles.Caption}>
- Plus besoin de se soucier de l'environnement, de la machine, un navigateur connecté suffit.
- </div>
- </div>
- </Col>
- </Row>
+ <div className={styles.LeftSide}>
+ <img src={vscodeImage} alt={"vscodeScreen"} className={styles.VscodeImage}/>
+ </div>
+ <div className={styles.RightSide}>
+ <div className={styles.Title}>
+ <MultiColoredText content={vscodeTitle}/>
+ </div>
+ <div className={styles.Caption}>
+ Plus besoin de se soucier de l'environnement, de la machine, un navigateur connecté suffit.
+ </div>
+ </div>
</div>
);
}
diff --git a/src/js/sections/VscodeSection/VscodeSection.module.scss b/src/js/sections/VscodeSection/VscodeSection.module.scss
index b7743ee..b002374 100644
--- a/src/js/sections/VscodeSection/VscodeSection.module.scss
+++ b/src/js/sections/VscodeSection/VscodeSection.module.scss
@@ -3,18 +3,21 @@
@import "../../../style/colors";
.VscodeSection {
- background: $primary_lightblue;
- background-size: 100% 100%;
- position: relative;
- min-height: 85vh;
+ background-color: $primary_lightblue;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ flex-wrap: wrap;
+ min-height: 100vh;
+ padding: 2% 0 2% 0;
.LeftSide {
- padding-top: 15%;
- padding-left: 30%;
+ padding: 1% 1%;
.VscodeImage {
- max-width: 40vw;
- max-height: 45vh;
+ width: 50vw;
+ height: 55vh;
}
}
@@ -22,22 +25,89 @@
color: $primary_black;
font-weight: $primary_font_weight;
font-family: $primary_font;
- padding-top: 40%;
- padding-right: 30%;
text-align: left;
- vertical-align: middle;
- line-height: 4em;
+ padding: 1% 3%;
+ flex-basis: 30%;
+ max-width: 60%;
+
.Title {
- font-size: 3rem;
+ font-size: 2.7vw;
+ line-height: 2.7vw;
+
}
.Caption {
- font-size: 1.5em;
- line-height: 1em;
+ font-size: 1.3vw;
+ line-height: 1.3vw;
+ margin-top: 5%;
color: white;
+ }
+ }
+
+}
+
+@media (max-width: 575.98px) {
+ .VscodeSection {
+ min-height: 80vh;
+
+ }
+}
+
+@media (max-width: 768px) {
+ .VscodeSection {
+ flex-direction: column;
+ text-align: center;
+
+ .LeftSide {
+ .VscodeImage {
+ width: 80vw;
+ height: 30vh;
+ }
+ }
+
+ .RightSide {
padding-top: 5%;
+ .Title {
+ font-size: 5vw;
+ line-height: 5vw;
+ }
+
+ .Caption {
+ font-size: 2.7vw;
+ line-height: 2.7vw;
+
+ }
}
}
+}
+
+@media (max-width: 1200px) {
+ .VscodeSection {
+ flex-direction: column;
+ text-align: center;
+
+ .LeftSide {
+ .VscodeImage {
+ width: 90vw;
+ height: 50vh;
+ }
+ }
+
+ .RightSide {
+ padding-top: 10%;
+ .Title {
+ font-size: 5vw;
+ line-height: 5vw;
+ }
+
+ .Caption {
+ font-size: 2.7vw;
+ line-height: 2.7vw;
+
+ }
+ }
+ }
+}
+
-}
\ No newline at end of file
--
GitLab