Skip to content

Commit b2642b6

Browse files
5thAttemptCodeGreen-Ranger11
5thAttemptCode
and
Green-Ranger11
authored
Redesigned UI refactor (#117)
* github icon in nav bar was not centered when hovered * image slider for Contributors on mobile * adjusted image slider for mobile * made requested changes for pr * made requested changes for pr * new contributing member * please swipe-text only visible on mobile * WIP: UI redesign and refactor * refactor: recovered new code * test: update e2e tests to match new headings and contributors route * test: fix Hero heading text to match current UI * chore: remove accidentally committed less help page dump * fix: restore tailwind config as .js and replace broken skeleton variant classes Rename tailwind.config.cjs back to .js since it uses ESM syntax. Replace variant-filled-success/error/surface with Tailwind equivalents since the skeleton tw-plugin breaks the build. --------- Co-authored-by: Alesana Eteuati Jr <junior.eteuati@gmail.com>
1 parent 85988fe commit b2642b6

37 files changed

Lines changed: 1272 additions & 991 deletions

‎.github/workflows/tests.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,4 @@ jobs:
3636
with:
3737
name: playwright-report
3838
path: playwright-report/
39-
retention-days: 30
39+
retention-days: 30

‎package-lock.json‎

Lines changed: 5 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta name="viewport" content="width=device-width" />
77
%sveltekit.head%
88
</head>
9-
<body data-sveltekit-preload-data="hover" data-theme="sso-custom-theme">
10-
<div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
9+
<body data-sveltekit-preload-data="hover">
10+
<main style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</main>
1111
</body>
1212
</html>

‎src/app.postcss‎

Lines changed: 116 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,122 @@
33
@tailwind utilities;
44
@tailwind variants;
55

6+
:root {
7+
--background-color-100: #ffffffbf;
8+
--background-color-200: #ffffff;
9+
--font-color-100: #0f0f0f;
10+
--font-color-200: #2b2b2b;
11+
--font-color-300: #2c2c2c;
12+
--font-color-400: #4d4d4d;
13+
--accent-color-100: #def71cff;
14+
--border-color-100: #0000001a;
15+
--border-color-200: #00000080;
16+
--grey-100: #f1f0f280;
17+
--grey-200: #f5f5f5;
18+
--grey-300: #dcdcdc;
19+
20+
--border-radius-100: 5px;
21+
--navbar-height: 6rem;
22+
}
23+
24+
* {
25+
font-family: 'Inter', sans-serif;
26+
margin: 0;
27+
padding: 0;
28+
box-sizing: border-box;
29+
}
30+
31+
a {
32+
text-decoration: none;
33+
}
34+
35+
::placeholder {
36+
font-size: 14px;
37+
color: rgba(0, 0, 0, 0.65);
38+
}
39+
40+
::selection {
41+
background: #141414;
42+
color: #ffffffbf;
43+
}
44+
45+
main {
46+
margin-inline: auto;
47+
max-width: 1024px;
48+
width: 100%;
49+
}
50+
51+
@media (max-width: 1024px) {
52+
main {
53+
padding-inline: 1rem;
54+
}
55+
}
56+
657
html,
758
body {
8-
@apply h-full overflow-hidden;
59+
background-color: var(--background-color-100);
60+
color: var(--font-color-100);
61+
62+
section {
63+
width: 100%;
64+
}
65+
66+
a {
67+
color: var(--font-color-100);
68+
}
69+
70+
abbr {
71+
text-decoration: none;
72+
}
73+
74+
abbr::after {
75+
content: none;
76+
}
77+
78+
h2 {
79+
color: var(--font-color-200);
80+
font-size: 2.5rem;
81+
font-weight: 500;
82+
margin-block-end: 2rem;
83+
}
84+
85+
h3 {
86+
color: var(--font-color-300);
87+
font-size: 1.5rem;
88+
font-weight: 500;
89+
}
90+
91+
h4 {
92+
color: var(--font-color-400);
93+
font-weight: 500;
94+
font-size: 1.125rem;
95+
letter-spacing: -0.005em;
96+
line-height: 1.5;
97+
}
98+
99+
.link {
100+
border-radius: var(--border-radius-100);
101+
display: inline-flex;
102+
justify-content: center;
103+
align-items: center;
104+
gap: 0.3rem;
105+
font-weight: 500;
106+
padding: 0.5rem 2rem;
107+
}
108+
109+
.link-color {
110+
background-color: var(--accent-color-100);
111+
112+
&:hover {
113+
background: rgba(222, 247, 28, 0.52);
114+
}
115+
}
116+
117+
.link-plain {
118+
background-color: var(--grey-200);
119+
120+
&:hover {
121+
background: rgba(235, 234, 234, 1);
122+
}
123+
}
9124
}

‎src/lib/assets/images/alesana-profile.jpeg‎

-9.73 KB
Binary file not shown.

‎src/lib/assets/images/alesana-profile.png‎

230 KB
Loading

‎src/lib/assets/projects-images/project-sso-sitadb.png‎

-496 KB
Loading

‎src/lib/assets/projects-images/project-sso-website.png‎

306 KB
Loading

‎src/lib/components/About.svelte‎

Lines changed: 41 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,47 @@
11
<script>
22
import { Section } from '$lib/utils';
3-
import {
4-
Timeline,
5-
TimelineItem,
6-
TimelineSeparator,
7-
TimelineDot,
8-
TimelineConnector,
9-
TimelineContent,
10-
TimelineOppositeContent
11-
} from 'svelte-vertical-timeline';
12-
const options = [
13-
{
14-
title: 'Launched SCH Facebook Group',
15-
time: 'August 2021',
16-
description:
17-
'Created SCH Facebook group as a central hub for information sharing within our community.',
18-
url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
19-
},
20-
{
21-
title: 'Created SCH Discord Channel',
22-
time: 'September 2021',
23-
description:
24-
'Started a Discord Channel facilitating streamlined communication and collaboration for SCH members.',
25-
url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
26-
},
27-
{
28-
title: 'Completed SITA Membership Database Project',
29-
time: 'August 2023',
30-
description: 'Successfully wrapped up the SITA membership database project.',
31-
url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
32-
},
33-
{
34-
title: 'Launched SCH Website',
35-
time: 'May 2024',
36-
description:
37-
'Unveiled the official SCH Website, streamlining user access and enhancing information sharing within.',
38-
url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
39-
}
40-
];
41-
</script>
3+
import { Contributors } from '$lib/utils/contributors';
4+
import { IconUsers } from '@tabler/icons-svelte';
425
43-
<div id={Section.About} class="container w-full py-12 mx-auto bg-transparent">
44-
<h1 class="text-4xl font-bold text-center">Samoa Code Hub - Our Journey in Code</h1>
45-
<Timeline
46-
position="alternate"
47-
style={'padding: 50px 0; max-width: 1024px; width: 100%; margin: 0 auto'}
48-
>
49-
{#each options as option}
50-
<TimelineItem>
51-
<TimelineOppositeContent slot="opposite-content">
52-
<p>{option.time}</p>
53-
</TimelineOppositeContent>
54-
<TimelineSeparator>
55-
<TimelineDot style={'background-color: #7CD5E2;'} />
56-
<TimelineConnector />
57-
</TimelineSeparator>
58-
<TimelineContent style={'padding-bottom: 50px;'}>
59-
<h3>
60-
<a href={option.url} title="Go to Homepage" class="hover:underline">
61-
{option.title}
62-
</a>
63-
</h3>
6+
// contributors array for the images
7+
const team = Contributors.filter((c) => c.featured);
648
65-
<p class="text-[#5d5c5c] dark:text-[#cecece]">{option.description}</p>
66-
</TimelineContent>
67-
</TimelineItem>
68-
{/each}
69-
</Timeline>
70-
</div>
9+
// offsets for left calc; adjust px values to taste
10+
const offsets = ['- 80px', '', '+ 80px'];
11+
</script>
7112

72-
<style>
73-
/* .container{
74-
background: #13344C
75-
} */
76-
h3 {
77-
letter-spacing: 1.5px;
78-
margin-bottom: 8px;
79-
font-size: 18px;
80-
font-weight: 600;
81-
}
13+
<div
14+
id={Section.About}
15+
class="py-[clamp(3.125rem,8.3vw,7.5rem)] border-y-2 border-[var(--border-color-100)] w-full"
16+
>
17+
<h2>About Us</h2>
18+
<div class="flex max-[768px]:flex-col">
19+
<!-- LEFT BOX -->
20+
<div class="w-1/2 max-[768px]:w-full">
21+
<p class="about-p max-[450px]:text-justify">
22+
Samoa Code Hub started in 2022 with a simple idea — bring Samoan developers together to
23+
learn, build, and grow. We’re a community-driven space where creativity meets collaboration.
24+
From open-source projects to mentorship and local meetups, we connect developers and help to
25+
grow Samoa’s tech scene — if you’re curious who’s behind it all, meet the team making it
26+
happen.
27+
</p>
28+
<a href="/contributors" class="link link-color mt-[2.25rem]">
29+
Meet the team <IconUsers size="20" />
30+
</a>
31+
</div>
8232

83-
p {
84-
letter-spacing: 1.5px;
85-
font-size: 14px;
86-
}
87-
</style>
33+
<!-- RIGHT BOX -->
34+
<div class="w-1/2 max-[768px]:w-full relative h-[150px] max-[768px]:mt-[4.25rem]">
35+
{#each team as { avatar, name }, i}
36+
<img
37+
src={avatar}
38+
alt={name}
39+
title={name}
40+
class="absolute top-0 left-1/2 -translate-x-1/2 h-full aspect-square
41+
rounded-full object-cover border-[7px] border-[var(--background-color-200)] grayscale"
42+
style={`left: calc(50% ${offsets[i] || ''}); z-index: ${team.length - i};`}
43+
/>
44+
{/each}
45+
</div>
46+
</div>
47+
</div>

0 commit comments

Comments
 (0)