Skip to content

Commit d0d306c

Browse files
jamest0jamest0
committed
add more mobile compatibility
1 parent cb9f1b5 commit d0d306c

File tree

3 files changed

+114
-111
lines changed

3 files changed

+114
-111
lines changed

‎components/About/index.tsx‎

Lines changed: 81 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,88 @@
1-
import Image from "next/image"
1+
import Image from "next/image";
22

33
const About = () => {
4-
return (
5-
<section className="py-8 px-24">
6-
<div className="text-center my-10">
7-
<p className="text-[#3977F8] font-game text-xl">01</p>
8-
<h1 className="font-bold text-6xl">ABOUT</h1>
4+
return (
5+
<section className="py-8 xl:px-24 px-10">
6+
<div className="text-center my-10">
7+
<p className="text-[#3977F8] font-game text-xl">01</p>
8+
<h1 className="font-bold text-6xl">ABOUT</h1>
9+
</div>
10+
<div className="lg:grid grid-cols-6 flex-1">
11+
{/* LEFT SIDE */}
12+
<div className="col-span-2 xl:mx-10 md:mx-5">
13+
<div className="flex items-center justify-center">
14+
<Image src="/assets/csesoc_icon.svg" alt="CSESoc Icon" width={150} height={150} />
15+
</div>
16+
<h1 className="mt-10 text-3xl font-extrabold">CSESoc</h1>
17+
<p className="text-[#727B8C] font-medium">unsw-computer-science-soc</p>
18+
<button className="bg-[#444F6F] w-full my-5 py-2 rounded">Follow</button>
19+
<p>We are one of the biggest and most active societies at UNSW, catering to over 3500 CSE students spanning across degrees in Computer Science, Software Engineering, Bioinformatics and Computer Engineering.</p>
20+
<div className="my-4 flex gap-5">
21+
<Image src="/assets/people_icon.svg" alt="People" width={20} height={20} />
22+
<div>
23+
432 <span className="text-[#727B8C]">members</span> · 342 <span className="text-[#727B8C]">subcom</span>
924
</div>
10-
<div className="grid grid-cols-6 flex-1">
11-
{/* LEFT SIDE */}
12-
<div className="col-span-2 xl:mx-16">
13-
<div className="flex items-center justify-center"><Image src="/assets/csesoc_icon.svg" alt="CSESoc Icon" width={150} height={150} /></div>
14-
<h1 className="mt-10 text-3xl font-extrabold">CSESoc</h1>
15-
<p className="text-[#727B8C] font-medium">unsw-computer-science-soc</p>
16-
<button className="bg-[#444F6F] w-full my-5 py-2 rounded">Follow</button>
17-
<p>
18-
We are one of the biggest and most active societies at UNSW, catering to over 3500 CSE students spanning across degrees
19-
in Computer Science, Software Engineering, Bioinformatics and Computer Engineering.
20-
</p>
21-
<div className="my-4 flex gap-5">
22-
<Image src="/assets/people_icon.svg" alt="People" width={20} height={20} />
23-
<div>
24-
432 <span className="text-[#727B8C]">members</span> · 342 <span className="text-[#727B8C]">subcom</span>
25-
</div>
26-
</div>
27-
<div className="my-4 flex gap-5">
28-
<Image src="/assets/location_icon.svg" alt="Location" width={20} height={20} />
29-
Sydney, Australia
30-
</div>
31-
<div className="flex gap-5">
32-
<Image src="/assets/mail_icon.svg" alt="Mail" width={20} height={20} />
33-
[email protected]
34-
</div>
25+
</div>
26+
<div className="my-4 flex gap-5">
27+
<Image src="/assets/location_icon.svg" alt="Location" width={20} height={20} />
28+
Sydney, Australia
29+
</div>
30+
<div className="flex gap-5">
31+
<Image src="/assets/mail_icon.svg" alt="Mail" width={20} height={20} />
32+
[email protected]
33+
</div>
34+
</div>
35+
{/* RIGHT SIDE */}
36+
<div className="col-span-4 lg:mt-0 mt-10">
37+
<div className="rounded border border-[#595F6D] p-5 2xl:h-80 xl:h-64 lg:h-48 sm:h-36 h-32 h-full">
38+
<p className="text-xs">
39+
csesoc/README<span className="text-[#7A8192]">.md</span>
40+
</p>
41+
<p className="mt-5">Lorem Ipsum</p>
42+
</div>
43+
<div className="mt-10">
44+
Pinned
45+
<div className="sm:flex my-5">
46+
<div className="p-5 border border-[#595F6D] flex-1 rounded-lg mr-5 w-full sm:mb-0 mb-5">
47+
<div className="flex text-[#3A76F8]">
48+
<Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} />
49+
csesoc.unsw.edu.au/<span className="font-semibold">events</span>
3550
</div>
36-
{/* RIGHT SIDE */}
37-
<div className="col-span-4">
38-
<div className="rounded border border-[#595F6D] p-5 h-92 h-full">
39-
<p className="text-xs">csesoc/README<span className="text-[#7A8192]">.md</span></p>
40-
<p className="mt-5">Lorem Ipsum</p>
41-
</div>
42-
<div className="mt-10">
43-
Pinned
44-
<div className="flex my-5">
45-
<div className="p-5 border border-[#595F6D] flex-1 rounded-lg mr-5">
46-
<div className="flex text-[#3A76F8]">
47-
<Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} />
48-
csesoc.unsw.edu.au/<span className="font-semibold">events</span>
49-
</div>
50-
<div className="my-5">CSESoc's recent events</div>
51-
<div className="rounded-full bg-[#CC5421] w-3 h-3" />
52-
</div>
53-
<div className="p-5 border border-[#595F6D] flex-1 rounded-lg">
54-
<div className="flex text-[#3A76F8]">
55-
<Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} />
56-
csesoc.unsw.edu.au/<span className="font-semibold">socials</span>
57-
</div>
58-
<div className="my-5">Follow us on all socials</div>
59-
<div className="rounded-full bg-[#566ACE] w-3 h-3" />
60-
</div>
61-
</div>
62-
<div className="flex">
63-
<div className="p-5 border border-[#595F6D] flex-1 rounded-lg mr-5">
64-
<div className="flex text-[#3A76F8]">
65-
<Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} />
66-
csesoc.unsw.edu.au/<span className="font-semibold">join-us</span>
67-
</div>
68-
<div className="my-5">Get involved!</div>
69-
<div className="rounded-full bg-[#E7E923] w-3 h-3" />
70-
</div>
71-
<div className="p-5 border border-[#595F6D] flex-1 rounded-lg">
72-
<div className="flex text-[#3A76F8]">
73-
<Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} />
74-
csesoc.unsw.edu.au/<span className="font-semibold">contact</span>
75-
</div>
76-
<div className="my-5">Contact us via email</div>
77-
<div className="rounded-full bg-[#CC5421] w-3 h-3" />
78-
</div>
79-
</div>
80-
</div>
51+
<div className="my-5">CSESoc's recent events</div>
52+
<div className="rounded-full bg-[#CC5421] w-3 h-3" />
53+
</div>
54+
<div className="p-5 border border-[#595F6D] flex-1 rounded-lg w-full">
55+
<div className="flex text-[#3A76F8]">
56+
<Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} />
57+
csesoc.unsw.edu.au/<span className="font-semibold">socials</span>
8158
</div>
59+
<div className="my-5">Follow us on all socials</div>
60+
<div className="rounded-full bg-[#566ACE] w-3 h-3" />
61+
</div>
8262
</div>
83-
</section>
84-
)
85-
}
63+
<div className="sm:flex">
64+
<div className="p-5 border border-[#595F6D] flex-1 rounded-lg mr-5 w-full sm:mb-0 mb-5">
65+
<div className="flex text-[#3A76F8]">
66+
<Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} />
67+
csesoc.unsw.edu.au/<span className="font-semibold">join-us</span>
68+
</div>
69+
<div className="my-5">Get involved!</div>
70+
<div className="rounded-full bg-[#E7E923] w-3 h-3" />
71+
</div>
72+
<div className="p-5 border border-[#595F6D] flex-1 rounded-lg w-full">
73+
<div className="flex text-[#3A76F8]">
74+
<Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} />
75+
csesoc.unsw.edu.au/<span className="font-semibold">contact</span>
76+
</div>
77+
<div className="my-5">Contact us via email</div>
78+
<div className="rounded-full bg-[#CC5421] w-3 h-3" />
79+
</div>
80+
</div>
81+
</div>
82+
</div>
83+
</div>
84+
</section>
85+
);
86+
};
8687

