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/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..bc45c4db227dc612446a8d090867ccc8ac928764 100644 --- a/src/js/sections/BottomSection/BottomSection.module.scss +++ b/src/js/sections/BottomSection/BottomSection.module.scss @@ -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; } } } @@ -309,6 +313,7 @@ @media (max-width: 425px) { .BottomSection { background-position: bottom, 106% 49%, -5% 63%; + padding-top: 50px; .MiddleBlock { @@ -325,6 +330,8 @@ font-size: 0.6rem; line-height: 1rem; + padding-right: 0; + .FirstComment { diff --git a/src/js/sections/CloudSection/CloudSection.module.scss b/src/js/sections/CloudSection/CloudSection.module.scss index 45498ff3b858daafca57589048461e8f2e9baed4..9a971bdc3029585e945d76d741cc99bf90323c38 100644 --- a/src/js/sections/CloudSection/CloudSection.module.scss +++ b/src/js/sections/CloudSection/CloudSection.module.scss @@ -7,31 +7,31 @@ 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: 100px 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,75 @@ @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) { - .CloudSection { - min-height: 70vh; - padding-top: 4%; - padding-bottom: 2%; +@media (max-width: 425px) { + .CloudSection { .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 +128,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..fd3137c5df338b36c1349768f224903c3d3c1d08 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,19 @@ @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 { margin: 20px auto; } .Author { - padding: 2% 0 0 15%; + padding: 10px 0 0 70px; margin-top: 0; } } @@ -157,7 +164,7 @@ .RightSide { .Bubble { - width: 90%; + width: 350px; font-size: 0.7rem; line-height: 1rem; } @@ -169,3 +176,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..d55929523d076ccff3311b55913e3b7fcd7f8ecc 100644 --- a/src/js/sections/LandingSection/LandingSection.module.scss +++ b/src/js/sections/LandingSection/LandingSection.module.scss @@ -5,21 +5,20 @@ .LandingSection { background-image: url('#{$assetPath}/curves/courbe_1.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; } } @@ -102,7 +104,6 @@ flex-direction: column; - .RightSide { margin-left: 0; } @@ -112,17 +113,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 +144,10 @@ .LeftSide { .Octopus { - width: 55vw; - height: 43vh; + } } .RightSide { - margin-top: -20px; .Title { font-size: 2.3rem; .Caption { diff --git a/src/js/sections/StatsSection/StatsSection.module.scss b/src/js/sections/StatsSection/StatsSection.module.scss index 47ede09b06783a92ddfd1b77566768dfe6df41ef..e9beef68bf602fda70e5a2879619b30a7edb5792 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: 390px; + height: 200px; } } .LeftSide { + + .Title { + max-width: 390px; + } + .Caption { left: 37%; right: 5%; @@ -172,28 +153,94 @@ @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: 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%; + } + } + } } \ 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;