Skip to content

Commit 35e2aca

Browse files
taronaeotaronaeo
committed
refactor(portal): refine padding for mobile to desktop viewports
1 parent 017179c commit 35e2aca

File tree

4 files changed

+130
-136
lines changed

4 files changed

+130
-136
lines changed

‎portal/src/lib/components/footer/footer.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
<footer class="border-t">
44
<nav
5-
class="w-full p-8
5+
class="w-full p-6 sm:p-8
66
grid gap-8
77
grid-cols-1 sm:grid-cols-2 md:grid-cols-4">
88
<div

‎portal/src/lib/components/navbar/navbar.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818

1919
<header
2020
class="z-50 top-0 sticky
21-
px-4 md:px-6
21+
px-6 sm:px-8
2222
h-16 border-b
2323
bg-opacity-10 backdrop-filter backdrop-blur-lg
2424
flex flex-row items-center gap-4">

‎portal/src/routes/(app)/overview/+page.svelte

+64-72
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,17 @@
66
import EventCard from './(components)/event-card.svelte';
77
import ProfileCard from './(components)/profile-card.svelte';
88
9-
$: year = new Date().getFullYear();
9+
const year = new Date().getFullYear();
1010
</script>
1111

1212
<svelte:head>
1313
<title>Overview - RIVAlumni Portal</title>
1414
</svelte:head>
1515

1616
<div
17-
class="p-4 sm:p-6
17+
class="p-6 sm:p-8
1818
flex flex-col
19-
gap-4 md:gap-6">
19+
gap-8 md:gap-10">
2020
<nav>
2121
<Breadcrumb.Root class="flex flex-row">
2222
<Breadcrumb.List>
@@ -39,87 +39,79 @@
3939
</Breadcrumb.Root>
4040
</nav>
4141

42-
<!-- 3-column grid layout -->
4342
<div
44-
class="grid auto-rows-max
45-
items-start gap-8 lg:col-span-2">
46-
<!-- Content -->
47-
<div
48-
class="grid gap-4
49-
grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
50-
<ProfileCard />
43+
class="grid gap-4
44+
grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
45+
<ProfileCard />
5146

52-
<Card.Root>
53-
<Card.Header class="pb-4">
54-
<Card.Description>Upcoming events</Card.Description>
55-
<Card.Title class="text-4xl">4</Card.Title>
56-
</Card.Header>
57-
<Card.Content>
58-
<p class="text-xs text-muted-foreground">
59-
for the year of {year}
60-
</p>
61-
</Card.Content>
62-
</Card.Root>
63-
64-
<Card.Root>
65-
<Card.Header class="pb-4">
66-
<Card.Description>Upcoming volunteer hours</Card.Description>
67-
<Card.Title class="text-4xl">1,593</Card.Title>
68-
</Card.Header>
69-
<Card.Content>
70-
<p class="text-xs text-muted-foreground">
71-
to be claimed for the year of {year}
72-
</p>
73-
</Card.Content>
74-
</Card.Root>
75-
</div>
47+
<Card.Root>
48+
<Card.Header class="pb-4">
49+
<Card.Description>Upcoming events</Card.Description>
50+
<Card.Title class="text-4xl">4</Card.Title>
51+
</Card.Header>
52+
<Card.Content>
53+
<p class="text-xs text-muted-foreground">
54+
for the year of {year}
55+
</p>
56+
</Card.Content>
57+
</Card.Root>
7658

77-
<div class="flex flex-col">
78-
<div class="space-y-1">
79-
<h2 class="text-2xl font-semibold tracking-tight">Upcoming Events</h2>
80-
<p class="text-sm text-muted-foreground">
81-
Next few events that are happening for the year
59+
<Card.Root>
60+
<Card.Header class="pb-4">
61+
<Card.Description>Upcoming volunteer hours</Card.Description>
62+
<Card.Title class="text-4xl">1,593</Card.Title>
63+
</Card.Header>
64+
<Card.Content>
65+
<p class="text-xs text-muted-foreground">
66+
to be claimed for the year of {year}
8267
</p>
83-
</div>
68+
</Card.Content>
69+
</Card.Root>
70+
</div>
8471

