From 638fb53cf76992efe2ccf46eceef6052f52189a2 Mon Sep 17 00:00:00 2001 From: HaoXu <87160664+AugustRushG@users.noreply.github.com> Date: Mon, 7 Nov 2022 11:09:04 +1100 Subject: [PATCH] More device accessiable --- start_page/src/Header.js | 8 +- start_page/src/index.css | 191 +++++++++---- start_page/src/start_page/StartPage.css | 348 +++++++++++++++++++++++- 3 files changed, 480 insertions(+), 67 deletions(-) diff --git a/start_page/src/Header.js b/start_page/src/Header.js index 62d1ec9..b690b88 100644 --- a/start_page/src/Header.js +++ b/start_page/src/Header.js @@ -55,7 +55,7 @@ const Header = () => {

RecordIt

- {isMobileOrTablet && !auth?.user && !dashboardRego() && + {isMobileOrTablet && !auth?.user && !dashboardRego() &&
@@ -116,13 +116,13 @@ const Header = () => {
} - {isLaptop && dashboardRego() && + {isLaptop && !isMobileOrTablet && dashboardRego() && <> } - {isLaptop &&!auth?.user && !dashboardRego() && + {isLaptop && !isMobileOrTablet &&!auth?.user && !dashboardRego() && <> @@ -130,7 +130,7 @@ const Header = () => { } - {isLaptop &&auth?.user && !dashboardRego() && + {isLaptop && !isMobileOrTablet &&auth?.user && !dashboardRego() && <> diff --git a/start_page/src/index.css b/start_page/src/index.css index 938bca1..a6d737b 100644 --- a/start_page/src/index.css +++ b/start_page/src/index.css @@ -142,6 +142,63 @@ button:active { } +@media screen + and (min-device-width: 2560px) + and (-webkit-min-device-pixel-ratio: 1) { + + .Header h1{ + position: relative; + left: 2vw; + top: 1vh; + + } + + #LogIn,#SignUp,#About{ + + position: relative; + + top: -6vh; + height: 5vh; + + + } + + #LogOut{ + position: relative; + top: -6vh; + left: 90vw; + height: 5vh; + + } + + + + +} + +@media screen +and (min-device-width: 1200px) +and (max-device-width: 1600px) +and (-webkit-min-device-pixel-ratio: 1){ + + #LogIn,#SignUp,#About{ + + width: 6vw; + + + } + + #LogOut{ + + width: 6vw; + + } + + + +} + + @media all and (min-width:1024px) { @@ -197,68 +254,86 @@ button:active { } -@media all and (max-width:400px){ - .Header h1{ - - position: absolute; - left: 2vw; - top: 1vh; + +@media only screen + and (min-device-width: 320px) + and (max-device-width: 480px) + and (-webkit-min-device-pixel-ratio: 2) { + + .Header h1{ - font-family: 'Allerta Stencil', sans-serif; - font-weight: 400; - font-size: 150%; - line-height: 61px; + position: absolute; + left: 2vw; + top: 1vh; + + font-family: 'Allerta Stencil', sans-serif; + font-weight: 400; + font-size: 8vw; + line-height: 61px; + + color: #000000; - color: #000000; + } - } - - .SignUp{ - - position: absolute; - width: 8vw; - right: 20.5vw; - top: 2.5vh; - margin-left: 1vw; - - - } - - .LogIn,.Account{ - - position: absolute; - - width: 8vw; - - right: 30.5vw; - top: 2.5vh; - margin-left: 2vw; - - } - - .About{ - position: absolute; - width: 8vw; - right: 4vw; - top: 2.5vh; - margin-left: 5vw; - } - - #LogOut{ - position: absolute; - width: fit-content; - height: 4.5vh; - right: 14vw; - top: 2.5vh; - margin: auto; + .SignUp{ + + position: absolute; + width: 8vw; + right: 20.5vw; + top: 2.5vh; + margin-left: 1vw; + + + } + + .LogIn,.Account{ + + position: absolute; + + width: 8vw; + + right: 30.5vw; + top: 2.5vh; + margin-left: 2vw; + + } + + .About{ + position: absolute; + width: 8vw; + right: 4vw; + top: 2.5vh; + margin-left: 5vw; + } + + #LogOut{ + position: absolute; + width: fit-content; + height: 4.5vh; + right: 14vw; + top: 2.5vh; + margin: auto; + + font-family: 'Inter', sans-serif; + font-size: 100%; + color: #000000; + text-align: center; + + } + + .dropDownContainer{ + + position: absolute; + left: 75vw; + top: 2.5vh; + + + width: 5vw; + height: 9vh; + + } + - font-family: 'Inter', sans-serif; - font-size: 100%; - color: #000000; - text-align: center; - - } - } diff --git a/start_page/src/start_page/StartPage.css b/start_page/src/start_page/StartPage.css index 912f14a..11cc2d9 100644 --- a/start_page/src/start_page/StartPage.css +++ b/start_page/src/start_page/StartPage.css @@ -211,6 +211,149 @@ br{ top: 8vh; } +@media screen +and (min-device-width: 1200px) +and (max-device-width: 1600px) +and (-webkit-min-device-pixel-ratio: 1){ + + #welcome{ + font-size: 3.5vw; + + } + + #start{ + + position: absolute; + top:35vh; + left: 4vw; + + } + + .RegisterNow{ + position: absolute; + width: 10vw; + height: 5vh; + top: 42vh; + left: 14vw; + + font-family: 'Inter', sans-serif; + font-weight: 700; + text-align: center; + + color: #000000; + + } + + + .RegisterNow>Button{ + width: 100%; + height: 100%; + font-size: 1.2vw; + } + + #imgcontainers{ + position: absolute; + top: 3vh; + width: 3vw; + height: 5vh; + + } + + #stitle{ + font-size: 2vw; + position: relative; + top: 8vh; + } + + #small { + + + font-size: 1.5vw; + + } + + + + + + + + +} + + +@media screen + and (min-device-width: 2560px) + and (-webkit-min-device-pixel-ratio: 1) { + + #imgcontainers{ + width: 4vw; + height: 8vh; + position: absolute; + left: 14.8vw; + + } + + #small { + + position: relative; + top: 8vh; + + font-size: 1.5vw; + + + width: 20vw; + text-align: center; + + + + + } + + #stitle{ + + top: 9vh; + } + + .RegisterNow>Button{ + font-size: 1.3vw; + } + + + #start{ + + position: absolute; + top:32vh; + left: 4vw; + width: 30vw; + + + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-size: 2vw; + line-height: 36px; + text-align: center; + + color: #000000; + + } + + #imageContainer{ + position: absolute; + + left: 35vw; + top: 3vh; + height: 50vh; + width: 30vw; + } + + + + +} + + @@ -330,8 +473,13 @@ br{ -@media all and (max-width:450px){ +@media only screen + and (min-device-width: 375px) + and (max-device-width: 667px) + and (-webkit-min-device-pixel-ratio: 2) { + + .MainSection { position: relative; @@ -376,14 +524,204 @@ br{ position: absolute; top:32vh; + left: 10vw; + width: 50vw; + + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-size: 4vw; + + text-align: center; + + color: #000000; + + } + + .RegisterNow{ + + position: absolute; + width: 20vw; + height: 5vh; + top: 38vh; + left: 25vw; + + font-family: 'Inter', sans-serif; + font-weight: 700; + text-align: center; + + color: #000000; + + } + + .RegisterNow>Button{ + + width: 100%; + height: 100%; + font-size: 70%; + } + + .BottomSection{ + + position: relative; + width: 100%; + min-height: 40vh; + height: fit-content; + top: 30vh; + display: flex; + justify-content: space-evenly; + background: #FDF4C9; + } + + .bottomh1{ + left: 0; + + position: absolute; + width: 100vw; + height: 33.33%; + } + .bottomh2{ + + left: 0; + top: 33.33%; + position: absolute; + width: 100vw; + height: 33.33%; + } + .bottomh3{ + + left: 0; + top: 66.33%; + position: absolute; + width: 100vw; + height: 33.33%; + } + + #imgcontainers{ + + width: 10vw; + height: 5vh; + left: 4vw; + + position: absolute; + top: 3vh; + } + + + #small { + + position: absolute; + + top: 4vh; + left: 15vw; + margin: auto; + height: fit-content; + + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + + font-size: 0.8rem; + line-height: 1.5em; + + width: 80vw; + text-align: center; + + color: #000000; + + + } + + #stitle{ + + width: 100%; + font-size: 1.0rem; + font-family: 'Inter'; + font-style: normal; + font-weight: 600; + text-align: center; + position: absolute; + + top: 0vh; + } + + .Footer{ + + position: relative; + width: 100%; + height: 3vh; + top: 30vh; + background: #FFFFFF; + + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-size: 15px; + line-height: 18px; + text-align: center; + + } + + +} + +@media only screen + and (min-device-width: 375px) + and (max-device-width: 812px) + and (-webkit-min-device-pixel-ratio: 3) { + + + .MainSection { + + position: relative; + width: 70vw; + height: 45vh; + left: 14vw; + top: 20vh; + + display: block; + + background: #FDF4C9; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + border-radius: 20px; + } + + #welcome{ + + position: absolute; + top: 4vh; left: 15vw; width: 40vw; + height: fit-content; + font-family: 'Allerta Stencil', sans-serif; + font-weight: 800; + font-size: 5vw; + text-align: center; + color: #000000; + } + + #imageContainer{ + + position: absolute; + left: 15vw; + top: 12vh; + height: 20vh; + width: 40vw; + } + + + #start{ + + + position: absolute; + top:32vh; + left: 10vw; + width: 50vw; font-family: 'Inter'; font-style: normal; font-weight: 400; font-size: 4vw; - line-height: 36px; text-align: center; color: #000000; @@ -395,7 +733,7 @@ br{ position: absolute; width: 20vw; height: 5vh; - top: 36vh; + top: 38vh; left: 25vw; font-family: 'Inter', sans-serif; @@ -453,7 +791,7 @@ br{ width: 10vw; height: 5vh; - left: 1vw; + left: 3vw; position: absolute; top: 3vh; @@ -465,7 +803,7 @@ br{ position: absolute; top: 4vh; - left: 13vw; + left: 15vw; margin: auto; height: fit-content;