87-
export default About
88+
export default About;

‎components/Landing/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Navbar from "../Navbar";
22

33
const Landing = () => {
44
return (
5-
<section className="flex flex-col min-h-screen justify-between py-8 px-24">
5+
<section className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5">
66
<Navbar />
77
<div className="flex justify-between items-end">
88
<div>
@@ -19,7 +19,7 @@ const Landing = () => {
1919
<p>{"</h2>"}</p>
2020
</div>
2121
</div>
22-
<div className="w-72 font-semibold text-xl">
22+
<div className="w-72 font-semibold text-xl lg:block hidden">
2323
<p className="font-bold bg-[#3977F8] inline px-3 py-1">STATS</p>
2424
<hr className="mb-3 mt-5" />
2525
<div className="flex justify-between">

‎components/Navbar.tsx‎

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,34 @@
1-
import Image from "next/image"
1+
import Image from "next/image";
22

33
const Navbar = () => {
4-
return (
5-
<nav className="flex justify-between items-center">
6-
<div>
7-
<Image src="/assets/csesoc_logo.svg" alt="CSESoc Logo" width={200} height={200} draggable={false} />
8-
<p className="mt-3 text-xs">C:\INTERNAL STRUCTURE\HOME</p>
9-
</div>
10-
<div className="flex gap-36 text-right font-bold">
11-
<div>
12-
<p className="text-[0.6rem] text-[#C4C5C8]">01</p>
13-
<div>{'//'} about us</div>
14-
</div>
15-
<div>
16-
<p className="text-[0.6rem] text-[#C4C5C8]">02</p>
17-
<div>{'//'} events</div>
18-
</div>
19-
<div>
20-
<p className="text-[0.6rem] text-[#C4C5C8]">03</p>
21-
<div>{'//'} resources</div>
22-
</div>
23-
<div>
24-
<p className="text-[0.6rem] text-[#C4C5C8]">04</p>
25-
<div>{'//'} sponsors</div>
26-
</div>
27-
</div>
28-
</nav>
29-
)
30-
}
4+
return (
5+
<nav className="flex justify-between items-center">
6+
<div>
7+
<Image src="/assets/csesoc_logo.svg" alt="CSESoc Logo" width={200} height={200} draggable={false} />
8+
<p className="mt-3 text-xs">C:\INTERNAL STRUCTURE\HOME</p>
9+
</div>
10+
<div>
11+
<div className="md:flex xl:gap-36 lg:gap-20 md:gap-10 text-right font-bold hidden">
12+
<div>
13+
<p className="text-[0.6rem] text-[#C4C5C8]">01</p>
14+
<div>{"//"} about us</div>
15+
</div>
16+
<div>
17+
<p className="text-[0.6rem] text-[#C4C5C8]">02</p>
18+
<div>{"//"} events</div>
19+
</div>
20+
<div>
21+
<p className="text-[0.6rem] text-[#C4C5C8]">03</p>
22+
<div>{"//"} resources</div>
23+
</div>
24+
<div>
25+
<p className="text-[0.6rem] text-[#C4C5C8]">04</p>
26+
<div>{"//"} sponsors</div>
27+
</div>
28+
</div>
29+
</div>
30+
</nav>
31+
);
32+
};
3133

32-
export default Navbar
34+
export default Navbar;

0 commit comments

Comments
 (0)