Skip to content

Commit 642954e

Browse files
jamest0jamest0
committed
add mobile responsiveness
1 parent f17251a commit 642954e

File tree

1 file changed

+25
-22
lines changed

1 file changed

+25
-22
lines changed

‎components/ResourcesAndContacts/index.tsx

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
// import DiscordLogo from "@/public/assets/discord_logo.svg"
22
import Image from "next/image";
33

4+
const boxStyling = "border border-[#595F6D] rounded-lg hover:border-[#788093] hover:bg-[#070034] hover:bg-opacity-75 transition-all duration-300";
5+
const socialsBoxStyling = "xl:col-span-1 col-span-3 flex justify-center pt-2 pb-2 border border-[#595F6D] hover:border-[#788093] rounded-lg hover:bg-[#070034] hover:bg-opacity-75 transition-all duration-300";
6+
47
const ResourcesAndContacts = () => {
58
return (
69
<section className="bg-no-repeat bg-center py-8 px-15 min-h-screen flex justify-center items-center">
7-
<div className="2xl:w-[100rem]">
10+
<div className="2xl:w-[90rem] xl:w-[75rem] md:w-[40rem] sm:w-[30rem] w-[90%]">
811
<div className="relative">
912
<Image src="assets/resources_bg.svg" alt="Background" className="-z-50 absolute" fill />
1013

@@ -15,91 +18,91 @@ const ResourcesAndContacts = () => {
1518

1619
<div className="py-8 bg-no-repeat bg-center">
1720
<div className="grid grid-cols-4 1 gap-x-9 gap-y-5">
18-
<a href="https://circles.csesoc.app/course-selector" target="_blank" className="col-span-4 p-5 border border-[#595F6D] rounded-lg hover:bg-gray-100 hover:bg-opacity-10">
21+
<a href="https://circles.csesoc.app/course-selector" target="_blank" className={`col-span-4 p-5 ${boxStyling}`}>
1922
<h2 className="mt-5 text-3xl font-extrabold">Circles</h2>
2023
<p className="mt-7 text-lg mb-5">A UNSW degree planner where you can explore and validate your degree structure.</p>
2124
</a>
2225

23-
<a href="https://structs.sh/" target="_blank" className="col-span-1 p-5 border border-[#595F6D] rounded-lg hover:bg-gray-100 hover:bg-opacity-10">
26+
<a href="https://structs.sh/" target="_blank" className={`xl:col-span-1 col-span-4 p-5 ${boxStyling}`}>
2427
<h2 className="mt-1 text-3xl font-extrabold">Structs.sh</h2>
2528
<p className="mt-7 text-lg mb-5">An educational data structures and algorithms platform.</p>
2629
</a>
2730

28-
<a href="https://jobsboard.csesoc.unsw.edu.au/" target="_blank" className="col-span-1 p-5 border border-[#595F6D] rounded-lg hover:bg-gray-100 hover:bg-opacity-10">
31+
<a href="https://jobsboard.csesoc.unsw.edu.au/" target="_blank" className={`xl:col-span-1 col-span-4 p-5 ${boxStyling}`}>
2932
<h2 className="mt-1 text-3xl font-extrabold">Jobs Board</h2>
3033
<p className="mt-7 text-lg mb-5">A place where CSESoc students can look for relevant job opportunities.</p>
3134
</a>
3235

33-
<a href="https://notangles.csesoc.app/" target="_blank" className="col-span-1 p-5 border border-[#595F6D] rounded-lg hover:bg-gray-100 hover:bg-opacity-10">
36+
<a href="https://notangles.csesoc.app/" target="_blank" className={`xl:col-span-1 col-span-4 p-5 ${boxStyling}`}>
3437
<h2 className="mt-1 text-3xl font-extrabold">Notangles</h2>
3538

3639
<p className="mt-7 text-lg mb-5">Trimester timetabling tool - no more timetable tangles!</p>
3740
</a>
3841

39-
<a href="https://unilectives.csesoc.app/" target="_blank" className="col-span-1 p-5 border border-[#595F6D] rounded-lg hover:bg-gray-100 hover:bg-opacity-10">
42+
<a href="https://unilectives.csesoc.app/" target="_blank" className={`xl:col-span-1 col-span-4 p-5 ${boxStyling}`}>
4043
<h2 className="mt-1 text-3xl font-extrabold">Uni-lectives</h2>
4144

4245
<p className="mt-7 text-lg mb-5">Read course electives to help you pick your electives or even write your own!</p>
4346
</a>
4447

45-
<a href="https://compclub.org/" target="_blank" className="col-span-2 p-5 border border-[#595F6D] rounded-lg hover:bg-gray-100 hover:bg-opacity-10">
48+
<a href="https://compclub.org/" target="_blank" className={`md:col-span-2 col-span-4 p-5 ${boxStyling}`}>
4649
<h2 className="mt-1 text-3xl font-extrabold">CompClub</h2>
4750

4851
<p className="mt-7 text-lg mb-5">Promoting computing to high school students</p>
4952
</a>
5053

51-
<a href="https://media.csesoc.org.au/" target="_blank" className="col-span-2 p-5 border border-[#595F6D] rounded-lg hover:bg-gray-100 hover:bg-opacity-10">
54+
<a href="https://media.csesoc.org.au/" target="_blank" className={`md:col-span-2 col-span-4 p-5 ${boxStyling}`}>
5255
<h2 className="mt-1 text-3xl font-extrabold">CSESoc Media</h2>
5356
<p className="mt-7 text-lg mb-5">All things content</p>
5457
</a>
5558

56-
<a href="https://media.csesoc.org.au/fyg-2023/" target="_blank" className="col-span-2 p-5 border border-[#595F6D] rounded-lg hover:bg-gray-100 hover:bg-opacity-10">
59+
<a href="https://media.csesoc.org.au/fyg-2023/" target="_blank" className={`md:col-span-2 col-span-4 p-5 ${boxStyling}`}>
5760
<h2 className="mt-1 text-3xl font-extrabold">First Year Guide</h2>
5861
<p className="mt-7 text-lg mb-5">The ultimate guide to conquering your first year at CSE</p>
5962
</a>
6063

61-
<a href="https://media.csesoc.org.au/cse-enrol/" target="_blank" className="block col-span-2 p-5 border border-[#595F6D] rounded-lg hover:bg-gray-100 hover:bg-opacity-10">
64+
<a href="https://media.csesoc.org.au/cse-enrol/" target="_blank" className={`md:col-span-2 col-span-4 p-5 ${boxStyling}`}>
6265
<h2 className="mt-1 text-3xl font-extrabold">Enrolment Guide</h2>
6366
<p className="mt-7 text-lg mb-5">Learn how to get a headstart on uni</p>
6467
</a>
6568
</div>
6669
</div>
6770
</div>
6871

69-
<div className="mt-10">
70-
<div className="grid grid-cols-3 1 gap-x-9 gap-y-5 mb-20">
71-
<a href="https://bit.ly/CSESocDiscord" target="_blank" className="col-span-1 flex justify-center pt-2 pb-2 border border-[#595F6D] rounded-sm hover:bg-gray-100 hover:bg-opacity-10">
72+
<div className="md:mt-10 mt-5">
73+
<div className="grid grid-cols-3 1 gap-x-9 gap-y-5 mb-10">
74+
<a href="https://bit.ly/CSESocDiscord" target="_blank" className={socialsBoxStyling}>
7275
<Image src="assets/discord_logo.svg" alt="" width={25} height={25} className="mr-1" />
7376
<p className="text-xl font-bold m-2">DISCORD</p>
7477
</a>
75-
<a href="https://www.facebook.com/csesoc/" target="_blank" className="col-span-1 flex justify-center pt-2 pb-2 border border-[#595F6D] rounded-sm hover:bg-gray-100 hover:bg-opacity-10">
78+
<a href="https://www.facebook.com/csesoc/" target="_blank" className={socialsBoxStyling}>
7679
<Image src="assets/fb_logo.svg" alt="" width={25} height={25} className="mr-1" />
7780
<p className="text-xl font-bold m-2">FACEBOOK</p>
7881
</a>
79-
<a href="https://www.facebook.com/groups/csesoc" target="_blank" className="col-span-1 flex justify-center pt-2 pb-2 border border-[#595F6D] rounded-sm hover:bg-gray-100 hover:bg-opacity-10">
82+
<a href="https://www.facebook.com/groups/csesoc" target="_blank" className={socialsBoxStyling}>
8083
<Image src="assets/group_icon.svg" alt="" width={25} height={25} className="mr-1" />
8184
<p className="text-xl font-bold m-2">FACEBOOK GROUP</p>
8285
</a>
8386
</div>
8487

85-
<div className="flex 1 justify-around ml-40 mr-40">
88+
<div className="flex 1 justify-around xl:mx-40">
8689
<a href="https://twitter.com/csesoc?lang=en" target="_blank">
87-
<Image src="assets/x_twitter_icon.svg" alt="X/Twitter" width={35} height={35} className="mr-1 fill-white" />
90+
<Image src="assets/x_twitter_icon.svg" alt="X/Twitter" width={35} height={35} className="mr-1 fill-white hover:scale-105 transition-all" />
8891
</a>
8992
<a href="https://www.youtube.com/@CSESocUNSW" target="_blank">
90-
<Image src="assets/youtube_logo.svg" alt="Youtube" width={35} height={35} className="mr-1 fill-white" />
93+
<Image src="assets/youtube_logo.svg" alt="Youtube" width={35} height={35} className="mr-1 fill-white hover:scale-105 transition-all" />
9194
</a>
9295
<a href="https://www.instagram.com/csesoc_unsw/?hl=en" target="_blank">
93-
<Image src="assets/instagram_logo.svg" alt="Instagram" width={35} height={35} className="mr-1 fill-white" />
96+
<Image src="assets/instagram_logo.svg" alt="Instagram" width={35} height={35} className="mr-1 fill-white hover:scale-105 transition-all" />
9497
</a>
9598
<a href="https://www.tiktok.com/@csesoc?lang=en" target="_blank">
96-
<Image src="assets/tiktok_logo.svg" alt="TikTok" width={35} height={35} className="mr-1 fill-white" />
99+
<Image src="assets/tiktok_logo.svg" alt="TikTok" width={35} height={35} className="mr-1 fill-white hover:scale-105 transition-all" />
97100
</a>
98101
<a href="#" target="_blank">
99-
<Image src="assets/wechat_logo.svg" alt="weChat" width={40} height={40} className="mr-1 fill-white" />
102+
<Image src="assets/wechat_logo.svg" alt="weChat" width={40} height={40} className="mr-1 fill-white hover:scale-105 transition-all" />
100103
</a>
101104
<a href="https://www.linkedin.com/company/csesoc?originalSubdomain=au" target="_blank">
102-
<Image src="assets/linkedin_logo.svg" alt="LinkedIn" width={35} height={35} className="mr-1 fill-white" />
105+
<Image src="assets/linkedin_logo.svg" alt="LinkedIn" width={35} height={35} className="mr-1 fill-white hover:scale-105 transition-all" />
103106
</a>
104107
</div>
105108
</div>

0 commit comments

Comments
 (0)