85-
<Separator class="my-4" />
72+
<div class="flex flex-col">
73+
<div class="space-y-1">
74+
<h2 class="text-2xl font-semibold tracking-tight">Upcoming Events</h2>
75+
<p class="text-sm text-muted-foreground">
76+
Next few events that are happening for the year
77+
</p>
78+
</div>
8679

87-
<div
88-
class="grid gap-8 sm:gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
89-
<EventCard
90-
eventName="RIVA Homecoming 2024"
91-
eventLocation="Rivervale Primary School"
92-
backgroundImage="/homecoming.webp" />
80+
<Separator class="my-4" />
9381

94-
<EventCard
95-
eventName="Teachers' Day 2024"
96-
eventLocation="Rivervale Primary School"
97-
backgroundImage="/teachers-day.webp" />
98-
</div>
82+
<div class="grid gap-6 sm:gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
83+
<EventCard
84+
eventName="RIVA Homecoming 2024"
85+
eventLocation="Rivervale Primary School"
86+
backgroundImage="/homecoming.webp" />
87+
88+
<EventCard
89+
eventName="Teachers' Day 2024"
90+
eventLocation="Rivervale Primary School"
91+
backgroundImage="/teachers-day.webp" />
9992
</div>
93+
</div>
10094

101-
<div class="flex flex-col">
102-
<div class="space-y-1">
103-
<h2 class="text-2xl font-semibold tracking-tight">Past Events</h2>
104-
<p class="text-sm text-muted-foreground">
105-
Past few events that have already happened
106-
</p>
107-
</div>
95+
<div class="flex flex-col">
96+
<div class="space-y-1">
97+
<h2 class="text-2xl font-semibold tracking-tight">Past Events</h2>
98+
<p class="text-sm text-muted-foreground">
99+
Past few events that have already happened
100+
</p>
101+
</div>
108102

109-
<Separator class="my-4" />
103+
<Separator class="my-4" />
110104

111-
<div
112-
class="grid gap-8 sm:gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
113-
<EventCard
114-
eventName="RIVA Homecoming 2024"
115-
eventLocation="Rivervale Primary School"
116-
backgroundImage="/homecoming.webp" />
105+
<div class="grid gap-6 sm:gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
106+
<EventCard
107+
eventName="RIVA Homecoming 2024"
108+
eventLocation="Rivervale Primary School"
109+
backgroundImage="/homecoming.webp" />
117110

118-
<EventCard
119-
eventName="Teachers' Day 2024"
120-
eventLocation="Rivervale Primary School"
121-
backgroundImage="/teachers-day.webp" />
122-
</div>
111+
<EventCard
112+
eventName="Teachers' Day 2024"
113+
eventLocation="Rivervale Primary School"
114+
backgroundImage="/teachers-day.webp" />
123115
</div>
124116
</div>
125117
</div>

‎portal/tailwind.config.js

