Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit642954e

Browse files
committed
add mobile responsiveness
1 parentf17251a commit642954e

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
importImagefrom"next/image";
33

4+
constboxStyling="border border-[#595F6D] rounded-lg hover:border-[#788093] hover:bg-[#070034] hover:bg-opacity-75 transition-all duration-300";
5+
constsocialsBoxStyling="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
constResourcesAndContacts=()=>{
58
return(
69
<sectionclassName="bg-no-repeat bg-center py-8 px-15 min-h-screen flex justify-center items-center">
7-
<divclassName="2xl:w-[100rem]">
10+
<divclassName="2xl:w-[90rem] xl:w-[75rem] md:w-[40rem] sm:w-[30rem] w-[90%]">
811
<divclassName="relative">
912
<Imagesrc="assets/resources_bg.svg"alt="Background"className="-z-50 absolute"fill/>
1013

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

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

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

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

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

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

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

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

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

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

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

61-
<ahref="https://media.csesoc.org.au/cse-enrol/"target="_blank"className="blockcol-span-2p-5 border border-[#595F6D] rounded-lg hover:bg-gray-100 hover:bg-opacity-10">
64+
<ahref="https://media.csesoc.org.au/cse-enrol/"target="_blank"className={`md:col-span-2col-span-4 p-5${boxStyling}`}>
6265
<h2className="mt-1 text-3xl font-extrabold">Enrolment Guide</h2>
6366
<pclassName="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-
<divclassName="mt-10">
70-
<divclassName="grid grid-cols-3 1 gap-x-9 gap-y-5 mb-20">
71-
<ahref="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+
<divclassName="md:mt-10 mt-5">
73+
<divclassName="grid grid-cols-3 1 gap-x-9 gap-y-5 mb-10">
74+
<ahref="https://bit.ly/CSESocDiscord"target="_blank"className={socialsBoxStyling}>
7275
<Imagesrc="assets/discord_logo.svg"alt=""width={25}height={25}className="mr-1"/>
7376
<pclassName="text-xl font-bold m-2">DISCORD</p>
7477
</a>
75-
<ahref="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+
<ahref="https://www.facebook.com/csesoc/"target="_blank"className={socialsBoxStyling}>
7679
<Imagesrc="assets/fb_logo.svg"alt=""width={25}height={25}className="mr-1"/>
7780
<pclassName="text-xl font-bold m-2">FACEBOOK</p>
7881
</a>
79-
<ahref="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+
<ahref="https://www.facebook.com/groups/csesoc"target="_blank"className={socialsBoxStyling}>
8083
<Imagesrc="assets/group_icon.svg"alt=""width={25}height={25}className="mr-1"/>
8184
<pclassName="text-xl font-bold m-2">FACEBOOK GROUP</p>
8285
</a>
8386
</div>
8487

85-
<divclassName="flex 1 justify-aroundml-40 mr-40">
88+
<divclassName="flex 1 justify-aroundxl:mx-40">
8689
<ahref="https://twitter.com/csesoc?lang=en"target="_blank">
87-
<Imagesrc="assets/x_twitter_icon.svg"alt="X/Twitter"width={35}height={35}className="mr-1 fill-white"/>
90+
<Imagesrc="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
<ahref="https://www.youtube.com/@CSESocUNSW"target="_blank">
90-
<Imagesrc="assets/youtube_logo.svg"alt="Youtube"width={35}height={35}className="mr-1 fill-white"/>
93+
<Imagesrc="assets/youtube_logo.svg"alt="Youtube"width={35}height={35}className="mr-1 fill-white hover:scale-105 transition-all"/>
9194
</a>
9295
<ahref="https://www.instagram.com/csesoc_unsw/?hl=en"target="_blank">
93-
<Imagesrc="assets/instagram_logo.svg"alt="Instagram"width={35}height={35}className="mr-1 fill-white"/>
96+
<Imagesrc="assets/instagram_logo.svg"alt="Instagram"width={35}height={35}className="mr-1 fill-white hover:scale-105 transition-all"/>
9497
</a>
9598
<ahref="https://www.tiktok.com/@csesoc?lang=en"target="_blank">
96-
<Imagesrc="assets/tiktok_logo.svg"alt="TikTok"width={35}height={35}className="mr-1 fill-white"/>
99+
<Imagesrc="assets/tiktok_logo.svg"alt="TikTok"width={35}height={35}className="mr-1 fill-white hover:scale-105 transition-all"/>
97100
</a>
98101
<ahref="#"target="_blank">
99-
<Imagesrc="assets/wechat_logo.svg"alt="weChat"width={40}height={40}className="mr-1 fill-white"/>
102+
<Imagesrc="assets/wechat_logo.svg"alt="weChat"width={40}height={40}className="mr-1 fill-white hover:scale-105 transition-all"/>
100103
</a>
101104
<ahref="https://www.linkedin.com/company/csesoc?originalSubdomain=au"target="_blank">
102-
<Imagesrc="assets/linkedin_logo.svg"alt="LinkedIn"width={35}height={35}className="mr-1 fill-white"/>
105+
<Imagesrc="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)
[8]ページ先頭
©2009-2025 Movatter.jp