diff --git a/public/index.html b/public/index.html
index d9ee694c8d110ac3b5814392088c03ff8270718c..b12c9ef32ec5c9644d531e680b39153bbaa553a3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,11 +9,12 @@
name="description"
content="Web site created using create-react-app"
/>
- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
+ <link rel="preload" href="src/style/hiragino-kaku-gothic-stdn-w8.otf" as="font">
+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
@@ -28,7 +29,10 @@
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
+
<div id="root"></div>
+ <!-- Needed to load the font before rendering the page -->
+
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
diff --git a/public/logo192.png b/public/logo192.png
deleted file mode 100644
index fc44b0a3796c0e0a64c3d858ca038bd4570465d9..0000000000000000000000000000000000000000
Binary files a/public/logo192.png and /dev/null differ
diff --git a/public/logo512.png b/public/logo512.png
deleted file mode 100644
index a4e47a6545bc15971f8f63fba70e4013df88a664..0000000000000000000000000000000000000000
Binary files a/public/logo512.png and /dev/null differ
diff --git a/public/manifest.json b/public/manifest.json
index 080d6c77ac21bb2ef88a6992b2b73ad93daaca92..1f2f141fafdeb1d31d85b008ec5132840c5e6362 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -6,16 +6,6 @@
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
- },
- {
- "src": "logo192.png",
- "type": "image/png",
- "sizes": "192x192"
- },
- {
- "src": "logo512.png",
- "type": "image/png",
- "sizes": "512x512"
}
],
"start_url": ".",
diff --git a/src/App.js b/src/App.js
index f56fd4894f5518b2fb84ad154159c17b726b72e4..2b07ebb03063284f0ebeab4cc6fb065439335de7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,4 @@
-import 'antd/dist/antd.css';
+import 'antd/dist/antd.css';
import MainPage from "./js/pages/MainPage";
diff --git a/src/assets/curves/courbe_1_s.png b/src/assets/curves/courbe_1_s.png
new file mode 100644
index 0000000000000000000000000000000000000000..e57c3c6f4df83de5baa12af5038f216143c2fb77
Binary files /dev/null and b/src/assets/curves/courbe_1_s.png differ
diff --git a/src/assets/curves/courbe_1_sm.png b/src/assets/curves/courbe_1_sm.png
new file mode 100644
index 0000000000000000000000000000000000000000..b220294e91db293c648ccf7a0f6074fdb18fb7ed
Binary files /dev/null and b/src/assets/curves/courbe_1_sm.png differ
diff --git a/src/assets/curves/courbe_2_s.png b/src/assets/curves/courbe_2_s.png
new file mode 100644
index 0000000000000000000000000000000000000000..da6de4f41a882f59123496cdacfd690825cbede3
Binary files /dev/null and b/src/assets/curves/courbe_2_s.png differ
diff --git a/src/assets/curves/courbe_2_sm.png b/src/assets/curves/courbe_2_sm.png
new file mode 100644
index 0000000000000000000000000000000000000000..ec1f285dc7ea5379a01260c8dde86fbe58fec22a
Binary files /dev/null and b/src/assets/curves/courbe_2_sm.png differ
diff --git a/src/assets/curves/courbe_3_s.png b/src/assets/curves/courbe_3_s.png
new file mode 100644
index 0000000000000000000000000000000000000000..d8acf1bc85d9abe97f6503314b66dda417547f9e
Binary files /dev/null and b/src/assets/curves/courbe_3_s.png differ
diff --git a/src/assets/curves/courbe_3_sm.png b/src/assets/curves/courbe_3_sm.png
new file mode 100644
index 0000000000000000000000000000000000000000..26257f76b61e02992cd681a812c7a8736ce0db0a
Binary files /dev/null and b/src/assets/curves/courbe_3_sm.png differ
diff --git a/src/assets/curves/courbe_4_s.png b/src/assets/curves/courbe_4_s.png
new file mode 100644
index 0000000000000000000000000000000000000000..273aca59986721aa14a1acf44e986d1081afb299
Binary files /dev/null and b/src/assets/curves/courbe_4_s.png differ
diff --git a/src/assets/curves/courbe_4_sm.png b/src/assets/curves/courbe_4_sm.png
new file mode 100644
index 0000000000000000000000000000000000000000..d3d21ca3c27bfcfc6aadc5bd5ac5a8cce4fc77e4
Binary files /dev/null and b/src/assets/curves/courbe_4_sm.png differ
diff --git a/src/assets/main/nuage_icones_s.png b/src/assets/main/nuage_icones_s.png
new file mode 100644
index 0000000000000000000000000000000000000000..9cdf8c3b6e14ec4efac6c904ec911ed30befb1a9
Binary files /dev/null and b/src/assets/main/nuage_icones_s.png differ
diff --git a/src/assets/main/nuage_icones_sm.png b/src/assets/main/nuage_icones_sm.png
new file mode 100644
index 0000000000000000000000000000000000000000..180ce925439bb71e92e44227635880c07c213f3a
Binary files /dev/null and b/src/assets/main/nuage_icones_sm.png differ
diff --git a/src/assets/main/poulpe_ludique_big_s.png b/src/assets/main/poulpe_ludique_big_s.png
new file mode 100644
index 0000000000000000000000000000000000000000..1c79f2a0ca304500d9919322d8537e1bfdb7e666
Binary files /dev/null and b/src/assets/main/poulpe_ludique_big_s.png differ
diff --git a/src/assets/main/poulpe_ludique_version_mobile_s.png b/src/assets/main/poulpe_ludique_version_mobile_s.png
new file mode 100644
index 0000000000000000000000000000000000000000..5186aee5e6d1a97fc91dcce7359d84a6a9efacbd
Binary files /dev/null and b/src/assets/main/poulpe_ludique_version_mobile_s.png differ
diff --git a/src/index.js b/src/index.js
index aa79a957beb4697065b9298e3bdf15f6e76ab852..1c45901b8696e7d4cbd449bf5801b25845d1a271 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,6 +4,7 @@ import './index.scss';
import App from './App';
import reportWebVitals from './reportWebVitals';
+
ReactDOM.render(
<React.StrictMode>
<App />
diff --git a/src/index.scss b/src/index.scss
index bd592cfa3df1d3f1ea5d5084d26cfadaf6e900a8..27dcf08a5812d0396a3c19efd07112d1b3d13c40 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -2,11 +2,13 @@
body {
margin: 0;
- font-family: $primary_font;
+ font-family: $primary_font, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
+
+
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
diff --git a/src/js/components/TopBar/TopBar.js b/src/js/components/TopBar/TopBar.js
index 52f58c5e1fa492468590164f7177783287c7dde6..68e00b9a3d44f6a95bc68d3d4f6997a545e0aa37 100644
--- a/src/js/components/TopBar/TopBar.js
+++ b/src/js/components/TopBar/TopBar.js
@@ -14,6 +14,7 @@ const TopBar = (props) => {
setCurrentSection(Object.fromEntries(newSectionMap.filter(([key, value]) => value)))
}
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.sectionStatus]);
diff --git a/src/js/sections/BottomSection/BottomSection.module.scss b/src/js/sections/BottomSection/BottomSection.module.scss
index ca5298d331dff2cc64b0dbf851d809e1c7dc3b82..7efb2342dab9073c0f35e8d55897ee8f26c55fa6 100644
--- a/src/js/sections/BottomSection/BottomSection.module.scss
+++ b/src/js/sections/BottomSection/BottomSection.module.scss
@@ -3,7 +3,7 @@
@import "../../../style/colors.module";
.BottomSection {
- background-image: url('#{$assetPath}/curves/courbe_4.png'), url('#{$assetPath}/props/bateau.svg'), url('#{$assetPath}/props/algue.svg');
+ background-image: url('#{$assetPath}/curves/courbe_4_s.png'), url('#{$assetPath}/props/bateau.svg'), url('#{$assetPath}/props/algue.svg');
background-repeat: no-repeat;
background-position: bottom, 110% 42%, -5% 55%;
background-size: 100% 50%, 35% 35%, 40% 40%;
@@ -13,15 +13,15 @@
flex-direction: column;
align-items: center;
font-family: $primary_font;
- padding-top: 10%;
+ padding-top: 200px;
justify-content: space-between;
.MiddleBlock {
- padding: 2% 2%;
+ padding: 20px 20px;
background: $primary_beige;
color: $primary_black;
border-radius: 10px;
- max-width: 50vw;
+ max-width: 900px;
display: flex;
flex-direction: column;
@@ -39,7 +39,7 @@
.Comments {
flex-basis: 80%;
- padding-right: 5%;
+ padding-right: 50px;
font-size: 1rem;
line-height: 1.6rem;
@@ -49,15 +49,12 @@
.ButtonContainer {
flex-basis: 20%;
position: center;
- padding-right: 10%;
- margin-top: 5%;
+ padding-right: 20px;
+ margin-top: 50px;
Button {
font-family: $primary_font;
font-size: 1.1rem;
- width: 100%;
- height: 30%;
-
}
}
@@ -138,9 +135,13 @@
@media (max-width: 1024px) {
.BottomSection {
+ background-position: bottom, 110% 42%, -5% 57%;
+ padding-top: 100px;
+
+
.MiddleBlock {
- max-width: 60vw;
+ max-width: 600px;
.Title {
font-size: $mobile_section_subtitle_size;
@@ -175,10 +176,11 @@
.BottomBlock {
bottom: 2%;
+ margin-top: 30vh;
.Logos {
margin-right: 5%;
- max-width: 30%;
+ max-width: 20%;
flex-direction: column;
@@ -189,23 +191,25 @@
p {
max-width: 100%;
+ font-size: 0.7rem;
}
}
.ContactLinks {
- max-width: 40%;
+ flex-basis: 30%;
.BigCaption {
margin-bottom: 10%;
+ font-size: 0.8rem;
}
- Button {
- width: 100%;
-
+ a {
+ font-size: 0.7rem;
}
.SmallCaption {
+ font-size: 0.7rem;
}
}
}
@@ -214,6 +218,7 @@
@media (max-width: 768px) {
.BottomSection {
+ background-image: url('#{$assetPath}/curves/courbe_4_sm.png'), url('#{$assetPath}/props/bateau.svg'), url('#{$assetPath}/props/algue.svg');
background-position: bottom, 105% 48%, -5% 60%;
.MiddleBlock {
@@ -309,6 +314,7 @@
@media (max-width: 425px) {
.BottomSection {
background-position: bottom, 106% 49%, -5% 63%;
+ padding-top: 50px;
.MiddleBlock {
@@ -325,6 +331,8 @@
font-size: 0.6rem;
line-height: 1rem;
+ padding-right: 0;
+
.FirstComment {
@@ -369,7 +377,7 @@
p {
max-width: 100%;
- font-size: 0.6rem;
+ font-size: 0.5rem;
line-height: 1rem;
}
@@ -388,10 +396,11 @@
a {
width: fit-content;
font-size: 0.6rem;
+ line-height: 1.6rem;
}
.SmallCaption {
- font-size: 0.6rem;
+ font-size: 0.5rem;
line-height: 1rem;
max-width: 100%;
}
@@ -480,11 +489,16 @@
}
}
-@media (max-width: 320px) {
- .BottomSection {
- .BottomBlock {
-
- }
- }
-}
+// @media (max-width: 320px) {
+// .BottomSection {
+// .BottomBlock {
+// .ContactLinks {
+// .SmallCaption {
+// font-size: 1rem;
+// line-height: 1rem;
+// }
+// }
+// }
+// }
+// }
diff --git a/src/js/sections/CloudSection/CloudSection.js b/src/js/sections/CloudSection/CloudSection.js
index c6fb9f6b3adda5b7f8619fedd82425804375a1f2..8dd0f8256f07ef0d061dcaaf7236d17e45fe11cb 100644
--- a/src/js/sections/CloudSection/CloudSection.js
+++ b/src/js/sections/CloudSection/CloudSection.js
@@ -1,7 +1,8 @@
import styles from "./CloudSection.module.scss";
import MultiColoredText from "../../components/MultiColoredText/MultiColoredText";
-import cloud from "../../../assets/main/nuage_icones.png";
+import cloud from "../../../assets/main/nuage_icones_s.png";
+import cloudMobile from "../../../assets/main/nuage_icones_sm.png";
import {primaryBlack, primaryBlue, white} from "../../../style/colors.module.scss";
@@ -23,7 +24,10 @@ const CloudSection = ({innerRef}) => {
<MultiColoredText content={upperBlockContent} />
</div>
- <img src={cloud} alt="technologies cloud" className={styles.Cloud}/>
+ <picture>
+ <source media={"(max-width : 425px)"} srcSet={cloudMobile}/>
+ <img src={cloud} alt="octopus" className={styles.Cloud}/>
+ </picture>
<div className={styles.BottomBlock}>
<MultiColoredText content={bottomBlockTitle} />
<p className={styles.Caption}>
diff --git a/src/js/sections/CloudSection/CloudSection.module.scss b/src/js/sections/CloudSection/CloudSection.module.scss
index 45498ff3b858daafca57589048461e8f2e9baed4..bbd487781ddf135c95eaef298fe69904c0ca9afa 100644
--- a/src/js/sections/CloudSection/CloudSection.module.scss
+++ b/src/js/sections/CloudSection/CloudSection.module.scss
@@ -3,35 +3,35 @@
@import "../../../style/colors.module";
.CloudSection {
- background-image: url('#{$assetPath}/curves/courbe_2.png');
+ background-image: url('#{$assetPath}/curves/courbe_2_s.png');
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
- min-height: 100vh;
- vertical-align: center;
+ min-height: auto;
display: flex;
flex-direction: column;
align-items: center;
font-family: $primary_font;
+ padding: 70px 0 100px 0;
.UpperBlock {
- margin-top: 2%;
+ margin-top: 30px;
font-size: $section_title_size;
line-height: $section_title_line_height;
- max-width: 40%;
+ max-width: 650px;
text-align: center;
}
.Cloud {
- margin-top: 2%;
- max-width: 50vw;
- max-height: 50vh;
+ margin-top: 20px;
+ width: 600px;
+ height: 450px;
}
.BottomBlock {
- margin-top: 2%;
- max-width: 35%;
+ margin-top: 20px;
+ max-width: 600px;
font-size: $section_subtitle_size;
line-height: $section_subtitle_line_height;
@@ -39,7 +39,7 @@
margin-top: 20px;
font-size: $section_caption_size;
line-height: $section_caption_line_height;
- max-width: 70%;
+ max-width: 500%;
color: white;
@@ -50,86 +50,77 @@
@media (max-width: 1024px) {
.CloudSection {
- min-height: 70vh;
+ padding: 0 0 0 0;
+
.UpperBlock {
font-size: $mobile_section_title_size;
line-height: $mobile_section_title_line_height;
- max-width: 40%;
- text-align: center;
+ max-width: 400px;
}
.Cloud {
- max-width: 30%;
- max-height: 30%;
+ width: 300px;
+ height: 250px;
}
.BottomBlock {
font-size: $mobile_section_subtitle_size;
line-height: $mobile_section_subtitle_line_height;
- max-width: 40%;
- text-align: center;
+ max-width: 300px;
.Caption {
font-size: $mobile_section_caption_size;
line-height: $mobile_section_caption_line_height;
- max-width: 100%;
}
}
}
}
-@media (max-width: 768px) {
+
+@media (max-width: 425px) {
.CloudSection {
+ background-image: url('#{$assetPath}/curves/courbe_2_sm.png');
- min-height: 70vh;
- padding-top: 4%;
- padding-bottom: 2%;
.UpperBlock {
- text-align: center;
-
+ max-width: 225px;
+ font-size: 1.3rem;
}
-
.Cloud {
- margin-top: 2%;
- max-width: 45%;
- max-height: 25%;
+ width: 300px;
+ height: 220px;
}
.BottomBlock {
- margin-top: 0;
- max-width: 40%;
+ max-width: 190px;
.Caption {
- max-width: 80%;
- margin: 15px auto;
}
}
}
}
-
-@media (max-width: 425px) {
+@media (max-width: 375px) {
.CloudSection {
+
.UpperBlock {
- margin-top: 3%;
- max-width: 55%;
- font-size: 1.3rem;
+ margin-top: 40px;
+
+ font-size: 1.2rem;
+ line-height: 1.5rem;
}
.Cloud {
- margin-top: 2%;
- max-width: 60%;
- max-height: 60%;
+ width: 270px;
+ height: 220px;
}
.BottomBlock {
- margin-top: 0;
- max-width: 40%;
-
+ font-size: 0.8rem;
+ line-height: 1.1rem;
.Caption {
- max-width: 100%;
- margin: 15px auto;
+ font-size: 0.6rem;
+ line-height: 1rem;
}
}
}
@@ -139,26 +130,24 @@
.CloudSection {
.UpperBlock {
- margin-top: 15%;
- max-width: 67%;
- font-size: 1.2rem;
- line-height: 1.5rem;
+ margin-top: 45px;
}
.Cloud {
- max-width: 80%;
- max-height: 100%;
+ width: 200px;
+ height: 220px;
}
.BottomBlock {
- max-width: 40%;
+ max-width: 160px;
font-size: 0.8rem;
+ line-height: 1.1rem;
.Caption {
- max-width: 100%;
- margin: 15px auto;
font-size: 0.6rem;
+ line-height: 1rem;
}
}
}
}
+
diff --git a/src/js/sections/FeatureSection/FeatureSection.module.scss b/src/js/sections/FeatureSection/FeatureSection.module.scss
index 0cd5555d55b6abd233759f20347e9b24998599eb..6142887b036c3f340f81c088385b348e03eb4e6d 100644
--- a/src/js/sections/FeatureSection/FeatureSection.module.scss
+++ b/src/js/sections/FeatureSection/FeatureSection.module.scss
@@ -5,13 +5,11 @@
.FeatureSection {
background: white;
background-size: 100% 100%;
- min-height: 60vh;
-
+ min-height: auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
- flex-wrap: wrap;
font-family: $primary_font;
color: $primary_black;
@@ -25,14 +23,14 @@
.Feature {
display: flex;
flex-direction: row;
- padding: 5% 5% 5% 5%;
+ padding: 30px 30px;
font-size: 2rem;
line-height: 2.4rem;
.Checkmark {
- padding-right: 5%;
- padding-top: 5%;
- font-size: 3vw;
+ padding-right: 30px;
+ padding-top: 30px;
+ font-size: 3rem;
}
}
@@ -43,9 +41,9 @@
// bubble css inspired by https://codingislove.com/css-speech-bubbles/
.Bubble {
- width: 70%;
+ width: 700px;
margin: 50px auto;
- padding: 4% 3%;
+ padding: 30px 30px;
position: relative;
border: solid $primary_black;
font-size: 1.3rem;
@@ -70,7 +68,7 @@
position: relative;
font-size: 1.5rem;
line-height: 2rem;
- padding: 0 0 2% 25%;
+ padding: 0 0 30px 25%;
}
}
}
@@ -87,7 +85,7 @@
.RightSide {
.Bubble {
- width: 90%;
+ width: 450px;
font-size: 0.8rem;
line-height: 1.2rem;
}
@@ -95,6 +93,7 @@
.Author {
font-size: 1rem;
line-height: 1.2rem;
+ margin-top: -20px;
}
}
}
@@ -103,15 +102,21 @@
@media (max-width: 768px) {
.FeatureSection {
- min-height: 50vh;
+
+ .LeftSide {
+ .Feature {
+ padding: 30px 20px 30px 10px;
+
+ }
+ }
.RightSide {
.Bubble {
- width: 90%;
+ width: 400px;
}
.Author {
- padding: 0 0 1% 15%;
+ padding: 0 0 20px 50px;
margin-top: -15px;
}
@@ -121,17 +126,20 @@
@media (max-width: 425px) {
.FeatureSection {
- min-height: 40vh;
flex-direction: column;
- padding: 5% 0 5% 0;
+ padding-bottom: 20px;
+ .LeftSide {
+ padding: 20px 0 20px 10px;
+ }
.RightSide {
.Bubble {
+ width: 380px;
margin: 20px auto;
}
.Author {
- padding: 2% 0 0 15%;
+ padding: 10px 0 0 70px;
margin-top: 0;
}
}
@@ -157,7 +165,7 @@
.RightSide {
.Bubble {
- width: 90%;
+ width: 350px;
font-size: 0.7rem;
line-height: 1rem;
}
@@ -169,3 +177,22 @@
}
}
}
+
+@media (max-width: 320px) {
+ .FeatureSection {
+ .RightSide {
+
+ .Bubble {
+ width: 280px;
+ font-size: 0.7rem;
+ line-height: 1rem;
+ padding: 20px 20px;
+
+ }
+
+ .Author {
+ padding: 10px 0 0 30px;
+ }
+ }
+ }
+}
diff --git a/src/js/sections/LandingSection/LandingSection.module.scss b/src/js/sections/LandingSection/LandingSection.module.scss
index 8294b0d8fdbb7c199d930e25c1cea86910e6877a..66d4f7735fb647839931ee527092e5e24e6ce3f7 100644
--- a/src/js/sections/LandingSection/LandingSection.module.scss
+++ b/src/js/sections/LandingSection/LandingSection.module.scss
@@ -3,23 +3,22 @@
@import "../../../style/colors.module";
.LandingSection {
- background-image: url('#{$assetPath}/curves/courbe_1.png');
+ background-image: url('#{$assetPath}/curves/courbe_1_s.png');
background-repeat: no-repeat;
- background-position: center;
background-size: 100% 100%;
height: auto;
- padding: 20vh 0 25vh 0;
+ padding: 170px 0 270px 0;
display: flex;
flex-direction: row;
align-items: center;
- justify-content: left;
+ justify-content: center;
.LeftSide {
- flex-basis: 50%;
+ flex-basis: 20%;
.Octopus {
- width: 55vw;
- height: 55vh;
+ width: 500px;
+ height: 450px;
}
}
@@ -28,7 +27,7 @@
font-family: $primary_font;
vertical-align: middle;
flex-basis: 40%;
- margin-left: -15vw;
+ margin-left: -40px;
.Title {
font-size: 6.5rem;
@@ -46,7 +45,7 @@
@media (max-width: 1440px) {
.LandingSection {
.RightSide {
- margin-left: -10vw;
+ margin-left: -20px;
}
}
}
@@ -55,12 +54,15 @@
.LandingSection {
+ padding: 150px 0 200px 0;
+
+
.LeftSide {
- flex-basis: 50%;
+ flex-basis: 35%;
.Octopus {
- width: 40vw;
- height: 45vh;
+ width: 300px;
+ height: 350px;
}
}
@@ -69,7 +71,7 @@
font-family: $primary_font;
vertical-align: middle;
flex-basis: 40%;
- margin-left: -15vw;
+ margin-left: 0;
.Title {
font-size: 5rem;
@@ -90,7 +92,7 @@
.RightSide {
- margin-left: -20vw;
+ margin-left: 0;
}
}
@@ -100,9 +102,9 @@
.LandingSection {
+ background-image: url('#{$assetPath}/curves/courbe_1_sm.png');
flex-direction: column;
-
.RightSide {
margin-left: 0;
}
@@ -112,17 +114,19 @@
@media (max-width: 425px) {
.LandingSection {
- padding: 8vh 0 20vh 0;
+ padding: 50px 0 170px 0;
.LeftSide {
.Octopus {
- width: 55vw;
- height: 45vh;
+ width: 200px;
+ height: 400px;
}
}
.RightSide {
+ margin-top: -40px;
+
.Title {
font-size: 3rem;
.Caption {
@@ -141,12 +145,10 @@
.LeftSide {
.Octopus {
- width: 55vw;
- height: 43vh;
+
}
}
.RightSide {
- margin-top: -20px;
.Title {
font-size: 2.3rem;
.Caption {
diff --git a/src/js/sections/OctopusSection/OctopusSection.js b/src/js/sections/OctopusSection/OctopusSection.js
index 58a32229266458f8aabbf0f43e49a80965da2e83..f219d273a35f535a5512c6c3bad01cddabacd018 100644
--- a/src/js/sections/OctopusSection/OctopusSection.js
+++ b/src/js/sections/OctopusSection/OctopusSection.js
@@ -1,7 +1,7 @@
import styles from "./OctopusSection.module.scss";
-import octopusImageBig from "../../../assets/main/poulpe_ludique_big.png";
-import octopusImageMobile from "../../../assets/main/poulpe_ludique_version_mobile.png";
+import octopusImageBig from "../../../assets/main/poulpe_ludique_big_s.png";
+import octopusImageMobile from "../../../assets/main/poulpe_ludique_version_mobile_s.png";
const OctopusSection = ({innerRef}) => {
diff --git a/src/js/sections/OctopusSection/OctopusSection.module.scss b/src/js/sections/OctopusSection/OctopusSection.module.scss
index 8139eba271183fb7fa571e396f72a9b4056b463d..69369e4be17fa2050f8fb579253e10fdb3889706 100644
--- a/src/js/sections/OctopusSection/OctopusSection.module.scss
+++ b/src/js/sections/OctopusSection/OctopusSection.module.scss
@@ -3,13 +3,23 @@
@import "../../../style/colors.module";
.OctopusSection {
- background-image: url('#{$assetPath}/curves/courbe_3.png');
+ background-image: url('#{$assetPath}/curves/courbe_3_s.png');
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
+ display: flex;
+ align-items: center;
+ align-content: center;
+ justify-content: center;
.OctopusImage {
max-width: 100%;
- max-height: 90%;
+ max-height: 100%;
+ }
+}
+
+@media (max-width: 768px) {
+ .OctopusSection {
+ background-image: url('#{$assetPath}/curves/courbe_3_sm.png');
}
}
diff --git a/src/js/sections/StatsSection/StatsSection.module.scss b/src/js/sections/StatsSection/StatsSection.module.scss
index 47ede09b06783a92ddfd1b77566768dfe6df41ef..756e8a69962258260edfbf2d06bc163b288a36ad 100644
--- a/src/js/sections/StatsSection/StatsSection.module.scss
+++ b/src/js/sections/StatsSection/StatsSection.module.scss
@@ -11,20 +11,18 @@
font-family: $primary_font;
- min-height: 90vh;
+ min-height: auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
- flex-wrap: wrap;
- padding-bottom: 20%;
- padding-top: 10%;
+ padding: 100px 0 13% 0;
.LeftSide {
vertical-align: middle;
text-align: left;
- max-width: 40%;
+ max-width: 600px;
flex-basis: 30%;
.Title {
@@ -36,8 +34,7 @@
font-size: $section_caption_size;
line-height: $section_caption_line_height;
color: white;
- margin-top: 5%;
- max-width: 80%;
+ margin-top: 20px;
}
}
@@ -46,30 +43,21 @@
flex-basis: 30%;
.NotesImage {
- max-width: 60vw;
- max-height: 60vh;
+ width: 800px;
+ height: 400px;
}
}
}
-@media (max-width: 1200px) {
- .StatsSection {
- .RightSide {
- .NotesImage {
- width: 45vw;
- height: 35vh;
- }
- }
- }
-}
@media (max-width: 1024px) {
.StatsSection {
- min-height: 70vh;
.LeftSide {
+ max-width: 450px;
+
.Title {
font-size: $mobile_section_title_size;
line-height: $mobile_section_title_line_height;
@@ -78,9 +66,6 @@
.Caption {
font-size: $mobile_section_caption_size;
line-height: $mobile_section_caption_line_height;
- color: white;
- margin-top: 5%;
- max-width: 80%;
}
}
@@ -89,38 +74,27 @@
flex-basis: 30%;
.NotesImage {
- max-width: 60vw;
- max-height: 60vh;
+ width: 550px;
+ height: 300px;
}
}
}
}
-//@media (max-width: 992px) {
-// .StatsSection {
-// min-height: 90vh;
-//
-// }
-//}
-
@media (max-width: 768px) {
.StatsSection {
- min-height: 70vh;
flex-direction: column-reverse;
- padding-bottom: 20%;
- padding-top: 0;
+ padding-bottom: 23%;
position: relative;
.LeftSide {
vertical-align: middle;
text-align: left;
- max-width: 80%;
- margin-top: 5%;
-
-
+ margin-top: 30px;
+ max-width: 600px;
.Caption {
position: absolute;
@@ -137,8 +111,8 @@
.RightSide {
.NotesImage {
- width: 100%;
- max-height: 30vh;
+ width: 600px;
+ height: 300px;
}
}
@@ -149,15 +123,22 @@
@media (max-width: 425px) {
.StatsSection {
- min-height: 50vh;
+ padding-top: 50px;
+ padding-bottom: 35%;
+ justify-content: center;
.RightSide {
.NotesImage {
- width: 80vw;
- height: 20vh;
+ width: 380px;
+ height: 200px;
}
}
.LeftSide {
+
+ .Title {
+ max-width: 300px;
+ }
+
.Caption {
left: 37%;
right: 5%;
@@ -170,30 +151,144 @@
}
}
+// @media (max-width: 425px) {
+// .StatsSection {
+
+// .RightSide {
+// .NotesImage {
+// width: 300px;
+// height: 150px;
+// }
+// }
+// .LeftSide {
+// .Title {
+// max-width: 300px;
+// font-size: 1.5rem;
+// line-height: 1.7rem;
+// }
+
+// .Caption {
+// font-size: 0.6rem;
+// line-height: 1rem;
+// }
+// }
+// }
+// }
+
+
+
+@media (max-width: 375px) {
+ .StatsSection {
+
+ .RightSide {
+ .NotesImage {
+ width: 280px;
+ height: 150px;
+ }
+ }
+ .LeftSide {
+ .Title {
+ max-width: 280px;
+ }
+
+ .Caption {
+ left: 39%;
+ right: 5%;
+ bottom: 8%;
+ }
+ }
+ }
+}
+
+@media (max-width: 320px) {
+ .StatsSection {
+
+ .RightSide {
+ .NotesImage {
+ width: 280px;
+ height: 150px;
+ }
+ }
+ .LeftSide {
+ .Title {
+ max-width: 250px;
+ }
+
+ .Caption {
+ left: 39%;
+ right: 5%;
+ bottom: 8%;
+ }
+ }
+ }
+}
+
@media (max-width: 375px) {
.StatsSection {
- min-height: 50vh;
.RightSide {
.NotesImage {
- width: 90vw;
- height: 20vh;
+ width: 300px;
+ height: 150px;
}
}
.LeftSide {
.Title {
+ max-width: 300px;
font-size: 1.5rem;
line-height: 1.7rem;
}
.Caption {
- left: 37%;
- right: 5%;
- bottom: 10%;
- max-width: 55%;
font-size: 0.6rem;
line-height: 1rem;
}
}
}
+}
+
+@media (max-width: 375px) {
+ .StatsSection {
+
+ .RightSide {
+ .NotesImage {
+ width: 280px;
+ height: 150px;
+ }
+ }
+ .LeftSide {
+ .Title {
+ max-width: 280px;
+ }
+
+ .Caption {
+ left: 39%;
+ right: 5%;
+ bottom: 8%;
+ }
+ }
+ }
+}
+
+@media (max-width: 320px) {
+ .StatsSection {
+
+ .RightSide {
+ .NotesImage {
+ width: 280px;
+ height: 150px;
+ }
+ }
+ .LeftSide {
+ .Title {
+ max-width: 250px;
+ }
+
+ .Caption {
+ left: 39%;
+ right: 5%;
+ bottom: 8%;
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/src/js/sections/TowerSection/TowerSection.module.scss b/src/js/sections/TowerSection/TowerSection.module.scss
index 5ea45b62d198e0a08878080de597099cf157d3eb..27945b887cf9bb11fd610f0059cb6855c9727412 100644
--- a/src/js/sections/TowerSection/TowerSection.module.scss
+++ b/src/js/sections/TowerSection/TowerSection.module.scss
@@ -10,21 +10,20 @@
flex-direction: row;
align-items: center;
justify-content: center;
- height: auto;
+ min-height: auto;
color: $primary_black;
font-family: $primary_font;
- padding: 5vh 0 5vh 0;
+ padding: 100px 0 100px 0;
.LeftSide {
flex-basis: 30%;
.TowerImage {
- max-width: 60vw;
- max-height: 70vh;
+ width: 700px;
+ height: 700px;
}
}
.RightSide {
-
vertical-align: middle;
flex-basis: 30%;
text-align: left;
@@ -39,7 +38,7 @@
.Caption {
font-size: $section_caption_size;
line-height: $section_caption_line_height;
- margin-top: 5%;
+ margin-top: 30px;
color: white;
}
}
@@ -47,40 +46,39 @@
}
-@media (max-width: 1440px) {
- .TowerSection {
- .LeftSide {
- flex-basis: 30%;
- .TowerImage {
- max-width: 90%;
- max-height: 90%;
- }
- }
-
- .RightSide {
- flex-basis: 30%;
- .Title {
- font-size: $section_title_size;
- line-height: $section_title_line_height;
- }
-
- .Caption {
- max-width: 80%;
- font-size: $section_caption_size;
- line-height: $section_caption_line_height;
-
- }
- }
- }
-}
+//@media (max-width: 1440px) {
+// .TowerSection {
+// .LeftSide {
+// flex-basis: 30%;
+// .TowerImage {
+// }
+// }
+//
+// .RightSide {
+// flex-basis: 30%;
+// .Title {
+// font-size: $section_title_size;
+// line-height: $section_title_line_height;
+// }
+//
+// .Caption {
+// font-size: $section_caption_size;
+// line-height: $section_caption_line_height;
+//
+// }
+// }
+// }
+//}
@media (max-width: 1024px) {
.TowerSection {
+ padding: 50px 0 50px 0;
+
.LeftSide {
- flex-basis: 30%;
+ flex-basis: 20%;
.TowerImage {
- max-width: 90%;
- max-height: 90%;
+ width: 500px;
+ height: 450px;
}
}
@@ -92,7 +90,6 @@
}
.Caption {
- max-width: 80%;
font-size: $mobile_section_caption_size;
line-height: $mobile_section_caption_line_height;
@@ -105,28 +102,20 @@
@media (max-width: 768px) {
.TowerSection {
flex-direction: column;
- text-align: center;
- min-height: 70vh;
- background-position: 95% 0;
- padding-top: 3%;
- padding-bottom: 3%;
-
.LeftSide {
.TowerImage {
- width: 70vw;
- height: 40vh;
+ width: 450px;
+ height: 420px;
}
}
.RightSide {
- padding-top: 5%;
- max-width: 70%;
- text-align: center;
+ padding-top: 20px;
+ max-width: 470px;
+ text-align: left;
.Caption {
- padding-top: 4%;
- max-width: 60%;
- margin: 0 auto;
+ max-width: 370px;
}
}
}
@@ -135,16 +124,24 @@
@media (max-width: 425px) {
.TowerSection {
- padding: 5% 0 5% 0;
+ padding: 30px 0 30px 0;
+
+ .LeftSide {
+ .TowerImage {
+ width: 400px;
+ height: 380px;
+ }
+ }
+
.RightSide {
- max-width: 80%;
- text-align: center;
+ text-align: left;
+ max-width: 360px;
+
.Title {
- font-size: 1.1rem;
+ font-size: 1.4rem;
}
.Caption {
- max-width: 100%;
}
}
}
@@ -153,20 +150,43 @@
@media (max-width: 375px) {
.TowerSection {
- padding: 2% 0 5% 0;
+
+ .LeftSide {
+ .TowerImage {
+ width: 320px;
+ height: 320px;
+ }
+ }
+
.RightSide {
- padding-top: 0;
- max-width: 80%;
+ max-width: 300px;
.Title {
- font-size: 1rem;
+ font-size: 1.2rem;
line-height: 1.5rem;
}
.Caption {
- max-width: 90%;
font-size: 0.7rem;
}
}
}
+}
+
+@media (max-width: 375px) {
+ .TowerSection {
+
+ .LeftSide {
+ .TowerImage {
+ width: 320px;
+ height: 320px;
+ }
+ }
+
+ .RightSide {
+ max-width: 250px;
+
+ }
+ }
+
}
\ No newline at end of file
diff --git a/src/js/sections/VscodeSection/VscodeSection.module.scss b/src/js/sections/VscodeSection/VscodeSection.module.scss
index 6c266db23cac99dbeb8577599639ef9fe6d0046d..6bf694c7e4faf9e8b6e3a45feb536f0773f309e8 100644
--- a/src/js/sections/VscodeSection/VscodeSection.module.scss
+++ b/src/js/sections/VscodeSection/VscodeSection.module.scss
@@ -12,16 +12,15 @@
flex-direction: row;
align-items: center;
justify-content: center;
- flex-wrap: wrap;
- min-height: 100vh;
- padding: 2% 0 2% 0;
+ height: auto;
+ padding: 90px 0 90px 0;
.LeftSide {
padding: 1% 1%;
.VscodeImage {
- width: 50vw;
- height: 55vh;
+ width: 900px;
+ height: 500px;
}
}
@@ -29,21 +28,20 @@
color: $primary_black;
font-family: $primary_font;
text-align: left;
- padding: 1% 3%;
+ padding: 90px 60px;
flex-basis: 30%;
- max-width: 60%;
+ max-width: 600px;
.Title {
font-size: $section_title_size;
line-height: $section_title_line_height;
-
-
}
+
.Caption {
font-size: $section_caption_size;
line-height: $section_caption_line_height;
- margin-top: 5%;
+ margin-top: 20px;
color: white;
}
}
@@ -52,17 +50,18 @@
@media (max-width: 1024px) {
.VscodeSection {
- min-height: 70vh;
+ padding: 50px 0 50px 0;
.LeftSide {
.VscodeImage {
- margin-top: 2%;
- width: 50vw;
- height: 35vh;
+ width: 600px;
+ height: 350px;
}
}
.RightSide {
+ padding: 90px 30px;
+
.Title {
font-size: $mobile_section_title_size;
@@ -73,7 +72,7 @@
.Caption {
font-size: $mobile_section_caption_size;
line-height: $mobile_section_caption_line_height;
- margin-top: 5%;
+ margin-top: 20px;
color: white;
}
}
@@ -85,66 +84,53 @@
@media (max-width: 768px) {
.VscodeSection {
flex-direction: column;
- text-align: center;
- min-height: 70vh;
- background-position: 95% 0;
- padding-top: 2%;
- padding-bottom: 2%;
+ background-position: 97% 0;
.LeftSide {
.VscodeImage {
- width: 70vw;
- height: 40vh;
+ width: 600px;
+ height: 350px;
}
}
.RightSide {
padding: 5% 0 0 0;
-
- .Caption {
- max-width: 70%;
- margin: 4% auto 0 auto;
- }
+ max-width: 400px;
}
}
}
@media (max-width: 425px) {
.VscodeSection {
+ padding: 50px 0 50px 0;
+
.LeftSide {
.VscodeImage {
- margin-top: 2%;
- width: 70vw;
- height: 30vh;
+ width: 350px;
+ height: 250px;
}
}
.RightSide {
- .Caption {
- max-width: 100%;
- }
+ padding: 20px 40px 0 40px;
}
}
}
@media (max-width: 375px) {
.VscodeSection {
- min-height: 50vh;
- background-position: 96% 0;
- padding: 7% 0 10% 0;
.LeftSide {
.VscodeImage {
- margin-top: 2%;
- width: 70vw;
- height: 30vh;
+ width: 320px;
+ height: 220px;
}
}
.RightSide {
-
+ padding: 20px 40px 0 40px;
.Title {
font-size: 1.5rem;
line-height: 1.7rem;
@@ -162,9 +148,8 @@
.LeftSide {
.VscodeImage {
- margin-top: 0;
- width: 70vw;
- height: 20vh;
+ width: 290px;
+ height: 220px;
}
}
}
diff --git a/src/style/fonts.module.scss b/src/style/fonts.module.scss
index e9123a49d7123d25553b958390dc8cac0c2b624a..f6ee2cc723001d3d96fde8db0143e373408cf3f3 100644
--- a/src/style/fonts.module.scss
+++ b/src/style/fonts.module.scss
@@ -6,7 +6,7 @@ $primary_font_weight: 800;
src: url('./hiragino-kaku-gothic-stdn-w8.otf');
font-weight: $primary_font_weight;
font-style: normal;
- }
+}
$primary_font: primaryFont;