From 24be87e509c74051047e9a4756dcc1df393802e8 Mon Sep 17 00:00:00 2001 From: Siddheya Kulkarni Date: Wed, 26 Jun 2024 00:44:13 +0530 Subject: [PATCH] added responsiveness to Team page --- package-lock.json | 25 ++ package.json | 5 + website3.0/stylesheets/footer.css | 21 ++ website3.0/stylesheets/header.css | 3 + website3.0/stylesheets/teams.css | 484 +++++++++++++++++++++++++++++- 5 files changed, 536 insertions(+), 2 deletions(-) create mode 100644 package-lock.json create mode 100644 package.json diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..8b90f52f --- /dev/null +++ b/package-lock.json @@ -0,0 +1,25 @@ +{ + "name": "HelpOps-Hub", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "dependencies": { + "@splidejs/react-splide": "^0.7.12" + } + }, + "node_modules/@splidejs/react-splide": { + "version": "0.7.12", + "resolved": "https://registry.npmjs.org/@splidejs/react-splide/-/react-splide-0.7.12.tgz", + "integrity": "sha512-UfXH+j47jsMc4x5HA/aOwuuHPqn6y9+ZTNYPWDRD8iLKvIVMZlzq2unjUEvyDAU+TTVPZOXkG2Ojeoz0P4AkZw==", + "dependencies": { + "@splidejs/splide": "^4.1.3" + } + }, + "node_modules/@splidejs/splide": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/@splidejs/splide/-/splide-4.1.4.tgz", + "integrity": "sha512-5I30evTJcAJQXt6vJ26g2xEkG+l1nXcpEw4xpKh0/FWQ8ozmAeTbtniVtVmz2sH1Es3vgfC4SS8B2X4o5JMptA==" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 00000000..85fe5987 --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "@splidejs/react-splide": "^0.7.12" + } +} diff --git a/website3.0/stylesheets/footer.css b/website3.0/stylesheets/footer.css index 8a34cf85..addc8c69 100644 --- a/website3.0/stylesheets/footer.css +++ b/website3.0/stylesheets/footer.css @@ -42,4 +42,25 @@ } .font a{ text-decoration: underline; +} + +/* Mobile-S (325px) */ +@media screen and (max-width: 320px){ + .footer{ + margin-left: 70px; + } +} + +/* Mobile-M (375px) */ +@media screen and (min-width: 321px) and (max-width: 375px) { + .footer{ + margin-left: 65px; + } +} + +/* Mobile-L (425px) */ +@media screen and (min-width: 376px) and (max-width: 425px) { + .footer{ + margin-left: 35px; + } } \ No newline at end of file diff --git a/website3.0/stylesheets/header.css b/website3.0/stylesheets/header.css index 08f7289f..1b05e9e7 100644 --- a/website3.0/stylesheets/header.css +++ b/website3.0/stylesheets/header.css @@ -234,6 +234,9 @@ nav { top: 10px; left: 3% !important; } + .toggle-switch{ + margin-top: 18px; + } nav { gap: 5% !important; } diff --git a/website3.0/stylesheets/teams.css b/website3.0/stylesheets/teams.css index faacaded..bc28acee 100644 --- a/website3.0/stylesheets/teams.css +++ b/website3.0/stylesheets/teams.css @@ -14,6 +14,7 @@ body { font-family: cursive; font-size: 24px; margin-top: 160px; + text-align: center; } .team-description { @@ -22,6 +23,68 @@ body { margin: auto; margin-top: 20px; margin-bottom: 20px; + line-height: 1.5; + /* padding: 0 20px; */ +} + +/* Media queries for responsiveness of Meet our Team section */ + +/* Tablet and smaller desktop screens */ +@media screen and (max-width: 1024px) { + #ourteam { + font-size: 22px; + margin-top: 180px; + margin-left: 90px; + } + + .team-description { + width: 90vw; + font-size: 18px; + margin-left: 80px; + } +} + +/* Mobile-L (425px) */ +@media screen and (max-width: 425px) { + #ourteam { + font-size: 20px; + margin-top: 180px; + margin-left: 150px; + } + + .team-description { + width: 90vw; + font-size: 16px; + margin-left: 90px; + } +} + +/* Mobile-M (375px) */ +@media screen and (max-width: 375px) { + #ourteam { + font-size: 18px; + margin-top: 180px; + margin-left: 190px; + } + + .team-description { + font-size: 14px; + margin-left: 100px; + } +} + +/* Mobile-S (320px) */ +@media screen and (max-width: 320px) { + #ourteam { + font-size: 18px; + margin-top: 180px; + margin-left: 185px; + } + + .team-description { + font-size: 14px; + margin-left: 110px; + } } #team-grid { @@ -294,7 +357,9 @@ body { } .top-contributor { display: flex; - gap: 3rem; + justify-content: center; + align-items: flex-end; + gap: 40px; } .contributor { position: relative; @@ -316,7 +381,7 @@ body { max-width: none; position: relative; left: 50px; - top: 65px; + top: 0px; height: 160px; width: 160px; transform: rotate(20deg); @@ -470,6 +535,311 @@ body { transform: scale(1.1); } +/* Responsiveness of Top 3 Contributors */ +/* Mobile-S (320px) */ +@media screen and (max-width: 320px) { + .contri { + font-size: 28px; + margin-left: 70px; + } + + .teams-container{ + margin-left: 160px; + } + + .contributor:nth-child(2) .circle { + width: 150px; + height: 150px; + } + + .contributor:nth-child(1) .circle, + .contributor:nth-child(3) .circle { + width: 100px; + height: 100px; + } + + #rank1 img{ + width: 110px; + height: 110px; + margin-right: 48px; + } + + #rank1{ + top: -65px; + } + + #rank { + position: absolute; + top: -50px; + margin-left: -8px; + } + + #rank img{ + width: 90px; + height: 90px; + transform: rotate(22deg); + } + + .rank{ + width: 30px; + height: 30px; + } + + .rank h1{ + font-size: 22px; + } + + + #name2, #name3 { + font-size: 16px; + } + + #name1 { + font-size: 20px; + } + + #co1{ + font-size: 18px; + } + + #co2, #co3 { + font-size: 15px; + } + + #team-grid1{ + margin-left: 50px; + } + +} + +/* Mobile-M (375px) */ +@media screen and (min-width: 321px) and (max-width: 375px) { + .contri { + font-size: 32px; + margin-left: 30px; + } + + .teams-container{ + margin-left: 160px; + } + + .contributor:nth-child(2) .circle { + width: 180px; + height: 180px; + } + + .contributor:nth-child(1) .circle, + .contributor:nth-child(3) .circle { + width: 120px; + height: 120px; + } + + #rank1 img{ + width: 110px; + height: 110px; + margin-right: 48px; + } + + #rank1{ + top: -65px; + } + + #rank { + position: absolute; + top: -50px; + margin-left: -8px; + } + + #rank img{ + width: 90px; + height: 90px; + } + + .rank{ + width: 30px; + height: 30px; + } + + .rank h1{ + font-size: 22px; + } + + + #name2, #name3 { + font-size: 16px; + } + + #name1 { + font-size: 20px; + } + + #co1{ + font-size: 18px; + } + + #co2, #co3 { + font-size: 15px; + } + + #team-grid1{ + margin-left: 70px; + } +} + +/* Mobile-L (425px) */ +@media screen and (min-width: 376px) and (max-width: 425px) { + .contri { + font-size: 34px; + margin-left: 10px; + } + + .teams-container{ + margin-left: 100px; + } + + .contributor:nth-child(2) .circle { + width: 190px; + height: 190px; + } + + .contributor:nth-child(1) .circle, + .contributor:nth-child(3) .circle { + width: 130px; + height: 130px; + } + + #rank1 img{ + width: 110px; + height: 110px; + margin-right: 48px; + transform: rotate(25deg) scale(1.5); + } + + #rank1{ + top: -62px; + } + + #rank { + position: absolute; + top: -50px; + margin-left: -10px; + } + + #rank img{ + width: 90px; + height: 90px; + transform: rotate(22deg); + } + + .rank{ + width: 30px; + height: 30px; + margin-right: 5px; + } + + .rank h1{ + font-size: 22px; + } + + + #name2, #name3 { + font-size: 16px; + } + + #name1 { + font-size: 20px; + } + + #co1{ + font-size: 18px; + } + + #co2, #co3 { + font-size: 15px; + } + + #team-grid1{ + margin-left: 70px; + } +} + +/* Tablet (768px) */ +@media screen and (min-width: 426px) and (max-width: 768px) { + .contri { + font-size: 38px; + margin-left: 0; + text-align: center; + } + + .teams-container { + margin-left: 15px; + } + + .contributor:nth-child(2) .circle { + width: 220px; + height: 220px; + } + + .contributor:nth-child(1) .circle, + .contributor:nth-child(3) .circle { + width: 160px; + height: 160px; + } + + #rank1 img { + width: 130px; + height: 130px; + margin-right: 55px; + transform: rotate(25deg) scale(1.5); + } + + #rank1 { + top: -82px; + } + + #rank { + position: absolute; + top: -70px; + margin-left: -12px; + } + + #rank img { + width: 110px; + height: 110px; + transform: rotate(22deg); + } + + .rank { + width: 40px; + height: 40px; + margin-right: 10px; + } + + .rank h1 { + font-size: 30px; + } + + #name2, #name3 { + font-size: 18px; + } + + #name1 { + font-size: 24px; + } + + #co1 { + font-size: 22px; + } + + #co2, #co3 { + font-size: 16px; + } + + #team-grid1 { + margin-left: 60px; + } +} + /* Card Skeleton */ #skeleton-wrapper { @@ -827,3 +1197,113 @@ body { height: 66px; position: relative; } + +/* Responsiveness of lower section */ +/* Mobile-S (325px) */ +@media screen and (max-width: 320px){ + + .trophy-card { + width: 300px; + height: 290px; + padding: 15px; + } + + .join-button { + font-size: 14px; + padding: 8px 16px; + margin-top: 220px; + margin-right: 40px; + } + + .load{ + margin-left: 135px; + } +} + +/* Mobile-M (375px) */ +@media screen and (min-width: 321px) and (max-width: 375px) { + .trophy-card { + width: 300px; + height: 270px; + padding: 18px; + margin-left: 100px; + } + + .team-invite h2 { + font-size: 1.3em; + } + + .team-invite p { + font-size: 1em; + } + + .join-button { + font-size: 15px; + padding: 9px 18px; + margin-top: 190px; + margin-right: 30px; + } + + .load{ + margin-left: 120px; + } +} + +/* Mobile-L (425px) */ +@media screen and (min-width: 376px) and (max-width: 425px) { + + .trophy-card { + margin-left: 100px; + width: 300px; + height: 260px; + padding: 20px; + } + + .team-invite h2 { + font-size: 1.15em; + } + + .team-invite p { + font-size: 0.9em; + } + + .join-button { + font-size: 16px; + padding: 10px 20px; + margin-top: 180px; + margin-right: 25px; + } + + .load{ + margin-left: 70px; + } +} + +/* Tablet (768px) */ +@media screen and (min-width: 426px) and (max-width: 768px) { + .trophy-card { + margin-left: 90px; + width: 80%; + height: 210px; + padding: 22px; + } + + .team-invite h2 { + font-size: 1.15em; + } + + .team-invite p { + font-size: 0.9em; + } + + .join-button { + font-size: 16px; + padding: 10px 20px; + margin-top: 130px; + margin-right: 0px; + } + + .load{ + margin-left: 70px; + } +} \ No newline at end of file