Skip to content

Commit

Permalink
fix: Improve styling for pages (#62)
Browse files Browse the repository at this point in the history 
* fix: Improve styling for pages

* fix: remove redundant `={true}`
  • Loading branch information
@rayokamoto
rayokamoto authored Feb 18, 2024
1 parent 61fbea0 commit 43a0b50
Show file tree
Hide file tree
Showing 7 changed files with 35 additions and 26 deletions.
26 changes: 14 additions & 12 deletions src/app/(home)/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,9 @@ export default function HomePage() {
<h1 className="text-5xl md:text-8xl">SOCIALISE,</h1>
<div className="h-2"></div>

<Title colour="yellow">CODE.</Title>
<Title colour="yellow" font="font-black">
CODE.
</Title>
<div className="h-4 md:h-8"></div>
<FancyRectangle colour="orange" offset="8" filled={false}>
<div className="w-fit bg-orange px-2 py-2">
Expand All @@ -41,7 +43,7 @@ export default function HomePage() {
</div>

{/* Right side */}
<div className="mt-12 w-full transition-all duration-500 md:w-auto lg:ml-20 lg:mt-0">
<div className="mt-12 w-full transition-all duration-500 md:w-auto lg:ml-10 lg:mt-0">
<div className="relative z-10 mr-2">
<FancyRectangle colour="purple" offset="8" filled={true}>
<div className="relative h-full w-full bg-white">
Expand Down Expand Up @@ -105,13 +107,13 @@ export default function HomePage() {
className="absolute -z-10 mt-12 w-0 max-w-[800px] lg:ml-36 lg:w-[50vw]"
/>

<div className="mr-2 grid grid-cols-1 gap-8 text-xl lg:grid-cols-3">
<FancyRectangle colour="white" offset="8" filled={true}>
<div className="flex flex-col">
<div className="mr-2 grid auto-rows-fr grid-cols-1 gap-8 text-xl lg:grid-cols-3">
<FancyRectangle colour="white" offset="8" filled fullWidth fullHeight>
<div className="flex h-full flex-col">
<div className="w-full border-4 border-black bg-purple px-4 py-4 md:px-6 md:py-6">
<h3 className="text-2xl font-black text-grey lg:text-3xl">Learn</h3>
</div>
<div className="-mt-2 w-fit border-4 border-black bg-white px-4 py-4 md:px-6 md:py-6">
<div className="-mt-2 h-full w-fit border-4 border-black bg-white px-4 py-4 md:px-6 md:py-6">
<div className="relative text-lg text-black md:text-xl">
<p>
The club has a major focus on{' '}
Expand All @@ -127,14 +129,14 @@ export default function HomePage() {
</div>
</div>
</FancyRectangle>
<FancyRectangle colour="white" offset="8" filled={true}>
<div className="flex flex-col">
<FancyRectangle colour="white" offset="8" filled fullWidth fullHeight>
<div className="flex h-full flex-col">
<div className="w-full border-4 border-black bg-yellow px-4 py-4 md:px-6 md:py-6">
<h3 className="text-2xl font-black text-grey lg:text-3xl">
Socialise
</h3>
</div>
<div className="-mt-2 w-fit border-4 border-black bg-white px-4 py-4 md:px-6 md:py-6">
<div className="-mt-2 h-full w-fit border-4 border-black bg-white px-4 py-4 md:px-6 md:py-6">
<div className="relative text-lg text-black md:text-xl">
<p>
We are primarily a{' '}
Expand All @@ -150,12 +152,12 @@ export default function HomePage() {
</div>
</div>
</FancyRectangle>
<FancyRectangle colour="white" offset="8" filled={true}>
<div className="flex flex-col">
<FancyRectangle colour="white" offset="8" filled fullWidth fullHeight>
<div className="flex h-full flex-col">
<div className="w-full border-4 border-black bg-orange px-4 py-4 md:px-6 md:py-6">
<h3 className="text-2xl font-black text-grey lg:text-3xl">Code</h3>
</div>
<div className="-mt-2 w-fit border-4 border-black bg-white px-4 py-4 md:px-6 md:py-6">
<div className="-mt-2 h-full w-fit border-4 border-black bg-white px-4 py-4 md:px-6 md:py-6">
<div className="relative text-lg text-black md:text-xl">
<p>
<span className="relative inline-block">
Expand Down
6 changes: 3 additions & 3 deletions src/app/about/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function AboutUs() {
<main className="relative">
<div className="h-full">
<div className="mb-8 flex justify-center">
<Title colour="orange">About</Title>
<Title colour="orange">About Us</Title>
</div>
{/* Basic Description */}
<section className="flex flex-col gap-10 md:flex-row">
Expand Down Expand Up @@ -60,7 +60,7 @@ export default function AboutUs() {
width={30}
height={30}
/>
<p className="my-4 text-lg">
<p className="my-4 text-lg md:text-xl">
The University of Adelaide Computer Science Club is a student-run
club for those with an interest in computer science or computing in
general. Although we&apos;re a university club, we welcome anyone
Expand Down Expand Up @@ -228,7 +228,7 @@ export default function AboutUs() {
<div className="flex w-fit bg-orange px-2 lg:mb-0">
<h2 className="text-5xl font-bold">Committee Members</h2>
</div>
<div className="mb-2 mr-2 mt-8 grid auto-rows-fr grid-cols-2 gap-10 lg:grid-cols-4">
<div className="mb-2 mr-2 mt-8 grid auto-rows-fr grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-4">
{COMMITTEE_MEMBERS.map((member, index) => (
<FancyRectangle
key={index}
Expand Down
4 changes: 3 additions & 1 deletion src/app/events/FridayNight.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,9 @@ export default function FridayNight({ className }: { className?: string }) {
<Info className="grow" />
<Ducks />
</div>
<Details />
<div className="mb-4 mr-4">
<Details />
</div>
</section>
);
}
12 changes: 7 additions & 5 deletions src/app/events/Info.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,13 @@ export default function Info({ className }: { className?: string }) {
</p>
<p>For further information, take a look at some of the events below!</p>
</div>
<FancyRectangle colour="white" offset="16" filled={true} rounded>
<div className="relative h-full w-full rounded bg-white p-1">
<ImageCarousel images={CAROUSEL_IMAGES} width={400} height={300} />
</div>
</FancyRectangle>
<div className="mb-4 mr-4">
<FancyRectangle colour="white" offset="16" filled={true} rounded>
<div className="relative h-full w-full rounded bg-white p-1">
<ImageCarousel images={CAROUSEL_IMAGES} width={400} height={300} />
</div>
</FancyRectangle>
</div>
</section>
);
}
2 changes: 1 addition & 1 deletion src/app/events/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export default function EventsPage() {
alt="Rectangle Grid"
width={750}
height={750}
className="ml-40 max-w-full md:w-[50vw]"
className="ml-40 max-w-full opacity-40 md:w-[50vw]"
/>
<Image
src="/images/rectangle-grid.svg"
Expand Down
9 changes: 6 additions & 3 deletions src/components/Title.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,16 @@ import { BG_COLOURS, type Colour } from '@/constants/colours';
interface TitleProps {
children: string;
colour: Colour;
font?: string;
}

export default function Title({ children, colour }: TitleProps) {
export default function Title({ children, colour, font }: TitleProps) {
return (
<FancyRectangle colour={colour} offset="8">
<div className={`w-fit p-2 ${BG_COLOURS[colour]}`}>
<h1 className="text-center text-5xl font-bold text-grey md:text-8xl">{children}</h1>
<div className={`w-fit p-3 ${BG_COLOURS[colour]}`}>
<h1 className={`text-center text-5xl text-grey md:text-8xl ${font ?? 'font-bold'}`}>
{children}
</h1>
</div>
</FancyRectangle>
);
Expand Down
2 changes: 1 addition & 1 deletion tailwind.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const config: Config = {
theme: {
extend: {
width: {
responsive: 'min(85vw, 90rem)',
responsive: 'min(75vw, 90rem)',
},
boxShadow: {
card: '10px 10px 0px 0px #7E7FE7',
Expand Down

0 comments on commit 43a0b50

Please sign in to comment.