+64-62
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,69 @@
11
/** @type {import('tailwindcss').Config} */
22
const config = {
3-
darkMode: ['class'],
4-
content: ['./src/**/*.{html,svelte,ts}'],
5-
safelist: ['dark'],
6-
theme: {
7-
container: {
8-
center: true,
9-
padding: '2rem',
10-
screens: {
11-
'2xl': '1400px'
12-
}
13-
},
14-
extend: {
15-
backgroundImage: {
16-
"img-signin": "linear-gradient(0deg, hsla(var(--background) / 0.8), transparent), url('/signin.webp')",
17-
"img-profile-card": "linear-gradient(90deg, hsla(var(--background) / 0.8) 40%, transparent), url(/profilecard.webp)"
18-
},
19-
colors: {
20-
border: 'hsl(var(--border) / <alpha-value>)',
21-
input: 'hsl(var(--input) / <alpha-value>)',
22-
ring: 'hsl(var(--ring) / <alpha-value>)',
23-
background: 'hsl(var(--background) / <alpha-value>)',
24-
foreground: 'hsl(var(--foreground) / <alpha-value>)',
25-
primary: {
26-
DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
27-
foreground: 'hsl(var(--primary-foreground) / <alpha-value>)'
28-
},
29-
secondary: {
30-
DEFAULT: 'hsl(var(--secondary) / <alpha-value>)',
31-
foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)'
32-
},
33-
destructive: {
34-
DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
35-
foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)'
36-
},
37-
muted: {
38-
DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
39-
foreground: 'hsl(var(--muted-foreground) / <alpha-value>)'
40-
},
41-
accent: {
42-
DEFAULT: 'hsl(var(--accent) / <alpha-value>)',
43-
foreground: 'hsl(var(--accent-foreground) / <alpha-value>)'
44-
},
45-
popover: {
46-
DEFAULT: 'hsl(var(--popover) / <alpha-value>)',
47-
foreground: 'hsl(var(--popover-foreground) / <alpha-value>)'
48-
},
49-
card: {
50-
DEFAULT: 'hsl(var(--card) / <alpha-value>)',
51-
foreground: 'hsl(var(--card-foreground) / <alpha-value>)'
52-
}
53-
},
54-
borderRadius: {
55-
lg: 'var(--radius)',
56-
md: 'calc(var(--radius) - 2px)',
57-
sm: 'calc(var(--radius) - 4px)'
58-
},
59-
fontFamily: {
60-
sans: ['Geist Sans', 'sans-serif'],
61-
mono: ['Geist Mono', 'monospace'],
62-
}
63-
}
64-
}
3+
darkMode: ['class'],
4+
content: ['./src/**/*.{html,svelte,ts}'],
5+
safelist: ['dark'],
6+
theme: {
7+
container: {
8+
center: true,
9+
padding: '2rem',
10+
screens: {
11+
'2xl': '1400px',
12+
},
13+
},
14+
extend: {
15+
backgroundImage: {
16+
'img-signin':
17+
"linear-gradient(0deg, hsla(var(--background) / 0.8), transparent), url('/signin.webp')",
18+
'img-profile-card':
19+
'linear-gradient(0deg, hsla(var(--background) / 0.8), transparent), url(/profilecard.webp)',
20+
},
21+
colors: {
22+
border: 'hsl(var(--border) / <alpha-value>)',
23+
input: 'hsl(var(--input) / <alpha-value>)',
24+
ring: 'hsl(var(--ring) / <alpha-value>)',
25+
background: 'hsl(var(--background) / <alpha-value>)',
26+
foreground: 'hsl(var(--foreground) / <alpha-value>)',
27+
primary: {
28+
DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
29+
foreground: 'hsl(var(--primary-foreground) / <alpha-value>)',
30+
},
31+
secondary: {
32+
DEFAULT: 'hsl(var(--secondary) / <alpha-value>)',
33+
foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)',
34+
},
35+
destructive: {
36+
DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
37+
foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)',
38+
},
39+
muted: {
40+
DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
41+
foreground: 'hsl(var(--muted-foreground) / <alpha-value>)',
42+
},
43+
accent: {
44+
DEFAULT: 'hsl(var(--accent) / <alpha-value>)',
45+
foreground: 'hsl(var(--accent-foreground) / <alpha-value>)',
46+
},
47+
popover: {
48+
DEFAULT: 'hsl(var(--popover) / <alpha-value>)',
49+
foreground: 'hsl(var(--popover-foreground) / <alpha-value>)',
50+
},
51+
card: {
52+
DEFAULT: 'hsl(var(--card) / <alpha-value>)',
53+
foreground: 'hsl(var(--card-foreground) / <alpha-value>)',
54+
},
55+
},
56+
borderRadius: {
57+
lg: 'var(--radius)',
58+
md: 'calc(var(--radius) - 2px)',
59+
sm: 'calc(var(--radius) - 4px)',
60+
},
61+
fontFamily: {
62+
sans: ['Geist Sans', 'sans-serif'],
63+
mono: ['Geist Mono', 'monospace'],
64+
},
65+
},
66+
},
6567
};
6668

6769
export default config;

0 commit comments

Comments
 (0)